|
|
@ -1,15 +1,18 @@ |
|
|
|
<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), resolveStyle(itemStyle)]"> |
|
|
|
<div class="title text" :style="resolveStyle(titleStyle)"> |
|
|
|
: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="resolveStyle(contentStyle)"> |
|
|
|
<div class="content text" :style="{ |
|
|
|
...transformStyle(titleStyle), |
|
|
|
...getDisplayColor(item) |
|
|
|
}"> |
|
|
|
<slot :name="`content-${item.key || item.label}`" :data="item"> |
|
|
|
{{ data[item.key] || '-' }} |
|
|
|
{{ getText(item) || '-' }} |
|
|
|
</slot> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -17,6 +20,8 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import * as EnumMap from "@screen/utils/enum.js" |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'Descriptions', |
|
|
|
props: { |
|
|
@ -67,10 +72,21 @@ export default { |
|
|
|
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 |
|
|
|
}, |
|
|
|
getComponent(type) { |
|
|
|
return `Form${type.replace(/^[a-z]/, word => word.toUpperCase())}` |
|
|
|
}, |
|
|
|
resolveStyle(style) { |
|
|
|
transformStyle(style) { |
|
|
|
if (typeof style != 'string') return style; |
|
|
|
|
|
|
|
return style.split(';').reduce((prev, cur) => { |
|
|
@ -79,7 +95,18 @@ export default { |
|
|
|
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; |
|
|
|
|
|
|
|
}, |
|
|
|
} |
|
|
|