From 2561b64614bce4825141b9d095b256109f732e91 Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期三, 22 四月 2026 10:04:37 +0800
Subject: [PATCH] Merge branch 'dev_河南_鹤壁天沐玻璃厂' of http://114.132.189.42:9002/r/product-inventory-management into dev_河南_鹤壁天沐玻璃厂

---
 src/views/qualityManagement/rawMaterialInspection/components/formDia.vue |  511 +++++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 files changed, 460 insertions(+), 51 deletions(-)

diff --git a/src/views/qualityManagement/rawMaterialInspection/components/formDia.vue b/src/views/qualityManagement/rawMaterialInspection/components/formDia.vue
index 32192c0..a61c4d8 100644
--- a/src/views/qualityManagement/rawMaterialInspection/components/formDia.vue
+++ b/src/views/qualityManagement/rawMaterialInspection/components/formDia.vue
@@ -14,6 +14,7 @@
                   v-model="form.supplier"
                   placeholder="璇烽�夋嫨"
                   clearable
+                  :disabled="supplierQuantityDisabled"
               >
                 <el-option
                     v-for="item in supplierList"
@@ -34,6 +35,7 @@
                   @change="getModels"
                   :data="productOptions"
                   :render-after-expand="false"
+                  :disabled="operationType === 'edit'"
                   style="width: 100%"
               />
             </el-form-item>
@@ -41,45 +43,75 @@
         </el-row>
         <el-row :gutter="30">
           <el-col :span="12">
-            <el-form-item label="瑙勬牸鍨嬪彿锛�" prop="model">
-              <el-input v-model="form.model" placeholder="璇疯緭鍏�" clearable/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="30">
-          <el-col :span="12">
-            <el-form-item label="鍗曚綅锛�" prop="unit">
-              <el-input v-model="form.unit" placeholder="璇疯緭鍏�" clearable/>
+            <el-form-item label="瑙勬牸鍨嬪彿锛�" prop="productModelId">
+              <el-select v-model="form.productModelId" placeholder="璇烽�夋嫨" clearable :disabled="operationType === 'edit'"
+                         filterable readonly @change="handleChangeModel">
+                <el-option v-for="item in modelOptions" :key="item.id" :label="item.model" :value="item.id" />
+              </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="鏁伴噺锛�" prop="quantity">
-              <el-input v-model="form.quantity" placeholder="璇疯緭鍏�" clearable/>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="30">
-          <el-col :span="12">
-            <el-form-item label="妫�娴嬪崟浣嶏細" prop="checkCompany">
-              <el-input v-model="form.checkCompany" placeholder="璇疯緭鍏�" clearable/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="妫�娴嬬粨鏋滐細" prop="checkResult">
-              <el-select v-model="form.checkResult">
-                <el-option label="鍚堟牸" value="鍚堟牸" />
-                <el-option label="涓嶅悎鏍�" value="涓嶅悎鏍�" />
+            <el-form-item label="鎸囨爣閫夋嫨锛�" prop="testStandardId">
+              <el-select
+                v-model="form.testStandardId"
+                placeholder="璇烽�夋嫨鎸囨爣"
+                clearable
+                @change="handleTestStandardChange"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in testStandardOptions"
+                  :key="item.id"
+                  :label="item.standardName || item.standardNo"
+                  :value="item.id"
+                />
               </el-select>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="30">
           <el-col :span="12">
-            <el-form-item label="妫�楠屽憳锛�" prop="checkName">
-              <el-input v-model="form.checkName" placeholder="璇疯緭鍏�" clearable/>
-            
+            <el-form-item label="鍗曚綅锛�" prop="unit">
+              <el-input v-model="form.unit" placeholder="鑷姩甯﹀嚭" readonly class="readonly-display"/>
             </el-form-item>
           </el-col>
+          <el-col :span="12">
+            <el-form-item label="鍘氬害锛�" prop="thickness">
+              <el-input v-model="form.thickness" placeholder="鑷姩甯﹀嚭" readonly class="readonly-display"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="鏁伴噺锛�" prop="quantity">
+              <el-input-number :step="0.01" :min="0" style="width: 100%" v-model="form.quantity" placeholder="璇疯緭鍏�"
+                               clearable :precision="2" :disabled="supplierQuantityDisabled"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="妫�娴嬪崟浣嶏細" prop="checkCompany">
+              <el-input v-model="form.checkCompany" placeholder="璇疯緭鍏�" clearable/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
+          <el-col :span="12">
+            <el-form-item label="妫�娴嬬粨鏋滐細" prop="checkResult">
+              <el-select v-model="form.checkResult">
+                <el-option label="鍚堟牸" value="鍚堟牸"/>
+                <el-option label="涓嶅悎鏍�" value="涓嶅悎鏍�"/>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="妫�楠屽憳锛�" prop="checkName">
+              <el-select v-model="form.checkName" placeholder="璇烽�夋嫨" clearable style="width: 100%">
+                <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName" :value="item.nickName"/>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="30">
           <el-col :span="12">
             <el-form-item label="妫�娴嬫棩鏈燂細" prop="checkTime">
               <el-date-picker
@@ -94,7 +126,62 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row :gutter="30">
+          <el-col :span="24">
+            <el-form-item>
+              <template #label>
+                <div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
+                  <span>瀹℃壒浜洪�夋嫨锛�</span>
+                  <el-button type="primary"
+                             size="small"
+                             @click="addApproverNode"
+                             icon="Plus">鏂板鑺傜偣</el-button>
+                </div>
+              </template>
+              <div class="approver-nodes-container">
+                <div v-for="(node, index) in approverNodes"
+                     :key="node.id"
+                     class="approver-node-item">
+                  <div class="approver-node-header">
+                    <span class="approver-node-label">瀹℃壒鑺傜偣 {{ index + 1 }}</span>
+                    <el-button v-if="approverNodes.length > 1"
+                               type="danger"
+                               size="small"
+                               text
+                               @click="removeApproverNode(index)"
+                               icon="Delete">鍒犻櫎</el-button>
+                  </div>
+                  <el-select v-model="node.userId"
+                             placeholder="璇烽�夋嫨瀹℃壒浜�"
+                             filterable
+                             style="width: 100%">
+                    <el-option
+                      v-for="item in approverList"
+                      :key="item.userId"
+                      :label="item.userName"
+                      :value="item.userId"
+                    />
+                  </el-select>
+                </div>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
+<!--      <div style="margin-bottom: 10px;text-align: right">-->
+<!--        <el-button type="danger" plain @click="handleDelete">鍒犻櫎</el-button>-->
+<!--      </div>-->
+      <PIMTable
+          rowKey="id"
+          :column="tableColumn"
+          :tableData="tableData"
+          :tableLoading="tableLoading"
+          height="400"
+      >
+        <template #slot="{ row }">
+          <el-input v-model="row.testValue" clearable/>
+        </template>
+      </PIMTable>
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="submitForm">纭</el-button>
@@ -106,11 +193,16 @@
 </template>
 
 <script setup>
-import {ref} from "vue";
+import {ref, reactive, toRefs, computed, getCurrentInstance, nextTick} from "vue";
 import {getOptions} from "@/api/procurementManagement/procurementLedger.js";
-import {productTreeList} from "@/api/basicData/product.js";
+import {modelList, productTreeList} from "@/api/basicData/product.js";
 import {qualityInspectAdd, qualityInspectUpdate} from "@/api/qualityManagement/rawMaterialInspection.js";
-const { proxy } = getCurrentInstance()
+import {qualityInspectParamDel, qualityInspectParamInfo} from "@/api/qualityManagement/qualityInspectParam.js";
+import {qualityInspectDetailByProductId, getQualityTestStandardParamByTestStandardId} from "@/api/qualityManagement/metricMaintenance.js";
+import {userListNoPage} from "@/api/system/user.js";
+import { approveUserList } from "@/api/collaborativeApproval/approvalProcess.js";
+
+const {proxy} = getCurrentInstance()
 const emit = defineEmits(['close'])
 
 const dialogFormVisible = ref(false);
@@ -122,48 +214,232 @@
     checkName: "",
     productName: "",
     productId: "",
+    productModelId: "",
     model: "",
+    testStandardId: "",
     unit: "",
+    thickness: "",
     quantity: "",
     checkCompany: "",
     checkResult: "",
+    reviewName: "",
   },
   rules: {
-    checkTime: [{ required: false, message: "璇疯緭鍏�", trigger: "blur" },],
-    supplier: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
-    checkName: [{ required: false, message: "璇疯緭鍏�", trigger: "blur" }],
-    productId: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
-    model: [{ required: false, message: "璇疯緭鍏�", trigger: "blur" }],
-    unit: [{ required: false, message: "璇疯緭鍏�", trigger: "blur" }],
-    quantity: [{ required: true, message: "璇疯緭鍏�", trigger: "blur" }],
-    checkCompany: [{ required: false, message: "璇疯緭鍏�", trigger: "blur" }],
-    checkResult: [{ required: false, message: "璇疯緭鍏�", trigger: "blur" }],
+    checkTime: [{required: true, message: "璇疯緭鍏�", trigger: "blur"},],
+    supplier: [{required: true, message: "璇疯緭鍏�", trigger: "blur"}],
+    checkName: [{required: false, message: "璇疯緭鍏�", trigger: "blur"}],
+    productId: [{required: true, message: "璇疯緭鍏�", trigger: "blur"}],
+    productModelId: [{required: true, message: "璇烽�夋嫨浜у搧鍨嬪彿", trigger: "change"}],
+    testStandardId: [{required: false, message: "璇烽�夋嫨鎸囨爣", trigger: "change"}],
+    unit: [{required: false, message: "璇疯緭鍏�", trigger: "blur"}],
+    thickness: [{required: false, message: "璇疯緭鍏�", trigger: "blur"}],
+    quantity: [{required: true, message: "璇疯緭鍏�", trigger: "blur"}],
+    checkCompany: [{required: false, message: "璇疯緭鍏�", trigger: "blur"}],
+    checkResult: [{required: true, message: "璇烽�夋嫨妫�娴嬬粨鏋�", trigger: "change"}],
   },
 });
-const { form, rules } = toRefs(data);
+const tableColumn = ref([
+  {
+    label: "鎸囨爣",
+    prop: "parameterItem",
+  },
+  {
+    label: "鍗曚綅",
+    prop: "unit",
+  },
+  {
+    label: "鏍囧噯鍊�",
+    prop: "standardValue",
+  },
+  {
+    label: "鍐呮帶鍊�",
+    prop: "controlValue",
+  },
+  {
+    label: "妫�楠屽��",
+    prop: "testValue",
+    dataType: 'slot',
+    slot: 'slot',
+  },
+]);
+const tableData = ref([]);
+const tableLoading = ref(false);
+
+const {form, rules} = toRefs(data);
 const supplierList = ref([]);
 const productOptions = ref([]);
+const currentProductId = ref(0);
+const testStandardOptions = ref([]); // 鎸囨爣閫夋嫨涓嬫媺妗嗘暟鎹�
+const modelOptions = ref([]);
+const userList = ref([]); // 妫�楠屽憳涓嬫媺鍒楄〃
+const approverList = ref([]); // 瀹℃壒浜轰笅鎷夊垪琛�
+const approverNodes = ref([{ id: 1, userId: null }]);
+let nextApproverId = 2;
+const addApproverNode = () => {
+  approverNodes.value.push({ id: nextApproverId++, userId: null });
+};
+const removeApproverNode = index => {
+  approverNodes.value.splice(index, 1);
+};
+
+// 缂栬緫鏃讹細productMainId 鎴� purchaseLedgerId 浠讳竴鏈夊�煎垯渚涘簲鍟嗐�佹暟閲忕疆鐏�
+const supplierQuantityDisabled = computed(() => {
+  const v = form.value || {};
+  return !!(v.productMainId != null || v.purchaseLedgerId != null);
+});
 
 // 鎵撳紑寮规
-const openDialog = (type, row) => {
+const openDialog = async (type, row) => {
   operationType.value = type;
-  dialogFormVisible.value = true;
   getOptions().then((res) => {
     supplierList.value = res.data;
   });
-  getProductOptions();
-  if (operationType.value === 'edit') {
-    form.value = {...row}
+
+  try {
+    const userRes = await userListNoPage();
+    userList.value = userRes.data || [];
+    const approverRes = await approveUserList({ approveType: 9 });
+    approverList.value = approverRes.data || [];
+  } catch (e) {
+    console.error("鍔犺浇浜哄憳鍒楄〃澶辫触", e);
+    userList.value = [];
+    approverList.value = [];
   }
+  // 鍏堥噸缃〃鍗曟暟鎹紙淇濇寔瀛楁瀹屾暣锛岄伩鍏嶅脊绐楅娆℃覆鏌撴椂瑙﹀彂蹇呭~绾㈡鈥滈棯涓�涓嬧�濓級
+	form.value = {
+    checkTime: "",
+    supplier: "",
+    checkName: "",
+    productName: "",
+    productId: "",
+    productModelId: "",
+    model: "",
+    testStandardId: "",
+    unit: "",
+    thickness: "",
+    quantity: "",
+    checkCompany: "",
+    checkResult: "",
+    reviewName: "",
+  }
+  approverNodes.value = [{ id: 1, userId: null }];
+  nextApproverId = 2;
+  testStandardOptions.value = [];
+  tableData.value = [];
+  // 鍏堢‘淇濅骇鍝佹爲宸插姞杞斤紝鍚﹀垯缂栬緫鏃朵骇鍝�/瑙勬牸鍨嬪彿鏃犳硶鍙嶆樉
+  await getProductOptions();
+  if (operationType.value === 'edit') {
+    // 鍏堜繚瀛� testStandardId锛岄伩鍏嶈娓呯┖
+    const savedTestStandardId = row.testStandardId;
+    form.value = {...row}
+    if (form.value.approveUserIds) {
+      const ids = String(form.value.approveUserIds)
+        .split(",")
+        .map(id => id.trim())
+        .filter(Boolean);
+      if (ids.length > 0) {
+        approverNodes.value = ids.map((id, index) => ({
+          id: index + 1,
+          userId: Number(id),
+        }));
+        nextApproverId = ids.length + 1;
+      }
+    } else if (form.value.reviewName) {
+      const matchedReviewer = approverList.value.find(item => item.userName === form.value.reviewName);
+      if (matchedReviewer?.userId) {
+        approverNodes.value = [{ id: 1, userId: matchedReviewer.userId }];
+        nextApproverId = 2;
+      }
+    }
+    currentProductId.value = row.productId || 0
+    // 鍏抽敭锛氱紪杈戞椂鍔犺浇瑙勬牸鍨嬪彿涓嬫媺閫夐」锛屾墠鑳藉弽鏄� productModelId
+    if (currentProductId.value) {
+      try {
+        const res = await modelList({ id: currentProductId.value });
+        modelOptions.value = res || [];
+        // 鍚屾鍥炲~ model / unit锛堟湁浜涙帴鍙h繑鍥炵殑 row 閲屽彲鑳芥病甯﹀叏锛�
+        if (form.value.productModelId) {
+          handleChangeModel(form.value.productModelId);
+        }
+      } catch (e) {
+        console.error("鍔犺浇瑙勬牸鍨嬪彿澶辫触", e);
+        modelOptions.value = [];
+      }
+    }
+    // 缂栬緫妯″紡涓嬶紝鍏堝姞杞芥寚鏍囬�夐」锛岀劧鍚庡姞杞藉弬鏁板垪琛�
+    if (currentProductId.value) {
+      // 鍏堝姞杞芥寚鏍囬�夐」
+      let params = {
+        productId: currentProductId.value,
+        inspectType: 0
+      }
+      qualityInspectDetailByProductId(params).then(res => {
+        testStandardOptions.value = res.data || [];
+        // 浣跨敤 nextTick 鍜� setTimeout 纭繚閫夐」宸茬粡娓叉煋鍒� DOM
+        nextTick(() => {
+          setTimeout(() => {
+            // 濡傛灉缂栬緫鏁版嵁涓湁 testStandardId锛屽垯璁剧疆骞跺姞杞藉搴旂殑鍙傛暟
+            if (savedTestStandardId) {
+              // 纭繚绫诲瀷鍖归厤锛坕tem.id 鍙兘鏄暟瀛楁垨瀛楃涓诧級
+              const matchedOption = testStandardOptions.value.find(item => 
+                item.id == savedTestStandardId || String(item.id) === String(savedTestStandardId)
+              );
+              if (matchedOption) {
+                // 纭繚浣跨敤鍖归厤椤圭殑 id锛堜繚鎸佺被鍨嬩竴鑷达級
+                form.value.testStandardId = matchedOption.id;
+                // 缂栬緫淇濈暀鍘熸楠屽�硷紝鐩存帴鎷夊彇鍘熷弬鏁版暟鎹�
+                getQualityInspectParamList(row.id);
+              } else {
+                // 濡傛灉鎵句笉鍒板尮閰嶉」锛屽皾璇曠洿鎺ヤ娇鐢ㄥ師鍊�
+                console.warn('鏈壘鍒板尮閰嶇殑鎸囨爣閫夐」锛宼estStandardId:', savedTestStandardId, '鍙敤閫夐」:', testStandardOptions.value);
+                form.value.testStandardId = savedTestStandardId;
+                getQualityInspectParamList(row.id);
+              }
+            } else {
+              // 鍚﹀垯浣跨敤鏃х殑閫昏緫
+              getQualityInspectParamList(row.id);
+            }
+          }, 100);
+        });
+      });
+    } else {
+      getQualityInspectParamList(row.id);
+    }
+  }
+  // 鏈�鍚庡啀鎵撳紑寮圭獥锛屽苟娓呯悊鏍¢獙鎬侊紝閬垮厤蹇呭~鎻愮ず闂儊
+  dialogFormVisible.value = true;
+  nextTick(() => {
+    proxy.$refs?.formRef?.clearValidate?.();
+  });
 }
 const getProductOptions = () => {
-  productTreeList().then((res) => {
+  return productTreeList().then((res) => {
     productOptions.value = convertIdToValue(res);
+    return productOptions.value;
   });
 };
 const getModels = (value) => {
+  form.value.productModelId = undefined;
+  form.value.unit = undefined;
+  form.value.thickness = undefined;
+  modelOptions.value = [];
+  currentProductId.value = value
   form.value.productName = findNodeById(productOptions.value, value);
+  modelList({ id: value }).then((res) => {
+    modelOptions.value = res;
+  })
+  if (currentProductId.value) {
+    getList();
+  }
 };
+
+const handleChangeModel = (value) => {
+  const selectedModel = modelOptions.value.find(item => item.id == value);
+  form.value.model = selectedModel?.model || '';
+  form.value.unit = selectedModel?.unit || '';
+  form.value.thickness = selectedModel?.thickness ?? '';
+}
+
 const findNodeById = (nodes, productId) => {
   for (let i = 0; i < nodes.length; i++) {
     if (nodes[i].value === productId) {
@@ -178,9 +454,10 @@
   }
   return null; // 娌℃湁鎵惧埌鑺傜偣锛岃繑鍥瀗ull
 };
+
 function convertIdToValue(data) {
   return data.map((item) => {
-    const { id, children, ...rest } = item;
+    const {id, children, ...rest} = item;
     const newItem = {
       ...rest,
       value: id, // 灏� id 鏀逛负 value
@@ -188,22 +465,45 @@
     if (children && children.length > 0) {
       newItem.children = convertIdToValue(children);
     }
-    
+
     return newItem;
   });
 }
+
 // 鎻愪氦浜у搧琛ㄥ崟
 const submitForm = () => {
   proxy.$refs.formRef.validate(valid => {
     if (valid) {
+      const hasEmptyApprover = approverNodes.value.some(node => !node.userId);
+      if (hasEmptyApprover) {
+        proxy.$modal.msgError("璇蜂负鎵�鏈夊鎵硅妭鐐归�夋嫨瀹℃壒浜猴紒");
+        return;
+      }
+      const approveUserIds = approverNodes.value.map(node => node.userId).join(",");
+      const firstApproverName =
+        approverList.value.find(item => String(item.userId) === String(approverNodes.value[0]?.userId))
+          ?.userName || "";
       form.value.inspectType = 0
+			if (operationType.value === "add") {
+				tableData.value.forEach((item) => {
+					delete item.id
+				})
+			}
+      const data = {
+        ...form.value,
+        reviewName: firstApproverName,
+        approveUserIds,
+        // 鍏煎鍚庣涓嶅悓瀛楁鍛藉悕
+        auditName: firstApproverName,
+        qualityInspectParams: tableData.value,
+      }
       if (operationType.value === "add") {
-        qualityInspectAdd(form.value).then(res => {
+        qualityInspectAdd(data).then(res => {
           proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
           closeDia();
         })
       } else {
-        qualityInspectUpdate(form.value).then(res => {
+        qualityInspectUpdate(data).then(res => {
           proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
           closeDia();
         })
@@ -211,9 +511,57 @@
     }
   })
 }
+
+const getList = () => {
+  if (!currentProductId.value) {
+    testStandardOptions.value = [];
+    tableData.value = [];
+    return;
+  }
+  let params = {
+    productId: currentProductId.value,
+    inspectType: 0
+  }
+  qualityInspectDetailByProductId(params).then(res => {
+    // 淇濆瓨涓嬫媺妗嗛�夐」鏁版嵁
+    testStandardOptions.value = res.data || [];
+    // 娓呯┖琛ㄦ牸鏁版嵁锛岀瓑寰呯敤鎴烽�夋嫨鎸囨爣
+    tableData.value = [];
+    // 娓呯┖鎸囨爣閫夋嫨
+    form.value.testStandardId = '';
+  })
+}
+
+// 鎸囨爣閫夋嫨鍙樺寲澶勭悊
+const handleTestStandardChange = (testStandardId) => {
+  if (!testStandardId) {
+    tableData.value = [];
+    return;
+  }
+  tableLoading.value = true;
+  getQualityTestStandardParamByTestStandardId(testStandardId).then(res => {
+    tableData.value = res.data || [];
+  }).catch(error => {
+    console.error('鑾峰彇鏍囧噯鍙傛暟澶辫触:', error);
+    tableData.value = [];
+  }).finally(() => {
+    tableLoading.value = false;
+  })
+}
+
+const getQualityInspectParamList = (id) => {
+  qualityInspectParamInfo(id).then(res => {
+    tableData.value = res.data;
+  })
+}
 // 鍏抽棴寮规
 const closeDia = () => {
   proxy.resetForm("formRef");
+  approverNodes.value = [{ id: 1, userId: null }];
+  nextApproverId = 2;
+  tableData.value = [];
+  testStandardOptions.value = [];
+  form.value.testStandardId = '';
   dialogFormVisible.value = false;
   emit('close')
 };
@@ -224,4 +572,65 @@
 
 <style scoped>
 
+:deep(.readonly-display .el-input__wrapper) {
+  background-color: var(--el-disabled-bg-color);
+  box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;
+}
+
+:deep(.readonly-display .el-input__inner) {
+  color: var(--el-disabled-text-color);
+  -webkit-text-fill-color: var(--el-disabled-text-color);
+  cursor: not-allowed;
+}
+
+.approver-nodes-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 16px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  border: 1px solid #e4e7ed;
+}
+
+.approver-node-item {
+  flex: 0 0 calc(33.333% - 12px);
+  min-width: 200px;
+  padding: 12px;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  transition: all 0.3s;
+}
+
+.approver-node-item:hover {
+  border-color: #409eff;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
+}
+
+.approver-node-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.approver-node-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #606266;
+}
+
+@media (max-width: 1200px) {
+  .approver-node-item {
+    flex: 0 0 calc(50% - 8px);
+  }
+}
+
+@media (max-width: 768px) {
+  .approver-node-item {
+    flex: 0 0 100%;
+  }
+}
+
 </style>
\ No newline at end of file

--
Gitblit v1.9.3