From b8254baf5aa4f2a9a1074fab5b1495bef90e5413 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 19 Feb 2026 12:09:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(mes):=20=E6=8A=BD=E5=8F=96=E9=80=9A?=
 =?UTF-8?q?=E7=94=A8=20Select=20=E4=B8=8B=E6=8B=89=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E6=9B=BF=E6=8D=A2=E5=90=84=E8=A1=A8=E5=8D=95=E5=86=85?=
 =?UTF-8?q?=E8=81=94=20el-select?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将 MES 模块中各表单的内联 el-select + 手动加载 SimpleList 数据的模式，
统一抽取为独立的 Select 组件，每个组件自包含数据加载和前端搜索过滤。

新增 8 个 Select 组件：
- MdItemSelect（物料产品选择器）
- MdClientSelect（客户选择器）
- MdVendorSelect（供应商选择器）
- MdUnitMeasureSelect（计量单位选择器）
- MdWorkshopSelect（车间选择器）
- WmWarehouseSelect（仓库选择器）
- QcIndicatorSelect（质检指标选择器）
- TmToolTypeSelect（工具类型选择器）

改造 10 个消费者文件：
- WorkOrderForm.vue：产品/客户/供应商选择器替换
- WorkOrderBom.vue：物料/单位选择器替换，修复 handleBomItemChange
- MdItemForm.vue：计量单位选择器替换
- WorkstationForm.vue：车间/仓库选择器替换
- MachineryForm.vue：车间选择器替换
- TemplateItemForm.vue：物料选择器替换
- TemplateIndicatorForm.vue：质检指标/计量单位选择器替换
- ToolForm.vue：工具类型选择器替换
- workstation/index.vue：搜索栏车间选择器替换
- tool/index.vue：搜索栏工具类型选择器替换
---
 src/views/mes/dv/machinery/MachineryForm.vue  | 14 +--
 .../md/client/components/MdClientSelect.vue   | 81 ++++++++++++++++
 src/views/mes/md/item/MdItemForm.vue          | 14 +--
 .../mes/md/item/components/MdItemSelect.vue   | 87 +++++++++++++++++
 .../components/MdUnitMeasureSelect.vue        | 81 ++++++++++++++++
 .../md/vendor/components/MdVendorSelect.vue   | 81 ++++++++++++++++
 .../mes/md/workstation/WorkstationForm.vue    | 40 ++------
 .../components/MdWorkshopSelect.vue           | 81 ++++++++++++++++
 src/views/mes/md/workstation/index.vue        | 19 +---
 src/views/mes/pro/workorder/WorkorderBom.vue  | 44 ++-------
 src/views/mes/pro/workorder/WorkorderForm.vue | 95 ++-----------------
 .../components/QcIndicatorSelect.vue          | 81 ++++++++++++++++
 .../mes/qc/template/TemplateIndicatorForm.vue | 44 +--------
 .../mes/qc/template/TemplateItemForm.vue      | 17 +---
 src/views/mes/tm/tool/ToolForm.vue            | 28 ++----
 .../tm/tool/components/TmToolTypeSelect.vue   | 81 ++++++++++++++++
 src/views/mes/tm/tool/index.vue               | 20 +---
 .../components/WmWarehouseSelect.vue          | 81 ++++++++++++++++
 18 files changed, 702 insertions(+), 287 deletions(-)
 create mode 100644 src/views/mes/md/client/components/MdClientSelect.vue
 create mode 100644 src/views/mes/md/item/components/MdItemSelect.vue
 create mode 100644 src/views/mes/md/unitmeasure/components/MdUnitMeasureSelect.vue
 create mode 100644 src/views/mes/md/vendor/components/MdVendorSelect.vue
 create mode 100644 src/views/mes/md/workstation/components/MdWorkshopSelect.vue
 create mode 100644 src/views/mes/qc/indicator/components/QcIndicatorSelect.vue
 create mode 100644 src/views/mes/tm/tool/components/TmToolTypeSelect.vue
 create mode 100644 src/views/mes/wm/warehouse/components/WmWarehouseSelect.vue

diff --git a/src/views/mes/dv/machinery/MachineryForm.vue b/src/views/mes/dv/machinery/MachineryForm.vue
index 8718d5c3a..833ed8956 100644
--- a/src/views/mes/dv/machinery/MachineryForm.vue
+++ b/src/views/mes/dv/machinery/MachineryForm.vue
@@ -47,14 +47,7 @@
         </el-col>
         <el-col :span="8">
           <el-form-item label="所属车间" prop="workshopId">
-            <el-select v-model="formData.workshopId" placeholder="请选择所属车间" class="!w-1/1">
-              <el-option
-                v-for="item in workshopList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              />
-            </el-select>
+            <MdWorkshopSelect v-model="formData.workshopId" placeholder="请选择所属车间" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
@@ -133,7 +126,7 @@
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { DvMachineryApi, DvMachineryVO } from '@/api/mes/dv/machinery'
 import { DvMachineryTypeApi } from '@/api/mes/dv/machinery/type'
-import { MdWorkshopApi, MdWorkshopVO } from '@/api/mes/md/workstation/workshop'
+import MdWorkshopSelect from '@/views/mes/md/workstation/components/MdWorkshopSelect.vue'
 import { defaultProps, handleTree } from '@/utils/tree'
 import { MesDvMachineryStatusEnum } from '@/views/mes/utils/constants'
 import { generateRandomStr } from '@/utils'
@@ -170,7 +163,6 @@ const formRules = reactive({
 })
 const formRef = ref() // 表单 Ref
 const machineryTypeTree = ref<any[]>([]) // 设备类型树
-const workshopList = ref<MdWorkshopVO[]>([]) // 车间列表
 
 /** 生成设备编码 */
 const generateCode = () => {
@@ -186,8 +178,6 @@ const open = async (type: string, id?: number) => {
   // 加载设备类型树
   const typeData = await DvMachineryTypeApi.getMachineryTypeSimpleList()
   machineryTypeTree.value = handleTree(typeData)
-  // 加载车间列表
-  workshopList.value = await MdWorkshopApi.getWorkshopSimpleList()
   // 修改时，设置数据
   if (id) {
     formLoading.value = true
diff --git a/src/views/mes/md/client/components/MdClientSelect.vue b/src/views/mes/md/client/components/MdClientSelect.vue
new file mode 100644
index 000000000..343db1174
--- /dev/null
+++ b/src/views/mes/md/client/components/MdClientSelect.vue
@@ -0,0 +1,81 @@
+<!-- MES 客户选择器：纯下拉，前端过滤（支持 name、code） -->
+<template>
+  <el-select
+    v-model="selectValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :clearable="clearable"
+    filterable
+    :filter-method="handleFilter"
+    class="!w-1/1"
+    @change="handleChange"
+  >
+    <el-option v-for="item in filteredList" :key="item.id" :label="item.name" :value="item.id">
+      <div class="flex items-center gap-8px">
+        <span>{{ item.name }}</span>
+        <el-tag v-if="item.code" size="small" type="info" class="ml-4px">
+          编号: {{ item.code }}
+        </el-tag>
+      </div>
+    </el-option>
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { MdClientApi, MdClientVO } from '@/api/mes/md/client'
+
+defineOptions({ name: 'MdClientSelect' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number
+    disabled?: boolean
+    clearable?: boolean
+    placeholder?: string
+  }>(),
+  {
+    disabled: false,
+    clearable: true,
+    placeholder: '请选择客户'
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | undefined]
+  change: [item: MdClientVO | undefined]
+}>()
+
+const allList = ref<MdClientVO[]>([])
+const filteredList = ref<MdClientVO[]>([])
+
+const selectValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+/** 前端过滤（name + code） */
+const handleFilter = (query: string) => {
+  if (!query) {
+    filteredList.value = allList.value
+    return
+  }
+  const keyword = query.toLowerCase()
+  filteredList.value = allList.value.filter(
+    (item) =>
+      item.name?.toLowerCase().includes(keyword) ||
+      item.code?.toLowerCase().includes(keyword)
+  )
+}
+
+/** 选中变化 */
+const handleChange = (val: number | undefined) => {
+  const item = allList.value.find((o) => o.id === val)
+  emit('change', item)
+}
+
+/** 加载客户列表 */
+onMounted(async () => {
+  allList.value = await MdClientApi.getClientSimpleList()
+  filteredList.value = allList.value
+})
+</script>
diff --git a/src/views/mes/md/item/MdItemForm.vue b/src/views/mes/md/item/MdItemForm.vue
index 4193ea7f8..b16a20f56 100644
--- a/src/views/mes/md/item/MdItemForm.vue
+++ b/src/views/mes/md/item/MdItemForm.vue
@@ -32,14 +32,7 @@
         </el-col>
         <el-col :span="8">
           <el-form-item label="单位" prop="unitMeasureId">
-            <el-select v-model="formData.unitMeasureId" placeholder="请选择计量单位" class="w-1/1">
-              <el-option
-                v-for="item in unitMeasureList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              />
-            </el-select>
+            <MdUnitMeasureSelect v-model="formData.unitMeasureId" placeholder="请选择计量单位" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
@@ -146,7 +139,7 @@ import MdItemBatchConfigForm from './MdItemBatchConfigForm.vue'
 import MdProductBomForm from './MdProductBomForm.vue'
 import MdProductSopForm from './MdProductSopForm.vue'
 import MdProductSipForm from './MdProductSipForm.vue'
-import { MdUnitMeasureApi, MdUnitMeasureVO } from '@/api/mes/md/unitmeasure'
+import MdUnitMeasureSelect from '@/views/mes/md/unitmeasure/components/MdUnitMeasureSelect.vue'
 import { CommonStatusEnum } from '@/utils/constants'
 import { defaultProps, handleTree } from '@/utils/tree'
 
@@ -186,7 +179,6 @@ const formRules = reactive({
 const formRef = ref() // 表单 Ref
 const itemTypeTree = ref<MdItemTypeVO[]>([]) // 物料分类树
 const itemTypeList = ref<MdItemTypeVO[]>([]) // 物料分类列表（扁平）
-const unitMeasureList = ref<MdUnitMeasureVO[]>([]) // 计量单位列表
 
 /** 当前物料的「物料/产品」标识 */
 const currentItemOrProduct = computed(() => {
@@ -222,8 +214,6 @@ const open = async (type: string, id?: number) => {
   // 物料分类
   itemTypeList.value = await MdItemTypeApi.getItemTypeSimpleList()
   itemTypeTree.value = handleTree(itemTypeList.value)
-  // 计量单位
-  unitMeasureList.value = await MdUnitMeasureApi.getUnitMeasureSimpleList()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
diff --git a/src/views/mes/md/item/components/MdItemSelect.vue b/src/views/mes/md/item/components/MdItemSelect.vue
new file mode 100644
index 000000000..289867bdb
--- /dev/null
+++ b/src/views/mes/md/item/components/MdItemSelect.vue
@@ -0,0 +1,87 @@
+<!-- MES 物料产品选择器：纯下拉，前端过滤（支持 name、code） -->
+<template>
+  <el-select
+    v-model="selectValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :clearable="clearable"
+    filterable
+    :filter-method="handleFilter"
+    class="!w-1/1"
+    @change="handleChange"
+  >
+    <el-option v-for="item in filteredList" :key="item.id" :label="item.name" :value="item.id">
+      <div class="flex items-center gap-8px">
+        <span>{{ item.name }}</span>
+        <el-tag v-if="item.code" size="small" type="info" class="ml-4px">
+          编号: {{ item.code }}
+        </el-tag>
+        <el-tag v-if="item.specification" size="small" type="info" class="ml-4px">
+          规格: {{ item.specification }}
+        </el-tag>
+        <el-tag v-if="item.unitMeasureName" size="small" type="info" class="ml-4px">
+          单位: {{ item.unitMeasureName }}
+        </el-tag>
+      </div>
+    </el-option>
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { MdItemApi, MdItemVO } from '@/api/mes/md/item'
+
+defineOptions({ name: 'MdItemSelect' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number
+    disabled?: boolean
+    clearable?: boolean
+    placeholder?: string
+  }>(),
+  {
+    disabled: false,
+    clearable: true,
+    placeholder: '请选择产品'
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | undefined]
+  change: [item: MdItemVO | undefined]
+}>()
+
+const allList = ref<MdItemVO[]>([]) // 全量数据
+const filteredList = ref<MdItemVO[]>([]) // 过滤后数据
+
+const selectValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+/** 前端过滤（name + code） */
+const handleFilter = (query: string) => {
+  if (!query) {
+    filteredList.value = allList.value
+    return
+  }
+  const keyword = query.toLowerCase()
+  filteredList.value = allList.value.filter(
+    (item) =>
+      item.name?.toLowerCase().includes(keyword) ||
+      item.code?.toLowerCase().includes(keyword)
+  )
+}
+
+/** 选中变化 */
+const handleChange = (val: number | undefined) => {
+  const item = allList.value.find((o) => o.id === val)
+  emit('change', item)
+}
+
+/** 加载物料列表 */
+onMounted(async () => {
+  allList.value = await MdItemApi.getItemSimpleList()
+  filteredList.value = allList.value
+})
+</script>
diff --git a/src/views/mes/md/unitmeasure/components/MdUnitMeasureSelect.vue b/src/views/mes/md/unitmeasure/components/MdUnitMeasureSelect.vue
new file mode 100644
index 000000000..dd5d843b8
--- /dev/null
+++ b/src/views/mes/md/unitmeasure/components/MdUnitMeasureSelect.vue
@@ -0,0 +1,81 @@
+<!-- MES 计量单位选择器：纯下拉，前端过滤（支持 name、code） -->
+<template>
+  <el-select
+    v-model="selectValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :clearable="clearable"
+    filterable
+    :filter-method="handleFilter"
+    class="!w-1/1"
+    @change="handleChange"
+  >
+    <el-option v-for="item in filteredList" :key="item.id" :label="item.name" :value="item.id">
+      <div class="flex items-center gap-8px">
+        <span>{{ item.name }}</span>
+        <el-tag v-if="item.code" size="small" type="info" class="ml-4px">
+          编号: {{ item.code }}
+        </el-tag>
+      </div>
+    </el-option>
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { MdUnitMeasureApi, MdUnitMeasureVO } from '@/api/mes/md/unitmeasure'
+
+defineOptions({ name: 'MdUnitMeasureSelect' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number
+    disabled?: boolean
+    clearable?: boolean
+    placeholder?: string
+  }>(),
+  {
+    disabled: false,
+    clearable: true,
+    placeholder: '请选择计量单位'
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | undefined]
+  change: [item: MdUnitMeasureVO | undefined]
+}>()
+
+const allList = ref<MdUnitMeasureVO[]>([])
+const filteredList = ref<MdUnitMeasureVO[]>([])
+
+const selectValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+/** 前端过滤（name + code） */
+const handleFilter = (query: string) => {
+  if (!query) {
+    filteredList.value = allList.value
+    return
+  }
+  const keyword = query.toLowerCase()
+  filteredList.value = allList.value.filter(
+    (item) =>
+      item.name?.toLowerCase().includes(keyword) ||
+      item.code?.toLowerCase().includes(keyword)
+  )
+}
+
+/** 选中变化 */
+const handleChange = (val: number | undefined) => {
+  const item = allList.value.find((o) => o.id === val)
+  emit('change', item)
+}
+
+/** 加载计量单位列表 */
+onMounted(async () => {
+  allList.value = await MdUnitMeasureApi.getUnitMeasureSimpleList()
+  filteredList.value = allList.value
+})
+</script>
diff --git a/src/views/mes/md/vendor/components/MdVendorSelect.vue b/src/views/mes/md/vendor/components/MdVendorSelect.vue
new file mode 100644
index 000000000..f23f2b7b2
--- /dev/null
+++ b/src/views/mes/md/vendor/components/MdVendorSelect.vue
@@ -0,0 +1,81 @@
+<!-- MES 供应商选择器：纯下拉，前端过滤（支持 name、code） -->
+<template>
+  <el-select
+    v-model="selectValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :clearable="clearable"
+    filterable
+    :filter-method="handleFilter"
+    class="!w-1/1"
+    @change="handleChange"
+  >
+    <el-option v-for="item in filteredList" :key="item.id" :label="item.name" :value="item.id">
+      <div class="flex items-center gap-8px">
+        <span>{{ item.name }}</span>
+        <el-tag v-if="item.code" size="small" type="info" class="ml-4px">
+          编号: {{ item.code }}
+        </el-tag>
+      </div>
+    </el-option>
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { MdVendorApi, MdVendorVO } from '@/api/mes/md/vendor'
+
+defineOptions({ name: 'MdVendorSelect' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number
+    disabled?: boolean
+    clearable?: boolean
+    placeholder?: string
+  }>(),
+  {
+    disabled: false,
+    clearable: true,
+    placeholder: '请选择供应商'
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | undefined]
+  change: [item: MdVendorVO | undefined]
+}>()
+
+const allList = ref<MdVendorVO[]>([])
+const filteredList = ref<MdVendorVO[]>([])
+
+const selectValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+/** 前端过滤（name + code） */
+const handleFilter = (query: string) => {
+  if (!query) {
+    filteredList.value = allList.value
+    return
+  }
+  const keyword = query.toLowerCase()
+  filteredList.value = allList.value.filter(
+    (item) =>
+      item.name?.toLowerCase().includes(keyword) ||
+      item.code?.toLowerCase().includes(keyword)
+  )
+}
+
+/** 选中变化 */
+const handleChange = (val: number | undefined) => {
+  const item = allList.value.find((o) => o.id === val)
+  emit('change', item)
+}
+
+/** 加载供应商列表 */
+onMounted(async () => {
+  allList.value = await MdVendorApi.getVendorSimpleList()
+  filteredList.value = allList.value
+})
+</script>
diff --git a/src/views/mes/md/workstation/WorkstationForm.vue b/src/views/mes/md/workstation/WorkstationForm.vue
index b90443bd7..3602a00ba 100644
--- a/src/views/mes/md/workstation/WorkstationForm.vue
+++ b/src/views/mes/md/workstation/WorkstationForm.vue
@@ -26,14 +26,7 @@
         </el-col>
         <el-col :span="8">
           <el-form-item label="所在车间" prop="workshopId">
-            <el-select v-model="formData.workshopId" placeholder="请选择车间" class="!w-1/1">
-              <el-option
-                v-for="workshop in workshopList"
-                :key="workshop.id"
-                :label="workshop.name"
-                :value="workshop.id"
-              />
-            </el-select>
+            <MdWorkshopSelect v-model="formData.workshopId" placeholder="请选择车间" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -45,20 +38,12 @@
         </el-col>
         <el-col :span="8">
           <el-form-item label="线边库" prop="warehouseId">
-            <el-select
+            <WmWarehouseSelect
               v-model="formData.warehouseId"
               placeholder="请选择线边库"
               clearable
-              class="!w-1/1"
-              @change="handleWarehouseChange"
-            >
-              <el-option
-                v-for="warehouse in warehouseList"
-                :key="warehouse.id"
-                :label="warehouse.name"
-                :value="warehouse.id"
-              />
-            </el-select>
+              @change="handleWarehouseSelectChange"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="8">
@@ -143,8 +128,9 @@
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { MdWorkstationApi, MdWorkstationVO } from '@/api/mes/md/workstation'
-import { MdWorkshopApi, MdWorkshopVO } from '@/api/mes/md/workstation/workshop'
-import { WmWarehouseApi, WmWarehouseVO } from '@/api/mes/wm/warehouse'
+import MdWorkshopSelect from '@/views/mes/md/workstation/components/MdWorkshopSelect.vue'
+import WmWarehouseSelect from '@/views/mes/wm/warehouse/components/WmWarehouseSelect.vue'
+import { WmWarehouseVO } from '@/api/mes/wm/warehouse'
 import { WmWarehouseLocationApi, WmWarehouseLocationVO } from '@/api/mes/wm/warehouse/location'
 import { WmWarehouseAreaApi, WmWarehouseAreaVO } from '@/api/mes/wm/warehouse/area'
 import { CommonStatusEnum } from '@/utils/constants'
@@ -163,8 +149,6 @@ const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const activeTab = ref('machine') // 当前激活的资源 Tab
-const workshopList = ref<MdWorkshopVO[]>([]) // 车间下拉列表
-const warehouseList = ref<WmWarehouseVO[]>([]) // 仓库下拉列表
 const locationList = ref<WmWarehouseLocationVO[]>([]) // 库区下拉列表
 const areaList = ref<WmWarehouseAreaVO[]>([]) // 库位下拉列表
 const formData = ref({
@@ -211,12 +195,12 @@ const loadAreaList = async (locationId?: number) => {
   areaList.value = await WmWarehouseAreaApi.getWarehouseAreaSimpleList(locationId)
 }
 
-/** 仓库改变时，重置库区和库位 */
-const handleWarehouseChange = async (warehouseId?: number) => {
+/** 仓库选择变化：重置库区和库位 */
+const handleWarehouseSelectChange = async (item: WmWarehouseVO | undefined) => {
   formData.value.locationId = undefined
   formData.value.areaId = undefined
   areaList.value = []
-  await loadLocationList(warehouseId)
+  await loadLocationList(item?.id)
 }
 
 /** 库区改变时，重置库位 */
@@ -231,10 +215,6 @@ const open = async (type: string, id?: number) => {
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
-  // 加载车间列表
-  workshopList.value = await MdWorkshopApi.getWorkshopSimpleList()
-  // 加载仓库列表
-  warehouseList.value = await WmWarehouseApi.getWarehouseSimpleList()
   // 修改时，设置数据
   if (id) {
     formLoading.value = true
diff --git a/src/views/mes/md/workstation/components/MdWorkshopSelect.vue b/src/views/mes/md/workstation/components/MdWorkshopSelect.vue
new file mode 100644
index 000000000..3d4262190
--- /dev/null
+++ b/src/views/mes/md/workstation/components/MdWorkshopSelect.vue
@@ -0,0 +1,81 @@
+<!-- MES 车间选择器：纯下拉，前端过滤（支持 name、code） -->
+<template>
+  <el-select
+    v-model="selectValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :clearable="clearable"
+    filterable
+    :filter-method="handleFilter"
+    class="!w-1/1"
+    @change="handleChange"
+  >
+    <el-option v-for="item in filteredList" :key="item.id" :label="item.name" :value="item.id">
+      <div class="flex items-center gap-8px">
+        <span>{{ item.name }}</span>
+        <el-tag v-if="item.code" size="small" type="info" class="ml-4px">
+          编号: {{ item.code }}
+        </el-tag>
+      </div>
+    </el-option>
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { MdWorkshopApi, MdWorkshopVO } from '@/api/mes/md/workstation/workshop'
+
+defineOptions({ name: 'MdWorkshopSelect' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number
+    disabled?: boolean
+    clearable?: boolean
+    placeholder?: string
+  }>(),
+  {
+    disabled: false,
+    clearable: true,
+    placeholder: '请选择车间'
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | undefined]
+  change: [item: MdWorkshopVO | undefined]
+}>()
+
+const allList = ref<MdWorkshopVO[]>([])
+const filteredList = ref<MdWorkshopVO[]>([])
+
+const selectValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+/** 前端过滤（name + code） */
+const handleFilter = (query: string) => {
+  if (!query) {
+    filteredList.value = allList.value
+    return
+  }
+  const keyword = query.toLowerCase()
+  filteredList.value = allList.value.filter(
+    (item) =>
+      item.name?.toLowerCase().includes(keyword) ||
+      item.code?.toLowerCase().includes(keyword)
+  )
+}
+
+/** 选中变化 */
+const handleChange = (val: number | undefined) => {
+  const item = allList.value.find((o) => o.id === val)
+  emit('change', item)
+}
+
+/** 加载车间列表 */
+onMounted(async () => {
+  allList.value = await MdWorkshopApi.getWorkshopSimpleList()
+  filteredList.value = allList.value
+})
+</script>
diff --git a/src/views/mes/md/workstation/index.vue b/src/views/mes/md/workstation/index.vue
index 4fb83f4ca..cd8948317 100644
--- a/src/views/mes/md/workstation/index.vue
+++ b/src/views/mes/md/workstation/index.vue
@@ -27,19 +27,7 @@
         />
       </el-form-item>
       <el-form-item label="所在车间" prop="workshopId">
-        <el-select
-          v-model="queryParams.workshopId"
-          placeholder="请选择车间"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="workshop in workshopList"
-            :key="workshop.id"
-            :label="workshop.name"
-            :value="workshop.id"
-          />
-        </el-select>
+        <MdWorkshopSelect v-model="queryParams.workshopId" placeholder="请选择车间" clearable class="!w-240px" />
       </el-form-item>
       <el-form-item label="状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
@@ -134,7 +122,7 @@
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { MdWorkstationApi, MdWorkstationVO } from '@/api/mes/md/workstation'
-import { MdWorkshopApi, MdWorkshopVO } from '@/api/mes/md/workstation/workshop'
+import MdWorkshopSelect from './components/MdWorkshopSelect.vue'
 import WorkstationForm from './WorkstationForm.vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 
@@ -146,7 +134,6 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref<MdWorkstationVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
-const workshopList = ref<MdWorkshopVO[]>([]) // 车间列表
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -214,7 +201,5 @@ const handleExport = async () => {
 /** 初始化 **/
 onMounted(async () => {
   await getList()
-  // 加载车间列表
-  workshopList.value = await MdWorkshopApi.getWorkshopSimpleList()
 })
 </script>
diff --git a/src/views/mes/pro/workorder/WorkorderBom.vue b/src/views/mes/pro/workorder/WorkorderBom.vue
index f6a769f0f..9871d8053 100644
--- a/src/views/mes/pro/workorder/WorkorderBom.vue
+++ b/src/views/mes/pro/workorder/WorkorderBom.vue
@@ -44,35 +44,10 @@
         v-loading="bomFormLoading"
       >
         <el-form-item label="物料" prop="itemId">
-          <el-select
-            v-model="bomFormData.itemId"
-            placeholder="请选择物料"
-            filterable
-            class="!w-1/1"
-            @change="handleBomItemChange"
-          >
-            <el-option
-              v-for="item in itemList"
-              :key="item.id"
-              :label="item.name + (item.code ? ' (' + item.code + ')' : '')"
-              :value="item.id"
-            />
-          </el-select>
+          <MdItemSelect v-model="bomFormData.itemId" @change="handleBomItemChange" />
         </el-form-item>
         <el-form-item label="单位" prop="unitMeasureId">
-          <el-select
-            v-model="bomFormData.unitMeasureId"
-            placeholder="请选择单位"
-            filterable
-            class="!w-1/1"
-          >
-            <el-option
-              v-for="item in unitMeasureList"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
+          <MdUnitMeasureSelect v-model="bomFormData.unitMeasureId" />
         </el-form-item>
         <el-form-item label="预计使用量" prop="quantity">
           <el-input-number
@@ -96,8 +71,9 @@
 
 <script setup lang="ts">
 import { ProWorkOrderBomApi, ProWorkOrderBomVO } from '@/api/mes/pro/workorder/bom'
-import { MdItemApi, MdItemVO } from '@/api/mes/md/item'
-import { MdUnitMeasureApi } from '@/api/mes/md/unitmeasure'
+import { MdItemVO } from '@/api/mes/md/item'
+import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
+import MdUnitMeasureSelect from '@/views/mes/md/unitmeasure/components/MdUnitMeasureSelect.vue'
 
 defineOptions({ name: 'WorkOrderBom' })
 
@@ -161,17 +137,12 @@ const bomFormRules = reactive({
   quantity: [{ required: true, message: '预计使用量不能为空', trigger: 'blur' }]
 })
 const bomFormRef = ref()
-const itemList = ref<MdItemVO[]>([])
-const unitMeasureList = ref<any[]>([])
 
 /** 打开 BOM 表单弹窗 */
 const openBomForm = async (type: string, row?: any) => {
   bomDialogVisible.value = true
   bomDialogTitle.value = type === 'create' ? '添加物料' : '编辑物料'
   bomFormType.value = type
-  // 加载物料和单位列表
-  itemList.value = await MdItemApi.getItemSimpleList()
-  unitMeasureList.value = await MdUnitMeasureApi.getUnitMeasureSimpleList()
   // 重置表单
   bomFormData.value = {
     id: undefined,
@@ -188,9 +159,8 @@ const openBomForm = async (type: string, row?: any) => {
 }
 
 /** 物料变更：自动填充单位 */
-const handleBomItemChange = (itemId: number) => {
-  const item = itemList.value.find((i) => i.id === itemId)
-  if (item && item.unitMeasureId) {
+const handleBomItemChange = (item: MdItemVO | undefined) => {
+  if (item?.unitMeasureId) {
     bomFormData.value.unitMeasureId = item.unitMeasureId
   }
 }
diff --git a/src/views/mes/pro/workorder/WorkorderForm.vue b/src/views/mes/pro/workorder/WorkorderForm.vue
index 535121d8e..74b12831b 100644
--- a/src/views/mes/pro/workorder/WorkorderForm.vue
+++ b/src/views/mes/pro/workorder/WorkorderForm.vue
@@ -69,43 +69,12 @@
       </el-row>
       <el-row>
         <el-col :span="8">
-          <!-- TODO @AI：应该是 ItemSelect -->
           <el-form-item label="产品" prop="productId">
-            <el-select
+            <MdItemSelect
               v-model="formData.productId"
-              placeholder="请选择产品"
-              filterable
-              class="!w-1/1"
               :disabled="isDetail"
               @change="handleProductChange"
-            >
-              <el-option
-                v-for="item in productList"
-                :key="item.id"
-                :label="item.name + (item.code ? ' (' + item.code + ')' : '')"
-                :value="item.id"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <!-- TODO @AI：这里 disabled 展示：产品名称、规格类型、单位； -->
-        <!-- TODO @AI：这个字段“单位”，应该不用存储，通过 item 查询就好了； -->
-        <el-col :span="8">
-          <el-form-item label="单位" prop="unitMeasureId">
-            <el-select
-              v-model="formData.unitMeasureId"
-              placeholder="请选择单位"
-              filterable
-              class="!w-1/1"
-              :disabled="isDetail"
-            >
-              <el-option
-                v-for="item in unitMeasureList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              />
-            </el-select>
+            />
           </el-form-item>
         </el-col>
         <el-col :span="8">
@@ -123,46 +92,15 @@
       </el-row>
       <el-row>
         <el-col :span="8">
-          <!-- TODO @AI：这个需要搞个客户的 select 弹出；类似 itemselect 这种； -->
           <el-form-item label="客户" prop="clientId">
-            <el-select
-              v-model="formData.clientId"
-              placeholder="请选择客户"
-              filterable
-              clearable
-              class="!w-1/1"
-              :disabled="isDetail"
-            >
-              <el-option
-                v-for="item in clientList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              />
-            </el-select>
+            <MdClientSelect v-model="formData.clientId" :disabled="isDetail" />
           </el-form-item>
-          <!-- TODO @AI：展示客户编码、客户名称； -->
         </el-col>
         <el-col :span="8">
           <!-- TODO @AI：只有外协、外购，才有供应商 -->
           <el-form-item label="供应商" prop="vendorId">
-            <el-select
-              v-model="formData.vendorId"
-              placeholder="请选择供应商"
-              filterable
-              clearable
-              class="!w-1/1"
-              :disabled="isDetail"
-            >
-              <el-option
-                v-for="item in vendorList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              />
-            </el-select>
+            <MdVendorSelect v-model="formData.vendorId" :disabled="isDetail" />
           </el-form-item>
-          <!-- TODO @AI：展示供应商编码、供应商名称； -->
         </el-col>
         <el-col :span="8">
           <!-- TODO @AI：这个字段，是必须的么？在调研确认下； -->
@@ -224,10 +162,10 @@
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { ProWorkOrderApi, ProWorkOrderVO } from '@/api/mes/pro/workorder'
-import { MdItemApi, MdItemVO } from '@/api/mes/md/item'
-import { MdClientApi } from '@/api/mes/md/client'
-import { MdVendorApi } from '@/api/mes/md/vendor'
-import { MdUnitMeasureApi } from '@/api/mes/md/unitmeasure'
+import { MdItemVO } from '@/api/mes/md/item'
+import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
+import MdClientSelect from '@/views/mes/md/client/components/MdClientSelect.vue'
+import MdVendorSelect from '@/views/mes/md/vendor/components/MdVendorSelect.vue'
 import WorkOrderBom from './WorkOrderBom.vue'
 
 defineOptions({ name: 'WorkOrderForm' })
@@ -263,18 +201,11 @@ const formRules = reactive({
   type: [{ required: true, message: '工单类型不能为空', trigger: 'change' }],
   orderSourceType: [{ required: true, message: '来源类型不能为空', trigger: 'change' }],
   productId: [{ required: true, message: '产品不能为空', trigger: 'change' }],
-  unitMeasureId: [{ required: true, message: '单位不能为空', trigger: 'change' }],
   quantity: [{ required: true, message: '生产数量不能为空', trigger: 'blur' }],
   requestDate: [{ required: true, message: '需求日期不能为空', trigger: 'change' }]
 })
 const formRef = ref() // 表单 Ref
 
-// 关联数据列表
-const productList = ref<MdItemVO[]>([]) // 产品列表
-const clientList = ref<any[]>([]) // 客户列表
-const vendorList = ref<any[]>([]) // 供应商列表
-const unitMeasureList = ref<any[]>([]) // 计量单位列表
-
 /** 是否为详情模式 */
 const isDetail = computed(() => formType.value === 'detail')
 
@@ -285,11 +216,6 @@ const open = async (type: string, id?: number) => {
   formType.value = type
   activeTab.value = 'bom'
   resetForm()
-  // 加载关联数据
-  productList.value = await MdItemApi.getItemSimpleList()
-  clientList.value = await MdClientApi.getClientSimpleList()
-  vendorList.value = await MdVendorApi.getVendorSimpleList()
-  unitMeasureList.value = await MdUnitMeasureApi.getUnitMeasureSimpleList()
   // 修改/详情时，设置数据
   if (id) {
     formLoading.value = true
@@ -303,9 +229,8 @@ const open = async (type: string, id?: number) => {
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 /** 产品变更：自动填充单位 */
-const handleProductChange = (productId: number) => {
-  const product = productList.value.find((item) => item.id === productId)
-  if (product && product.unitMeasureId) {
+const handleProductChange = (product: MdItemVO) => {
+  if (product?.unitMeasureId) {
     formData.value.unitMeasureId = product.unitMeasureId
   }
 }
diff --git a/src/views/mes/qc/indicator/components/QcIndicatorSelect.vue b/src/views/mes/qc/indicator/components/QcIndicatorSelect.vue
new file mode 100644
index 000000000..71608193c
--- /dev/null
+++ b/src/views/mes/qc/indicator/components/QcIndicatorSelect.vue
@@ -0,0 +1,81 @@
+<!-- MES 质检指标选择器：纯下拉，前端过滤（支持 name、code） -->
+<template>
+  <el-select
+    v-model="selectValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :clearable="clearable"
+    filterable
+    :filter-method="handleFilter"
+    class="!w-1/1"
+    @change="handleChange"
+  >
+    <el-option v-for="item in filteredList" :key="item.id" :label="item.name" :value="item.id">
+      <div class="flex items-center gap-8px">
+        <span>{{ item.name }}</span>
+        <el-tag v-if="item.code" size="small" type="info" class="ml-4px">
+          编号: {{ item.code }}
+        </el-tag>
+      </div>
+    </el-option>
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { QcIndicatorApi, QcIndicatorVO } from '@/api/mes/qc/indicator'
+
+defineOptions({ name: 'QcIndicatorSelect' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number
+    disabled?: boolean
+    clearable?: boolean
+    placeholder?: string
+  }>(),
+  {
+    disabled: false,
+    clearable: true,
+    placeholder: '请选择质检指标'
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | undefined]
+  change: [item: QcIndicatorVO | undefined]
+}>()
+
+const allList = ref<QcIndicatorVO[]>([])
+const filteredList = ref<QcIndicatorVO[]>([])
+
+const selectValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+/** 前端过滤（name + code） */
+const handleFilter = (query: string) => {
+  if (!query) {
+    filteredList.value = allList.value
+    return
+  }
+  const keyword = query.toLowerCase()
+  filteredList.value = allList.value.filter(
+    (item) =>
+      item.name?.toLowerCase().includes(keyword) ||
+      item.code?.toLowerCase().includes(keyword)
+  )
+}
+
+/** 选中变化 */
+const handleChange = (val: number | undefined) => {
+  const item = allList.value.find((o) => o.id === val)
+  emit('change', item)
+}
+
+/** 加载质检指标列表 */
+onMounted(async () => {
+  allList.value = await QcIndicatorApi.getIndicatorSimpleList()
+  filteredList.value = allList.value
+})
+</script>
diff --git a/src/views/mes/qc/template/TemplateIndicatorForm.vue b/src/views/mes/qc/template/TemplateIndicatorForm.vue
index 616882f68..ee7514dcf 100644
--- a/src/views/mes/qc/template/TemplateIndicatorForm.vue
+++ b/src/views/mes/qc/template/TemplateIndicatorForm.vue
@@ -9,19 +9,7 @@
       v-loading="formLoading"
     >
       <el-form-item label="质检指标" prop="indicatorId">
-        <el-select
-          v-model="formData.indicatorId"
-          placeholder="请选择质检指标"
-          filterable
-          class="!w-1/1"
-        >
-          <el-option
-            v-for="item in indicatorList"
-            :key="item.id"
-            :label="item.code + ' - ' + item.name"
-            :value="item.id"
-          />
-        </el-select>
+        <QcIndicatorSelect v-model="formData.indicatorId" placeholder="请选择质检指标" />
       </el-form-item>
       <el-form-item label="检测方法" prop="checkMethod">
         <el-input
@@ -40,20 +28,7 @@
         />
       </el-form-item>
       <el-form-item label="单位" prop="unitMeasureId">
-        <el-select
-          v-model="formData.unitMeasureId"
-          placeholder="请选择计量单位"
-          filterable
-          clearable
-          class="!w-1/1"
-        >
-          <el-option
-            v-for="unit in unitMeasureList"
-            :key="unit.id"
-            :label="unit.name"
-            :value="unit.id"
-          />
-        </el-select>
+        <MdUnitMeasureSelect v-model="formData.unitMeasureId" placeholder="请选择计量单位" clearable />
       </el-form-item>
       <el-form-item label="误差上限" prop="thresholdMax">
         <el-input-number
@@ -87,8 +62,8 @@
 
 <script setup lang="ts">
 import { QcTemplateApi, QcTemplateIndicatorVO } from '@/api/mes/qc/template'
-import { QcIndicatorApi, QcIndicatorVO } from '@/api/mes/qc/indicator'
-import { MdUnitMeasureApi, MdUnitMeasureVO } from '@/api/mes/md/unitmeasure'
+import QcIndicatorSelect from '@/views/mes/qc/indicator/components/QcIndicatorSelect.vue'
+import MdUnitMeasureSelect from '@/views/mes/md/unitmeasure/components/MdUnitMeasureSelect.vue'
 
 defineOptions({ name: 'TemplateIndicatorForm' })
 
@@ -116,11 +91,6 @@ const formRules = reactive({
 })
 const formRef = ref()
 
-/** 质检指标精简列表 */
-const indicatorList = ref<QcIndicatorVO[]>([])
-/** 计量单位精简列表 */
-const unitMeasureList = ref<MdUnitMeasureVO[]>([])
-
 /** 打开弹窗 */
 const open = async (type: string, id?: number, templateId?: number) => {
   dialogVisible.value = true
@@ -128,12 +98,6 @@ const open = async (type: string, id?: number, templateId?: number) => {
   formType.value = type
   resetForm()
   formData.value.templateId = templateId
-  // 并行加载下拉数据
-  // TODO @AI：串行加载；
-  ;[indicatorList.value, unitMeasureList.value] = await Promise.all([
-    QcIndicatorApi.getIndicatorSimpleList(),
-    MdUnitMeasureApi.getUnitMeasureSimpleList()
-  ])
   if (id) {
     formLoading.value = true
     try {
diff --git a/src/views/mes/qc/template/TemplateItemForm.vue b/src/views/mes/qc/template/TemplateItemForm.vue
index de705399e..19b313e34 100644
--- a/src/views/mes/qc/template/TemplateItemForm.vue
+++ b/src/views/mes/qc/template/TemplateItemForm.vue
@@ -9,16 +9,7 @@
       v-loading="formLoading"
     >
       <el-form-item label="产品物料" prop="itemId">
-        <!-- TODO @AI：item select 选择； -->
-        <el-select v-model="formData.itemId" placeholder="请选择产品物料" filterable class="!w-1/1">
-          <el-option
-            v-for="item in itemList"
-            :key="item.id"
-            :label="item.code + ' - ' + item.name + (item.specification ? '（' + item.specification + '）' : '')"
-            :value="item.id"
-          />
-        </el-select>
-        <!-- TODO @AI：产品物料编码、产品物料名称、规格型号 -->
+        <MdItemSelect v-model="formData.itemId" placeholder="请选择产品物料" />
       </el-form-item>
       <el-form-item label="最低检测数" prop="quantityCheck">
         <el-input-number
@@ -75,7 +66,7 @@
 
 <script setup lang="ts">
 import { QcTemplateApi, QcTemplateItemVO } from '@/api/mes/qc/template'
-import { MdItemApi, MdItemVO } from '@/api/mes/md/item'
+import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
 
 defineOptions({ name: 'TemplateItemForm' })
 
@@ -102,8 +93,6 @@ const formRules = reactive({
 })
 const formRef = ref()
 
-/** 物料精简列表 */
-const itemList = ref<MdItemVO[]>([])
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number, templateId?: number) => {
@@ -112,8 +101,6 @@ const open = async (type: string, id?: number, templateId?: number) => {
   formType.value = type
   resetForm()
   formData.value.templateId = templateId
-  // 加载物料列表
-  itemList.value = await MdItemApi.getItemSimpleList()
   if (id) {
     formLoading.value = true
     try {
diff --git a/src/views/mes/tm/tool/ToolForm.vue b/src/views/mes/tm/tool/ToolForm.vue
index 243a03b0b..0e7fa6ee1 100644
--- a/src/views/mes/tm/tool/ToolForm.vue
+++ b/src/views/mes/tm/tool/ToolForm.vue
@@ -29,19 +29,11 @@
       <el-row>
         <el-col :span="8">
           <el-form-item label="工具类型" prop="toolTypeId">
-            <el-select
+            <TmToolTypeSelect
               v-model="formData.toolTypeId"
               placeholder="请选择工具类型"
-              class="!w-1/1"
               @change="handleToolTypeChange"
-            >
-              <el-option
-                v-for="item in toolTypeList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              />
-            </el-select>
+            />
           </el-form-item>
         </el-col>
         <el-col :span="8">
@@ -142,7 +134,8 @@
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { TmToolApi, TmToolVO } from '@/api/mes/tm/tool'
-import { TmToolTypeApi, TmToolTypeVO } from '@/api/mes/tm/tool/type'
+import { TmToolTypeVO } from '@/api/mes/tm/tool/type'
+import TmToolTypeSelect from '@/views/mes/tm/tool/components/TmToolTypeSelect.vue'
 import { MesToolStatusEnum, MesMaintenTypeEnum } from '@/views/mes/utils/constants'
 import { generateRandomStr } from '@/utils'
 
@@ -177,7 +170,6 @@ const formRules = reactive({
   status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
 })
 const formRef = ref() // 表单 Ref
-const toolTypeList = ref<TmToolTypeVO[]>([]) // 工具类型列表
 const selectedToolType = ref<TmToolTypeVO>() // 当前选中的工具类型
 
 /** 打开弹窗 */
@@ -186,17 +178,11 @@ const open = async (type: string, id?: number) => {
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
-  // 加载工具类型列表
-  toolTypeList.value = await TmToolTypeApi.getToolTypeSimpleList()
   // 修改时，设置数据
   if (id) {
     formLoading.value = true
     try {
       formData.value = await TmToolApi.getTool(id)
-      // 设置选中的工具类型
-      selectedToolType.value = toolTypeList.value.find(
-        (item) => item.id === formData.value.toolTypeId
-      )
     } finally {
       formLoading.value = false
     }
@@ -211,10 +197,10 @@ const generateCode = () => {
 }
 
 /** 工具类型变更 */
-const handleToolTypeChange = (toolTypeId: number) => {
-  selectedToolType.value = toolTypeList.value.find((item) => item.id === toolTypeId)
+const handleToolTypeChange = (item: TmToolTypeVO | undefined) => {
+  selectedToolType.value = item
   // 如果是编码管理，数量锁定为 1
-  if (selectedToolType.value?.codeFlag === true) {
+  if (item?.codeFlag === true) {
     formData.value.quantity = 1
     formData.value.quantityAvailable = 1
   }
diff --git a/src/views/mes/tm/tool/components/TmToolTypeSelect.vue b/src/views/mes/tm/tool/components/TmToolTypeSelect.vue
new file mode 100644
index 000000000..a90b29b2f
--- /dev/null
+++ b/src/views/mes/tm/tool/components/TmToolTypeSelect.vue
@@ -0,0 +1,81 @@
+<!-- MES 工具类型选择器：纯下拉，前端过滤（支持 name、code） -->
+<template>
+  <el-select
+    v-model="selectValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :clearable="clearable"
+    filterable
+    :filter-method="handleFilter"
+    class="!w-1/1"
+    @change="handleChange"
+  >
+    <el-option v-for="item in filteredList" :key="item.id" :label="item.name" :value="item.id">
+      <div class="flex items-center gap-8px">
+        <span>{{ item.name }}</span>
+        <el-tag v-if="item.code" size="small" type="info" class="ml-4px">
+          编号: {{ item.code }}
+        </el-tag>
+      </div>
+    </el-option>
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { TmToolTypeApi, TmToolTypeVO } from '@/api/mes/tm/tool/type'
+
+defineOptions({ name: 'TmToolTypeSelect' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number
+    disabled?: boolean
+    clearable?: boolean
+    placeholder?: string
+  }>(),
+  {
+    disabled: false,
+    clearable: true,
+    placeholder: '请选择工具类型'
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | undefined]
+  change: [item: TmToolTypeVO | undefined]
+}>()
+
+const allList = ref<TmToolTypeVO[]>([])
+const filteredList = ref<TmToolTypeVO[]>([])
+
+const selectValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+/** 前端过滤（name + code） */
+const handleFilter = (query: string) => {
+  if (!query) {
+    filteredList.value = allList.value
+    return
+  }
+  const keyword = query.toLowerCase()
+  filteredList.value = allList.value.filter(
+    (item) =>
+      item.name?.toLowerCase().includes(keyword) ||
+      item.code?.toLowerCase().includes(keyword)
+  )
+}
+
+/** 选中变化 */
+const handleChange = (val: number | undefined) => {
+  const item = allList.value.find((o) => o.id === val)
+  emit('change', item)
+}
+
+/** 加载工具类型列表 */
+onMounted(async () => {
+  allList.value = await TmToolTypeApi.getToolTypeSimpleList()
+  filteredList.value = allList.value
+})
+</script>
diff --git a/src/views/mes/tm/tool/index.vue b/src/views/mes/tm/tool/index.vue
index 4eac5a6ae..be77b9312 100644
--- a/src/views/mes/tm/tool/index.vue
+++ b/src/views/mes/tm/tool/index.vue
@@ -28,19 +28,7 @@
         />
       </el-form-item>
       <el-form-item label="工具类型" prop="toolTypeId">
-        <el-select
-          v-model="queryParams.toolTypeId"
-          placeholder="请选择工具类型"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="item in toolTypeList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
+        <TmToolTypeSelect v-model="queryParams.toolTypeId" placeholder="请选择工具类型" clearable class="!w-240px" />
       </el-form-item>
       <el-form-item label="品牌" prop="brand">
         <el-input
@@ -170,7 +158,7 @@
 import { dateFormatter, formatDate } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { TmToolApi, TmToolVO } from '@/api/mes/tm/tool'
-import { TmToolTypeApi, TmToolTypeVO } from '@/api/mes/tm/tool/type'
+import TmToolTypeSelect from './components/TmToolTypeSelect.vue'
 import ToolForm from './ToolForm.vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { MesMaintenTypeEnum } from '@/views/mes/utils/constants'
@@ -195,8 +183,6 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
-const toolTypeList = ref<TmToolTypeVO[]>([]) // 工具类型列表
-
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -258,7 +244,5 @@ const handleExport = async () => {
 /** 初始化 **/
 onMounted(async () => {
   await getList()
-  // 加载工具类型列表
-  toolTypeList.value = await TmToolTypeApi.getToolTypeSimpleList()
 })
 </script>
diff --git a/src/views/mes/wm/warehouse/components/WmWarehouseSelect.vue b/src/views/mes/wm/warehouse/components/WmWarehouseSelect.vue
new file mode 100644
index 000000000..f544d1e1a
--- /dev/null
+++ b/src/views/mes/wm/warehouse/components/WmWarehouseSelect.vue
@@ -0,0 +1,81 @@
+<!-- MES 仓库选择器：纯下拉，前端过滤（支持 name、code） -->
+<template>
+  <el-select
+    v-model="selectValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :clearable="clearable"
+    filterable
+    :filter-method="handleFilter"
+    class="!w-1/1"
+    @change="handleChange"
+  >
+    <el-option v-for="item in filteredList" :key="item.id" :label="item.name" :value="item.id">
+      <div class="flex items-center gap-8px">
+        <span>{{ item.name }}</span>
+        <el-tag v-if="item.code" size="small" type="info" class="ml-4px">
+          编号: {{ item.code }}
+        </el-tag>
+      </div>
+    </el-option>
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { WmWarehouseApi, WmWarehouseVO } from '@/api/mes/wm/warehouse'
+
+defineOptions({ name: 'WmWarehouseSelect' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: number
+    disabled?: boolean
+    clearable?: boolean
+    placeholder?: string
+  }>(),
+  {
+    disabled: false,
+    clearable: true,
+    placeholder: '请选择仓库'
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | undefined]
+  change: [item: WmWarehouseVO | undefined]
+}>()
+
+const allList = ref<WmWarehouseVO[]>([])
+const filteredList = ref<WmWarehouseVO[]>([])
+
+const selectValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+/** 前端过滤（name + code） */
+const handleFilter = (query: string) => {
+  if (!query) {
+    filteredList.value = allList.value
+    return
+  }
+  const keyword = query.toLowerCase()
+  filteredList.value = allList.value.filter(
+    (item) =>
+      item.name?.toLowerCase().includes(keyword) ||
+      item.code?.toLowerCase().includes(keyword)
+  )
+}
+
+/** 选中变化 */
+const handleChange = (val: number | undefined) => {
+  const item = allList.value.find((o) => o.id === val)
+  emit('change', item)
+}
+
+/** 加载仓库列表 */
+onMounted(async () => {
+  allList.value = await WmWarehouseApi.getWarehouseSimpleList()
+  filteredList.value = allList.value
+})
+</script>