Files
mosr-web/src/components/Tag.vue

64 lines
1.6 KiB
Vue

<template>
<div class="tag-style">
<el-tag v-if="tagConfig.isType" :type="tagConfig.listClass" :effect="tagConfig.theme || 'plain'">
{{ filterDict(cacheStore.getDict(dictType), value) }}
</el-tag>
<el-tag v-else :color="tagConfig.listClass" :effect="tagConfig.theme || 'plain'"
:class="{'null-tag':filterDict(cacheStore.getDict(dictType), value)===undefined}">
{{ filterDict(cacheStore.getDict(dictType), value) }}
</el-tag>
</div>
</template>
<script setup>
import {useCacheStore} from "@/stores/cache.js";
import {defineProps, nextTick} from "vue";
const cacheStore = useCacheStore();
const props = defineProps({
dictType: {
type: String,
default: "",
required: true
},
value: {
type: String || Number,
default: null
}
});
const tagConfig = ref({})
const filterDict = (data, value) => {
if (!data || value == null) return
if (data instanceof Array) {
if (value == true || value == false) {
tagConfig.value = data.find(item => item.value == value.toString())
} else if (typeof value === "object") {
if (value !== null) {
tagConfig.value = data.find(item => item.value == value[0])
} else {
tagConfig.value = {}
}
} else {
tagConfig.value = data.find(item => item.value == value)
}
}
return tagConfig.value?.label || '未知'
}
</script>
<style scoped lang="scss">
.tag-style {
:deep(.el-tag.el-tag--dark) {
border-color: transparent !important;
}
.null-tag {
border-color: transparent;
background-color: transparent;
}
}
</style>