100 lines
2.3 KiB
Vue
100 lines
2.3 KiB
Vue
<template>
|
|
<div style="display: flex;justify-content: center;position:relative;">
|
|
<span class="stateIcon" :style="{backgroundColor: filterDictClass(cacheStore.getDict(dictType), value)}"></span>
|
|
<span >{{ tagConfig.label }}</span>
|
|
<span :style="{color: filterDictClass(cacheStore.getDict(dictType), value)}"> {{ filterDict(cacheStore.getDict(dictType), value) }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {defineProps} from "vue";
|
|
import {useCacheStore} from "@/stores/cache.js";
|
|
|
|
const cacheStore = useCacheStore();
|
|
const props = defineProps({
|
|
dictType: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
value: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
});
|
|
const tagConfig = reactive({
|
|
listClass: "green",
|
|
isType: true,
|
|
label: ""
|
|
});
|
|
const filterDictClass = (data, value) => {
|
|
if (!data) return
|
|
if (data instanceof Array) {
|
|
tagConfig.value = data.find(item => item.value == value)
|
|
if (!tagConfig.value) {
|
|
return '#409EFF'
|
|
} else {
|
|
if (tagConfig.value?.isType) {
|
|
return changeParams(tagConfig.value.listClass)
|
|
} else {
|
|
return tagConfig.value.listClass
|
|
}
|
|
}
|
|
}
|
|
}
|
|
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 || '未知'
|
|
}
|
|
/**
|
|
* 根据接口返回的listClass切换成对应的颜色
|
|
* @param listClass 后端返回的listClass字段
|
|
* @returns {string}
|
|
*/
|
|
const changeParams = (listClass) => {
|
|
switch (listClass) {
|
|
case 'danger':
|
|
return 'red'
|
|
case 'success':
|
|
return '#67C23A'
|
|
case 'info':
|
|
return '#909399'
|
|
case 'primary':
|
|
return '#409EFF'
|
|
case 'warning':
|
|
return '#E6A23C'
|
|
default:
|
|
return listClass
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
//.dot{
|
|
// width:8px;
|
|
// height: 20px;
|
|
// margin-left: -5px;
|
|
// background-color: green;
|
|
// z-index: 99999;
|
|
//}
|
|
:deep(.el-tag) {
|
|
position: relative;
|
|
margin-top: 9px;
|
|
margin-right: 7px;
|
|
height: 8px;
|
|
|
|
}
|
|
</style>
|