kd-aiot-frontend-mes/src/views/batchRecord/components/tables/materialTable.vue

<template>
  <div>
    <seek-page :seekList="seekList" @search="search"></seek-page>
    <ele-pro-table
      ref="table"
      row-key="id"
      :columns="columns"
      :datasource="datasource"
      :cache-key="cacheKeyUrl"
      :selection.sync="selection"
      autoAmendPage
      height="calc(86vh - 230px)"
    >
      <template v-slot:action="{ row }">
        <el-link type="primary" :underline="false" @click="goToDetail(row)">
          详情
        </el-link>
      </template>

      <template v-slot:code="{ row }">
        <el-link type="primary" @click="goToDetail(row)">{{
          row.code
        }}</el-link>
      </template>
      <template v-slot:status="{ row }">
        <el-tag
          :type="['info', 'success', 'warning', 'danger'][row.status]"
          effect="dark"
          >{{ statusList[row.status] }}</el-tag
        >
      </template>
      <template v-slot:toolbar>
        <exportButton
          fileName="领料单"
          apiUrl="/mes/pickorder/exportBatchRecordPage"
          :params="params"
        ></exportButton>
        <print-selector :options="printOptions" @select="handlePrint" />
      </template>
    </ele-pro-table>

    <detailed
      @detailedClose="detailedClose"
      v-if="detailedShow && detailedObj"
      :detailedObj="detailedObj"
    ></detailed>

    <selfDetailed
      @detailedClose="detailedClose"
      v-if="selfDetailedShow && detailedObj"
      :detailedObj="detailedObj"
    ></selfDetailed>

    <material-requisition ref="materialRequisition" />
    <material-requisition-t-r ref="materialRequisitionTR" />
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
  import { batchRecordPage, queryPrint } from '@/api/pickorder/index';
  import detailed from '@/views/produce/components/picking/detailed.vue';
  import selfDetailed from '@/views/pick/pickApply/components/selfDetailed.vue';
  import exportButton from '@/components/upload/exportButton.vue';
  import { getDetails } from '@/api/pick/pickApply';
  import printSelector from '../printSelector.vue';
  import materialRequisition from '../../print/electrodeBatchRecord/materialRequisition.vue';
  import materialRequisitionTR from '../../print/electrodeBatchRecord/materialRequisitionTR.vue';

  export default {
    mixins: [dictMixins, tableColumnsMixin],
    components: {
      detailed,
      selfDetailed,
      exportButton,
      printSelector,
      materialRequisition,
      materialRequisitionTR
    },
    props: {
      tableQuery: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            fixed: 'left'
          },
          {
            width: 50,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            label: '序号'
          },
          {
            prop: 'code',
            label: '领料单编码',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true,
            slot: 'code'
          },
          {
            prop: 'workOrderCode',
            label: '关联工单编号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'warehouseName',
            label: '领料仓库名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'createUserName',
            label: '领料人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'createTime',
            label: '领料时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'status',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150,
            slot: 'status'
          },
          {
            label: '操作',
            columnKey: 'action',
            slot: 'action',
            showOverflowTooltip: true,
            minWidth: 110,
            align: 'center',
            fixed: 'right'
          }
        ],
        cacheKeyUrl: 'mes-259231040-material-table',
        detailedShow: false,
        selfDetailedShow: false,
        detailedObj: null,
        statusList: ['未领料', '领料中', '已出库', '已驳回'],
        params: {},
        tableData: [],
        selection: [],
        printTypeMap: {
          materialRequisition: 'PICK_ORDER',
          materialRequisitionTR: 'CHANTIJTONG_PICK_ORDER'
        },
        printOptions: [
          { key: 'materialRequisition', label: '领（退）料单', code: 'CG-015' },
          {
            key: 'materialRequisitionTR',
            label: '领料单（畅捷通）',
            code: 'TR.D-015CG'
          }
        ]
      };
    },
    computed: {
      seekList() {
        return [
          {
            label: '工单编码：',
            value: 'workOrderCode',
            type: 'input',
            placeholder: '请输入'
          },
          {
            label: '领料单编码：',
            value: 'pickOrderCode',
            type: 'input',
            placeholder: '请输入',
            labelWidth: 110
          }
          // {
          //   label: '领料名称：',
          //   value: 'pickOrderName',
          //   type: 'input',
          //   placeholder: '请输入'
          // }
        ];
      }
    },
    methods: {
      // 刷新表格
      reload(where = {}) {
        this.$refs.table.reload({
          where,
          ...this.tableQuery
        });
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        // 参数
        const body = {
          ...where,
          ...order,
          pageNum: page,
          size: limit,
          ...this.tableQuery
        };
        this.params = body;
        const res = batchRecordPage(body);
        Promise.resolve(res).then((data) => {
          this.tableData = data?.list || data?.records || [];
        });
        return res;
      },
      search(where) {
        this.reload(where);
      },
      async goToDetail(row) {
        const res = await getDetails(row.id);

        this.detailedObj = JSON.stringify(res);

        this.$nextTick(() => {
          if (this.detailedObj.type == 1) {
            this.selfDetailedShow = true;
          } else {
            this.detailedShow = true;
          }
        });
      },
      detailedClose() {
        this.detailedShow = false;
        this.selfDetailedShow = false;
      },
      async handlePrint(key) {
        if (!this.selection.length) {
          this.$message.warning('请先勾选要打印的领料单');
          return;
        }
        const printType = this.printTypeMap[key];
        if (!printType) {
          this.$message.warning('暂不支持该打印单据');
          return;
        }
        try {
          const ids = this.selection.map((item) => item.id).filter(Boolean);
          const res = await queryPrint({ ids, printType });
          const data = this.buildPrintData(res);
          if (!data) {
            this.$message.warning('未查询到可打印的领料单数据');
            return;
          }
          if (this.$refs[key]) {
            this.$refs[key].open(data);
          }
        } catch (error) {
          this.$message.error(error.message || '查询打印数据失败');
        }
      },
      buildPrintData(res) {
        const list = Array.isArray(res?.pickOrderList)
          ? res.pickOrderList
          : Array.isArray(res)
          ? res
          : [];
        const r = list[0];
        if (!r) {
          return null;
        }
        const today = this.$util?.toDateString
          ? this.$util.toDateString(new Date(), 'yyyy-MM-dd')
          : new Date().toISOString().slice(0, 10);
        const materialList = list.length
          ? list.flatMap((item) => this.buildMaterialList(item))
          : this.buildMaterialList(r);
        return {
          code: r.code || '',
          date: r.executorTime || r.createTime || today,
          processOrderCode: r.joinWorkOrderCode || r.workOrderCode || '',
          processOrderNo: r.joinWorkOrderCode || r.workOrderCode || '',
          moCode: r.joinWorkOrderCode || r.workOrderCode || '',
          department: r.joinWarehouseName || r.warehouseName || '生产部',
          workshop: r.joinWarehouseName || r.warehouseName || '',
          applicant: r.executorName || r.createUserName || '',
          handler: r.executorName || r.createUserName || '',
          warehouseKeeper:
            r.warehouseKeeperName ||
            r.warehouseLeaderName ||
            materialList.find((item) => item.warehouseLeaderName)
              ?.warehouseLeaderName ||
            '',
          reviewer: r.joinReviewerName || r.reviewerName || '',
          creator: r.createUserName || r.executorName || '',
          batchNo:
            r.batchNo ||
            materialList.find((item) => item.batchNo)?.batchNo ||
            this.tableQuery.batchNo ||
            '',
          productCode: r.categoryCode || this.tableQuery.productCode || '',
          remark: r.remark || '',
          materialList
        };
      },
      buildMaterialList(order) {
        const detailList = [];
        const collectDetail = (item) => {
          if (!item) {
            return;
          }
          if (Array.isArray(item.detailList)) {
            detailList.push(...item.detailList);
          }
          if (Array.isArray(item.materialList)) {
            detailList.push(...item.materialList);
          }
          if (Array.isArray(item.orderInfoList)) {
            item.orderInfoList.forEach((orderInfo) => {
              detailList.push(...(orderInfo.bomDetailDTOS || []));
              detailList.push(...(orderInfo.instanceList || []));
            });
          }
          if (Array.isArray(item.childList)) {
            item.childList.forEach(collectDetail);
          }
        };
        collectDetail(order);
        return detailList.map((item) => ({
          ...item,
          materialCode: item.materialCode || item.categoryCode || '',
          materialName: item.materialName || item.categoryName || '',
          specification:
            item.specification || item.specifications || item.model || '',
          batchNo: item.batchNo || '',
          unit: item.unit || '',
          quantity:
            item.quantity || item.outQuantity || item.demandQuantity || '',
          reason: item.reason || '',
          purpose: item.purpose || item.taskName || '',
          remark: item.remark || '',
          warehouseLeaderName: item.warehouseLeaderName || ''
        }));
      }
    }
  };
</script>

<style></style>