121 lines
3.5 KiB
Vue
121 lines
3.5 KiB
Vue
|
<template>
|
||
|
|
<a-space direction="vertical" size="large" fill>
|
||
|
|
<a-descriptions
|
||
|
|
:data="descriptions"
|
||
|
|
:column="props.column"
|
||
|
|
:title="props.title"
|
||
|
|
:layout="props.layout"
|
||
|
|
:bordered="props.bordered"
|
||
|
|
table-layout="fixed"
|
||
|
|
:size="props.size"
|
||
|
|
:label-style="props.labelStyle"
|
||
|
|
:value-style="props.valueStyle"
|
||
|
|
>
|
||
|
|
<a-descriptions-item v-for="item in descriptions" :label="item.label">
|
||
|
|
<template v-if="item.formType === 'upload'">
|
||
|
|
<a-image-preview-group infinite v-if="isArray(item.value)">
|
||
|
|
<a-space>
|
||
|
|
<a-image v-for="src in item.value" :src="tool.viewImage(src)" width="50" />
|
||
|
|
</a-space>
|
||
|
|
</a-image-preview-group>
|
||
|
|
<a-image v-else :src="tool.viewImage(item.value)" width="50"></a-image>
|
||
|
|
</template>
|
||
|
|
<template v-else-if="item.infoSlot">
|
||
|
|
<slot :name="item.dataIndex" :row="item" :data="data"></slot>
|
||
|
|
</template>
|
||
|
|
<template v-else-if="item.formType === 'radio' || item.formType === 'select'">
|
||
|
|
<a-tag color="blue">{{ item.dict.data.find((row) => row.value == item.value)?.label }}</a-tag>
|
||
|
|
</template>
|
||
|
|
<div v-else>{{ item.value }} {{ item?.textAppend }}</div>
|
||
|
|
</a-descriptions-item>
|
||
|
|
</a-descriptions>
|
||
|
|
</a-space>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { getCurrentInstance, inject, provide, ref, watch } from "vue"
|
||
|
|
import tool from "@/utils/tool"
|
||
|
|
import { get, isArray, isBoolean, isEmpty, isFunction } from "lodash"
|
||
|
|
import { loadDict } from "@cps/ma-form/js/networkRequest.js"
|
||
|
|
import globalColumn from "@/config/column.js"
|
||
|
|
|
||
|
|
const dictList = {}
|
||
|
|
const app = getCurrentInstance().appContext.app
|
||
|
|
const columns = ref([])
|
||
|
|
const data = ref({})
|
||
|
|
const descriptions = ref([])
|
||
|
|
const dictData = ref([])
|
||
|
|
const props = defineProps({
|
||
|
|
columns: { type: Array, default: [] },
|
||
|
|
data: {},
|
||
|
|
column: { default: 3 },
|
||
|
|
title: {
|
||
|
|
default: ""
|
||
|
|
},
|
||
|
|
bordered: {
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
layout: {
|
||
|
|
default: "vertical"
|
||
|
|
},
|
||
|
|
labelStyle: {
|
||
|
|
default: {}
|
||
|
|
},
|
||
|
|
valueStyle: {
|
||
|
|
default: {}
|
||
|
|
},
|
||
|
|
size: {
|
||
|
|
default: "large"
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => props.columns,
|
||
|
|
(vl) => {
|
||
|
|
columns.value = vl
|
||
|
|
},
|
||
|
|
{ deep: true, immediate: true }
|
||
|
|
)
|
||
|
|
|
||
|
|
const reset = (vl) => {
|
||
|
|
data.value = vl
|
||
|
|
descriptions.value = []
|
||
|
|
if (!columns.value) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
columns.value.forEach(async (item) => {
|
||
|
|
let value = null
|
||
|
|
if (isEmpty(item) || item.dataIndex === "__operation" || item.infoShow === false) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (isBoolean(item.common) && item.common && globalColumn[item.dataIndex]) {
|
||
|
|
item = globalColumn[item.dataIndex]
|
||
|
|
}
|
||
|
|
if (item.dict) {
|
||
|
|
await loadDict(dictList, item)
|
||
|
|
item.dict.data = dictList[item.dataIndex] ?? []
|
||
|
|
}
|
||
|
|
if (isFunction(item.customRender)) {
|
||
|
|
value = item.customRender({ record: data.value })
|
||
|
|
}
|
||
|
|
descriptions.value.push({
|
||
|
|
...item,
|
||
|
|
label: item.title,
|
||
|
|
value: value ?? get(data.value, item.dataIndex)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => props.data,
|
||
|
|
(vl) => {
|
||
|
|
reset(vl)
|
||
|
|
},
|
||
|
|
{ deep: true, immediate: true }
|
||
|
|
)
|
||
|
|
|
||
|
|
defineExpose({ reset })
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped></style>
|