提交

web-admin/src/views/cell-storage/material/MaterialUsageTab.vue

@@ -15,9 +15,14 @@
             <el-form-item label="物料筛选">
               <el-select
                 v-model="searchForm.materialId"
-                placeholder="全部物料"
+                placeholder="输入物料名称检索"
                 clearable
                 filterable
+                remote
+                reserve-keyword
+                :loading="materialOptionsLoading"
+                :remote-method="remoteSearchMaterials"
+                @visible-change="onMaterialSelectVisible"
               >
                 <el-option
                   v-for="m in materialOptions"
@@ -281,7 +286,7 @@
   import { Search, RefreshLeft, View, Document, CircleCheck } from '@element-plus/icons-vue'
   import { fetchMaterialUsageList, fetchMarkMaterialUsageFullyUsed } from '@/api/material-usage'
   import type { MaterialUsage } from '@/api/material-usage'
-  import { fetchMaterialOptions } from '@/api/material'
+  import { fetchMaterialList } from '@/api/material'
   import type { MaterialOption } from '@/api/material'
   import { formatMoneyDisplay } from '@/utils/money-format'
   import SystemViewDialog from '@/components/business/system-view-dialog/index.vue'
@@ -305,6 +310,7 @@
   const loading = ref(false)
   const pagination = reactive({ page: 1, pageSize: 10, total: 0 })
   const materialOptions = ref<MaterialOption[]>([])
+  const materialOptionsLoading = ref(false)
 
   function isManualOutRow(row: MaterialUsage) {
     if (row.sourceType === 'manual_out') return true
@@ -410,15 +416,39 @@
     }
   }
 
-  async function loadMaterialOptions() {
+  function mapMaterialListToOptions(list: Array<Record<string, any>>): MaterialOption[] {
+    return (list || []).map((m) => ({
+      id: String(m.id || ''),
+      label: `${m.materialName || ''}${m.materialCode ? ` (${m.materialCode})` : ''}`.trim(),
+      materialCode: String(m.materialCode || ''),
+      materialName: String(m.materialName || ''),
+      category: String(m.category || ''),
+      specModel: String(m.specModel || ''),
+      unit: String(m.unit || ''),
+      stockQty: Number(m.stockQty ?? 0)
+    }))
+  }
+
+  async function remoteSearchMaterials(query: string) {
+    materialOptionsLoading.value = true
     try {
-      const res = await fetchMaterialOptions()
-      materialOptions.value = res || []
+      const res = await fetchMaterialList({
+        page: 1,
+        pageSize: 100,
+        keyword: query?.trim() || undefined
+      })
+      materialOptions.value = mapMaterialListToOptions(res.list || [])
     } catch {
       materialOptions.value = []
+    } finally {
+      materialOptionsLoading.value = false
     }
   }
 
+  function onMaterialSelectVisible(visible: boolean) {
+    if (visible) void remoteSearchMaterials('')
+  }
+
   async function loadData() {
     loading.value = true
     try {
@@ -542,13 +572,13 @@
   })
 
   onMounted(async () => {
-    await loadMaterialOptions()
     if (route.query.materialId) {
       searchForm.materialId = route.query.materialId as string
     }
     if (route.query.stockInNo) {
       searchForm.keyword = route.query.stockInNo as string
     }
+    await remoteSearchMaterials('')
     loadData()
   })
 </script>