feat(production): 添加工序颜色配置和显示功能

云

2026-09-14 4334e4d5f680b4375d7af4ba9e4d8c8baef7266b

 src/views/productionManagement/productionOrder/index.vue

@@ -83,6 +83,20 @@
                       :color="progressColor(toProgressPercentage(row?.completionStatus))"
                       :status="toProgressPercentage(row?.completionStatus) >= 100 ? 'success' : ''" />
        </template>
        <template #currentProcess="{ row }">
          <template v-if="getCurrentProcess(row)">
            <el-tag v-if="getCurrentProcess(row).done"
                    type="success"
                    size="small">全部完成</el-tag>
            <div v-else
                 class="current-process-name">
              <span class="process-color-dot"
                    :style="{ background: getCurrentProcess(row).color || '#909399' }"></span>
              <span :style="getCurrentProcess(row).color ? { color: getCurrentProcess(row).color } : {}">{{ getCurrentProcess(row).name }}</span>
            </div>
          </template>
          <span v-else>-</span>
        </template>
        <template #processRouteStatus="{ row }">
          <div v-if="row.processRouteStatus && row.processRouteStatus.length"
               class="process-progress-container">
@@ -95,7 +109,11 @@
                  <span class="step-percentage"
                        :style="{ color: item.percentage >= 70 ? item.percentage >= 100 ? '#67c23a' : '#f56c6c' : '#000' }">{{ item.percentage }}%</span>
                </div>
                <div class="step-name">{{ item.name }}</div>
                <div class="step-name">
                  <span v-if="item.color"
                        :style="{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', marginRight: '4px', background: item.color }"></span>
                  <span>{{ item.name }}</span>
                </div>
              </div>
              <div v-if="index < row.processRouteStatus.length - 1"
                   class="step-line"></div>
@@ -285,6 +303,13 @@
      label: "生产订单号",
      prop: "npsNo",
      width: "150px",
    },
    {
      label: "当前工序进度",
      prop: "currentProcess",
      dataType: "slot",
      slot: "currentProcess",
      width: 160,
    },
    {
      label: "销售单号",
@@ -510,6 +535,19 @@
    if (p < 50) return "#e6a23c";
    if (p < 80) return "#409eff";
    return "#67c23a";
  };

  // 当前工序：第一道完成度不足100%的工序；全部完成返回 done
  const getCurrentProcess = row => {
    const list = row.processRouteStatus;
    if (!Array.isArray(list) || list.length === 0) return null;
    const current = list.find(item => toProgressPercentage(item.percentage) < 100);
    if (!current) return { done: true };
    return {
      done: false,
      name: current.name || "未知工序",
      color: current.color || "",
    };
  };

  // 添加表行类名方法
@@ -865,6 +903,22 @@
    margin-top: unset;
  }

  .current-process-name {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #303133;
  }

  .process-color-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    flex-shrink: 0;
  }

  .process-progress-container {
    display: inline-flex;
    align-items: center;