1122

cdTMP/src/components/ma-info/index.vue

@@ -0,0 +1,120 @@
+<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>