提交

web-admin/src/views/production/process/ProcessRouteTab.vue

@@ -21,7 +21,17 @@
               />
             </el-form-item>
             <el-form-item label="产品类型">
-              <el-select v-model="searchForm.productTypeId" placeholder="全部" clearable filterable>
+              <el-select
+                v-model="searchForm.productTypeId"
+                placeholder="输入名称检索"
+                clearable
+                filterable
+                remote
+                reserve-keyword
+                :loading="productTypeOptionsLoading"
+                :remote-method="remoteSearchProductTypes"
+                @visible-change="onProductTypeSelectVisible"
+              >
                 <el-option
                   v-for="pt in productTypeOptions"
                   :key="pt.id"
@@ -210,9 +220,14 @@
             <el-form-item label="产品类型">
               <el-select
                 v-model="formData.productTypeId"
-                placeholder="请选择产品类型"
+                placeholder="输入名称检索"
                 clearable
                 filterable
+                remote
+                reserve-keyword
+                :loading="productTypeOptionsLoading"
+                :remote-method="remoteSearchProductTypes"
+                @visible-change="onProductTypeSelectVisible"
               >
                 <el-option
                   v-for="pt in productTypeOptions"
@@ -1103,11 +1118,13 @@
   const loading = ref(false)
   const pagination = reactive({ page: 1, pageSize: 10, total: 0 })
   const productTypeOptions = ref<Record<string, any>[]>([])
+  const productTypeOptionsLoading = ref(false)
+  const productTypeNameById = ref<Record<string, string>>({})
 
   const productTypeMap = computed(() => {
-    const map: Record<string, string> = {}
+    const map: Record<string, string> = { ...productTypeNameById.value }
     productTypeOptions.value.forEach((pt: Record<string, any>) => {
-      map[pt.id] = pt.productTypeName || ''
+      if (pt.id) map[pt.id] = pt.productTypeName || map[pt.id] || ''
     })
     return map
   })
@@ -1116,15 +1133,37 @@
     selectedRows.value = rows
   }
 
-  async function loadProductTypes() {
+  async function remoteSearchProductTypes(query: string) {
+    productTypeOptionsLoading.value = true
     try {
-      const res = await fetchCellProductTypeList({ page: 1, pageSize: 100 })
+      const res = await fetchCellProductTypeList({
+        page: 1,
+        pageSize: 100,
+        keyword: query?.trim() || undefined
+      })
       productTypeOptions.value = res.list || res || []
+      for (const pt of productTypeOptions.value) {
+        if (pt.id) productTypeNameById.value[pt.id] = pt.productTypeName || ''
+      }
     } catch {
-      /* ignore */
+      productTypeOptions.value = []
+    } finally {
+      productTypeOptionsLoading.value = false
     }
   }
 
+  function onProductTypeSelectVisible(visible: boolean) {
+    if (visible) void remoteSearchProductTypes('')
+  }
+
+  function ensureProductTypeInOptions(id: string) {
+    if (!id) return
+    if (productTypeOptions.value.some((pt) => pt.id === id)) return
+    const name = productTypeNameById.value[id] || id
+    productTypeOptions.value = [...productTypeOptions.value, { id, productTypeName: name }]
+    if (!productTypeNameById.value[id]) productTypeNameById.value[id] = name
+  }
+
   async function loadData() {
     loading.value = true
     try {
@@ -1202,6 +1241,7 @@
     formData.routeCode = row.routeCode || ''
     formData.routeName = row.routeName || ''
     formData.productTypeId = row.productTypeId || ''
+    ensureProductTypeInOptions(row.productTypeId)
     formData.version = row.version || ''
     formData.remark = row.remark || ''
     dialogVisible.value = true
@@ -2161,7 +2201,7 @@
   )
   onMounted(() => {
     loadData()
-    loadProductTypes()
+    void remoteSearchProductTypes('')
   })
 </script>