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

云

5 天以前 4334e4d5f680b4375d7af4ba9e4d8c8baef7266b

 src/views/productionManagement/productionProcess/index.vue

@@ -21,7 +21,12 @@
               :class="{ active: selectedProcess?.id === process.id }"
               @click="selectProcess(process)">
            <div class="card-header">
              <div class="process-name">{{ process.name }} <span class="process-code">{{ process.no }}</span></div>
              <div class="process-name">
                <span v-if="process.color"
                      class="process-color-dot"
                      :style="{ backgroundColor: process.color }"></span>
                {{ process.name }} <span class="process-code">{{ process.no }}</span>
              </div>
              <div class="card-actions">
                <el-button link
                           type="primary"
@@ -138,6 +143,12 @@
            <el-radio :label="0">计时</el-radio>
            <el-radio :label="1">计件</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工序颜色"
                      prop="color">
          <el-color-picker v-model="processForm.color"
                           :predefine="predefineColors" />
          <span class="color-tip">用于生产模块工序标识颜色渲染</span>
        </el-form-item>
        <el-form-item label="关联设备"
                      prop="deviceLedgerId">
@@ -347,7 +358,18 @@
    remark: "",
    deviceLedgerId: null,
    type: 0,
    color: "",
  });
  const predefineColors = [
    "#409eff",
    "#67c23a",
    "#e6a23c",
    "#f56c6c",
    "#909399",
    "#9254de",
    "#13c2c2",
    "#fa8c16",
  ];
  const processRules = {
    no: [{ required: true, message: "请输入工序编码", trigger: "blur" }],
    name: [{ required: true, message: "请输入工序名称", trigger: "blur" }],
@@ -558,6 +580,7 @@
    processForm.remark = "";
    processForm.deviceLedgerId = null;
    processForm.type = 0;
    processForm.color = "";
    processDialogVisible.value = true;
  };

@@ -575,6 +598,7 @@
    const hasDevice = deviceOptions.value.some(item => item.id === deviceId);
    processForm.deviceLedgerId = deviceId && hasDevice ? deviceId : null;
    processForm.type = process.type;
    processForm.color = process.color || "";
    processDialogVisible.value = true;
  };

@@ -603,8 +627,10 @@
  const handleProcessSubmit = () => {
    processFormRef.value.validate(valid => {
      if (valid) {
        // 颜色清空后为 null，后端 updateById 会忽略 null 字段，统一转为空串提交
        const submitData = { ...processForm, color: processForm.color || "" };
        if (processForm.id) {
          update(processForm)
          update(submitData)
            .then(() => {
              ElMessage.success("编辑成功");
              processDialogVisible.value = false;
@@ -614,7 +640,7 @@
              ElMessage.error("编辑失败");
            });
        } else {
          add(processForm)
          add(submitData)
            .then(() => {
              ElMessage.success("新增成功");
              processDialogVisible.value = false;
@@ -877,6 +903,15 @@
        font-family: "Courier New", monospace;
      }

      .process-color-dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 6px;
        vertical-align: middle;
      }

      .card-actions {
        display: flex;
        gap: 4px;
@@ -990,6 +1025,12 @@
    justify-content: center;
  }

  .color-tip {
    margin-left: 10px;
    font-size: 12px;
    color: #909399;
  }

  // 表格样式
  :deep(.el-table) {
    border: none;