✨ feat(mes): 增强物料分类选择器和库位选择器的悬停提示功能
为物料分类选择器、库位选择器、库区选择器和仓库选择器添加悬停提示,展示更多详细信息,包括编码、名称、备注等。此改进提升了用户体验,使用户在选择时能够更方便地获取信息。pull/871/MERGE
parent
b3d587b1c2
commit
88552dc6a2
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,14 @@
|
|||
<!-- MES 库位选择器:纯下拉,前端过滤(支持 name、code),支持按库区筛选 -->
|
||||
<!-- MES 库位选择器:纯下拉,前端过滤(支持 name、code),支持按库区筛选,悬停 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,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
<!-- MES 库区选择器:纯下拉,前端过滤(支持 name、code),支持按仓库筛选 -->
|
||||
<!-- MES 库区选择器:纯下拉,前端过滤(支持 name、code),支持按仓库筛选,悬停 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,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,13 @@
|
|||
<!-- MES 仓库选择器:纯下拉,前端过滤(支持 name、code) -->
|
||||
<!-- MES 仓库选择器:纯下拉,前端过滤(支持 name、code),悬停 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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue