✨ feat(mes): 增加计量单位选择器的悬停 tooltip 展示详情

src/views/mes/md/unitmeasure/components/MdUnitMeasureSelect.vue

@@ -1,24 +1,37 @@
-<!-- MES 计量单位选择器：纯下拉，前端过滤（支持 name、code） -->
+<!-- MES 计量单位选择器：纯下拉，前端过滤（支持 name、code），悬停 tooltip 展示详情 -->
 <template>
-  <el-select
+  <el-tooltip :disabled="!selectedItem" placement="top" :show-after="500">
-    v-model="selectValue"
+    <template #content>
-    :placeholder="placeholder"
+      <div v-if="selectedItem" class="leading-6">
-    :disabled="disabled"
+        <div>编码：{{ selectedItem.code || '-' }}</div>
-    :clearable="clearable"
+        <div>名称：{{ selectedItem.name || '-' }}</div>
-    filterable
+        <div>是否主单位：{{ selectedItem.primaryFlag ? '是' : '否' }}</div>
-    :filter-method="handleFilter"
+        <div v-if="!selectedItem.primaryFlag && selectedItem.changeRate != null">
-    class="!w-1/1"
+          换算比例：{{ selectedItem.changeRate }}
-    @change="handleChange"
+        </div>
-  >
+        <div v-if="selectedItem.remark">备注：{{ selectedItem.remark }}</div>
-    <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>
+    </template>
-  </el-select>
+    <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>
+  </el-tooltip>
 </template>
 
 <script setup lang="ts">
@@ -47,6 +60,7 @@ const emit = defineEmits<{
 
 const allList = ref<MdUnitMeasureVO[]>([])
 const filteredList = ref<MdUnitMeasureVO[]>([])
+const selectedItem = ref<MdUnitMeasureVO | undefined>() // 当前选中的单位对象（用于 tooltip 展示）
 
 const selectValue = computed({
   get: () => props.modelValue,
@@ -69,12 +83,32 @@ const handleFilter = (query: string) => {
 /** 选中变化 */
 const handleChange = (val: number | undefined) => {
   const item = allList.value.find((o) => o.id === val)
+  selectedItem.value = item
   emit('change', item)
 }
 
+/** 根据 modelValue 同步 selectedItem（用于编辑回显） */
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val == null) {
+      selectedItem.value = undefined
+      return
+    }
+    // 仅在列表已加载且当前 selectedItem 不匹配时更新
+    if (selectedItem.value?.id !== val && allList.value.length > 0) {
+      selectedItem.value = allList.value.find((o) => o.id === val)
+    }
+  }
+)
+
 /** 加载计量单位列表 */
 onMounted(async () => {
   allList.value = await MdUnitMeasureApi.getUnitMeasureSimpleList()
   filteredList.value = allList.value
+  // 列表加载完成后，回显 selectedItem
+  if (props.modelValue != null) {
+    selectedItem.value = allList.value.find((o) => o.id === props.modelValue)
+  }
 })
 </script>