feat: add material search filters to semi, product, service modules

Co-authored-by: aider (openai/DeepSeek-V3.2-Thinking) <aider@aider.chat>

inventory-web/src/views/stock/inbound/semi.vue

@@ -1,21 +1,36 @@
 <template>
   <div class="semi-module">
     <div class="header-tools">
-      <div class="left-tools">
+      <div class="left-tools" style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
         <el-input
             v-model="queryParams.keyword"
-            placeholder="🔍 搜索物料 / 批号 / SN / 工单号 / BOM..."
-            class="search-input"
+            placeholder="请输入名称或规格"
             clearable
-            @clear="fetchData"
             @keyup.enter="fetchData"
-            style="width: 300px; margin-right: 10px;"
+            style="width: 240px;"
+        />
+        <el-select
+            v-model="queryParams.category"
+            placeholder="类别"
+            clearable
+            filterable
+            @change="fetchData"
+            style="width: 160px;"
         >
-          <template #append>
-            <el-button :icon="Search" @click="fetchData"/>
-          </template>
-        </el-input>
-
+          <el-option v-for="item in categoryOptions" :key="item" :label="item" :value="item" />
+        </el-select>
+        <el-select
+            v-model="queryParams.material_type"
+            placeholder="类型"
+            clearable
+            filterable
+            @change="fetchData"
+            style="width: 160px;"
+        >
+          <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
+        </el-select>
+        <el-button type="primary" plain @click="fetchData">搜索</el-button>
+        <el-button @click="resetQuery">重置</el-button>
         <el-select
             v-model="queryParams.statuses"
             multiple
@@ -453,7 +468,9 @@ const dialogStatus = ref<'create' | 'update'>('create')
 const tableData = ref([])
 const total = ref(0)
 const formRef = ref()
-const queryParams = reactive({ page: 1, pageSize: 15, keyword: '', statuses: ['在库', '借库'] })
+const queryParams = reactive({ page: 1, pageSize: 15, keyword: '', category: '', material_type: '', statuses: ['在库', '借库'] })
+const categoryOptions = ref<string[]>([])
+const typeOptions = ref<string[]>([])
 const materialOptions = ref<any[]>([])
 
 // 打印相关变量
@@ -625,6 +642,26 @@ const fetchData = async () => {
   } finally { loading.value = false }
 }
 
+const fetchOptions = async () => {
+  try {
+    const res: any = await getFilterOptions()
+    if (res.code === 200) {
+      categoryOptions.value = res.data.categories
+      typeOptions.value = res.data.types
+    }
+  } catch (e) {
+    console.error('Fetch options failed', e)
+  }
+}
+
+const resetQuery = () => {
+  queryParams.keyword = ''
+  queryParams.category = ''
+  queryParams.material_type = ''
+  queryParams.page = 1
+  fetchData()
+}
+
 const handleCreate = () => {
   dialogStatus.value = 'create'
   resetForm()
@@ -780,7 +817,10 @@ const getStatusType = (status: string) => { const map: any = { '在库': 'succes
 const getQualityType = (status: string) => { const map: any = { '合格': 'success', '不合格': 'danger', '待检': 'info', '返修中': 'warning' }; return map[status] || 'info' }
 const formatMoney = (val: any) => { const num = Number(val); return isNaN(num) ? '-' : `¥ ${num.toFixed(2)}` }
 
-onMounted(() => fetchData())
+onMounted(() => {
+  fetchData()
+  fetchOptions()
+})
 </script>
 
 <style scoped>