✨ feat(mes): 增强物料分类选择器和库位选择器的悬停提示功能

为物料分类选择器、库位选择器、库区选择器和仓库选择器添加悬停提示，展示更多详细信息，包括编码、名称、备注等。此改进提升了用户体验，使用户在选择时能够更方便地获取信息。
2026-04-06 13:13:02 +08:00 · 2026-04-06 13:13:02 +08:00 · 88552dc6a2
parent b3d587b1c2
commit 88552dc6a2
5 changed files with 189 additions and 72 deletions
--- a/src/views/mes/md/item/type/components/MdItemTypeSelect.vue
+++ b/src/views/mes/md/item/type/components/MdItemTypeSelect.vue
@ -1,17 +1,26 @@
-<!-- MES 物料分类选择器：树形下拉，只允许选择叶节点 -->
+<!-- MES 物料分类选择器：树形下拉，只允许选择叶节点，悬停 tooltip 展示详情 -->
 <template>
-  <el-tree-select
-    v-model="selectValue"
-    :data="treeData"
-    :props="defaultProps"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    check-strictly
-    default-expand-all
-    filterable
-    class="!w-1/1"
-    @change="handleChange"
-  />
+  <el-tooltip :disabled="!selectedItem" placement="top" :show-after="500">
+    <template #content>
+      <div v-if="selectedItem" class="leading-6">
+        <div>编码：{{ selectedItem.code || '-' }}</div>
+        <div>名称：{{ selectedItem.name || '-' }}</div>
+        <div>备注：{{ selectedItem.remark || '-' }}</div>
+      </div>
+    </template>
+    <el-tree-select
+      v-model="selectValue"
+      :data="treeData"
+      :props="defaultProps"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      check-strictly
+      default-expand-all
+      filterable
+      class="!w-1/1"
+      @change="handleChange"
+    />
+  </el-tooltip>
 </template>

 <script setup lang="ts">
@ -39,6 +48,7 @@ const emit = defineEmits<{

 const allList = ref<MdItemTypeVO[]>([])
 const treeData = ref<any[]>([])
+const selectedItem = ref<MdItemTypeVO | undefined>() // 当前选中的分类对象（用于 tooltip 展示）

 const selectValue = computed({
  get: () => props.modelValue,
@ -47,6 +57,7 @@ const selectValue = computed({

 const handleChange = (val: number | undefined) => {
  const item = allList.value.find((o) => o.id === val)
+  selectedItem.value = item
  emit('change', item)
 }

@ -60,8 +71,26 @@ const markParentsDisabled = (nodes: any[]): any[] => {
  })
 }

+/** 根据 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 MdItemTypeApi.getItemTypeSimpleList()
  treeData.value = markParentsDisabled(handleTree(allList.value))
+  // 列表加载完成后，回显 selectedItem
+  if (props.modelValue != null) {
+    selectedItem.value = allList.value.find((o) => o.id === props.modelValue)
+  }
 })
 </script>
--- a/src/views/mes/pro/andon/record/AndonRecordForm.vue
+++ b/src/views/mes/pro/andon/record/AndonRecordForm.vue
@ -135,13 +135,12 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 处置；detail - 详情
 const dialogTitle = computed(() =>
-  // 弹窗的标题
  formType.value === 'create'
    ? '新增安灯呼叫'
    : formType.value === 'update'
      ? '处置安灯呼叫'
      : '安灯呼叫详情'
-)
+) // 弹窗的标题
 const formData = ref<any>({}) // 表单数据
 const formRef = ref() // 表单 Ref
 const createRules = reactive({
--- a/src/views/mes/wm/warehouse/components/WmWarehouseAreaSelect.vue
+++ b/src/views/mes/wm/warehouse/components/WmWarehouseAreaSelect.vue
@ -1,24 +1,34 @@
-<!-- MES 库位选择器：纯下拉，前端过滤（支持 name、code），支持按库区筛选 -->
+<!-- MES 库位选择器：纯下拉，前端过滤（支持 name、code），支持按库区筛选，悬停 tooltip 展示详情 -->
 <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-tooltip :disabled="!selectedItem" placement="top" :show-after="500">
+    <template #content>
+      <div v-if="selectedItem" class="leading-6">
+        <div>编码：{{ selectedItem.code || '-' }}</div>
+        <div>名称：{{ selectedItem.name || '-' }}</div>
+        <div>所属仓库：{{ selectedItem.warehouseName || '-' }}</div>
+        <div>所属库区：{{ selectedItem.locationName || '-' }}</div>
      </div>
-    </el-option>
-  </el-select>
+    </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>
+  </el-tooltip>
 </template>

 <script setup lang="ts">
@ -49,6 +59,7 @@ const emit = defineEmits<{
 const allList = ref<WmWarehouseAreaVO[]>([])
 const filteredList = ref<WmWarehouseAreaVO[]>([])
 const filterQuery = ref('')
+const selectedItem = ref<WmWarehouseAreaVO | undefined>() // 当前选中的库位对象（用于 tooltip 展示）

 const selectValue = computed({
  get: () => props.modelValue,
@ -77,6 +88,7 @@ const applyFilter = () => {
 /** 选中变化 */
 const handleChange = (val: number | undefined) => {
  const item = allList.value.find((o) => o.id === val)
+  selectedItem.value = item
  emit('change', item)
 }

@ -84,8 +96,26 @@ const handleChange = (val: number | undefined) => {
 const loadList = async () => {
  allList.value = await WmWarehouseAreaApi.getWarehouseAreaSimpleList(props.locationId)
  applyFilter()
+  // 列表加载完成后，回显 selectedItem
+  if (props.modelValue != null) {
+    selectedItem.value = allList.value.find((o) => o.id === props.modelValue)
+  }
 }

+/** 根据 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)
+    }
+  }
+)
+
 /** 监听库区变化，重新加载库位列表 */
 watch(
  () => props.locationId,
--- a/src/views/mes/wm/warehouse/components/WmWarehouseLocationSelect.vue
+++ b/src/views/mes/wm/warehouse/components/WmWarehouseLocationSelect.vue
@ -1,24 +1,33 @@
-<!-- MES 库区选择器：纯下拉，前端过滤（支持 name、code），支持按仓库筛选 -->
+<!-- MES 库区选择器：纯下拉，前端过滤（支持 name、code），支持按仓库筛选，悬停 tooltip 展示详情 -->
 <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-tooltip :disabled="!selectedItem" placement="top" :show-after="500">
+    <template #content>
+      <div v-if="selectedItem" class="leading-6">
+        <div>编码：{{ selectedItem.code || '-' }}</div>
+        <div>名称：{{ selectedItem.name || '-' }}</div>
+        <div>所属仓库：{{ selectedItem.warehouseName || '-' }}</div>
      </div>
-    </el-option>
-  </el-select>
+    </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>
+  </el-tooltip>
 </template>

 <script setup lang="ts">
@ -49,6 +58,7 @@ const emit = defineEmits<{
 const allList = ref<WmWarehouseLocationVO[]>([])
 const filteredList = ref<WmWarehouseLocationVO[]>([])
 const filterQuery = ref('') // 当前过滤关键字
+const selectedItem = ref<WmWarehouseLocationVO | undefined>() // 当前选中的库区对象（用于 tooltip 展示）

 const selectValue = computed({
  get: () => props.modelValue,
@ -77,6 +87,7 @@ const applyFilter = () => {
 /** 选中变化 */
 const handleChange = (val: number | undefined) => {
  const item = allList.value.find((o) => o.id === val)
+  selectedItem.value = item
  emit('change', item)
 }

@ -84,8 +95,26 @@ const handleChange = (val: number | undefined) => {
 const loadList = async () => {
  allList.value = await WmWarehouseLocationApi.getWarehouseLocationSimpleList(props.warehouseId)
  applyFilter()
+  // 列表加载完成后，回显 selectedItem
+  if (props.modelValue != null) {
+    selectedItem.value = allList.value.find((o) => o.id === props.modelValue)
+  }
 }

+/** 根据 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)
+    }
+  }
+)
+
 /** 监听仓库变化，重新加载库区列表 */
 watch(
  () => props.warehouseId,
--- a/src/views/mes/wm/warehouse/components/WmWarehouseSelect.vue
+++ b/src/views/mes/wm/warehouse/components/WmWarehouseSelect.vue
@ -1,24 +1,33 @@
-<!-- MES 仓库选择器：纯下拉，前端过滤（支持 name、code） -->
+<!-- MES 仓库选择器：纯下拉，前端过滤（支持 name、code），悬停 tooltip 展示详情 -->
 <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-tooltip :disabled="!selectedItem" placement="top" :show-after="500">
+    <template #content>
+      <div v-if="selectedItem" class="leading-6">
+        <div>编码：{{ selectedItem.code || '-' }}</div>
+        <div>名称：{{ selectedItem.name || '-' }}</div>
+        <div>地址：{{ selectedItem.address || '-' }}</div>
      </div>
-    </el-option>
-  </el-select>
+    </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>
+  </el-tooltip>
 </template>

 <script setup lang="ts">
@ -47,6 +56,7 @@ const emit = defineEmits<{

 const allList = ref<WmWarehouseVO[]>([])
 const filteredList = ref<WmWarehouseVO[]>([])
+const selectedItem = ref<WmWarehouseVO | undefined>() // 当前选中的仓库对象（用于 tooltip 展示）

 const selectValue = computed({
  get: () => props.modelValue,
@ -69,12 +79,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 WmWarehouseApi.getWarehouseSimpleList()
  filteredList.value = allList.value
+  // 列表加载完成后，回显 selectedItem
+  if (props.modelValue != null) {
+    selectedItem.value = allList.value.find((o) => o.id === props.modelValue)
+  }
 })
 </script>