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

<!--仪器组件的封装-->
<template>
  <SelectTable v-model:data="modelValue" :fields="fields" :tableData="instrOptions" label="yqmc" :size="props.size"
    value="yq" objKey="yq" :border="true" :width="props.width" placeholder="请选择仪器" :clearable="props.clearable"
    @getDataValue="getDataValue" v-bind="$attrs" />
</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<{
  width?: string | number,
  size?: string,
  clearable?: boolean,
  instrGroup?: string | number, //部门组代号
  data: string | undefined
}>(), {
  width: '100%',
  size: 'default',
  clearable: false,
  data: ''
})

const instrOptions = ref<Array<{ yq: string; yqmc: string }>>([]);

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


const getYqConfig = () => {
  const data = {
    lisgroup: props.instrGroup
  }
  getGroupInstrdList(data)
    .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('update:data', val.yq);
  emits('getDataValue', val);
};

watch(() => props.data, (val) => {
  modelValue.value = val;
});

onMounted(() => {
  // 初始化时同步一次父级值（如果有）到内部 modelValue
  if (props.data !== undefined && props.data !== null) {
    modelValue.value = props.data as any;
  }
  getYqConfig();
});



</script>