✨ feat(mes): 增强物料分类选择器和库位选择器的悬停提示功能
为物料分类选择器、库位选择器、库区选择器和仓库选择器添加悬停提示,展示更多详细信息,包括编码、名称、备注等。此改进提升了用户体验,使用户在选择时能够更方便地获取信息。pull/871/MERGE
parent
b3d587b1c2
commit
88552dc6a2
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -135,13 +135,12 @@ const dialogVisible = ref(false) // 弹窗的是否展示
|
||||||
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
|
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
|
||||||
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({
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,34 @@
|
||||||
<!-- MES 库位选择器:纯下拉,前端过滤(支持 name、code),支持按库区筛选 -->
|
<!-- MES 库位选择器:纯下拉,前端过滤(支持 name、code),支持按库区筛选,悬停 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,
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,33 @@
|
||||||
<!-- MES 库区选择器:纯下拉,前端过滤(支持 name、code),支持按仓库筛选 -->
|
<!-- MES 库区选择器:纯下拉,前端过滤(支持 name、code),支持按仓库筛选,悬停 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,
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,33 @@
|
||||||
<!-- MES 仓库选择器:纯下拉,前端过滤(支持 name、code) -->
|
<!-- MES 仓库选择器:纯下拉,前端过滤(支持 name、code),悬停 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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue