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

为物料分类选择器、库位选择器、库区选择器和仓库选择器添加悬停提示,展示更多详细信息,包括编码、名称、备注等。此改进提升了用户体验,使用户在选择时能够更方便地获取信息。
pull/871/MERGE
YunaiV 2026-04-06 13:13:02 +08:00
parent b3d587b1c2
commit 88552dc6a2
5 changed files with 189 additions and 72 deletions

View File

@ -1,5 +1,13 @@
<!-- MES 物料分类选择器树形下拉只允许选择叶节点 -->
<!-- MES 物料分类选择器树形下拉只允许选择叶节点悬停 tooltip 展示详情 -->
<template>
<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"
@ -12,6 +20,7 @@
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>

View File

@ -135,13 +135,12 @@ const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 12
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({

View File

@ -1,5 +1,14 @@
<!-- MES 库位选择器纯下拉前端过滤支持 namecode支持按库区筛选 -->
<!-- MES 库位选择器纯下拉前端过滤支持 namecode支持按库区筛选悬停 tooltip 展示详情 -->
<template>
<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>
</template>
<el-select
v-model="selectValue"
:placeholder="placeholder"
@ -19,6 +28,7 @@
</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,

View File

@ -1,5 +1,13 @@
<!-- MES 库区选择器纯下拉前端过滤支持 namecode支持按仓库筛选 -->
<!-- MES 库区选择器纯下拉前端过滤支持 namecode支持按仓库筛选悬停 tooltip 展示详情 -->
<template>
<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>
</template>
<el-select
v-model="selectValue"
:placeholder="placeholder"
@ -19,6 +27,7 @@
</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,

View File

@ -1,5 +1,13 @@
<!-- MES 仓库选择器纯下拉前端过滤支持 namecode -->
<!-- MES 仓库选择器纯下拉前端过滤支持 namecode悬停 tooltip 展示详情 -->
<template>
<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>
</template>
<el-select
v-model="selectValue"
:placeholder="placeholder"
@ -19,6 +27,7 @@
</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>