新增工作订单管理界面行样式和报告时长字段，优化表格显示

yyb

9 小时以前 63edbcb5f7e9b413f38e2e4e7f3ce43aa80013b7

 src/views/productionManagement/workOrderManagement/index.vue

@@ -24,11 +24,18 @@
                :tableData="tableData"
                :page="page"
                :tableLoading="tableLoading"
                :row-class-name="tableRowClassName"
                @pagination="pagination">
        <template #completionStatus="{ row }">
          <el-progress :percentage="toProgressPercentage(row?.completionStatus)"
                       :color="progressColor(toProgressPercentage(row?.completionStatus))"
                       :status="toProgressPercentage(row?.completionStatus) >= 100 ? 'success' : ''" />
        </template>
        <template #todayReportState="{ row }">
          {{ formatTodayReportState(row?.todayReportState) }}
        </template>
        <template #totalReportDurationMinutes="{ row }">
          {{ formatDurationHours(row?.totalReportDurationMinutes) }}
        </template>
      </PIMTable>
    </div>
@@ -111,7 +118,7 @@
    
    <!-- 报工弹窗 -->
    <el-dialog v-model="reportDialogVisible"
               title="报工"
               :title="reportDialogTitle"
               width="500px">
      <el-form ref="reportFormRef"
               :model="reportForm"
@@ -122,7 +129,8 @@
                    readonly
                    style="width: 300px" />
        </el-form-item>
        <el-form-item label="本次生产数量"
        <el-form-item v-if="currentReportState !== 1"
                      label="本次生产数量"
                      prop="quantity">
          <el-input v-model.number="reportForm.quantity"
                    type="number"
@@ -132,7 +140,8 @@
                    placeholder="请输入本次生产数量"
                    @input="handleQuantityInput" />
        </el-form-item>
        <el-form-item label="报废数量"
        <el-form-item v-if="currentReportState !== 1"
                      label="报废数量"
                      prop="scrapQty">
          <el-input v-model.number="reportForm.scrapQty"
                    type="number"
@@ -177,6 +186,7 @@
    productWorkOrderPage,
    addProductMain,
    downProductWorkOrder,
    reportState,
  } from "@/api/productionManagement/workOrder.js";
  import { getUserProfile, userListNoPageByTenantId } from "@/api/system/user.js";
  import QRCode from "qrcode";
@@ -235,9 +245,23 @@
      width: "140",
    },
    {
      label: "今日报工状态",
      prop: "todayReportState",
      dataType: "slot",
      slot: "todayReportState",
      width: "140",
    },
    {
      label: "计划工时(小时)",
      prop: "salaryQuota",
      width: "140",
    },
    {
      label: "系统核算时间(小时)",
      prop: "totalReportDurationMinutes",
      dataType: "slot",
      slot: "totalReportDurationMinutes",
      width: "160",
    },
    {
      label: "计划开始时间",
@@ -296,6 +320,8 @@
  const transferCardQrUrl = ref("");
  const transferCardRowData = ref(null);
  const reportDialogVisible = ref(false);
  const currentReportState = ref(2);
  const reportDialogTitle = ref("报工");
  const workOrderFilesRef = ref(null);
  const reportFormRef = ref(null);
  const userOptions = ref([]);
@@ -428,6 +454,25 @@
    if (p < 80) return "#409eff";
    return "#67c23a";
  };
  const formatTodayReportState = val => {
    const state = Number(val);
    if (state === 1) return "未开始";
    if (state === 2) return "已开始";
    if (state === 3) return "已结束";
    return "-";
  };
  const formatDurationHours = val => {
    const minutes = Number(val);
    if (!Number.isFinite(minutes) || minutes < 0) return "-";
    return (minutes / 60).toFixed(2);
  };
  const tableRowClassName = ({ row }) => {
    const state = Number(row?.todayReportState);
    if (state === 1) return "today-report-not-started";
    if (state === 2) return "today-report-started";
    if (state === 3) return "today-report-ended";
    return "";
  };

  // 查询列表
  /** 搜索按钮操作 */
@@ -524,7 +569,7 @@
    workOrderFilesRef.value?.openDialog(row);
  };

  const showReportDialog = row => {
  const showReportDialog = async row => {
    currentReportRowData.value = row;
    reportForm.planQuantity = row.planQuantity;
    reportForm.quantity =
@@ -538,6 +583,23 @@
    nextTick(() => {
      reportFormRef.value?.clearValidate();
    });
    try {
      const reportStateRes = await reportState({
        workOrderId: row.id,
        productProcessRouteItemId: row.productProcessRouteItemId,
      });
      const state = reportStateRes?.data?.state;
      currentReportState.value = state === 1 ? 1 : 2;
      reportDialogTitle.value = currentReportState.value === 1 ? "开始报工" : "结束报工";
      if (currentReportState.value === 1) {
        reportForm.quantity = null;
        reportForm.scrapQty = null;
      }
    } catch (error) {
      currentReportState.value = 2;
      reportDialogTitle.value = "结束报工";
      console.error("获取报工状态失败", error);
    }
    // 获取当前登录用户信息，设置为默认选中
    getUserProfile()
      .then(res => {
@@ -566,48 +628,52 @@
        return;
      }

      // 验证本次生产数量
      if (
        reportForm.quantity === null ||
        reportForm.quantity === undefined ||
        reportForm.quantity === ""
      ) {
        ElMessageBox.alert("请输入本次生产数量", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      let quantity = 0;
      let scrapQty = 0;
      if (currentReportState.value !== 1) {
        // 验证本次生产数量
        if (
          reportForm.quantity === null ||
          reportForm.quantity === undefined ||
          reportForm.quantity === ""
        ) {
          ElMessageBox.alert("请输入本次生产数量", "提示", {
            confirmButtonText: "确定",
          });
          return;
        }

      const quantity = Number(reportForm.quantity);
        quantity = Number(reportForm.quantity);

      if (isNaN(quantity) || quantity <= 0) {
        ElMessageBox.alert("本次生产数量必须大于0", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
        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);
      if (!isNaN(scrapQty) && scrapQty < 0) {
        ElMessageBox.alert("报废数量不能小于0", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
        // 验证报废数量
        scrapQty = Number(reportForm.scrapQty);
        if (!isNaN(scrapQty) && scrapQty < 0) {
          ElMessageBox.alert("报废数量不能小于0", "提示", {
            confirmButtonText: "确定",
          });
          return;
        }

      if (!isNaN(scrapQty) && scrapQty > quantity) {
        ElMessageBox.alert("报废数量不能大于本次生产数量", "提示", {
          confirmButtonText: "确定",
        });
        return;
        if (!isNaN(scrapQty) && scrapQty > quantity) {
          ElMessageBox.alert("报废数量不能大于本次生产数量", "提示", {
            confirmButtonText: "确定",
          });
          return;
        }
      }

      const params = {
@@ -623,14 +689,13 @@

      addProductMain(params)
        .then(res => {
          proxy.$modal.msgSuccess("报工成功");
          proxy.$modal.msgSuccess(
            currentReportState.value === 1 ? "开始报工成功" : "结束报工成功"
          );
          reportDialogVisible.value = false;
          getList();
        })
        .catch(() => {
          ElMessageBox.alert("报工失败", "提示", {
            confirmButtonText: "确定",
          });
        });
    });
  };
@@ -710,6 +775,18 @@
    text-align: center;
    margin-top: 20px;
  }

  :deep(.el-table .today-report-not-started > td) {
    background-color: #fff7e6 !important;
  }

  :deep(.el-table .today-report-started > td) {
    background-color: #ecf5ff !important;
  }

  :deep(.el-table .today-report-ended > td) {
    background-color: #f0f9eb !important;
  }
</style>

<style  lang="scss">