city-gather-admin/src/components/zt/dict-select/index.vue

<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import type { SelectProps } from 'naive-ui';
import { useDict } from '@/hooks/business/dict';
import type { disctSelectProps } from '.';

defineOptions({ name: 'DictSelect' });

const props = withDefaults(defineProps<disctSelectProps>(), {
  immediate: false,
  multiple: false
});

const value = defineModel<string | string[] | null>('value', { required: false });

const attrs: SelectProps = useAttrs();
const { options } = useDict(props.dictCode, props.immediate);
const newOptions = computed(() => {
  return options.value
    .filter(item => !props.allowedValues || props.allowedValues.includes(item.value))
    .map(item => {
      return {
        label: item.label,
        value: item.value,
        disabled: Boolean(props.disabledLables?.includes(item.label))
      };
    });
});
</script>

<template>
  <NSelect
    v-model:value="value"
    :multiple="multiple"
    :loading="!options.length"
    :options="newOptions"
    :clear-filter-after-select="false"
    v-bind="attrs"
  />
</template>

<style scoped></style>