feat(mes): 增加计量单位选择器的悬停 tooltip 展示详情

pull/871/MERGE
YunaiV 2026-04-06 16:33:21 +08:00
parent 018a6975ec
commit ed6fdd5894
1 changed files with 53 additions and 19 deletions

View File

@ -1,24 +1,37 @@
<!-- MES 计量单位选择器纯下拉前端过滤支持 namecode -->
<!-- MES 计量单位选择器纯下拉前端过滤支持 namecode悬停 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.primaryFlag ? '是' : '否' }}</div>
<div v-if="!selectedItem.primaryFlag && selectedItem.changeRate != null">
换算比例{{ selectedItem.changeRate }}
</div>
<div v-if="selectedItem.remark">{{ selectedItem.remark }}</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 +60,7 @@ const emit = defineEmits<{
const allList = ref<MdUnitMeasureVO[]>([])
const filteredList = ref<MdUnitMeasureVO[]>([])
const selectedItem = ref<MdUnitMeasureVO | undefined>() // tooltip
const selectValue = computed({
get: () => props.modelValue,
@ -69,12 +83,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 MdUnitMeasureApi.getUnitMeasureSimpleList()
filteredList.value = allList.value
// selectedItem
if (props.modelValue != null) {
selectedItem.value = allList.value.find((o) => o.id === props.modelValue)
}
})
</script>