aiot-app/pages/qms/inspectionReport/index.vue

<template>
  <view class="mainBox">
    <uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="质检报告" @clickLeft="back">
    </uni-nav-bar>

    <!-- 搜索栏 -->
    <view class="top-wrapper">
      <uni-section>
        <uni-easyinput
          prefixIcon="search"
          style="width: 420rpx"
          v-model="searchForm.reportNumber"
          placeholder="请输入报告编号"
          @confirm="doSearch"
        >
        </uni-easyinput>
      </uni-section>
      <button class="search_btn filter_btn" @click="filterVisible = true">筛选</button>
      <button class="search_btn" @click="doSearch">搜索</button>
    </view>

    <view class="list-content">
      <u-list @scrolltolower="scrolltolower" class="listContent">
        <view v-for="(item, idx) in tableList" :key="item.id" class="card-wrapper">
          <myCard
            :item="item"
            :index="idx + 1"
            :btnList="getBtnList(item)"
            :columns="cardColumns"
            :title="item.reportNumber || item.code"
            :status="statusText(item.reportApprovalStatus)"
            @goDetail="openDetail"
            @edit="openEdit(item)"
            @delete="deleteReportBtn(item)"
          />
        </view>
        <view style="width: 100%; height: 40rpx"></view>
        <u-loadmore :status="loadStatus" />
        <view style="margin-top: 20vh" v-if="tableList.length == 0">
          <u-empty iconSize="150" textSize="32" text="暂无数据" />
        </view>
      </u-list>
    </view>

    <!-- 筛选弹窗 -->
    <u-popup :show="filterVisible" mode="bottom" :round="20" closeable @close="filterVisible = false" bgColor="#fff">
      <view class="search_wrap">
        <view class="title">筛选</view>
        <view class="form_item">
          <view class="label">工单编号</view>
          <u-input v-model="filterForm.code" placeholder="请输入"></u-input>
        </view>
        <view class="form_item">
          <view class="label">产品编码</view>
          <u-input v-model="filterForm.productCode" placeholder="请输入"></u-input>
        </view>
        <view class="form_item">
          <view class="label">产品名称</view>
          <u-input v-model="filterForm.productName" placeholder="请输入"></u-input>
        </view>
        <view class="form_item">
          <view class="label">型号</view>
          <u-input v-model="filterForm.modelType" placeholder="请输入"></u-input>
        </view>
        <view class="form_item">
          <view class="label">规格</view>
          <u-input v-model="filterForm.specification" placeholder="请输入"></u-input>
        </view>
        <view class="form_item">
          <view class="label">审批状态</view>
          <u-radio-group class="radio-group" v-model="filterForm.reportApprovalStatus" placement="row" iconSize="32" labelSize="28">
            <u-radio v-for="(it, idx) in statusList" :key="idx" :customStyle="{ marginRight: '20rpx' }" :label="it.label" :name="it.value"></u-radio>
          </u-radio-group>
        </view>
        <view class="form_item">
          <view class="label">记录方法</view>
          <u-radio-group class="radio-group" v-model="filterForm.recordingMethod" placement="row" iconSize="32" labelSize="28">
            <u-radio v-for="(it, idx) in recordingMethodList" :key="idx" :customStyle="{ marginRight: '20rpx' }" :label="it.label" :name="it.value"></u-radio>
          </u-radio-group>
        </view>
        <view class="btns">
          <button class="btn reset" @click="resetFilter">重置</button>
          <button class="btn confirm" @click="confirmFilter">确定</button>
        </view>
      </view>
    </u-popup>

    <u-toast ref="uToast" />
  </view>
</template>

<script>
  import myCard from "@/components/myCard.vue";
  import { getReportList, deleteReport } from "@/api/inspectionReport/index.js";
  import { recordingMethodList } from "@/utils/utils.js";

  const statusList = [
    { value: 0, label: "未提交" },
    { value: 1, label: "审核中" },
    { value: 2, label: "已审核" },
    { value: 3, label: "审核不通过" },
    { value: 7, label: "作废" }
  ];

  export default {
    components: { myCard },
    data() {
      return {
        statusList,
        recordingMethodList,
        tableList: [],
        page: 1,
        size: 10,
        isEnd: false,
        loadStatus: "loadmore",
        filterVisible: false,
        searchForm: {
          reportNumber: ""
        },
        filterForm: {
          code: "",
          productCode: "",
          productName: "",
          modelType: "",
          specification: "",
          reportApprovalStatus: "",
          recordingMethod: ""
        },
        cardColumns: [
          [{ prop: "code", label: "工单编号", className: "perce100" }],
          [
            {
              prop: "productName",
              label: "产品",
              className: "perce100",
              formatter: (item) =>
                (item.productName || "") + "(" + (item.productCode || "") + ")"
            }
          ],
          [
            {
              prop: "specification",
              label: "规格型号",
              className: "perce50",
              formatter: (item) =>
                (item.specification || "") + "/" + (item.modelType || "")
            },
            {
              prop: "recordingMethod",
              label: "记录方法",
              className: "perce50",
              formatter: (item) => this.recordingMethodText(item.recordingMethod)
            }
          ],
          [
            {
              prop: "total",
              label: "数量",
              className: "perce50",
              formatter: (item) =>
                item.total ? item.total + (item.sampleMeasureUnit || "") : ""
            },
            { prop: "reportDate", label: "报告日期", className: "perce50" }
          ],
          [
            {
              prop: "reportTemplateCreateUserName",
              label: "创建人",
              className: "perce50"
            },
            {
              prop: "reportApprovalTime",
              label: "审批时间",
              className: "perce50",
              formatter: (item) =>
                (item.reportApprovalTime || "") +
                (item.reportApprovalUserName ? " " + item.reportApprovalUserName : "")
            }
          ],
          [{ label: "操作", prop: "action", type: "action", className: "perce100" }]
        ]
      };
    },
    onLoad() {
      this.getList();
    },
    onShow() {
      uni.$on("inspectionReportRefresh", this.doSearch);
    },
    onUnload() {
      uni.$off("inspectionReportRefresh", this.doSearch);
    },
    methods: {
      getList() {
        uni.showLoading({ title: "加载中", mask: true });
        const params = {
          pageNum: this.page,
          size: this.size
        };
        const fields = {
          reportNumber: this.searchForm.reportNumber,
          code: this.filterForm.code,
          productCode: this.filterForm.productCode,
          productName: this.filterForm.productName,
          modelType: this.filterForm.modelType,
          specification: this.filterForm.specification
        };
        Object.keys(fields).forEach((key) => {
          const val = fields[key];
          if (val !== "" && val !== undefined && val !== null) {
            params[key] = val;
          }
        });
        const statusVal = this.filterForm.reportApprovalStatus;
        if (statusVal !== "" && statusVal !== undefined && statusVal !== null) {
          params.reportApprovalStatus = statusVal;
        }
        const methodVal = this.filterForm.recordingMethod;
        if (methodVal !== "" && methodVal !== undefined && methodVal !== null) {
          params.recordingMethod = methodVal;
        }
        getReportList(params)
          .then((res) => {
            uni.hideLoading();
            const list = res.list || res.records || [];
            if (this.page === 1) {
              this.tableList = list;
            } else {
              this.tableList.push(...list);
            }
            this.isEnd = this.tableList.length >= (res.count || res.total || 0);
            this.loadStatus = this.isEnd ? "nomore" : "loadmore";
            this.page += 1;
          })
          .catch(() => {
            uni.hideLoading();
          });
      },
      doSearch() {
        this.page = 1;
        this.getList();
      },
      scrolltolower() {
        if (this.isEnd) {
          return;
        }
        this.getList();
      },
      confirmFilter() {
        this.filterVisible = false;
        this.page = 1;
        this.getList();
      },
      resetFilter() {
        this.filterForm = {
          code: "",
          productCode: "",
          productName: "",
          modelType: "",
          specification: "",
          reportApprovalStatus: "",
          recordingMethod: ""
        };
        this.filterVisible = false;
        this.page = 1;
        this.getList();
      },
      getBtnList(item) {
        const btns = [];
        if (item.reportApprovalStatus == 0 || item.reportApprovalStatus == 3) {
          btns.push({ name: "编辑", apiName: "edit", btnType: "warning" });
          btns.push({ name: "删除", apiName: "delete", btnType: "danger" });
        }
        return btns;
      },
      statusText(status) {
        return (statusList.find((it) => it.value == status) || {}).label || "";
      },
      recordingMethodText(method) {
        return (recordingMethodList.find((it) => it.value == method) || {}).label || "";
      },
      openDetail(row) {
        uni.setStorageSync("inspectionReportRow", row);
        uni.navigateTo({
          url: "/pages/qms/inspectionReport/detail?id=" + row.id
        });
      },
      openEdit(row) {
        uni.setStorageSync("inspectionReportRow", row);
        uni.navigateTo({
          url: "/pages/qms/inspectionReport/detail?id=" + row.id + "&edit=1"
        });
      },
      deleteReportBtn(row) {
        uni.showModal({
          title: "提示",
          content: "确定要删除该检测报告吗？",
          success: (res) => {
            if (res.confirm) {
              deleteReport(row.id)
                .then(() => {
                  this.$refs.uToast.show({
                    type: "success",
                    icon: false,
                    message: "删除成功"
                  });
                  this.page = 1;
                  this.getList();
                })
                .catch((err) => {
                  this.$refs.uToast.show({
                    type: "error",
                    icon: false,
                    message: err.message || "删除失败"
                  });
                });
            }
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .mainBox {
    background-color: #f3f8fb;
    height: 100vh;
    font-size: 27rpx;
    overflow-y: auto;
  }

  .top-wrapper {
    background-color: #fff;
    display: flex;
    width: 750rpx;
    height: 88rpx;
    padding: 16rpx 32rpx;
    align-items: center;
    position: absolute;
    z-index: 999;

    /deep/.uni-section {
      margin-top: 0px;
    }

    /deep/.uni-section-header {
      padding: 0px;
    }

    .search_btn {
      width: 110rpx;
      height: 70rpx;
      line-height: 70rpx;
      padding: 0 24rpx;
      background: $theme-color;
      font-size: 28rpx;
      color: #fff;
      margin: 0;
      margin-left: 16rpx;
    }

    .filter_btn {
      background: #fff;
      color: $theme-color;
      border: 1rpx solid $theme-color;
    }
  }

  .list-content {
    padding-top: 120rpx;
  }

  .card-wrapper {
    width: 720rpx;
    margin: 0 auto;
  }

  .search_wrap {
    padding: 30rpx 30rpx 60rpx;
    max-height: 70vh;
    overflow-y: auto;

    .title {
      font-size: 32rpx;
      font-weight: 600;
      text-align: center;
      margin-bottom: 20rpx;
    }

    .form_item {
      margin-bottom: 24rpx;

      .label {
        font-size: 26rpx;
        color: #333;
        margin-bottom: 10rpx;
      }
    }

    /deep/ .radio-group {
      flex-wrap: wrap;

      .u-radio__text {
        font-size: 28rpx !important;
      }

      .u-radio__icon-wrap {
        width: 32rpx !important;
        height: 32rpx !important;
      }
    }

    .btns {
      display: flex;
      gap: 20rpx;
      margin-top: 30rpx;

      .btn {
        flex: 1;
        height: 72rpx;
        line-height: 72rpx;
        border-radius: 8rpx;
        font-size: 28rpx;
      }

      .reset {
        background: #f5f5f5;
        color: #333;
      }

      .confirm {
        background: $theme-color;
        color: #fff;
      }
    }
  }
</style>