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,17 +1,26 @@
<!-- MES 物料分类选择器树形下拉只允许选择叶节点 --> <!-- MES 物料分类选择器树形下拉只允许选择叶节点悬停 tooltip 展示详情 -->
<template> <template>
<el-tree-select <el-tooltip :disabled="!selectedItem" placement="top" :show-after="500">
v-model="selectValue" <template #content>
:data="treeData" <div v-if="selectedItem" class="leading-6">
:props="defaultProps" <div>编码{{ selectedItem.code || '-' }}</div>
:placeholder="placeholder" <div>名称{{ selectedItem.name || '-' }}</div>
:disabled="disabled" <div>备注{{ selectedItem.remark || '-' }}</div>
check-strictly </div>
default-expand-all </template>
filterable <el-tree-select
class="!w-1/1" v-model="selectValue"
@change="handleChange" :data="treeData"
/> :props="defaultProps"
:placeholder="placeholder"
:disabled="disabled"
check-strictly
default-expand-all
filterable
class="!w-1/1"
@change="handleChange"
/>
</el-tooltip>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -39,6 +48,7 @@ const emit = defineEmits<{
const allList = ref<MdItemTypeVO[]>([]) const allList = ref<MdItemTypeVO[]>([])
const treeData = ref<any[]>([]) const treeData = ref<any[]>([])
const selectedItem = ref<MdItemTypeVO | undefined>() // tooltip
const selectValue = computed({ const selectValue = computed({
get: () => props.modelValue, get: () => props.modelValue,
@ -47,6 +57,7 @@ const selectValue = computed({
const handleChange = (val: number | undefined) => { const handleChange = (val: number | undefined) => {
const item = allList.value.find((o) => o.id === val) const item = allList.value.find((o) => o.id === val)
selectedItem.value = item
emit('change', 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 () => { onMounted(async () => {
allList.value = await MdItemTypeApi.getItemTypeSimpleList() allList.value = await MdItemTypeApi.getItemTypeSimpleList()
treeData.value = markParentsDisabled(handleTree(allList.value)) treeData.value = markParentsDisabled(handleTree(allList.value))
// selectedItem
if (props.modelValue != null) {
selectedItem.value = allList.value.find((o) => o.id === props.modelValue)
}
}) })
</script> </script>

View File

@ -135,13 +135,12 @@ const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 12 const formLoading = ref(false) // 12
const formType = ref('') // create - update - detail - const formType = ref('') // create - update - detail -
const dialogTitle = computed(() => const dialogTitle = computed(() =>
//
formType.value === 'create' formType.value === 'create'
? '新增安灯呼叫' ? '新增安灯呼叫'
: formType.value === 'update' : formType.value === 'update'
? '处置安灯呼叫' ? '处置安灯呼叫'
: '安灯呼叫详情' : '安灯呼叫详情'
) ) //
const formData = ref<any>({}) // const formData = ref<any>({}) //
const formRef = ref() // Ref const formRef = ref() // Ref
const createRules = reactive({ const createRules = reactive({

View File

@ -1,24 +1,34 @@
<!-- MES 库位选择器纯下拉前端过滤支持 namecode支持按库区筛选 --> <!-- MES 库位选择器纯下拉前端过滤支持 namecode支持按库区筛选悬停 tooltip 展示详情 -->
<template> <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.warehouseName || '-' }}</div>
:filter-method="handleFilter" <div>所属库区{{ selectedItem.locationName || '-' }}</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> </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> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -49,6 +59,7 @@ const emit = defineEmits<{
const allList = ref<WmWarehouseAreaVO[]>([]) const allList = ref<WmWarehouseAreaVO[]>([])
const filteredList = ref<WmWarehouseAreaVO[]>([]) const filteredList = ref<WmWarehouseAreaVO[]>([])
const filterQuery = ref('') const filterQuery = ref('')
const selectedItem = ref<WmWarehouseAreaVO | undefined>() // tooltip
const selectValue = computed({ const selectValue = computed({
get: () => props.modelValue, get: () => props.modelValue,
@ -77,6 +88,7 @@ const applyFilter = () => {
/** 选中变化 */ /** 选中变化 */
const handleChange = (val: number | undefined) => { const handleChange = (val: number | undefined) => {
const item = allList.value.find((o) => o.id === val) const item = allList.value.find((o) => o.id === val)
selectedItem.value = item
emit('change', item) emit('change', item)
} }
@ -84,8 +96,26 @@ const handleChange = (val: number | undefined) => {
const loadList = async () => { const loadList = async () => {
allList.value = await WmWarehouseAreaApi.getWarehouseAreaSimpleList(props.locationId) allList.value = await WmWarehouseAreaApi.getWarehouseAreaSimpleList(props.locationId)
applyFilter() 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( watch(
() => props.locationId, () => props.locationId,

View File

@ -1,24 +1,33 @@
<!-- MES 库区选择器纯下拉前端过滤支持 namecode支持按仓库筛选 --> <!-- MES 库区选择器纯下拉前端过滤支持 namecode支持按仓库筛选悬停 tooltip 展示详情 -->
<template> <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.warehouseName || '-' }}</div>
: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> </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> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -49,6 +58,7 @@ const emit = defineEmits<{
const allList = ref<WmWarehouseLocationVO[]>([]) const allList = ref<WmWarehouseLocationVO[]>([])
const filteredList = ref<WmWarehouseLocationVO[]>([]) const filteredList = ref<WmWarehouseLocationVO[]>([])
const filterQuery = ref('') // const filterQuery = ref('') //
const selectedItem = ref<WmWarehouseLocationVO | undefined>() // tooltip
const selectValue = computed({ const selectValue = computed({
get: () => props.modelValue, get: () => props.modelValue,
@ -77,6 +87,7 @@ const applyFilter = () => {
/** 选中变化 */ /** 选中变化 */
const handleChange = (val: number | undefined) => { const handleChange = (val: number | undefined) => {
const item = allList.value.find((o) => o.id === val) const item = allList.value.find((o) => o.id === val)
selectedItem.value = item
emit('change', item) emit('change', item)
} }
@ -84,8 +95,26 @@ const handleChange = (val: number | undefined) => {
const loadList = async () => { const loadList = async () => {
allList.value = await WmWarehouseLocationApi.getWarehouseLocationSimpleList(props.warehouseId) allList.value = await WmWarehouseLocationApi.getWarehouseLocationSimpleList(props.warehouseId)
applyFilter() 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( watch(
() => props.warehouseId, () => props.warehouseId,

View File

@ -1,24 +1,33 @@
<!-- MES 仓库选择器纯下拉前端过滤支持 namecode --> <!-- MES 仓库选择器纯下拉前端过滤支持 namecode悬停 tooltip 展示详情 -->
<template> <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.address || '-' }}</div>
: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> </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> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -47,6 +56,7 @@ const emit = defineEmits<{
const allList = ref<WmWarehouseVO[]>([]) const allList = ref<WmWarehouseVO[]>([])
const filteredList = ref<WmWarehouseVO[]>([]) const filteredList = ref<WmWarehouseVO[]>([])
const selectedItem = ref<WmWarehouseVO | undefined>() // tooltip
const selectValue = computed({ const selectValue = computed({
get: () => props.modelValue, get: () => props.modelValue,
@ -69,12 +79,32 @@ const handleFilter = (query: string) => {
/** 选中变化 */ /** 选中变化 */
const handleChange = (val: number | undefined) => { const handleChange = (val: number | undefined) => {
const item = allList.value.find((o) => o.id === val) const item = allList.value.find((o) => o.id === val)
selectedItem.value = item
emit('change', 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 () => { onMounted(async () => {
allList.value = await WmWarehouseApi.getWarehouseSimpleList() allList.value = await WmWarehouseApi.getWarehouseSimpleList()
filteredList.value = allList.value filteredList.value = allList.value
// selectedItem
if (props.modelValue != null) {
selectedItem.value = allList.value.find((o) => o.id === props.modelValue)
}
}) })
</script> </script>