63 lines
1.5 KiB
Vue
63 lines
1.5 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import { useDict } from '@/hooks/business/dict';
|
||
|
|
|
||
|
|
defineOptions({ name: 'DictSelect' });
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
dictCode: string;
|
||
|
|
placeholder?: string;
|
||
|
|
disabled?: boolean;
|
||
|
|
clearable?: boolean;
|
||
|
|
filterable?: boolean;
|
||
|
|
onlyEnabled?: boolean;
|
||
|
|
multiple?: boolean;
|
||
|
|
collapseTags?: boolean;
|
||
|
|
collapseTagsTooltip?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
|
placeholder: '请选择',
|
||
|
|
disabled: false,
|
||
|
|
clearable: true,
|
||
|
|
filterable: false,
|
||
|
|
onlyEnabled: true,
|
||
|
|
multiple: false,
|
||
|
|
collapseTags: false,
|
||
|
|
collapseTagsTooltip: false
|
||
|
|
});
|
||
|
|
|
||
|
|
const model = defineModel<string | number | Array<string | number> | null | undefined>({
|
||
|
|
default: undefined
|
||
|
|
});
|
||
|
|
|
||
|
|
const { enabledDictData, dictData } = useDict(() => props.dictCode);
|
||
|
|
|
||
|
|
const dictOptions = computed(() => {
|
||
|
|
const source = props.onlyEnabled ? enabledDictData.value : dictData.value;
|
||
|
|
|
||
|
|
return source.map(item => ({
|
||
|
|
label: item.label,
|
||
|
|
value: item.value
|
||
|
|
}));
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<ElSelect
|
||
|
|
v-model="model"
|
||
|
|
class="w-full"
|
||
|
|
:placeholder="props.placeholder"
|
||
|
|
:disabled="props.disabled"
|
||
|
|
:clearable="props.clearable"
|
||
|
|
:filterable="props.filterable"
|
||
|
|
:multiple="props.multiple"
|
||
|
|
:collapse-tags="props.collapseTags"
|
||
|
|
:collapse-tags-tooltip="props.collapseTagsTooltip"
|
||
|
|
>
|
||
|
|
<ElOption v-for="item in dictOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||
|
|
</ElSelect>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped></style>
|