lis8.0-vue3/src/components/SelectTable/YQSelectTable/index.vue

<!--仪器组件的封装-->
<template>
<SelectTable v-model:data="modelValue" :fields="yqFields" :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 } from '@/types';

const props = withDefaults(defineProps<Props>(), {
  placeholder: "请选择",
  size: "default",
  isHighlight: true,
  value: undefined,
  label: undefined,
  border: false,
  width: "100%",
  dictType: '',
  clearable: true
});

const modelValue = ref('');
const yqFields = ref([
  { prop: 'yq', label: '代号', width: 80, enablePinyinSearch: true },
  { prop: 'yqmc', label: '名称', width: 150, enablePinyinSearch: true },
]);
const instrOptions = ref<{ yq: string; yqmc: string }[]>([])
const emits = defineEmits<Emits>();

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 = () => {
  // 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', modelValue.value);
  
};

// 监听表格数据和字典类型变化
watch(() => instrOptions, (newVal) => {
  if (newVal) {
    handleDataEcho();
  }
}, { deep: true });

// 监听绑定值数据变化，重新处理
watch(() => modelValue, (newVal) => {
  // 数据回显
  handleDataEcho();
}, { deep: true });


onMounted(() => {
  getYqConfig();
});



</script>