✨ feat(mes): 增加计量单位选择器的悬停 tooltip 展示详情
parent
018a6975ec
commit
ed6fdd5894
|
|
@ -1,24 +1,37 @@
|
|||
<!-- MES 计量单位选择器:纯下拉,前端过滤(支持 name、code) -->
|
||||
<!-- MES 计量单位选择器:纯下拉,前端过滤(支持 name、code),悬停 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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue