✨ feat(mes): 优化物料产品选择器 V2 组件

src/views/mes/md/item/components/MdItemSelectDialogV2.vue

@@ -52,12 +52,20 @@
           :stripe="true"
           :show-overflow-tooltip="true"
           border
+          row-key="id"
           :highlight-current-row="!multiple"
           @selection-change="handleSelectionChange"
+          @row-click="handleRowClick"
           @row-dblclick="handleRowDblClick"
         >
-          <!-- 多选：checkbox -->
+          <!-- 多选：checkbox（reserve-selection 保证跨页勾选不丢失） -->
-          <el-table-column v-if="multiple" type="selection" width="50" align="center" />
+          <el-table-column
+            v-if="multiple"
+            type="selection"
+            :reserve-selection="true"
+            width="50"
+            align="center"
+          />
           <!-- 单选：radio -->
           <el-table-column v-else width="50" align="center">
             <template #default="{ row }">
@@ -151,9 +159,19 @@ const handleRadioChange = (row: MdItemVO) => {
   currentRadioRow.value = row
 }
 
-/** 双击行：单选模式直接确认 */
+/** 单击行：单选模式下点击整行即选中（降低操作成本），多选不处理（避免和 dblclick 冲突） */
+const handleRowClick = (row: MdItemVO) => {
+  if (props.multiple) {
+    return
+  }
+  selectedRadioId.value = row.id
+  currentRadioRow.value = row
+}
+
+/** 双击行：多选模式切换勾选，单选模式直接确认 */
 const handleRowDblClick = (row: MdItemVO) => {
   if (props.multiple) {
+    tableRef.value?.toggleRowSelection(row)
     return
   }
   selectedRadioId.value = row.id
@@ -163,9 +181,9 @@ const handleRowDblClick = (row: MdItemVO) => {
 
 // ==================== 分类树 ====================
 
-/** 点击分类树节点，按分类筛选 */
+/** 点击分类树节点，按分类筛选（支持取消选中） */
-const handleNodeClick = (data: MdItemTypeVO) => {
+const handleNodeClick = (data: MdItemTypeVO | undefined) => {
-  queryParams.itemTypeId = data.id
+  queryParams.itemTypeId = data?.id
   handleQuery()
 }
 
@@ -222,11 +240,12 @@ const handleQuery = () => {
   getList()
 }
 
-/** 重置查询条件 */
+/** 重置查询条件（同步清除左侧树高亮和搜索词） */
 const resetQuery = () => {
   queryParams.code = undefined
   queryParams.name = undefined
   queryParams.itemTypeId = undefined
+  typeTreeRef.value?.reset()
   handleQuery()
 }
 
@@ -253,10 +272,21 @@ const confirmSelect = () => {
 /** 打开弹窗，可传入已选 ID 用于预选高亮 */
 const open = async (selectedIds?: number[]) => {
   dialogVisible.value = true
+  // 重置查询条件 + 页码，避免二次打开继承上次过滤上下文
+  queryParams.code = undefined
+  queryParams.name = undefined
+  queryParams.itemTypeId = undefined
+  queryParams.pageNo = 1
+  // 重置分类树（清高亮 + 清搜索词）
+  typeTreeRef.value?.reset()
+  // 清空上一次的选中状态
   selectedRows.value = []
   selectedRadioId.value = undefined
   currentRadioRow.value = undefined
   preSelectedIds.value = selectedIds ?? []
+  // 多选模式清空跨页缓存的勾选
+  await nextTick()
+  tableRef.value?.clearSelection()
   await getList()
 }
 defineExpose({ open })

src/views/mes/md/item/components/MdItemSelectV2.vue

@@ -4,6 +4,7 @@
   交互：显示为只读 el-input，点击打开弹窗（单选模式）进行选择
   Props:
     modelValue  — 绑定的物料 ID（v-model）
+    itemName    — 备用显示名称（父组件已有名称时传入，可跳过 getItem 请求，避免 N+1）
     disabled    — 是否禁用
     clearable   — 是否允许清空（鼠标悬停时显示清除图标）
     placeholder — 占位文字
@@ -13,6 +14,7 @@
 -->
 <template>
   <div
+    v-bind="attrs"
     class="w-full"
     :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
     @click="handleClick"
@@ -38,11 +40,14 @@ import { MdItemApi, MdItemVO } from '@/api/mes/md/item'
 import { Search, CircleClose } from '@element-plus/icons-vue'
 import MdItemSelectDialogV2 from './MdItemSelectDialogV2.vue'
 
-defineOptions({ name: 'MdItemSelectV2' })
+const attrs = useAttrs() // TODO @AI：attrs 的作用，最好也写下；
+
+defineOptions({ name: 'MdItemSelectV2', inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
     modelValue?: number // 绑定的物料 ID
+    itemName?: string // 备用显示名称（传入后跳过 getItem 请求，适用于列表行内编辑等批量场景）
     disabled?: boolean // 是否禁用
     clearable?: boolean // 是否允许清空
     placeholder?: string // 占位文字
@@ -66,10 +71,18 @@ const hovering = ref(false) // 鼠标是否悬停
 // ==================== 名称回显 ====================
 const selectedItem = ref<MdItemVO | undefined>() // 当前选中的物料对象
 const resolving = ref(false) // 是否正在查询回显
+let resolveSeq = 0 // 请求序号，防止异步竞态导致回显串值
 
-/** 显示文本：物料名称 */
+/** 显示文本：[物料编码] 物料名称 */
 const displayLabel = computed(() => {
-  return selectedItem.value?.name ?? ''
+  if (selectedItem.value) {
+    return `[${selectedItem.value.code}] ${selectedItem.value.name}`
+  }
+  // 父组件传入了 itemName 但尚未加载到 selectedItem 时，直接显示
+  if (props.itemName && props.modelValue != null) {
+    return props.itemName
+  }
+  return ''
 })
 
 /** 是否显示清除图标 */
@@ -91,11 +104,24 @@ const resolveItemById = async (id: number | undefined) => {
   if (selectedItem.value?.id === id) {
     return
   }
+  // 父组件已传入 itemName 时跳过请求，避免列表批量场景的 N+1 问题
+  if (props.itemName) {
+    return
+  }
+  const seq = ++resolveSeq
   resolving.value = true
   try {
-    selectedItem.value = await MdItemApi.getItem(id)
+    const item = await MdItemApi.getItem(id)
+    // 校验序号：丢弃过期的响应，防止快速切换时回显串值
+    if (seq !== resolveSeq) return
+    selectedItem.value = item
+  } catch (e) {
+    if (seq !== resolveSeq) return
+    console.error('[MdItemSelectV2] resolveItemById failed:', e)
   } finally {
-    resolving.value = false
+    if (seq === resolveSeq) {
+      resolving.value = false
+    }
   }
 }
 

src/views/mes/md/item/type/components/MdItemTypeTree.vue

@@ -11,6 +11,7 @@
   Expose:
     loadTree() — 手动刷新分类树
     clearCurrent() — 清除当前选中节点高亮
+    reset() — 重置整个树状态（清高亮 + 清搜索词）
 -->
 <template>
   <el-input
@@ -93,5 +94,11 @@ const clearCurrent = () => {
   currentNodeId = undefined
 }
 
-defineExpose({ loadTree, clearCurrent })
+/** 重置整个树状态（清高亮 + 清搜索词） */
+const reset = () => {
+  clearCurrent()
+  filterText.value = ''
+}
+
+defineExpose({ loadTree, clearCurrent, reset })
 </script>