parent
20433f8923
commit
13f44a3658
@ -0,0 +1,61 @@
|
||||
<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>
|
||||
@ -1,115 +1,114 @@
|
||||
@font-face {
|
||||
font-family: "iconfont";
|
||||
src: url('@/static/font/iconfont.ttf') format('truetype');
|
||||
font-family: "iconfont";
|
||||
src: url('@/static/font/iconfont.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Aboreto-Regular';
|
||||
src: url("@/static/font/Aboreto-Regular.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'MiSans-Medium';
|
||||
src: url("@/static/font/MiSans-Medium.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'MiSans-Regular';
|
||||
src: url("@/static/font/MiSans-Regular.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Aboreto-Bold';
|
||||
src: url("@/static/font/MiSans-Bold.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Alimama ShuHeiTi-Bold';
|
||||
src: url("@/static/font/ALIMAMASHUHEITI-BOLD.TTF");
|
||||
}
|
||||
font-family: 'Aboreto-Regular';
|
||||
src: url("@/static/font/Aboreto-Regular.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'MiSans-Medium';
|
||||
src: url("@/static/font/MiSans-Medium.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'MiSans-Regular';
|
||||
src: url("@/static/font/MiSans-Regular.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Aboreto-Bold';
|
||||
src: url("@/static/font/MiSans-Bold.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Alimama ShuHeiTi-Bold';
|
||||
src: url("@/static/font/ALIMAMASHUHEITI-BOLD.ttf");
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-user:before {
|
||||
content: "\e7ae";
|
||||
content: "\e7ae";
|
||||
}
|
||||
|
||||
.icon-password:before {
|
||||
content: "\e8b2";
|
||||
content: "\e8b2";
|
||||
}
|
||||
|
||||
.icon-code:before {
|
||||
content: "\e699";
|
||||
content: "\e699";
|
||||
}
|
||||
|
||||
.icon-setting:before {
|
||||
content: "\e6cc";
|
||||
content: "\e6cc";
|
||||
}
|
||||
|
||||
.icon-share:before {
|
||||
content: "\e739";
|
||||
content: "\e739";
|
||||
}
|
||||
|
||||
.icon-edit:before {
|
||||
content: "\e60c";
|
||||
content: "\e60c";
|
||||
}
|
||||
|
||||
.icon-version:before {
|
||||
content: "\e63f";
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.icon-service:before {
|
||||
content: "\e6ff";
|
||||
content: "\e6ff";
|
||||
}
|
||||
|
||||
.icon-friendfill:before {
|
||||
content: "\e726";
|
||||
content: "\e726";
|
||||
}
|
||||
|
||||
.icon-community:before {
|
||||
content: "\e741";
|
||||
content: "\e741";
|
||||
}
|
||||
|
||||
.icon-people:before {
|
||||
content: "\e736";
|
||||
content: "\e736";
|
||||
}
|
||||
|
||||
.icon-dianzan:before {
|
||||
content: "\ec7f";
|
||||
content: "\ec7f";
|
||||
}
|
||||
|
||||
.icon-right:before {
|
||||
content: "\e7eb";
|
||||
content: "\e7eb";
|
||||
}
|
||||
|
||||
.icon-logout:before {
|
||||
content: "\e61d";
|
||||
content: "\e61d";
|
||||
}
|
||||
|
||||
.icon-help:before {
|
||||
content: "\e616";
|
||||
content: "\e616";
|
||||
}
|
||||
|
||||
.icon-github:before {
|
||||
content: "\e628";
|
||||
content: "\e628";
|
||||
}
|
||||
|
||||
.icon-aixin:before {
|
||||
content: "\e601";
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
.icon-clean:before {
|
||||
content: "\e607";
|
||||
content: "\e607";
|
||||
}
|
||||
|
||||
.icon-refresh:before {
|
||||
content: "\e604";
|
||||
}
|
||||
|
||||
content: "\e604";
|
||||
}
|
||||
Loading…
Reference in new issue