✨ feat(mes): 优化物料产品选择器 V2 组件（完善 tooltip 展示）

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

@@ -4,7 +4,6 @@
   交互：显示为只读 el-input，点击打开弹窗（单选模式）进行选择
   Props:
     modelValue  — 绑定的物料 ID（v-model）
-    itemName    — 备用显示名称（父组件已有名称时传入，可跳过 getItem 请求，避免 N+1）
     disabled    — 是否禁用
     clearable   — 是否允许清空（鼠标悬停时显示清除图标）
     placeholder — 占位文字
@@ -14,25 +13,33 @@
 -->
 <template>
   <div
-    v-bind="attrs"
     class="w-full"
     :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
     @click="handleClick"
     @mouseenter="hovering = true"
     @mouseleave="hovering = false"
   >
-    <el-input
+    <el-tooltip :disabled="!selectedItem" placement="top" :show-after="500">
-      ref="inputRef"
+      <template #content>
-      :model-value="displayLabel"
+        <div v-if="selectedItem" class="leading-6">
-      :placeholder="placeholder"
+          <div>编码：{{ selectedItem.code }}</div>
-      :disabled="disabled"
+          <div>名称：{{ selectedItem.name }}</div>
-      readonly
+          <div>规格：{{ selectedItem.specification || '-' }}</div>
-      :suffix-icon="suffixIcon"
+          <div>单位：{{ selectedItem.unitMeasureName || '-' }}</div>
-      :class="disabled ? 'is-select-disabled' : 'is-select-clickable'"
+        </div>
-    />
+      </template>
+      <el-input
+        :model-value="displayLabel"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        readonly
+        :suffix-icon="suffixIcon"
+        :class="disabled ? 'is-select-disabled' : 'is-select-clickable'"
+      />
+    </el-tooltip>
+    <!-- 弹窗选择器（单选模式），放在 div 内部保持单根节点，Vue 自动继承 attrs -->
+    <MdItemSelectDialogV2 ref="dialogRef" :multiple="false" @selected="handleSelected" />
   </div>
-  <!-- 弹窗选择器（单选模式） -->
-  <MdItemSelectDialogV2 ref="dialogRef" :multiple="false" @selected="handleSelected" />
 </template>
 
 <script setup lang="ts">
@@ -40,14 +47,11 @@ import { MdItemApi, MdItemVO } from '@/api/mes/md/item'
 import { Search, CircleClose } from '@element-plus/icons-vue'
 import MdItemSelectDialogV2 from './MdItemSelectDialogV2.vue'
 
-const attrs = useAttrs() // TODO @AI：attrs 的作用，最好也写下；
+defineOptions({ name: 'MdItemSelectV2' })
-
-defineOptions({ name: 'MdItemSelectV2', inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
     modelValue?: number // 绑定的物料 ID
-    itemName?: string // 备用显示名称（传入后跳过 getItem 请求，适用于列表行内编辑等批量场景）
     disabled?: boolean // 是否禁用
     clearable?: boolean // 是否允许清空
     placeholder?: string // 占位文字
@@ -65,24 +69,14 @@ const emit = defineEmits<{
 }>()
 
 const dialogRef = ref() // 弹窗 Ref
-const inputRef = ref() // 输入框 Ref
 const hovering = ref(false) // 鼠标是否悬停
 
 // ==================== 名称回显 ====================
 const selectedItem = ref<MdItemVO | undefined>() // 当前选中的物料对象
-const resolving = ref(false) // 是否正在查询回显
-let resolveSeq = 0 // 请求序号，防止异步竞态导致回显串值
 
-/** 显示文本：[物料编码] 物料名称 */
+/** 输入框显示文本：只展示物料名称，保持简洁 */
 const displayLabel = computed(() => {
-  if (selectedItem.value) {
+  return selectedItem.value?.name ?? ''
-    return `[${selectedItem.value.code}] ${selectedItem.value.name}`
-  }
-  // 父组件传入了 itemName 但尚未加载到 selectedItem 时，直接显示
-  if (props.itemName && props.modelValue != null) {
-    return props.itemName
-  }
-  return ''
 })
 
 /** 是否显示清除图标 */
@@ -104,24 +98,10 @@ 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 {
-    const item = await MdItemApi.getItem(id)
+    selectedItem.value = await MdItemApi.getItem(id)
-    // 校验序号：丢弃过期的响应，防止快速切换时回显串值
-    if (seq !== resolveSeq) return
-    selectedItem.value = item
   } catch (e) {
-    if (seq !== resolveSeq) return
     console.error('[MdItemSelectV2] resolveItemById failed:', e)
-  } finally {
-    if (seq === resolveSeq) {
-      resolving.value = false
-    }
   }
 }