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.
145 lines
3.0 KiB
145 lines
3.0 KiB
<template>
|
|
<div class='Descriptions' :style="getStyle()">
|
|
<div class="item" v-for="(item, index) in list" :key="`${item.key || item.label}${index}`"
|
|
:style="[gridStyle(item, index), transformStyle(itemStyle)]">
|
|
<div class="title text" :style="transformStyle(titleStyle)">
|
|
<slot :name="`title-${item.key || item.label}`" :data="item">
|
|
{{ item.label || '-' }}:
|
|
</slot>
|
|
</div>
|
|
<div class="content text" :style="{
|
|
...transformStyle(titleStyle),
|
|
...getDisplayColor(item)
|
|
}">
|
|
<slot :name="`content-${item.key || item.label}`" :data="item">
|
|
{{ getText(item) || '-' }}
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as EnumMap from "@screen/utils/enum.js"
|
|
|
|
export default {
|
|
name: 'Descriptions',
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
/**
|
|
* {
|
|
* key: string;
|
|
* label: string;
|
|
* gridRow: number;
|
|
* gridColumn: number;
|
|
* }[]
|
|
*/
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
column: {
|
|
type: String,
|
|
default: "2"
|
|
},
|
|
titleStyle: {
|
|
type: [String, Object],
|
|
default: null
|
|
},
|
|
contentStyle: {
|
|
type: [String, Object],
|
|
default: null
|
|
},
|
|
itemStyle: {
|
|
type: [String, Object],
|
|
default: null
|
|
},
|
|
},
|
|
computed: {
|
|
gridStyle() {
|
|
return (item, index) => ({
|
|
gridRow: `span ${item.gridRow || 1}`,
|
|
gridColumn: `span ${item.gridColumn || 1}`,
|
|
})
|
|
}
|
|
},
|
|
methods: {
|
|
getStyle() {
|
|
return {
|
|
gridTemplateColumns: `repeat(${this.column}, 1fr)`,
|
|
}
|
|
},
|
|
getText(item) {
|
|
const result = this.data[item.key];
|
|
|
|
if (item.enum) return EnumMap[item.enum][result]?.text;
|
|
|
|
const templateResult = item.key?.replace(/\$\{[^}]+\}/g, (key) => this.data[key.slice(2, -1)]);
|
|
|
|
if (templateResult && templateResult != item.key) return templateResult
|
|
|
|
return result || item.text;
|
|
},
|
|
getComponent(type) {
|
|
return `Form${type.replace(/^[a-z]/, word => word.toUpperCase())}`
|
|
},
|
|
transformStyle(style) {
|
|
if (typeof style != 'string') return style;
|
|
|
|
return style.split(';').reduce((prev, cur) => {
|
|
const [key, value] = cur.split(":");
|
|
|
|
prev[key] = value;
|
|
|
|
return prev;
|
|
}, {});
|
|
},
|
|
getDisplayColor(item) {
|
|
const style = {};
|
|
|
|
if (item.enum) {
|
|
const config = EnumMap[item.enum][this.data[item.key]];
|
|
|
|
if (config?.color) style.color = config.color;
|
|
}
|
|
|
|
return style;
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.Descriptions {
|
|
display: grid;
|
|
gap: 9px;
|
|
|
|
.text {
|
|
font-size: 15px;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFF;
|
|
line-height: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
gap: 6px;
|
|
|
|
.title {
|
|
color: #3DE8FF;
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|