refactor(workOrder): 重构工单管理页面为父子表格结构

云

2026-06-11 ac02e562a1dadfa2a0f7b8e6f2d0a066522d7d3b

 src/views/productionManagement/workOrderManagement/index.vue

@@ -1,19 +1,10 @@
<template>
  <div class="app-container">
    <div class="search_form">
    <div class="search_form mb20">
      <div class="search-row">
        <div class="search-item">
          <span class="search_title">工单编号：</span>
          <el-input v-model="searchForm.workOrderNo"
                    style="width: 240px"
                    placeholder="请输入"
                    @change="handleQuery"
                    clearable
                    prefix-icon="Search" />
        </div>
        <div class="search-item">
          <span class="search_title">生产订单号：</span>
          <el-input v-model="searchForm.productOrderNpsNo"
          <el-input v-model="searchForm.npsNo"
                    style="width: 240px"
                    placeholder="请输入"
                    @change="handleQuery"
@@ -27,18 +18,199 @@
      </div>
    </div>
    <div class="table_list">
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :tableLoading="tableLoading"
                @pagination="pagination">
        <template #completionStatus="{ row }">
          <el-progress :percentage="toProgressPercentage(row?.completionStatus)"
                       :color="progressColor(toProgressPercentage(row?.completionStatus))"
                       :status="toProgressPercentage(row?.completionStatus) >= 100 ? 'success' : ''" />
        </template>
      </PIMTable>
      <el-table :data="tableData"
                border
                v-loading="tableLoading"
                :expand-row-keys="expandedRowKeys"
                :row-key="(row) => row.productionOrderId"
                @expand-change="expandChange"
                height="calc(100vh - 22em)">
        <!-- 展开行列 -->
        <el-table-column type="expand"
                         width="60"
                         fixed="left">
          <template #default="props">
            <el-table :data="props.row.children || []"
                      border
                      :row-class-name="({ row }) => getChildRowClassName(row)"
                      v-loading="childLoading[props.row.productionOrderId]"
                      style="margin: 10px 0;">
              <el-table-column align="center"
                               label="序号"
                               type="index"
                               width="60" />
              <el-table-column label="工单编号"
                               prop="workOrderNo"
                               width="140">
                <template #default="scope">
                  <span :class="{ 'rework-text': scope.row.workOrderNo?.startsWith('FG') }">
                    {{ scope.row.workOrderNo }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="工序名称"
                               prop="operationName"
                               width="100" />
              <el-table-column label="工序类型"
                               width="80"
                               align="center">
                <template #default="scope">
                  <span>{{ scope.row.type === 0 ? '计时' : '计件' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="计划数量"
                               prop="planQuantity"
                               width="100" />
              <el-table-column label="完成数量"
                               prop="completeQuantity"
                               width="100" />
              <el-table-column label="完成进度"
                               width="140">
                <template #default="scope">
                  <el-progress :percentage="toProgressPercentage(scope.row?.completionStatus)"
                               :color="progressColor(toProgressPercentage(scope.row?.completionStatus))"
                               :status="toProgressPercentage(scope.row?.completionStatus) >= 100 ? 'success' : ''" />
                </template>
              </el-table-column>
              <el-table-column label="报废数量"
                               prop="scrapQty"
                               width="80">
                <template #default="scope">
                  <span :class="{ 'scrap-text': scope.row.scrapQty > 0 }">
                    {{ scope.row.scrapQty || 0 }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="报工人员"
                               prop="userNames"
                               width="150"
                               show-overflow-tooltip />
              <el-table-column label="计划开始时间"
                               prop="planStartTime"
                               width="120" />
              <el-table-column label="计划结束时间"
                               prop="planEndTime"
                               width="120" />
              <el-table-column label="实际开始时间"
                               prop="actualStartTime"
                               width="120" />
              <el-table-column label="实际结束时间"
                               prop="actualEndTime"
                               width="120" />
              <el-table-column label="状态"
                               width="100"
                               align="center">
                <template #default="scope">
                  <el-tag :type="getStatusTagType(scope.row.status)">
                    {{ getStatusText(scope.row.status) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作"
                               width="200"
                               align="center"
                               fixed="right">
                <template #default="scope">
                  <el-button link
                             type="primary"
                             @click="downloadAndPrintWorkOrder(scope.row)">
                    流转卡
                  </el-button>
                  <el-button link
                             type="primary"
                             @click="openWorkOrderFiles(scope.row)">
                    附件
                  </el-button>
                  <el-button link
                             type="primary"
                             v-if="!scope.row.endOrder"
                             :disabled="isReportDisabled(scope.row)"
                             @click="showReportDialog(scope.row)">
                    报工
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <!-- 主表列 -->
        <el-table-column align="center"
                         label="序号"
                         type="index"
                         width="60" />
        <el-table-column label="生产订单号"
                         prop="npsNo"
                         width="150" />
        <el-table-column label="产品名称"
                         prop="productName"
                         width="140" />
        <el-table-column label="规格"
                         prop="model"
                         width="150" />
        <el-table-column label="单位"
                         prop="unit"
                         width="80" />
        <el-table-column label="工序名称"
                         prop="operationName"
                         width="200"
                         show-overflow-tooltip />
        <el-table-column label="工单数量"
                         prop="productionTaskCount"
                         width="80">
          <template #default="scope">
            <span>共{{ scope.row.productionTaskCount || 0 }}个</span>
          </template>
        </el-table-column>
        <el-table-column label="计划数量"
                         prop="planQuantity"
                         width="100" />
        <el-table-column label="完成数量"
                         prop="completeQuantity"
                         width="100" />
        <el-table-column label="完成进度"
                         width="140">
          <template #default="scope">
            <el-progress :percentage="toProgressPercentage(scope.row?.completionStatus)"
                         :color="progressColor(toProgressPercentage(scope.row?.completionStatus))"
                         :status="toProgressPercentage(scope.row?.completionStatus) >= 100 ? 'success' : ''" />
          </template>
        </el-table-column>
        <el-table-column label="报废数量"
                         prop="scrapQty"
                         width="80">
          <template #default="scope">
            <span :class="{ 'scrap-text': scope.row.scrapQty > 0 }">
              {{ scope.row.scrapQty || 0 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="状态"
                         width="100"
                         align="center">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="计划开始时间"
                         prop="planStartTime"
                         width="120" />
        <el-table-column label="计划结束时间"
                         prop="planEndTime"
                         width="120" />
        <el-table-column label="实际开始时间"
                         prop="actualStartTime"
                         width="120" />
        <el-table-column label="实际结束时间"
                         prop="actualEndTime"
                         width="120" />
      </el-table>
      <PaginationComp v-show="page.total > 0"
                  :total="page.total"
                  :page="page.current"
                  :limit="page.size"
                  @pagination="pagination" />
    </div>
    <!-- 流转卡弹窗 -->
    <el-dialog v-model="transferCardVisible"
@@ -128,14 +300,14 @@
                    readonly
                    style="width: 300px" />
        </el-form-item>
        <el-form-item label="本次生产数量"
        <el-form-item label="生产合格数量"
                      prop="quantity">
          <el-input v-model.number="reportForm.quantity"
                    type="number"
                    min="1"
                    min="0"
                    step="1"
                    style="width: 300px"
                    placeholder="请输入本次生产数量"
                    placeholder="请输入生产合格数量"
                    @input="handleQuantityInput" />
        </el-form-item>
        <el-form-item label="报废数量"
@@ -160,6 +332,17 @@
                       :label="user.nickName"
                       :value="user.userId" />
          </el-select>
        </el-form-item>
        <!-- 工时 -->
        <el-form-item label="工时"
                      v-if="currentReportRowData?.type == 0"
                      prop="workHour">
          <el-input v-model.number="reportForm.workHour"
                    type="number"
                    min="0"
                    style="width: 280px"
                    placeholder="请输入工时" /><span style="margin-left:10px"
                class="param-unit">h</span>
        </el-form-item>
        <div v-if="params.length > 0"
             class="param-grid"
@@ -242,143 +425,71 @@
    <MaterialDialog v-model="materialDialogVisible"
                    :row-data="currentMaterialOrderRow"
                    @refresh="getList" />
    <FilesDia ref="workOrderFilesRef" />
    <FileList v-if="fileDialogVisible"
              v-model:visible="fileDialogVisible"
              :editable="!currentWorkOrderRow?.endOrder"
              :record-type="'production_operation_task'"
              :record-id="currentWorkOrderId" />
  </div>
</template>

<script setup>
  import { onMounted, ref, nextTick } from "vue";
  import { onMounted, ref, nextTick, reactive, toRefs, getCurrentInstance } from "vue";
  import { ElMessageBox } from "element-plus";
  import dayjs from "dayjs";
  import {
    productWorkOrderPage,
    getWorkOrderListByOrderId,
    addProductMain,
    downProductWorkOrder,
  } from "@/api/productionManagement/workOrder.js";
  import { listMaterialPickingDetail } from "@/api/productionManagement/productionOrder.js";
  import { findProcessParamListOrder } from "@/api/productionManagement/productProcessRoute.js";
  import { getUserProfile, userListNoPageByTenantId } from "@/api/system/user.js";
  import { getDicts } from "@/api/system/dict/data";
  import QRCode from "qrcode";
  import { getCurrentInstance, reactive, toRefs } from "vue";
  import FilesDia from "./components/filesDia.vue";
  import PaginationComp from "@/components/PIMTable/Pagination.vue";
  import MaterialDialog from "./components/MaterialDialog.vue";
  const { proxy } = getCurrentInstance();
  const FileList = defineAsyncComponent(() =>
    import("@/components/Dialog/FileList.vue")
  );

  const tableColumn = ref([
    {
      label: "工单类型",
      prop: "workOrderType",
      width: "80",
    },
    {
      label: "工单编号",
      prop: "workOrderNo",
      width: "140",
    },
    {
      label: "生产订单号",
      prop: "npsNo",
      width: "140",
    },
    {
      label: "产品名称",
      prop: "productName",
      width: "140",
    },
    {
      label: "规格",
      prop: "model",
    },
    {
      label: "单位",
      prop: "unit",
    },
    {
      label: "工序名称",
      prop: "operationName",
      width: "100",
    },
    {
      label: "需求数量",
      prop: "planQuantity",
      width: "140",
    },
    {
      label: "完成数量",
      prop: "completeQuantity",
      width: "140",
    },
    {
      label: "完成进度",
      prop: "completionStatus",
      dataType: "slot",
      slot: "completionStatus",
      width: "140",
    },
    {
      label: "计划开始时间",
      prop: "planStartTime",
      width: "140",
    },
    {
      label: "计划结束时间",
      prop: "planEndTime",
      width: "140",
    },
    {
      label: "实际开始时间",
      prop: "actualStartTime",
      width: "140",
    },
    {
      label: "实际结束时间",
      prop: "actualEndTime",
      width: "140",
    },
    {
      label: "操作",
      width: "260",
      align: "center",
      dataType: "action",
      fixed: "right",
      operation: [
        {
          name: "流转卡",
          clickFun: row => {
            downloadAndPrintWorkOrder(row);
          },
        },
        {
          name: "附件",
          clickFun: row => {
            openWorkOrderFiles(row);
          },
        },
        // {
        //   name: "物料",
        //   clickFun: row => {
        //     openMaterialDialog(row);
        //   },
        // },
        {
          name: "报工",
          clickFun: row => {
            showReportDialog(row);
          },
          disabled: row => row.planQuantity <= 0,
        },
      ],
    },
  ]);
  import useUserStore from "@/store/modules/user";
  const { proxy } = getCurrentInstance();
  const userStore = useUserStore();

  // 状态枚举映射
  const statusMap = {
    1: '待确认',
    2: '待生产',
    3: '生产中',
    4: '已生产',
  };

  const getStatusText = (status) => statusMap[status] || '未知';

  const getStatusTagType = (status) => {
    switch (status) {
      case 1: return 'info';
      case 2: return 'warning';
      case 3: return 'primary';
      case 4: return 'success';
      default: return 'info';
    }
  };

  const tableData = ref([]);
  const tableLoading = ref(false);
  const expandedRowKeys = ref([]);
  const childLoading = ref({});

  const transferCardVisible = ref(false);
  const transferCardData = ref([]);
  const transferCardQrUrl = ref("");
  const transferCardRowData = ref(null);
  const reportDialogVisible = ref(false);
  const workOrderFilesRef = ref(null);
  const fileDialogVisible = ref(false);
  const currentWorkOrderId = ref(null);
  const reportFormRef = ref(null);
  const userOptions = ref([]);
  const reportForm = reactive({
@@ -393,23 +504,23 @@
    productMainId: null,
    productionOrderRoutingOperationId: "",
    productionOrderId: "",
    workHour: 0,
    paramGroups: {},
  });

  const params = ref({});
  const params = ref([]);
  const dictOptions = ref({});
  const paramLoading = ref(false);

  // 本次生产数量验证规则
  // 生产合格数量验证规则
  const validateQuantity = (rule, value, callback) => {
    if (value === null || value === undefined || value === "") {
      callback(new Error("请输入本次生产数量"));
      callback(new Error("请输入生产合格数量"));
      return;
    }
    const num = Number(value);
    // 整数且大于等于1
    if (isNaN(num) || !Number.isInteger(num) || num < 1) {
      callback(new Error("本次生产数量必须大于等于1"));
    if (isNaN(num) || !Number.isInteger(num) || num < 0) {
      callback(new Error("生产合格数量必须大于等于0"));
      return;
    }
    callback();
@@ -422,7 +533,6 @@
      return;
    }
    const num = Number(value);
    // 整数且大于等于0
    if (isNaN(num) || !Number.isInteger(num) || num < 0) {
      callback(new Error("报废数量必须大于等于0"));
      return;
@@ -436,7 +546,7 @@
    scrapQty: [{ validator: validateScrapQty, trigger: "blur" }],
  };

  // 处理本次生产数量输入，限制必须大于等于1
  // 处理生产合格数量输入
  const handleQuantityInput = value => {
    if (value === "" || value === null || value === undefined) {
      reportForm.quantity = null;
@@ -446,16 +556,13 @@
    if (isNaN(num)) {
      return;
    }
    // 如果小于1，清除
    if (num < 1) {
    if (num < 0) {
      reportForm.quantity = null;
      return;
    }
    // 如果是小数取整数部分
    if (!Number.isInteger(num)) {
      const intValue = Math.floor(num);
      // 如果取整后小于1，清除
      if (intValue < 1) {
      if (intValue < 0) {
        reportForm.quantity = null;
        return;
      }
@@ -472,21 +579,17 @@
      return;
    }
    const num = Number(value);
    // 如果是NaN，保持原值
    if (isNaN(num)) {
      return;
    }
    // 如果是负数，清除输入
    if (num < 0) {
      reportForm.scrapQty = null;
      return;
    }
    // 如果是小数，取整数部分
    if (!Number.isInteger(num)) {
      reportForm.scrapQty = Math.floor(num);
      return;
    }
    // 有效的非负整数（包括0）
    reportForm.scrapQty = num;
  };

@@ -501,11 +604,11 @@

  const data = reactive({
    searchForm: {
      workOrderNo: "",
      productOrderNpsNo: "",
      npsNo: "",
    },
  });
  const { searchForm } = toRefs(data);

  const toProgressPercentage = val => {
    const n = Number(val);
    if (!Number.isFinite(n)) return 0;
@@ -513,6 +616,7 @@
    if (n >= 100) return 100;
    return Math.round(n);
  };

  const progressColor = percentage => {
    const p = toProgressPercentage(percentage);
    if (p < 30) return "#f56c6c";
@@ -522,7 +626,6 @@
  };

  // 查询列表
  /** 搜索按钮操作 */
  const handleQuery = () => {
    page.current = 1;
    getList();
@@ -536,11 +639,15 @@

  const getList = () => {
    tableLoading.value = true;
    expandedRowKeys.value = [];
    const params = { ...searchForm.value, ...page };
    productWorkOrderPage(params)
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        tableData.value = res.data.records.map(item => ({
          ...item,
          children: [],
        }));
        page.total = res.data.total;
      })
      .catch(() => {
@@ -548,7 +655,67 @@
      });
  };

  // 下载并打印工单流转卡（文件流）
  // 展开行懒加载
  const expandChange = (row, expandedRows) => {
    if (expandedRows.length > 0) {
      expandedRowKeys.value = [];
      const orderId = row.productionOrderId;

      // 检查是否已有数据
      if (row.children && row.children.length > 0) {
        expandedRowKeys.value.push(orderId);
        return;
      }

      childLoading.value[orderId] = true;

      getWorkOrderListByOrderId(orderId)
        .then(res => {
          childLoading.value[orderId] = false;
          const index = tableData.value.findIndex(
            item => item.productionOrderId === orderId
          );
          if (index > -1) {
            tableData.value[index].children = res.data || [];
          }
          expandedRowKeys.value.push(orderId);
        })
        .catch(error => {
          childLoading.value[orderId] = false;
          console.error('加载工单明细失败:', error);
        });
    } else {
      expandedRowKeys.value = [];
    }
  };

  // 子表行样式（返工返修红色标记）
  const getChildRowClassName = (row) => {
    if (row.workOrderNo?.startsWith('FG')) {
      return 'row-rework';
    }
    return '';
  };

  // 报工按钮禁用逻辑
  const isReportDisabled = (row) => {
    if (row.planQuantity <= 0) return true;
    if (!row.userIds) return false;
    try {
      const userIds =
        typeof row.userIds === "string"
          ? JSON.parse(row.userIds)
          : row.userIds;
      if (Array.isArray(userIds)) {
        return !userIds.some(id => String(id) === String(userStore.id));
      }
      return true;
    } catch (e) {
      return true;
    }
  };

  // 下载并打印工单流转卡
  const downloadAndPrintWorkOrder = async row => {
    if (!row || !row.id) {
      proxy.$modal.msgError("缺少工单ID，无法下载流转卡");
@@ -558,7 +725,6 @@
      ? `工单流转卡_${row.workOrderNo}.xlsx`
      : "工单流转卡.xlsx";
    try {
      // 调用接口，以 responseType: 'blob' 获取文件流
      const blob = await downProductWorkOrder(row.id);

      if (!blob) {
@@ -566,14 +732,12 @@
        return;
      }

      // 创建 Blob URL
      const fileBlob =
        blob instanceof Blob
          ? blob
          : new Blob([blob], { type: blob.type || "application/octet-stream" });
      const url = window.URL.createObjectURL(fileBlob);

      // 创建隐藏 iframe，用于触发浏览器打印
      const iframe = document.createElement("iframe");
      iframe.style.position = "fixed";
      iframe.style.right = "0";
@@ -590,7 +754,6 @@
          iframe.contentWindow?.print();
        } catch (e) {
          console.error("自动调用打印失败", e);
          // 退而求其次，打开新窗口由用户手动打印
          window.open(url);
        }
      };
@@ -611,14 +774,34 @@
  const printTransferCard = () => {
    window.print();
  };
  const currentWorkOrderRow = ref(null);

  const openWorkOrderFiles = row => {
    workOrderFilesRef.value?.openDialog(row);
    currentWorkOrderId.value = row.id;
    currentWorkOrderRow.value = row;
    fileDialogVisible.value = true;
  };

  const showReportDialog = row => {
  const showReportDialog = async row => {
    if (row.productionOrderId) {
      try {
        const res = await listMaterialPickingDetail(row.productionOrderId);
        const records = Array.isArray(res.data)
          ? res.data
          : res.data?.records || [];
        if (res.code === 200 && records.length === 0) {
          proxy.$modal.msgError("未领料无法报工");
          return;
        }
      } catch (error) {
        console.error("查询领料详情失败:", error);
      }
    }
    currentReportRowData.value = row;
    reportForm.planQuantity = row.planQuantity;
    const planQuantity = Number(row.planQuantity || 0);
    const completeQuantity = Number(row.completeQuantity || 0);
    const remainingQuantity = Math.max(0, planQuantity - completeQuantity);
    reportForm.planQuantity = remainingQuantity;
    reportForm.quantity =
      row.quantity !== undefined && row.quantity !== null ? row.quantity : null;
    reportForm.productProcessRouteItemId = row.productProcessRouteItemId;
@@ -630,6 +813,11 @@
    reportForm.productionOrderRoutingOperationId =
      row.productionOrderRoutingOperationId;
    reportForm.productionOrderId = row.productionOrderId;
    if (row.type == 0) {
      reportForm.workHour = row.workHour || 0;
    } else {
      reportForm.workHour = 0;
    }
    nextTick(() => {
      reportFormRef.value?.clearValidate();
      if (row.productionOrderRoutingOperationId && row.productionOrderId) {
@@ -668,13 +856,12 @@
        return;
      }

      // 验证本次生产数量
      if (
        reportForm.quantity === null ||
        reportForm.quantity === undefined ||
        reportForm.quantity === ""
      ) {
        ElMessageBox.alert("请输入本次生产数量", "提示", {
        ElMessageBox.alert("请输入生产合格数量", "提示", {
          confirmButtonText: "确定",
        });
        return;
@@ -682,31 +869,16 @@

      const quantity = Number(reportForm.quantity);

      if (isNaN(quantity) || quantity <= 0) {
        ElMessageBox.alert("本次生产数量必须大于0", "提示", {
      if (isNaN(quantity) || quantity < 0) {
        ElMessageBox.alert("生产合格数量必须大于等于0", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }

      if (quantity > reportForm.planQuantity) {
        ElMessageBox.alert("本次生产数量不能超过待生产数量", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }

      // 验证报废数量
      const scrapQty = Number(reportForm.scrapQty);
      if (!isNaN(scrapQty) && scrapQty < 0) {
        ElMessageBox.alert("报废数量不能小于0", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }

      if (!isNaN(scrapQty) && scrapQty > quantity) {
        ElMessageBox.alert("报废数量不能大于本次生产数量", "提示", {
          confirmButtonText: "确定",
        });
        return;
@@ -729,6 +901,7 @@
        productionOrderRoutingOperationId:
          reportForm.productionOrderRoutingOperationId,
        productionOrderId: reportForm.productionOrderId,
        workHour: reportForm.workHour,
        productionOperationParamList: productionOperationParamList,
      };

@@ -797,8 +970,8 @@
  };

  onMounted(() => {
    userStore.getInfo();
    getList();
    // 获取用户列表
    userListNoPageByTenantId().then(res => {
      if (res.code === 200) {
        userOptions.value = res.data;
@@ -890,6 +1063,31 @@
    font-size: 12px;
    min-width: 30px;
  }

  // 返工返修工单红色标记
  .row-rework {
    background-color: #fef0f0 !important;

    :deep(.el-table__cell) {
      background-color: #fef0f0 !important;
    }
  }

  .rework-text {
    color: #f56c6c;
    font-weight: bold;
  }

  // 报废数量红色标记
  .scrap-text {
    color: #f56c6c;
  }

  // 子表格样式
  :deep(.el-table__expanded-cell) {
    padding: 10px 30px !important;
    background-color: #fafafa;
  }
</style>

<style  lang="scss">