huminmin
2026-07-30 e1570f458b2ab42bb1a212be8de63134a50b2af1
src/views/productionManagement/workOrderManagement/index.vue
@@ -1,6 +1,6 @@
<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>
@@ -13,7 +13,7 @@
        </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"
@@ -40,79 +40,16 @@
        </template>
      </PIMTable>
    </div>
    <!-- 流转卡弹窗 -->
    <!-- 二维码弹窗 -->
    <el-dialog v-model="transferCardVisible"
               title="流转卡"
               width="1000px">
      <div class="transfer-card-title">工单流转卡</div>
      <div class="transfer-card-container">
        <div class="transfer-card-info">
          <div class="info-group">
            <div class="info-item">
              <span class="info-label">工单编号</span>
              <span class="info-value">{{ transferCardRowData.workOrderNo }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">产品名称</span>
              <span class="info-value">{{ transferCardRowData.productName }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">产品规格</span>
              <span class="info-value">{{ transferCardRowData.model }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">计划开始时间</span>
              <span class="info-value">{{ transferCardRowData.planStartTime }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">计划结束时间</span>
              <span class="info-value">{{ transferCardRowData.planEndTime }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">备注</span>
              <span class="info-value">{{ transferCardRowData.remark }}</span>
            </div>
          </div>
          <div class="info-group">
            <div class="info-item">
              <span class="info-label">需求数量</span>
              <span class="info-value">{{ transferCardRowData.planQuantity }}</span>
            </div>
            <div class="info-item">
              <span class="info-value">{{ transferCardRowData.completeQuantity }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">良品数量</span>
              <span class="info-value">0</span>
            </div>
            <div class="info-item">
              <span class="info-label">不良品数</span>
              <span class="info-value">0</span>
            </div>
            <div class="info-item">
              <span class="info-label">实际开始时间</span>
              <span class="info-value">{{ transferCardRowData.actualStartTime }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">实际结束时间</span>
              <span class="info-value">{{ transferCardRowData.actualEndTime }}</span>
            </div>
          </div>
        </div>
        <div class="transfer-card-qr">
          <div class="qr-container">
            <img :src="transferCardQrUrl"
                 alt="流转卡二维码"
                 style="width: 200px; height: 200px;" />
          </div>
        </div>
      </div>
      <div class="print-button-container"
           style=" text-align: center;
      margin-bottom: 40px;">
        <el-button type="primary"
                   style="margin-top: 20px;"
                   @click="printTransferCard">打印流转卡</el-button>
               title="二维码"
               width="420px"
               align-center>
      <div class="qr-only-dialog">
        <canvas ref="transferCardQrCanvas"
                width="280"
                height="280"
                class="qr-canvas" />
      </div>
    </el-dialog>
    <!-- 报工弹窗 -->
@@ -128,14 +65,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="报废数量"
@@ -147,6 +84,17 @@
                    style="width: 300px"
                    placeholder="请输入报废数量"
                    @input="handleScrapQtyInput" />
        </el-form-item>
        <el-form-item label="报工类型"
                      prop="reportType">
          <el-select v-model="reportForm.reportType"
                     style="width: 300px"
                     placeholder="请选择报工类型">
            <el-option label="合格" :value="0" />
            <el-option label="轻微返工" :value="1" />
            <el-option label="严重返工" :value="2" />
            <el-option label="报废" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="班组信息">
          <el-select v-model="reportForm.userId"
@@ -160,6 +108,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,7 +201,11 @@
    <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>
@@ -255,14 +218,20 @@
    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 MaterialDialog from "./components/MaterialDialog.vue";
  const FileList = defineAsyncComponent(() =>
    import("@/components/Dialog/FileList.vue")
  );
  import useUserStore from "@/store/modules/user";
  const { proxy } = getCurrentInstance();
  const userStore = useUserStore();
  const tableColumn = ref([
    {
@@ -337,7 +306,7 @@
    },
    {
      label: "操作",
      width: "260",
      width: "320",
      align: "center",
      dataType: "action",
      fixed: "right",
@@ -346,6 +315,12 @@
          name: "流转卡",
          clickFun: row => {
            downloadAndPrintWorkOrder(row);
          },
        },
        {
          name: "二维码",
          clickFun: row => {
            showTransferCard(row);
          },
        },
        {
@@ -365,26 +340,43 @@
          clickFun: row => {
            showReportDialog(row);
          },
          disabled: row => row.planQuantity <= 0,
          showHide: row => !row.endOrder,
          disabled: 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 tableData = ref([]);
  const tableLoading = ref(false);
  const transferCardVisible = ref(false);
  const transferCardData = ref([]);
  const transferCardQrUrl = ref("");
  const transferCardQrCanvas = ref(null);
  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({
    planQuantity: 0,
    quantity: null,
    scrapQty: null,
    reportType: 0,
    userName: "",
    workOrderId: "",
    reportWork: "",
@@ -393,6 +385,7 @@
    productMainId: null,
    productionOrderRoutingOperationId: "",
    productionOrderId: "",
    workHour: 0,
    paramGroups: {},
  });
@@ -400,16 +393,16 @@
  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();
@@ -436,7 +429,7 @@
    scrapQty: [{ validator: validateScrapQty, trigger: "blur" }],
  };
  // 处理本次生产数量输入,限制必须大于等于1
  // 处理生产合格数量输入,限制必须大于等于0
  const handleQuantityInput = value => {
    if (value === "" || value === null || value === undefined) {
      reportForm.quantity = null;
@@ -447,7 +440,7 @@
      return;
    }
    // 如果小于1,清除
    if (num < 1) {
    if (num < 0) {
      reportForm.quantity = null;
      return;
    }
@@ -455,7 +448,7 @@
    if (!Number.isInteger(num)) {
      const intValue = Math.floor(num);
      // 如果取整后小于1,清除
      if (intValue < 1) {
      if (intValue < 0) {
        reportForm.quantity = null;
        return;
      }
@@ -502,7 +495,7 @@
  const data = reactive({
    searchForm: {
      workOrderNo: "",
      productOrderNpsNo: "",
      npsNo: "",
    },
  });
  const { searchForm } = toRefs(data);
@@ -511,7 +504,7 @@
    if (!Number.isFinite(n)) return 0;
    if (n <= 0) return 0;
    if (n >= 100) return 100;
    return Math.round(n);
    return parseFloat(n.toFixed(2));
  };
  const progressColor = percentage => {
    const p = toProgressPercentage(percentage);
@@ -602,25 +595,51 @@
  const showTransferCard = async row => {
    transferCardRowData.value = row;
    const qrContent = String(row.id);
    transferCardQrUrl.value = await QRCode.toDataURL(qrContent);
    transferCardVisible.value = true;
    await nextTick();
    const qrContent = String(row.id);
    if (transferCardQrCanvas.value) {
      const ctx = transferCardQrCanvas.value.getContext("2d");
      ctx?.clearRect(0, 0, 280, 280);
      await QRCode.toCanvas(transferCardQrCanvas.value, qrContent, {
        width: 280,
        margin: 1,
        errorCorrectionLevel: "M",
      });
    }
  };
  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.reportType = row.reportType ?? 0;
    reportForm.productProcessRouteItemId = row.productProcessRouteItemId;
    reportForm.workOrderId = row.id;
    reportForm.reportWork = row.reportWork;
@@ -630,6 +649,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 +692,13 @@
        return;
      }
      // 验证本次生产数量
      // 验证生产合格数量
      if (
        reportForm.quantity === null ||
        reportForm.quantity === undefined ||
        reportForm.quantity === ""
      ) {
        ElMessageBox.alert("请输入本次生产数量", "提示", {
        ElMessageBox.alert("请输入生产合格数量", "提示", {
          confirmButtonText: "确定",
        });
        return;
@@ -682,19 +706,19 @@
      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;
      }
      // if (quantity > reportForm.planQuantity) {
      //   ElMessageBox.alert("本次生产数量不能超过待生产数量", "提示", {
      //     confirmButtonText: "确定",
      //   });
      //   return;
      // }
      // 验证报废数量
      const scrapQty = Number(reportForm.scrapQty);
@@ -705,12 +729,12 @@
        return;
      }
      if (!isNaN(scrapQty) && scrapQty > quantity) {
        ElMessageBox.alert("报废数量不能大于本次生产数量", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      // if (!isNaN(scrapQty) && scrapQty > quantity) {
      //   ElMessageBox.alert("报废数量不能大于本次生产数量", "提示", {
      //     confirmButtonText: "确定",
      //   });
      //   return;
      // }
      const productionOperationParamList = params.value.map(param => ({
        ...param,
@@ -720,6 +744,7 @@
      const submitParams = {
        quantity: quantity,
        scrapQty: isNaN(scrapQty) ? 0 : scrapQty,
        reportType: reportForm.reportType,
        userId: reportForm.userId,
        userName: reportForm.userName,
        productionOperationTaskId: reportForm.workOrderId,
@@ -729,6 +754,7 @@
        productionOrderRoutingOperationId:
          reportForm.productionOrderRoutingOperationId,
        productionOrderId: reportForm.productionOrderId,
        workHour: reportForm.workHour,
        productionOperationParamList: productionOperationParamList,
      };
@@ -797,6 +823,7 @@
  };
  onMounted(() => {
    userStore.getInfo();
    getList();
    // 获取用户列表
    userListNoPageByTenantId().then(res => {
@@ -866,6 +893,13 @@
    text-align: center;
    margin-top: 20px;
  }
  .qr-only-dialog {
    padding: 12px 0 28px;
  }
  .qr-canvas {
    display: block;
    margin: 0 auto;
  }
  .param-grid {
    margin-top: 10px;
    border-top: 1px solid #ebe9f3;