From f099476f3fd101fd815467c986c6c1ad9da926f1 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期一, 16 三月 2026 17:09:22 +0800
Subject: [PATCH] 工艺路线接口对接

---
 src/views/productionManagement/processRoute/index.vue |  698 +++++++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 550 insertions(+), 148 deletions(-)

diff --git a/src/views/productionManagement/processRoute/index.vue b/src/views/productionManagement/processRoute/index.vue
index 228ccb2..30475fd 100644
--- a/src/views/productionManagement/processRoute/index.vue
+++ b/src/views/productionManagement/processRoute/index.vue
@@ -78,7 +78,7 @@
               <el-icon>
                 <Document />
               </el-icon>
-              <span class="meta-label">璺嚎鎻忚堪:</span>
+              <span class="meta-label">澶囨敞:</span>
               <span class="meta-value">{{ route.description || '鏆傛棤鎻忚堪' }}</span>
             </span>
           </div>
@@ -112,6 +112,13 @@
                   <div class="process-number">{{ index + 1 }}</div>
                   <div class="process-actions">
                     <el-button link
+                               type="primary"
+                               @click="handleEditProcessSelect(route, index, process)">
+                      <el-icon>
+                        <Edit />
+                      </el-icon>
+                    </el-button>
+                    <el-button link
                                type="danger"
                                @click="handleDeleteProcess(route.id, process)">
                       <el-icon>
@@ -121,9 +128,9 @@
                   </div>
                 </div>
                 <div class="process-node-body">
-                  <div class="process-code">{{ process.no }}</div>
-                  <div class="process-name">{{ process.name }}</div>
-                  <div class="process-desc">{{ process.remark || '鏆傛棤鎻忚堪' }}</div>
+                  <!-- <div class="process-code">{{ process.processId }}</div> -->
+                  <div class="process-name">{{ process.processName }}</div>
+                  <!-- <div class="process-desc">{{ process.remark || '鏆傛棤鎻忚堪' }}</div> -->
                 </div>
                 <div class="process-node-footer">
                   <!-- <el-tag size="small"
@@ -135,7 +142,7 @@
                              size="small"
                              @click="toggleProcessParams(process)">
                     {{ process.expanded ? '鏀惰捣鍙傛暟' : '灞曞紑鍙傛暟' }}
-                    ({{ process.paramList?.length || 0 }})
+                    ({{ process.paramCount }})
                   </el-button>
                 </div>
                 <div v-if="process.expanded"
@@ -156,14 +163,17 @@
                          :key="param.id"
                          class="param-item">
                       <div class="param-info">
-                        <span class="param-code">{{ param.parameterCode }}</span>
-                        <span class="param-name">{{ param.parameterName }}</span>
+                        <span class="param-code">{{ param.paramName }}</span>
+                        <!-- <span class="param-name">{{ param.paramName }}</span> -->
                         <!-- <el-tag size="small"
                                 style="margin-right: 20px;"
                                 :type="getParamTypeTag(param.parameterType)">
                           {{ param.parameterType }}
                         </el-tag> -->
-                        <span class="param-value">鏍囧噯鍊硷細{{ param.standardValue }} {{ param.unit }}</span>
+                        <span v-if="param.valueMode==1"
+                              class="param-value">鏍囧噯鍊硷細{{ param.standardValue }} {{ param.unit }}</span>
+                        <span v-else
+                              class="param-value">鏍囧噯鍊硷細{{ param.minValue }}-{{ param.maxValue }} {{ param.unit }}</span>
                       </div>
                       <div class="param-actions">
                         <el-button link
@@ -204,6 +214,16 @@
         </div>
       </div>
     </div>
+    <!-- 鍒嗛〉鎺т欢 -->
+    <div class="pagination-container">
+      <el-pagination v-model:current-page="routePage.current"
+                     v-model:page-size="routePage.size"
+                     :page-sizes="[10, 20, 50, 100]"
+                     layout="total, sizes, prev, pager, next, jumper"
+                     :total="routePage.total"
+                     @size-change="handleRouteSizeChange"
+                     @current-change="handleRouteCurrentChange" />
+    </div>
     <!-- 宸ヨ壓璺嚎鏂板/缂栬緫瀵硅瘽妗� -->
     <el-dialog v-model="routeDialogVisible"
                :title="isRouteEdit ? '缂栬緫宸ヨ壓璺嚎' : '鏂板宸ヨ壓璺嚎'"
@@ -215,7 +235,7 @@
         <el-form-item label="浜у搧鍚嶇О"
                       prop="productModelId">
           <el-button type="primary"
-                     @click="showProductSelectDialog = true">
+                     @click="handleProcessProductSelectClick2">
             {{ routeForm.productName && routeForm.productModelName 
               ? `${routeForm.productName} - ${routeForm.productModelName}` 
               : '閫夋嫨浜у搧' }}
@@ -240,7 +260,7 @@
                     disabled
                     placeholder="鑷姩鐢熸垚" />
         </el-form-item>
-        <el-form-item label="璺嚎鎻忚堪"
+        <el-form-item label="澶囨敞"
                       prop="description">
           <el-input v-model="routeForm.description"
                     type="textarea"
@@ -357,7 +377,7 @@
         <div class="process-detail-area">
           <div class="area-title">宸ュ簭璇︽儏</div>
           <el-form v-if="selectedProcessItem"
-                   :model="selectedProcessItem"
+                   :model="processForm"
                    label-width="100px"
                    class="process-detail-form">
             <el-form-item label="宸ュ簭缂栧彿">
@@ -381,9 +401,28 @@
                 {{ selectedProcessItem.isQuality ? '璐ㄦ' : '闈炶川妫�' }}
               </el-tag>
             </el-form-item>
-            <!-- <el-form-item label="鍙傛暟鏁伴噺">
-              <span class="detail-text">{{ selectedProcessItem.paramCount || 0 }}涓�</span>
-            </el-form-item> -->
+            <el-form-item label="浜у搧鍚嶇О"
+                          prop="productModelId">
+              <el-button type="primary"
+                         @click="handleProcessProductSelectClick">
+                {{ processForm.productName && processForm.model 
+                  ? `${processForm.productName} - ${processForm.model}` 
+                  : '閫夋嫨浜у搧' }}
+              </el-button>
+            </el-form-item>
+            <el-form-item label="鍗曚綅"
+                          prop="unit">
+              <el-input v-model="processForm.unit"
+                        :placeholder="processForm.productModelId ? '鏍规嵁閫夋嫨鐨勪骇鍝佽嚜鍔ㄥ甫鍑�' : '璇峰厛閫夋嫨浜у搧' "
+                        clearable
+                        :disabled="true" />
+            </el-form-item>
+            <el-form-item label="鏄惁璐ㄦ"
+                          prop="isQuality">
+              <el-switch v-model="processForm.isQuality"
+                         :active-value="true"
+                         inactive-value="false" />
+            </el-form-item>
           </el-form>
           <el-empty v-else
                     description="璇蜂粠宸︿晶閫夋嫨宸ュ簭" />
@@ -393,7 +432,7 @@
         <span class="dialog-footer">
           <el-button @click="selectProcessDialogVisible = false">鍙栨秷</el-button>
           <el-button type="primary"
-                     :disabled="!selectedProcessItem"
+                     :disabled="!selectedProcessItem || !processForm.productModelId"
                      @click="handleProcessSelectSubmit">纭畾</el-button>
         </span>
       </template>
@@ -672,7 +711,7 @@
 </template>
 
 <script setup>
-  import { ref, reactive, getCurrentInstance } from "vue";
+  import { ref, reactive, getCurrentInstance, onMounted } from "vue";
   import { ElMessage, ElMessageBox } from "element-plus";
   import {
     Plus,
@@ -690,6 +729,16 @@
   import { listType } from "@/api/system/dict/type";
   import { getByModel } from "@/api/productionManagement/productBom.js";
   import { add, update, del } from "@/api/productionManagement/processRoute.js";
+  import {
+    addOrUpdateProcessRouteItem,
+    batchDeleteProcessRouteItem,
+    sortProcessRouteItem,
+    findProcessRouteItemList,
+    getProcessParamList,
+    addProcessRouteItemParam,
+    editProcessRouteItemParam,
+    delProcessRouteItemParam,
+  } from "@/api/productionManagement/processRouteItem.js";
   import { list as getProcessListApi } from "@/api/productionManagement/productionProcess.js";
   import { getBaseParamList } from "@/api/basicData/parameterMaintenance.js";
   import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
@@ -697,6 +746,13 @@
   // 宸ヨ壓璺嚎鍒楄〃
   const routeList = ref([]);
   const dictTypes = ref([]);
+
+  // 宸ヨ壓璺嚎鍒嗛〉
+  const routePage = reactive({
+    current: 1,
+    size: 10,
+    total: 0,
+  });
 
   // 鑾峰彇鍏ㄥ眬瀹炰緥
   const { proxy } = getCurrentInstance();
@@ -876,7 +932,7 @@
   const getRouteList = () => {
     // 瀵煎叆 listPage 鏂规硶
     import("@/api/productionManagement/processRoute.js").then(({ listPage }) => {
-      listPage({ pageNum: 1, pageSize: 100 })
+      listPage({ pageNum: routePage.current, pageSize: routePage.size })
         .then(res => {
           // 澶勭悊杩斿洖鐨勬暟鎹紝鏄犲皠鍒伴〉闈㈤渶瑕佺殑鏍煎紡
           routeList.value = (res.data?.records || []).map(item => ({
@@ -890,12 +946,19 @@
             description: item.description || item.description,
             status: item.status,
             expanded: false,
-            processList: item.processList || [],
+            processList: (item.processList || []).map(process => ({
+              ...process,
+              processId: process.processId || process.id,
+              expanded: false,
+            })),
           }));
+          // 鏇存柊鍒嗛〉鎬绘暟
+          routePage.total = res.data?.total || 0;
         })
         .catch(err => {
           console.error("鑾峰彇宸ヨ壓璺嚎鍒楄〃澶辫触锛�", err);
           routeList.value = [];
+          routePage.total = 0;
         });
     });
   };
@@ -903,13 +966,77 @@
   // 灞曞紑/鏀惰捣宸ヨ壓璺嚎
   const toggleExpand = route => {
     route.expanded = !route.expanded;
+    if (route.expanded) {
+      // 璋冪敤鎺ュ彛鑾峰彇宸ュ簭鍒楄〃
+      findProcessRouteItemList({ routeId: route.id })
+        .then(res => {
+          route.processList = (res.data || []).map(process => ({
+            ...process,
+            processId: process.processId || process.id,
+            expanded: false,
+          }));
+        })
+        .catch(err => {
+          console.error("鑾峰彇宸ュ簭鍒楄〃澶辫触锛�", err);
+          route.processList = [];
+        });
+    }
   };
 
   // 灞曞紑/鏀惰捣宸ュ簭鍙傛暟
   const toggleProcessParams = process => {
     process.expanded = !process.expanded;
+    if (process.expanded && process.id) {
+      // 璋冪敤鎺ュ彛鑾峰彇鍙傛暟鍒楄〃
+      getProcessParamList({
+        routeItemId: process.id,
+        pageNum: 1,
+        pageSize: 1000,
+      })
+        .then(res => {
+          if (res.code === 200) {
+            process.paramList = res.data?.records || [];
+            process.paramCount = process.paramList.length;
+          } else {
+            ElMessage.error(res.msg || "鑾峰彇鍙傛暟鍒楄〃澶辫触");
+            process.paramList = [];
+            process.paramCount = 0;
+          }
+        })
+        .catch(err => {
+          console.error("鑾峰彇鍙傛暟鍒楄〃澶辫触锛�", err);
+          ElMessage.error("鑾峰彇鍙傛暟鍒楄〃澶辫触");
+          process.paramList = [];
+          process.paramCount = 0;
+        });
+    }
   };
-
+  const toggleProcessParams2 = process => {
+    if (process.expanded && process.id) {
+      // 璋冪敤鎺ュ彛鑾峰彇鍙傛暟鍒楄〃
+      getProcessParamList({
+        routeItemId: process.id,
+        pageNum: 1,
+        pageSize: 1000,
+      })
+        .then(res => {
+          if (res.code === 200) {
+            process.paramList = res.data?.records || [];
+            process.paramCount = process.paramList.length;
+          } else {
+            ElMessage.error(res.msg || "鑾峰彇鍙傛暟鍒楄〃澶辫触");
+            process.paramList = [];
+            process.paramCount = 0;
+          }
+        })
+        .catch(err => {
+          console.error("鑾峰彇鍙傛暟鍒楄〃澶辫触锛�", err);
+          ElMessage.error("鑾峰彇鍙傛暟鍒楄〃澶辫触");
+          process.paramList = [];
+          process.paramCount = 0;
+        });
+    }
+  };
   // 宸ヨ壓璺嚎鎿嶄綔
   const handleAddRoute = () => {
     isRouteEdit.value = false;
@@ -993,39 +1120,66 @@
       }
     });
   };
+  const isform2 = ref(null);
+  const handleProcessProductSelectClick = () => {
+    isform2.value = true;
+    showProductSelectDialog.value = true;
+  };
+  const handleProcessProductSelectClick2 = () => {
+    isform2.value = false;
+    showProductSelectDialog.value = true;
+  };
 
   // 浜у搧閫夋嫨澶勭悊
   const handleProductSelect = async products => {
-    if (products && products.length > 0) {
-      const product = products[0];
-      // 鍏堟煡璇OM鍒楄〃锛堝繀閫夛級
-      try {
-        const res = await getByModel(product.id);
-        // 澶勭悊杩斿洖鐨凚OM鏁版嵁锛氬彲鑳芥槸鏁扮粍銆佸璞℃垨鍖呭惈data瀛楁
-        let bomList = [];
-        if (Array.isArray(res)) {
-          bomList = res;
-        } else if (res && res.data) {
-          bomList = Array.isArray(res.data) ? res.data : [res.data];
-        } else if (res && typeof res === "object") {
-          bomList = [res];
-        }
+    if (isform2.value) {
+      // 甯垜鍐欏伐搴忎腑鐨勯�夋嫨浜у搧鐨勫洖璋�,骞朵笖鎶婂瓧娈靛姞杩沺rocessForm
+      if (products && products.length > 0) {
+        const product = products[0];
+        console.log("product:", product);
+        // 鎶妏roduct涓殑瀛楁娣诲姞鍒皃rocessForm涓�
+        // Object.assign(processForm, product);
+        processForm.productModelId = product.id;
+        processForm.productName = product.productName;
+        processForm.model = product.model;
+        processForm.unit = product.unit || "";
+        console.log("processForm:", processForm);
 
-        if (bomList.length > 0) {
-          routeForm.productModelId = product.id;
-          routeForm.productName = product.productName;
-          routeForm.productModelName = product.model;
-          routeForm.bomId = undefined; // 閲嶇疆BOM閫夋嫨
-          bomOptions.value = bomList;
-          showProductSelectDialog.value = false;
-          // 瑙﹀彂琛ㄥ崟楠岃瘉鏇存柊
-          proxy.$refs["routeFormRef"]?.validateField("productModelId");
-        } else {
+        // 瑙﹀彂琛ㄥ崟楠岃瘉鏇存柊
+        proxy.$refs["processFormRef"]?.validateField("productModelId");
+      }
+    } else {
+      if (products && products.length > 0) {
+        const product = products[0];
+        // 鍏堟煡璇OM鍒楄〃锛堝繀閫夛級
+        try {
+          const res = await getByModel(product.id);
+          // 澶勭悊杩斿洖鐨凚OM鏁版嵁锛氬彲鑳芥槸鏁扮粍銆佸璞℃垨鍖呭惈data瀛楁
+          let bomList = [];
+          if (Array.isArray(res)) {
+            bomList = res;
+          } else if (res && res.data) {
+            bomList = Array.isArray(res.data) ? res.data : [res.data];
+          } else if (res && typeof res === "object") {
+            bomList = [res];
+          }
+          console.log("bomList:", bomList);
+          if (bomList.length > 0) {
+            routeForm.productModelId = product.id;
+            routeForm.productName = product.productName;
+            routeForm.productModelName = product.model;
+            routeForm.bomId = undefined; // 閲嶇疆BOM閫夋嫨
+            bomOptions.value = bomList;
+            showProductSelectDialog.value = false;
+            // 瑙﹀彂琛ㄥ崟楠岃瘉鏇存柊
+            proxy.$refs["routeFormRef"]?.validateField("productModelId");
+          } else {
+            proxy.$modal.msgError("璇ヤ骇鍝佹病鏈塀OM锛岃鍏堝垱寤築OM");
+          }
+        } catch (error) {
+          // 濡傛灉鎺ュ彛杩斿洖404鎴栧叾浠栭敊璇紝璇存槑娌℃湁BOM
           proxy.$modal.msgError("璇ヤ骇鍝佹病鏈塀OM锛岃鍏堝垱寤築OM");
         }
-      } catch (error) {
-        // 濡傛灉鎺ュ彛杩斿洖404鎴栧叾浠栭敊璇紝璇存槑娌℃湁BOM
-        proxy.$modal.msgError("璇ヤ骇鍝佹病鏈塀OM锛岃鍏堝垱寤築OM");
       }
     }
   };
@@ -1065,31 +1219,46 @@
         });
     });
   };
-
   // 宸ュ簭鎿嶄綔
   const handleSelectProcess = (route, index) => {
+    console.log("route:", route);
     currentRouteId.value = route.id;
     currentRouteIndex.value = index;
-    // 鑾峰彇鍙�夊伐搴忓垪琛�
-    getProcessListApi()
-      .then(res => {
-        // 澶勭悊杩斿洖鐨勬暟鎹紝鏄犲皠鍒伴〉闈㈤渶瑕佺殑鏍煎紡
-        availableProcessList.value = (res.data || []).map(item => ({
-          id: item.id,
-          no: item.no || item.no,
-          name: item.name || item.name,
-          remark: item.remark || item.remark,
-          status: item.status,
-          isQuality: item.isQuality,
-        }));
-        filteredProcessList.value = availableProcessList.value;
-        processSearchKeyword.value = "";
-        selectedProcessItem.value = null;
-        selectProcessDialogVisible.value = true;
-      })
-      .catch(() => {
-        ElMessage.error("鑾峰彇宸ュ簭鍒楄〃澶辫触");
-      });
+    // 閲嶇疆鎼滅储鍜岄�夋嫨鐘舵��
+    filteredProcessList.value = availableProcessList.value;
+    processSearchKeyword.value = "";
+    selectedProcessItem.value = null;
+    selectProcessDialogVisible.value = true;
+  };
+  const dragSort = ref(0);
+  const currentId = ref(null);
+  // 淇敼宸ュ簭
+  const handleEditProcessSelect = (route, index, process) => {
+    console.log("route:", route);
+    console.log("process:", process);
+    currentId.value = process.id;
+    currentRouteId.value = route.id;
+    currentRouteIndex.value = index;
+    // 閲嶇疆鎼滅储鍜岄�夋嫨鐘舵��
+    filteredProcessList.value = availableProcessList.value;
+    processSearchKeyword.value = "";
+    // 璁剧疆閫変腑鐨勫伐搴�
+    filteredProcessList.value.map(item => {
+      if (item.id === process.processId) {
+        selectedProcessItem.value = item;
+      }
+    });
+    dragSort.value = process.dragSort;
+    // selectedProcessItem.value = process;
+    // 濉厖浜у搧閫夋嫨琛ㄥ崟
+    processForm.productModelId = process.productModelId;
+    processForm.productName = process.productName;
+    processForm.model = process.model;
+    processForm.processId = process.no;
+    // processForm.name = process.name;
+    processForm.unit = process.unit || "";
+    processForm.isQuality = process.isQuality || false;
+    selectProcessDialogVisible.value = true;
   };
 
   const handleEditProcess = (routeId, process) => {
@@ -1109,8 +1278,30 @@
       cancelButtonText: "鍙栨秷",
       type: "warning",
     }).then(() => {
-      ElMessage.success("鍒犻櫎鎴愬姛");
-      getRouteList();
+      // 璋冪敤API鍒犻櫎宸ュ簭
+      batchDeleteProcessRouteItem([process.id])
+        .then(res => {
+          ElMessage.success("鍒犻櫎鎴愬姛");
+          // 璋冪敤鎺ュ彛鏇存柊宸ュ簭鍒楄〃
+          findProcessRouteItemList({ routeId: routeId })
+            .then(res => {
+              const route = routeList.value.find(r => r.id === routeId);
+              if (route) {
+                route.processList = (res.data || []).map(process => ({
+                  ...process,
+                  processId: process.processId || process.id,
+                  expanded: false,
+                }));
+              }
+            })
+            .catch(err => {
+              console.error("鑾峰彇宸ュ簭鍒楄〃澶辫触锛�", err);
+            });
+        })
+        .catch(err => {
+          ElMessage.error("鍒犻櫎澶辫触");
+          console.error("鍒犻櫎宸ュ簭澶辫触锛�", err);
+        });
     });
   };
 
@@ -1119,7 +1310,25 @@
       if (valid) {
         ElMessage.success(isProcessEdit.value ? "缂栬緫鎴愬姛" : "鏂板鎴愬姛");
         processDialogVisible.value = false;
-        getRouteList();
+        // 璋冪敤鎺ュ彛鏇存柊宸ュ簭鍒楄〃
+        if (currentRouteId.value) {
+          findProcessRouteItemList({ routeId: currentRouteId.value })
+            .then(res => {
+              const route = routeList.value.find(
+                r => r.id === currentRouteId.value
+              );
+              if (route) {
+                route.processList = (res.data || []).map(process => ({
+                  ...process,
+                  processId: process.processId || process.id,
+                  expanded: false,
+                }));
+              }
+            })
+            .catch(err => {
+              console.error("鑾峰彇宸ュ簭鍒楄〃澶辫触锛�", err);
+            });
+        }
       }
     });
   };
@@ -1130,14 +1339,34 @@
     if (!keyword) {
       filteredProcessList.value = availableProcessList.value;
     } else {
-      filteredProcessList.value = availableProcessList.value.filter(item =>
-        item.name.toLowerCase().includes(keyword)
+      filteredProcessList.value = availableProcessList.value.filter(
+        item =>
+          (item.name && item.name.toLowerCase().includes(keyword)) ||
+          (item.no && item.no.toLowerCase().includes(keyword))
       );
     }
   };
 
   const handleProcessSelect = row => {
     selectedProcessItem.value = row;
+    // 閲嶇疆浜у搧閫夋嫨琛ㄥ崟
+    processForm.productModelId = undefined;
+    processForm.productName = "";
+    processForm.productModelName = "";
+    processForm.unit = "";
+    processForm.isQuality = row.isQuality || false;
+  };
+
+  // 澶勭悊宸ュ簭閫夋嫨鏃剁殑浜у搧閫夋嫨
+  const handleProcessProductSelect = async products => {
+    if (products && products.length > 0) {
+      const product = products[0];
+      processForm.productModelId = product.id;
+      processForm.productName = product.productName;
+      processForm.productModelName = product.model;
+      processForm.unit = product.unit || "";
+      showProductSelectDialog.value = false;
+    }
   };
 
   const handleProcessSelectSubmit = () => {
@@ -1146,30 +1375,59 @@
       return;
     }
 
-    // 妫�鏌ュ伐搴忔槸鍚﹀凡瀛樺湪
-    const route = routeList.value[currentRouteIndex.value];
-    const exists = route.processList.some(
-      p => p.id === selectedProcessItem.value.id
-    );
-    if (exists) {
-      ElMessage.warning("璇ュ伐搴忓凡瀛樺湪浜庡伐鑹鸿矾绾夸腑");
+    if (!processForm.productModelId) {
+      ElMessage.warning("璇烽�夋嫨浜у搧");
       return;
     }
 
-    // 娣诲姞宸ュ簭鍒板伐鑹鸿矾绾�
-    const newProcess = {
-      id: Date.now(),
-      no: selectedProcessItem.value.no,
-      name: selectedProcessItem.value.name,
-      remark: selectedProcessItem.value.remark,
-      status: selectedProcessItem.value.status,
-      paramList: [],
-      expanded: false,
+    // 鏋勫缓璇锋眰鍙傛暟
+    const params = {
+      routeId: currentRouteId.value,
+      processId: selectedProcessItem.value.id,
+      dragSort: routePage.total + 1,
+      ...processForm,
     };
 
-    route.processList.push(newProcess);
-    ElMessage.success("娣诲姞宸ュ簭鎴愬姛");
-    selectProcessDialogVisible.value = false;
+    // 濡傛灉鏄慨鏀规搷浣滐紝娣诲姞id鍙傛暟
+    if (selectedProcessItem.value.id) {
+      params.id = currentId.value;
+      params.dragSort = dragSort.value;
+    }
+
+    // 璋冪敤API娣诲姞宸ュ簭鎴栦慨鏀瑰伐搴�
+    addOrUpdateProcessRouteItem(params)
+      .then(res => {
+        ElMessage.success(
+          selectedProcessItem.value.id ? "淇敼宸ュ簭鎴愬姛" : "娣诲姞宸ュ簭鎴愬姛"
+        );
+        selectProcessDialogVisible.value = false;
+        // 璋冪敤鎺ュ彛鏇存柊宸ュ簭鍒楄〃
+        findProcessRouteItemList({ routeId: currentRouteId.value })
+          .then(res => {
+            const route = routeList.value.find(
+              r => r.id === currentRouteId.value
+            );
+            if (route) {
+              route.processList = (res.data || []).map(process => ({
+                ...process,
+                processId: process.processId || process.id,
+                expanded: false,
+              }));
+            }
+          })
+          .catch(err => {
+            console.error("鑾峰彇宸ュ簭鍒楄〃澶辫触锛�", err);
+          });
+      })
+      .catch(err => {
+        ElMessage.error(
+          selectedProcessItem.value.id ? "淇敼宸ュ簭澶辫触" : "娣诲姞宸ュ簭澶辫触"
+        );
+        console.error(
+          selectedProcessItem.value.id ? "淇敼宸ュ簭澶辫触锛�" : "娣诲姞宸ュ簭澶辫触锛�",
+          err
+        );
+      });
   };
 
   // 鍙傛暟鎿嶄綔
@@ -1217,8 +1475,17 @@
       cancelButtonText: "鍙栨秷",
       type: "warning",
     }).then(() => {
-      ElMessage.success("鍒犻櫎鎴愬姛");
-      getRouteList();
+      // 璋冪敤API鍒犻櫎鍙傛暟
+      delProcessRouteItemParam(param.id)
+        .then(res => {
+          ElMessage.success("鍒犻櫎鎴愬姛");
+          // 鍒锋柊鍙傛暟鍒楄〃
+          toggleProcessParams2(process);
+        })
+        .catch(err => {
+          ElMessage.error("鍒犻櫎鍙傛暟澶辫触");
+          console.error("鍒犻櫎鍙傛暟澶辫触锛�", err);
+        });
     });
   };
 
@@ -1327,6 +1594,17 @@
     });
   };
 
+  // 宸ヨ壓璺嚎鍒嗛〉澶勭悊
+  const handleRouteSizeChange = size => {
+    routePage.size = size;
+    getRouteList();
+  };
+
+  const handleRouteCurrentChange = current => {
+    routePage.current = current;
+    getRouteList();
+  };
+
   const handleParamSelectSubmit = () => {
     if (!selectedParam.value) {
       ElMessage.warning("璇峰厛閫夋嫨涓�涓弬鏁�");
@@ -1339,64 +1617,70 @@
 
     if (route && process) {
       // 妫�鏌ュ弬鏁版槸鍚﹀凡瀛樺湪
-      const exists = process.paramList?.some(
-        p =>
-          p.paramId === selectedParam.value.id ||
-          p.parameterCode === selectedParam.value.paramCode
-      );
-      if (exists) {
-        ElMessage.warning("璇ュ弬鏁板凡瀛樺湪浜庡伐搴忎腑");
-        return;
-      }
+      // const exists = process.paramList?.some(
+      //   p =>
+      //     p.paramId === selectedParam.value.id ||
+      //     p.parameterCode === selectedParam.value.paramCode
+      // );
+      // if (exists) {
+      //   ElMessage.warning("璇ュ弬鏁板凡瀛樺湪浜庡伐搴忎腑");
+      //   return;
+      // }
 
-      // 娣诲姞宸ュ簭鍒板伐鑹鸿矾绾�
-      const newParam = {
-        id: Date.now(),
+      // 璋冪敤API鏂板鍙傛暟
+      addProcessRouteItemParam({
+        routeItemId: process.id,
         paramId: selectedParam.value.id,
-        parameterCode: selectedParam.value.paramCode,
-        parameterName: selectedParam.value.paramName,
-        parameterType2: selectedParam.value.valueMode || "1",
-        parameterType: selectedParam.value.paramType,
-        parameterFormat: selectedParam.value.paramFormat,
-        standardValue: selectedParam.value.standardValue,
-        minValue: selectedParam.value.minValue,
-        maxValue: selectedParam.value.maxValue,
-        unit: selectedParam.value.unit,
-        sort: selectedParam.value.sort || 1,
+        standardValue: selectedParam.value.standardValue || "",
+        minValue: selectedParam.value.minValue || 0,
+        maxValue: selectedParam.value.maxValue || 0,
         isRequired: selectedParam.value.isRequired || 0,
-      };
-
-      if (!process.paramList) {
-        process.paramList = [];
-      }
-
-      process.paramList.push(newParam);
-      ElMessage.success("娣诲姞鍙傛暟鎴愬姛");
-      selectParamDialogVisible.value = false;
+      })
+        .then(res => {
+          ElMessage.success("娣诲姞鍙傛暟鎴愬姛");
+          selectParamDialogVisible.value = false;
+          // 鍒锋柊鍙傛暟鍒楄〃
+          toggleProcessParams2(process);
+        })
+        .catch(err => {
+          ElMessage.error("娣诲姞鍙傛暟澶辫触");
+          console.error("娣诲姞鍙傛暟澶辫触锛�", err);
+        });
     }
   };
 
   const handleEditParamSubmit = () => {
     editParamFormRef.value.validate(valid => {
       if (valid) {
-        // 鎵惧埌瀵瑰簲鐨勫伐鑹鸿矾绾裤�佸伐搴忓拰鍙傛暟
-        const route = routeList.value.find(r => r.id === currentRouteId.value);
-        const process = route?.processList.find(
-          p => p.id === currentProcessId.value
-        );
-        const param = process?.paramList.find(p => p.id === editParamForm.id);
-
-        if (param) {
-          // 鏇存柊鍙傛暟淇℃伅
-          param.standardValue = editParamForm.standardValue;
-          param.minValue = editParamForm.minValue;
-          param.maxValue = editParamForm.maxValue;
-          param.sort = editParamForm.sort;
-          param.isRequired = editParamForm.isRequired;
-
-          ElMessage.success("缂栬緫鎴愬姛");
-          editParamDialogVisible.value = false;
-        }
+        // 璋冪敤API淇敼鍙傛暟
+        editProcessRouteItemParam({
+          id: editParamForm.id,
+          routeItemId: currentProcessId.value,
+          paramId: editParamForm.paramId,
+          standardValue: editParamForm.standardValue || "",
+          minValue: editParamForm.minValue || 0,
+          maxValue: editParamForm.maxValue || 0,
+          isRequired: editParamForm.isRequired || 0,
+        })
+          .then(res => {
+            ElMessage.success("缂栬緫鎴愬姛");
+            editParamDialogVisible.value = false;
+            // 鎵惧埌瀵瑰簲鐨勫伐鑹鸿矾绾垮拰宸ュ簭
+            const route = routeList.value.find(
+              r => r.id === currentRouteId.value
+            );
+            const process = route?.processList.find(
+              p => p.id === currentProcessId.value
+            );
+            // 鍒锋柊鍙傛暟鍒楄〃
+            if (process) {
+              toggleProcessParams2(process);
+            }
+          })
+          .catch(err => {
+            ElMessage.error("缂栬緫鍙傛暟澶辫触");
+            console.error("缂栬緫鍙傛暟澶辫触锛�", err);
+          });
       }
     });
   };
@@ -1420,9 +1704,37 @@
     const route = routeList.value.find(r => r.id === routeId);
     if (route && route.processList) {
       const draggedProcess = route.processList[draggedItem.value];
-      route.processList.splice(draggedItem.value, 1);
-      route.processList.splice(dropIndex, 0, draggedProcess);
-      ElMessage.success("鎺掑簭鎴愬姛");
+
+      // 璁$畻鏂扮殑鎺掑簭鍊�
+      const newDragSort = dropIndex + 1;
+
+      // 璋冪敤API鎺掑簭宸ュ簭
+      sortProcessRouteItem({
+        id: draggedProcess.id,
+        dragSort: newDragSort,
+      })
+        .then(res => {
+          // 璋冪敤鎺ュ彛鑾峰彇鏈�鏂扮殑宸ュ簭鍒楄〃
+          findProcessRouteItemList({ routeId: routeId })
+            .then(res => {
+              if (route) {
+                route.processList = (res.data || []).map(process => ({
+                  ...process,
+                  processId: process.processId || process.id,
+                  expanded: false,
+                }));
+              }
+              ElMessage.success("鎺掑簭鎴愬姛");
+            })
+            .catch(err => {
+              console.error("鑾峰彇宸ュ簭鍒楄〃澶辫触锛�", err);
+              ElMessage.success("鎺掑簭鎴愬姛");
+            });
+        })
+        .catch(err => {
+          ElMessage.error("鎺掑簭澶辫触");
+          console.error("鎺掑簭宸ュ簭澶辫触锛�", err);
+        });
     }
   };
 
@@ -1440,13 +1752,35 @@
 
   getRouteList();
   getDictTypes();
+
+  // 椤甸潰鍔犺浇鏃惰幏鍙栧伐搴忓垪琛�
+  onMounted(() => {
+    getProcessListApi()
+      .then(res => {
+        // 澶勭悊杩斿洖鐨勬暟鎹紝鏄犲皠鍒伴〉闈㈤渶瑕佺殑鏍煎紡
+        availableProcessList.value = (res.data || []).map(item => ({
+          id: item.id,
+          no: item.no || item.no,
+          name: item.name || item.name,
+          remark: item.remark || item.remark,
+          status: item.status,
+          isQuality: item.isQuality,
+        }));
+        filteredProcessList.value = availableProcessList.value;
+      })
+      .catch(() => {
+        ElMessage.error("鑾峰彇宸ュ簭鍒楄〃澶辫触");
+      });
+  });
 </script>
 
 <style scoped lang="scss">
   .app-container {
     padding: 20px;
+    padding-bottom: 80px;
     background-color: #f0f2f5;
     min-height: calc(100vh - 84px);
+    overflow: hidden;
   }
 
   .route-header {
@@ -1486,9 +1820,31 @@
   }
 
   .route-card-list {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
     gap: 20px;
+    max-height: calc(100vh - 240px);
+    overflow-y: auto;
+    padding-right: 10px;
+  }
+
+  /* 鑷畾涔夋粴鍔ㄦ潯鏍峰紡 */
+  .route-card-list::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .route-card-list::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+  }
+
+  .route-card-list::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 4px;
+  }
+
+  .route-card-list::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
   }
 
   .route-card {
@@ -1834,7 +2190,7 @@
           align-items: center;
           justify-content: center;
           min-width: 100px;
-          height: 175px;
+          height: 137px;
           border: 2px dashed #dcdfe6;
           border-radius: 12px;
           background: #fafafa;
@@ -1997,4 +2353,50 @@
       }
     }
   }
+
+  // 鍒嗛〉鎺т欢鏍峰紡
+  .pagination-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: flex-end;
+    padding: 16px 20px;
+    background-color: #fff !important;
+    border-top: 1px solid #ebeef5;
+    box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, 0.1);
+    z-index: 100;
+
+    .el-pagination {
+      .el-pagination__sizes {
+        margin-right: 16px;
+      }
+
+      .el-pagination__jump {
+        margin-left: 16px;
+      }
+
+      .el-pagination__total {
+        color: #606266;
+        font-size: 14px;
+      }
+
+      .el-pagination__button {
+        border-radius: 4px;
+        transition: all 0.3s ease;
+
+        &:hover:not(:disabled) {
+          color: #409eff;
+          border-color: #409eff;
+        }
+      }
+
+      .el-pagination__button--active {
+        background-color: #409eff;
+        border-color: #409eff;
+        color: #fff;
+      }
+    }
+  }
 </style>

--
Gitblit v1.9.3