✨ feat(mes): 增加工序选择器的悬停 tooltip 展示详情

src/views/mes/pro/process/components/ProProcessSelect.vue

@@ -1,22 +1,32 @@
-<!-- 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.attention || '-' }}</div>
-    :filter-method="handleFilter"
+        <div>备注：{{ selectedItem.remark || '-' }}</div>
-    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>
+    </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">
@@ -45,6 +55,7 @@ const emit = defineEmits<{
 
 const allList = ref<ProProcessVO[]>([])
 const filteredList = ref<ProProcessVO[]>([])
+const selectedItem = ref<ProProcessVO | undefined>() // 当前选中的工序对象（用于 tooltip 展示）
 
 const selectValue = computed({
   get: () => props.modelValue,
@@ -67,12 +78,31 @@ 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
+    }
+    if (selectedItem.value?.id !== val && allList.value.length > 0) {
+      selectedItem.value = allList.value.find((o) => o.id === val)
+    }
+  }
+)
+
 /** 加载工序列表 */
 onMounted(async () => {
   allList.value = await ProProcessApi.getProcessSimpleList()
   filteredList.value = allList.value
+  // 列表加载完成后，回显 selectedItem
+  if (props.modelValue != null) {
+    selectedItem.value = allList.value.find((o) => o.id === props.modelValue)
+  }
 })
 </script>