fix: bom结构耗料比例调整为8位小数

gongchunyi

2026-08-14 ed0f7c772ab2d967a6a39eb169f682e4e77c5a00

 src/views/productionManagement/productionProcess/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1111 @@
<template>
  <div class="app-container">
    <div class="process-config-container">
      <!-- å·¦ä¾§å·¥åºåˆ—表 -->
      <div class="process-list-section">
        <div class="section-header">
          <h3 class="section-title">工序列表</h3>
          <el-button type="primary"
                     size="small"
                     @click="handleAddProcess">
            <el-icon>
              <Plus />
            </el-icon>新增工序
          </el-button>
        </div>
        <div class="process-card-list"
             v-loading="processLoading">
          <div v-for="process in processValueList"
               :key="process.id"
               class="process-card"
               :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="card-actions">
                <el-button link
                           type="primary"
                           @click.stop="handleEditProcess(process)">
                  <el-icon>
                    <Edit />
                  </el-icon>
                  ç¼–辑
                </el-button>
                <el-button link
                           type="danger"
                           @click.stop="handleDeleteProcess(process)">
                  <el-icon>
                    <Delete />
                  </el-icon>
                  åˆ é™¤
                </el-button>
              </div>
            </div>
            <div class="card-body">
              <!-- <div class="process-name">{{ process.name }}</div> -->
              <div class="process-desc">{{ process.remark || '暂无描述' }}</div>
              <div class="process-device">关联设备: {{ (deviceOptions.find(item => item.id === Number(process.deviceLedgerId))?.deviceName) || '未关联' }}</div>
            </div>
            <div class="card-footer">
              <div class="status-tag">
                <el-tag size="small"
                        :type="process.isQuality ? 'warning' : 'info'">
                  {{ process.isQuality ? '质检' : '非质检' }}
                </el-tag>
                <el-tag size="small"
                        style="margin-left: 8px"
                        :type="process.isProduction ? 'warning' : 'info'">
                  {{ process.isProduction ? '生产' : '不生产' }}
                </el-tag>
                <el-tag v-if="process.type !== null && process.type !== undefined"
                        size="small"
                        :type="process.type == 1 ? 'primary' : 'success'"
                        style="margin-left: 8px">
                  {{ process.type == 0 ? '计时' : '计件' }}
                </el-tag>
              </div>
              <span class="param-count">工资定额: Â¥{{ process.salaryQuota || 0 }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- å³ä¾§å‚数列表 -->
      <div class="param-list-section">
        <div class="section-header">
          <h3 class="section-title">
            {{ selectedProcess ? selectedProcess.name + ' - å‚数配置' : '请选择工序' }}
          </h3>
          <el-button type="primary"
                     size="small"
                     :disabled="!selectedProcess"
                     @click="openParamDialog">
            <el-icon>
              <Plus />
            </el-icon>选择参数
          </el-button>
        </div>
        <div class="param-table-wrapper">
          <PIMTable v-if="selectedProcess"
                    rowKey="id"
                    :column="paramColumn"
                    :tableData="paramList"
                    :page="paramPage2"
                    height="calc(100vh - 280px)"
                    :isSelection="false"
                    @pagination="handleParamPagination" />
          <div v-else
               class="empty-tip">
            <el-empty description="请从左侧选择一个工序" />
          </div>
        </div>
      </div>
    </div>
    <!-- å·¥åºæ–°å¢ž/编辑对话框 -->
    <el-dialog v-model="processDialogVisible"
               :title="isProcessEdit ? '编辑工序' : '新增工序'"
               width="500px">
      <el-form :model="processForm"
               :rules="processRules"
               ref="processFormRef"
               label-width="100px">
        <el-form-item label="工序编码"
                      prop="no">
          <el-input v-model="processForm.no"
                    placeholder="请输入工序编码" />
        </el-form-item>
        <el-form-item label="工序名称"
                      prop="name">
          <el-input v-model="processForm.name"
                    placeholder="请输入工序名称" />
        </el-form-item>
        <el-form-item label="工资定额"
                      prop="salaryQuota">
          <el-input v-model="processForm.salaryQuota"
                    type="number"
                    :step="0.001" />
        </el-form-item>
        <el-form-item label="是否质检"
                      prop="isQuality">
          <el-switch v-model="processForm.isQuality" />
        </el-form-item>
        <el-form-item label="是否生产"
                      prop="isProduction">
          <el-switch v-model="processForm.isProduction" />
        </el-form-item>
        <el-form-item label="计费类型"
                      prop="type">
          <el-radio-group v-model="processForm.type">
            <el-radio :label="0">计时</el-radio>
            <el-radio :label="1">计件</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="关联设备"
                      prop="deviceLedgerId">
          <el-select v-model="processForm.deviceLedgerId"
                     placeholder="请选择设备"
                     clearable
                     filterable
                     style="width: 100%">
            <el-option v-for="item in deviceOptions"
                       :key="item.id"
                       :label="item.deviceName"
                       :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="工序描述"
                      prop="remark">
          <el-input v-model="processForm.remark"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入工序描述" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary"
                     @click="handleProcessSubmit">确定</el-button>
          <el-button @click="processDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- é€‰æ‹©å‚数对话框 -->
    <el-dialog v-model="paramDialogVisible"
               title="选择参数"
               width="1000px">
      <div class="param-select-container">
        <!-- å·¦ä¾§å‚数列表 -->
        <div class="param-list-area">
          <div class="area-title">可选参数</div>
          <div class="search-box">
            <el-input v-model="paramSearchKeyword"
                      placeholder="请输入参数名称搜索"
                      clearable
                      size="small"
                      @input="handleSelectParam">
              <template #prefix>
                <el-icon>
                  <Search />
                </el-icon>
              </template>
            </el-input>
          </div>
          <el-table :data="filteredParamList"
                    height="300"
                    border
                    highlight-current-row
                    @current-change="handleParamSelect">
            <el-table-column prop="paramName"
                             label="参数名称" />
            <el-table-column prop="paramType"
                             label="参数类型">
              <template #default="scope">
                <el-tag size="small"
                        :type="getParamTypeTag(scope.row.paramType)">
                  {{ getParamTypeText(scope.row.paramType) }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
          <!-- åˆ†é¡µæŽ§ä»¶ -->
          <div class="pagination-container"
               style="margin-top: 10px;">
            <el-pagination v-model:current-page="paramPage.current"
                           v-model:page-size="paramPage.size"
                           :page-sizes="[10, 20, 50, 100]"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="paramPage.total"
                           @size-change="handleParamSizeChange"
                           @current-change="handleParamCurrentChange"
                           size="small" />
          </div>
        </div>
        <!-- å³ä¾§å‚数详情 -->
        <div class="param-detail-area">
          <div class="area-title">参数详情</div>
          <el-form v-if="selectedParam"
                   :model="selectedParam"
                   label-width="100px"
                   class="param-detail-form">
            <el-form-item label="参数名称">
              <span class="detail-text">{{ selectedParam.paramName }}</span>
            </el-form-item>
            <el-form-item label="参数类型">
              <el-tag size="small"
                      :type="getParamTypeTag(selectedParam.paramType)">
                {{ getParamTypeText(selectedParam.paramType) }}
              </el-tag>
            </el-form-item>
            <el-form-item label="参数格式">
              <span class="detail-text">{{ selectedParam.paramFormat || '-' }}</span>
            </el-form-item>
            <el-form-item label="单位">
              <span class="detail-text">{{ selectedParam.unit || '-' }}</span>
            </el-form-item>
            <el-form-item label="标准值">
              <el-input v-model="selectedParam.standardValue"
                        @input="val => onStandardValueInput(val, selectedParam)"
                        placeholder="请输入默认值" />
            </el-form-item>
          </el-form>
          <el-empty v-else
                    description="请从左侧选择参数" />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary"
                     :disabled="!selectedParam"
                     @click="handleParamSubmit">确定</el-button>
          <el-button @click="paramDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- ç¼–辑参数对话框 -->
    <el-dialog v-model="editParamDialogVisible"
               title="编辑参数"
               width="600px">
      <el-form :model="editParamForm"
               :rules="editParamRules"
               ref="editParamFormRef"
               label-width="120px">
        <el-form-item label="参数名称">
          <span class="detail-text">{{ editParamForm.paramName }}</span>
        </el-form-item>
        <el-form-item label="标准值"
                      prop="standardValue">
          <el-input v-model="editParamForm.standardValue"
                    @input="val => onStandardValueInput(val, editParamForm)"
                    placeholder="请输入标准值" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary"
                     @click="handleEditParamSubmit">确定</el-button>
          <el-button @click="editParamDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref, reactive, computed, onMounted } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { Plus, Edit, Delete, Search } from "@element-plus/icons-vue";
  import PIMTable from "@/components/PIMTable/PIMTable.vue";
  import { listType } from "@/api/system/dict/type";
  import {
    add,
    update,
    del,
    list as getProcessListApi,
    processList,
    getProcessParamList,
    addProcessParam,
    editProcessParam,
    deleteProcessParam,
  } from "@/api/productionManagement/productionProcess.js";
  import { getDeviceLedger } from "@/api/equipmentManagement/ledger";
  import { getBaseParamList } from "@/api/basicData/parameterMaintenance.js";

  // å·¥åºåˆ—表数据
  const processValueList = ref([]);
  const selectedProcess = ref(null);
  const processLoading = ref(false);
  const deviceOptions = ref([]);

  // å·¥åºå·²é€‰å‚数表格分页（接口一次返回全量）
  const paramPage2 = ref({
    current: 1,
    size: 10,
    total: 0,
  });
  const paramListRaw = ref([]);
  const paramList = computed(() => {
    const all = paramListRaw.value;
    const { current, size } = paramPage2.value;
    const start = (current - 1) * size;
    return all.slice(start, start + size);
  });
  const paramLoading = ref(false);

  // æ•°æ®å­—å…¸
  const dictTypes = ref([]);

  // å·¥åºå¯¹è¯æ¡†
  const processDialogVisible = ref(false);
  const isProcessEdit = ref(false);
  const processFormRef = ref(null);
  const processForm = reactive({
    id: null,
    no: "",
    name: "",
    salaryQuota: null,
    isQuality: false,
    isProduction: false,
    remark: "",
    deviceLedgerId: null,
    type: 0,
  });
  const processRules = {
    no: [{ required: true, message: "请输入工序编码", trigger: "blur" }],
    name: [{ required: true, message: "请输入工序名称", trigger: "blur" }],
    salaryQuota: [
      {
        required: false,
        message: "请输入工资定额",
        trigger: "blur",
        validator: (rule, value, callback) => {
          if (isNaN(value) || value < 0) {
            callback(new Error("工资定额必须是非负数字"));
          } else {
            callback();
          }
        },
      },
    ],
    deviceLedgerId: [
      { required: false, message: "请选择设备", trigger: "change" },
    ],
    type: [{ required: false, message: "请选择计费类型", trigger: "change" }],
  };

  // å‚数对话框
  const paramDialogVisible = ref(false);
  const availableParamList = ref([]);
  const filteredParamList = ref([]);
  const selectedParam = ref(null);
  const paramSearchKeyword = ref("");

  // å¯é€‰å‚数分页
  const paramPage = reactive({
    current: 1,
    size: 10,
    total: 0,
  });

  // ç¼–辑参数对话框
  const editParamDialogVisible = ref(false);
  const editParamFormRef = ref(null);
  const editParamForm = reactive({
    id: null,
    technologyOperationId: null,
    technologyParamId: null,
    paramName: "",
    standardValue: null,
    paramType: null,
  });

  const onStandardValueInput = (val, target) => {
    const data = target.value || target;
    const type = data.paramType;
    if (type === 1) {
      // æ•°å€¼æ ¼å¼ï¼šä¸èƒ½è¾“入中文或英文字符
      data.standardValue = val.replace(/[a-zA-Z\u4e00-\u9fa5]/g, "");
    }
  };

  const editParamRules = {
    standardValue: [
      {
        required: true,
        message: "请输入标准值",
        trigger: "blur",
        validator: (rule, value, callback) => {
          if (value === null || value === undefined || value === "") {
            callback(new Error("请输入标准值"));
          } else {
            const type = editParamForm.paramType;
            if (type === 1 && value) {
              if (/[a-zA-Z\u4e00-\u9fa5]/.test(value)) {
                return callback(new Error("数值格式不能包含中英文字符"));
              }
            }
            callback();
          }
        },
      },
    ],
  };

  // å‚数表格列配置
  const paramColumn = ref([
    {
      label: "参数名称",
      prop: "paramName",
    },
    {
      label: "参数类型",
      prop: "paramType",
      dataType: "tag",
      formatType: params => {
        const typeMap = {
          1: "primary",
          2: "info",
          3: "warning",
          4: "success",
        };
        return typeMap[params] || "default";
      },
      formatData: val => {
        const labelMap = {
          1: "数值格式",
          2: "文本格式",
          3: "下拉选项",
          4: "时间格式",
        };
        return labelMap[val] || val;
      },
    },
    {
      label: "取值格式",
      prop: "paramFormat",
    },
    {
      label: "标准值",
      prop: "standardValue",
    },
    {
      label: "单位",
      prop: "unit",
    },
    {
      label: "操作",
      dataType: "action",
      width: "150",
      operation: [
        {
          name: "编辑",
          clickFun: row => handleEditParam(row),
        },
        {
          name: "删除",
          clickFun: row => handleDeleteParam(row),
        },
      ],
    },
  ]);

  // èŽ·å–工序列表
  const getProcessList = () => {
    processLoading.value = true;
    getProcessListApi({ size: -1, current: -1 })
      .then(res => {
        processValueList.value = res.data.records || [];
        console.log(
          processValueList.value,
          "reprocessValueList.value==========s"
        );
      })
      .catch(() => {
        ElMessage.error("获取工序列表失败");
      })
      .finally(() => {
        processLoading.value = false;
      });
  };

  const loadDeviceName = async () => {
    try {
      const { data } = await getDeviceLedger();
      deviceOptions.value = data || [];
    } catch (error) {
      console.error("加载设备列表失败", error);
    }
  };

  // èŽ·å–参数列表
  const getParamList = processId => {
    paramLoading.value = true;
    getProcessParamList({ technologyOperationId: processId })
      .then(res => {
        const list = res.data || [];
        paramListRaw.value = Array.isArray(list) ? list : [];
        paramPage2.value.total = paramListRaw.value.length;
        const maxPage = Math.max(
          1,
          Math.ceil(paramPage2.value.total / paramPage2.value.size) || 1
        );
        if (paramPage2.value.current > maxPage) {
          paramPage2.value.current = maxPage;
        }
      })
      .catch(() => {
        ElMessage.error("获取参数列表失败");
      })
      .finally(() => {
        paramLoading.value = false;
      });
  };

  // é€‰æ‹©å·¥åº
  const selectProcess = process => {
    selectedProcess.value = process;
    paramPage2.value.current = 1;
    getParamList(process.id);
  };

  // å·¥åºæ“ä½œ
  const handleAddProcess = () => {
    isProcessEdit.value = false;
    processForm.id = null;
    processForm.no = "";
    processForm.name = "";
    processForm.salaryQuota = null;
    processForm.isQuality = false;
    processForm.isProduction = false;
    processForm.remark = "";
    processForm.deviceLedgerId = null;
    processForm.type = 0;
    processDialogVisible.value = true;
  };

  const handleEditProcess = async process => {
    isProcessEdit.value = true;
    processForm.id = process.id;
    processForm.no = process.no;
    processForm.name = process.name;
    processForm.salaryQuota = process.salaryQuota;
    processForm.isQuality = !!process.isQuality;
    processForm.isProduction = !!process.isProduction;
    processForm.remark = process.remark || "";
    // å¦‚果设备 ID ä¸º 0 æˆ–者在设备列表中找不到，则回显为空（null）
    const deviceId = Number(process.deviceLedgerId);
    const hasDevice = deviceOptions.value.some(item => item.id === deviceId);
    processForm.deviceLedgerId = deviceId && hasDevice ? deviceId : null;
    processForm.type = process.type;
    processDialogVisible.value = true;
  };

  const handleDeleteProcess = process => {
    ElMessageBox.confirm("确定要删除该工序吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      del([process.id])
        .then(() => {
          ElMessage.success("删除成功");
          getProcessList();
          if (selectedProcess.value?.id === process.id) {
            selectedProcess.value = null;
            paramListRaw.value = [];
            paramPage2.value.total = 0;
          }
        })
        .catch(() => {
          ElMessage.error("删除失败");
        });
    });
  };

  const handleProcessSubmit = () => {
    processFormRef.value.validate(valid => {
      if (valid) {
        if (processForm.id) {
          update(processForm)
            .then(() => {
              ElMessage.success("编辑成功");
              processDialogVisible.value = false;
              getProcessList();
            })
            .catch(() => {
              ElMessage.error("编辑失败");
            });
        } else {
          add(processForm)
            .then(() => {
              ElMessage.success("新增成功");
              processDialogVisible.value = false;
              getProcessList();
            })
            .catch(() => {
              ElMessage.error("新增失败");
            });
        }
      }
    });
  };
  const openParamDialog = () => {
    paramSearchKeyword.value = "";
    if (!selectedProcess.value) {
      ElMessage.warning("请先选择一个工序");
      return;
    }
    // èŽ·å–可选参数列表
    getBaseParamList({
      paramName: paramSearchKeyword.value,
      current: paramPage.current,
      size: paramPage.size,
    }).then(res => {
      if (res.code === 200) {
        filteredParamList.value = res.data?.records || [];
        paramPage.total = res.data?.total || 0;
      } else {
        ElMessage.error(res.msg || "查询失败");
      }
    });
    console.log(filteredParamList.value, "可选参数列表");
    selectedParam.value = null;
    paramDialogVisible.value = true;
  };

  // å‚数操作
  const handleSelectParam = () => {
    if (!selectedProcess.value) {
      ElMessage.warning("请先选择一个工序");
      return;
    }
    // èŽ·å–可选参数列表
    getBaseParamList({
      paramName: paramSearchKeyword.value,
      current: paramPage.current,
      size: paramPage.size,
    }).then(res => {
      if (res.code === 200) {
        filteredParamList.value = res.data?.records || [];
        paramPage.total = res.data?.total || 0;
      } else {
        ElMessage.error(res.msg || "查询失败");
      }
    });
    console.log(filteredParamList.value, "可选参数列表");
    selectedParam.value = null;
    paramDialogVisible.value = true;
  };

  const handleParamSelect = row => {
    selectedParam.value = row;
  };

  const handleParamSearch = () => {
    // é‡ç½®åˆ†é¡µ
    paramPage.current = 1;
    // é‡æ–°åŠ è½½æ•°æ®
    handleSelectParam();
  };

  // å¤„理分页大小变化
  const handleParamSizeChange = size => {
    paramPage.size = size;
    handleSelectParam();
  };

  // å¤„理当前页码变化
  const handleParamCurrentChange = current => {
    paramPage.current = current;
    handleSelectParam();
  };
  const getParamTypeText = type => {
    const typeMap = {
      1: "数值格式",
      2: "文本格式",
      3: "下拉选项",
      4: "时间格式",
    };
    return typeMap[type] || "未知参数类型";
  };
  const getParamTypeTag = type => {
    const typeMap = {
      1: "primary",
      2: "info",
      3: "warning",
      4: "success",
    };
    return typeMap[type] || "default";
  };

  const handleDeleteParam = row => {
    ElMessageBox.confirm("确定要删除该参数吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      deleteProcessParam(row.id)
        .then(() => {
          ElMessage.success("删除成功");
          getParamList(selectedProcess.value.id);
        })
        .catch(() => {
          ElMessage.error("删除失败");
        });
    });
  };

  const handleEditParam = row => {
    editParamForm.id = row.id;
    editParamForm.technologyOperationId = row.technologyOperationId;
    editParamForm.technologyParamId = row.technologyParamId;
    editParamForm.paramName = row.paramName;
    editParamForm.standardValue = row.standardValue;
    editParamForm.paramType = row.paramType;
    editParamDialogVisible.value = true;
  };

  const handleEditParamSubmit = () => {
    editParamFormRef.value.validate(valid => {
      if (valid) {
        editProcessParam(editParamForm)
          .then(() => {
            ElMessage.success("编辑成功");
            editParamDialogVisible.value = false;
            getParamList(selectedProcess.value.id);
          })
          .catch(() => {
            ElMessage.error("编辑失败");
          });
      }
    });
  };

  const handleParamSubmit = () => {
    if (!selectedParam.value) {
      ElMessage.warning("请先选择一个参数");
      return;
    }
    addProcessParam({
      technologyOperationId: selectedProcess.value.id,
      technologyParamId: selectedParam.value.id,
      standardValue: selectedParam.value.standardValue,
    })
      .then(() => {
        ElMessage.success("添加成功");
        paramDialogVisible.value = false;
        getParamList(selectedProcess.value.id);
      })
      .catch(() => {
        ElMessage.error("添加失败");
      });
  };

  const handleParamPagination = obj => {
    paramPage2.value.current = obj.page;
    paramPage2.value.size = obj.limit;
  };

  // èŽ·å–数据字典
  const getDictTypes = () => {
    listType({ pageNum: 1, pageSize: 1000 }).then(res => {
      dictTypes.value = res.rows || [];
    });
  };

  onMounted(() => {
    loadDeviceName();
    getProcessList();
    getDictTypes();
  });
</script>

<style scoped lang="scss">
  .app-container {
    padding: 20px;
    background-color: #f0f2f5;
    min-height: calc(100vh - 84px);
  }

  .process-config-container {
    display: flex;
    gap: 20px;
    height: calc(100vh - 124px);
  }

  // å·¦ä¾§å·¥åºåˆ—表
  .process-list-section {
    width: 370px;
    min-width: 370px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #ebeef5;

    .section-title {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  .process-card-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
  }

  .process-card {
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }

    &.active {
      border-color: #409eff;
      background: #f5f7fa;
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;

      .process-code {
        font-size: 12px;
        // color: #909399;
        color: #cb9b18;
        font-family: "Courier New", monospace;
      }

      .card-actions {
        display: flex;
        gap: 4px;

        .el-button {
          padding: 4px;
        }
      }
    }

    .card-body {
      margin-bottom: 12px;

      .process-name {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 4px;
      }

      .process-desc {
        font-size: 12px;
        color: #909399;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 4px;
      }

      .process-device {
        font-size: 12px;
        color: #606266;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .param-count {
        font-size: 12px;
        color: #606266;
      }
    }
  }

  // å³ä¾§å‚数列表
  .param-list-section {
    flex: 1;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .param-table-wrapper {
    flex: 1;
    padding: 0 20px 20px;
    overflow: auto;
    min-width: 100%;
  }

  /* è¡¨æ ¼æ¨ªå‘滚动 */
  .param-table-wrapper :deep(.el-table) {
    min-width: 100%;
  }

  .param-table-wrapper :deep(.el-table__body-wrapper) {
    overflow-x: auto;
  }

  .pagination-container {
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .pagination-container .el-pagination {
    white-space: nowrap;
  }

  /* å“åº”式调整 */
  @media screen and (max-width: 768px) {
    .pagination-container {
      font-size: 12px;
    }

    .pagination-container .el-pagination__sizes {
      margin-right: 8px;
    }

    .pagination-container .el-pagination__jump {
      margin-left: 8px;
    }

    .pagination-container .el-pagination__page-size {
      font-size: 12px;
    }
  }

  .empty-tip {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // è¡¨æ ¼æ ·å¼
  :deep(.el-table) {
    border: none;
    border-radius: 6px;
    overflow: hidden;

    .el-table__header-wrapper {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

      th {
        background: transparent;
        font-weight: 600;
        // color: #ffffff;
        border-bottom: none;
        padding: 16px 0;
      }
    }

    .el-table__body-wrapper {
      tr {
        transition: all 0.3s ease;

        &:hover {
          background: linear-gradient(
            90deg,
            rgba(102, 126, 234, 0.05) 0%,
            rgba(118, 75, 162, 0.05) 100%
          );
        }

        td {
          border-bottom: 1px solid #f0f0f0;
          padding: 14px 0;
          color: #303133;
        }
      }
    }
  }

  // ç¼–码单元格样式
  :deep(.code-cell) {
    color: #e6a23c;
    font-family: "Courier New", monospace;
    font-weight: 500;
  }

  // æ•°å€¼å•å…ƒæ ¼æ ·å¼
  :deep(.quantity-cell) {
    font-weight: 600;
    color: #409eff;
    font-family: "Courier New", monospace;
  }

  // é€‰æ‹©å‚数对话框样式
  .param-select-container {
    display: flex;
    gap: 20px;
    height: 450px;

    .param-list-area {
      // flex: 1;
      width: 380px;
      display: flex;
      flex-direction: column;

      .area-title {
        font-size: 14px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid #ebeef5;
      }

      .search-box {
        margin-bottom: 12px;

        .el-input {
          width: 100%;
        }
      }
    }

    .param-detail-area {
      // width: 380px;
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #f5f7fa;
      border-radius: 8px;
      padding: 16px;

      .area-title {
        font-size: 14px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #ebeef5;
      }

      .param-detail-form {
        .el-form-item {
          margin-bottom: 12px;

          .el-form-item__label {
            color: #606266;
            font-weight: 500;
          }
        }

        .detail-text {
          color: #303133;
          font-weight: 500;
        }
      }
    }
  }
</style>