lis8.0-vue3/src/components/SelectTable/YQSelectTable/index.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>