96 lines
2.1 KiB
Vue
96 lines
2.1 KiB
Vue
<template>
|
|
<div style="display: flex;justify-content: center">
|
|
<span class="stateIcon" :style="{backgroundColor: filterDictClass(cacheStore.getDict(dictType), value)}"></span>
|
|
<span>{{tag.label}}</span>
|
|
<span> {{ 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 tag = reactive({
|
|
listClass: "green",
|
|
isType: true,
|
|
label: ""
|
|
});
|
|
// const dictList = cacheStore.getDict(props.dictType);
|
|
// const dictFormat = () => {
|
|
// if(dictList===undefined) return;
|
|
// for (let i = 0; i < dictList.length; i++) {
|
|
// if(dictList[i].value=== props.value){
|
|
// tag.label = dictList[i].label;
|
|
// tag.listClass=changeParams(dictList[i].listClass)
|
|
// tag.isType = dictList[i].isType;
|
|
// }
|
|
// }
|
|
// };
|
|
const filterDictClass = (data, value) => {
|
|
if(!data) return
|
|
|
|
if(data instanceof Array) {
|
|
tag.value = data.find(item => item.value == value)
|
|
}
|
|
return changeParams(tag.value.listClass)
|
|
}
|
|
const filterDict = (data, value) => {
|
|
if(!data) return
|
|
|
|
if(data instanceof Array) {
|
|
tag.value = data.find(item => item.value == value)
|
|
}
|
|
return tag.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
|
|
}
|
|
}
|
|
// dictFormat()
|
|
</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>
|