102 lines
2.8 KiB
Vue
102 lines
2.8 KiB
Vue
<!--仪器组件的封装-->
|
||
<template>
|
||
<SelectTable v-model:data="modelValue" :fields="props.fields" :tableData="instrOptions" label="yqmc" size="small"
|
||
value="yq" objKey="yq" :border="true" :width="props.width" placeholder="请选择仪器" :clearable="false" @getDataValue="getDataValue" />
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import SelectTable from '@/components/SelectTable/index.vue';
|
||
import { getGroupInstrdList } from '@/api/liswork/work/LisWork';
|
||
import { Emits,Props,Field } from '@/types';
|
||
import { ref, watch, onMounted } from 'vue';
|
||
|
||
const modelValue = ref<string | null>('');
|
||
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
placeholder: "请选择",
|
||
size: "default",
|
||
isHighlight: true,
|
||
value: undefined,
|
||
label: undefined,
|
||
border: false,
|
||
width: "100%",
|
||
dictType: '',
|
||
clearable: true,
|
||
fields: () => [
|
||
{ prop: 'yq', label: '代号', width: 80, enablePinyinSearch: true },
|
||
{ prop: 'yqmc', label: '名称', width: 150, enablePinyinSearch: true },
|
||
] as Field[]
|
||
});
|
||
|
||
const instrOptions = ref<Array<{ yq: string; yqmc: string }>>([]);
|
||
const emits = defineEmits<Emits>();
|
||
|
||
// 当父组件使用 v-model:data 绑定时，props.data 代表父传入的值。
|
||
// 需要将其同步到内部的 modelValue，以便 SelectTable 的 v-model:data 能正确反向绑定。
|
||
watch(() => props.data, (newVal) => {
|
||
// 仅当内部值与外部值不一致时进行同步，避免不必要覆盖用户交互时的临时值。
|
||
if (newVal !== modelValue.value) {
|
||
modelValue.value = newVal ?? '';
|
||
}
|
||
});
|
||
|
||
const getYqConfig = () => {
|
||
getGroupInstrdList()
|
||
.then((res: any) => {
|
||
if (res.code == 0) {
|
||
instrOptions.value = res.data.map((item: any) => ({
|
||
yq: item.yq.trim(),
|
||
yqmc: item.yqmc
|
||
}))
|
||
}
|
||
})
|
||
}
|
||
|
||
const getDataValue = (val: any) => {
|
||
emits('getDataValue', val);
|
||
};
|
||
|
||
const handleDataEcho = (val: any) => {
|
||
// if (modelValue.value === null || modelValue.value === undefined) {
|
||
// modelValue.value = '';
|
||
// emits('update:data', null);
|
||
// return;
|
||
// }
|
||
// const matchedInstr = instrOptions.value.find(item => item.yq === modelValue.value);
|
||
// if (matchedInstr) {
|
||
// emits('update:data', matchedInstr.yq);
|
||
// } else {
|
||
// emits('update:data', '');
|
||
// }
|
||
emits('update:data', val);
|
||
|
||
};
|
||
|
||
// 监听表格数据和字典类型变化
|
||
watch(() => instrOptions, (newVal) => {
|
||
if (newVal) {
|
||
handleDataEcho(newVal);
|
||
}
|
||
}, { deep: true });
|
||
|
||
// 监听绑定值数据变化，重新处理
|
||
watch(() => modelValue, (newVal) => {
|
||
if (newVal) {
|
||
// 数据回显
|
||
handleDataEcho(newVal);
|
||
}
|
||
|
||
}, { deep: true });
|
||
|
||
|
||
onMounted(() => {
|
||
getYqConfig();
|
||
// 初始化时同步一次父级值（如果有）到内部 modelValue
|
||
if (props.data !== undefined && props.data !== null) {
|
||
modelValue.value = props.data as any;
|
||
}
|
||
});
|
||
|
||
|
||
|
||
</script> |