From 88552dc6a22b6c1289f13370f16951f9cc4a4342 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 6 Apr 2026 13:13:02 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(mes):=20=E5=A2=9E=E5=BC=BA?=
 =?UTF-8?q?=E7=89=A9=E6=96=99=E5=88=86=E7=B1=BB=E9=80=89=E6=8B=A9=E5=99=A8?=
 =?UTF-8?q?=E5=92=8C=E5=BA=93=E4=BD=8D=E9=80=89=E6=8B=A9=E5=99=A8=E7=9A=84?=
 =?UTF-8?q?=E6=82=AC=E5=81=9C=E6=8F=90=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

为物料分类选择器、库位选择器、库区选择器和仓库选择器添加悬停提示，展示更多详细信息，包括编码、名称、备注等。此改进提升了用户体验，使用户在选择时能够更方便地获取信息。
---
 .../item/type/components/MdItemTypeSelect.vue | 55 +++++++++++----
 .../mes/pro/andon/record/AndonRecordForm.vue  |  3 +-
 .../components/WmWarehouseAreaSelect.vue      | 68 +++++++++++++------
 .../components/WmWarehouseLocationSelect.vue  | 67 ++++++++++++------
 .../components/WmWarehouseSelect.vue          | 68 +++++++++++++------
 5 files changed, 189 insertions(+), 72 deletions(-)

diff --git a/src/views/mes/md/item/type/components/MdItemTypeSelect.vue b/src/views/mes/md/item/type/components/MdItemTypeSelect.vue
index 284c09285..ad4e18233 100644
--- 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>
diff --git a/src/views/mes/pro/andon/record/AndonRecordForm.vue b/src/views/mes/pro/andon/record/AndonRecordForm.vue
index a545754f0..1690f9a0c 100644
--- 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({
diff --git a/src/views/mes/wm/warehouse/components/WmWarehouseAreaSelect.vue b/src/views/mes/wm/warehouse/components/WmWarehouseAreaSelect.vue
index 35571f08a..e4b173108 100644
--- 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,
diff --git a/src/views/mes/wm/warehouse/components/WmWarehouseLocationSelect.vue b/src/views/mes/wm/warehouse/components/WmWarehouseLocationSelect.vue
index e336f7da8..31a4e965d 100644
--- 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,
diff --git a/src/views/mes/wm/warehouse/components/WmWarehouseSelect.vue b/src/views/mes/wm/warehouse/components/WmWarehouseSelect.vue
index 924a4b8e8..3ee65ab05 100644
--- 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>