You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.3 KiB
62 lines
1.3 KiB
<template>
|
|
<span class="dict-tag">
|
|
{{ labels.length > 0 ? labels.join(separator) : '' }}
|
|
</span>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, watch } from 'vue';
|
|
import { getDicts } from '@/api/system/dict/data';
|
|
|
|
const props = defineProps({
|
|
type: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
value: {
|
|
type: [String, Number, Array],
|
|
required: true
|
|
},
|
|
separator: {
|
|
type: String,
|
|
default: '、' // 默认用中文顿号分隔
|
|
}
|
|
});
|
|
|
|
const labelMap = ref({});
|
|
const labels = ref([]);
|
|
|
|
// 将 value 转换为数组
|
|
const parseValue = (val) => {
|
|
if (Array.isArray(val)) {
|
|
return val.map(String);
|
|
} else if (typeof val === 'string') {
|
|
return val.split(',').map((s) => s.trim());
|
|
} else {
|
|
return [String(val)];
|
|
}
|
|
};
|
|
|
|
// 加载字典数据并生成标签列表
|
|
const loadLabels = async () => {
|
|
try {
|
|
const res = await getDicts(props.type);
|
|
const map = res.data.reduce((acc, item) => {
|
|
acc[item.dictValue] = item.dictLabel;
|
|
return acc;
|
|
}, {});
|
|
labelMap.value = map;
|
|
|
|
const codes = parseValue(props.value);
|
|
labels.value = codes.map((code) => map[code] || '').filter(Boolean);
|
|
} catch (e) {
|
|
labels.value = [];
|
|
}
|
|
};
|
|
|
|
onMounted(loadLabels);
|
|
watch(() => props.value, loadLabels); // 当 value 变化时重新加载
|
|
</script>
|
|
|
|
<style scoped></style>
|