1122

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

@@ -0,0 +1,131 @@
+<template>
+    <a-modal
+        :width="prop.width"
+        v-model:visible="modal.visible"
+        :on-before-ok="modal.submit"
+        :unmount-on-close="true"
+        @cancel="modal.cancel"
+    >
+        <template #title>
+            {{ prop.title }}
+        </template>
+        <slot name="body"></slot>
+        <a-card class="mt-2" :hoverable="true" v-for="info in layout">
+            <ma-info
+                v-if="isArray(info?.child)"
+                :title="info.title"
+                :columns="info.child"
+                :data="infoData"
+                ref="maInfoRefs"
+            ></ma-info>
+            <a-descriptions :title="info.title" v-else>
+                <component :data="infoData" :is="info?.component" />
+            </a-descriptions>
+        </a-card>
+        <ma-form
+            v-model="form"
+            ref="maFormRef"
+            v-if="prop.formColumns.length > 0"
+            :columns="prop.formColumns"
+            :options="{ showButtons: false, ...prop.formOptions }"
+        />
+    </a-modal>
+</template>
+
+<script setup>
+import MaInfo from "../ma-info/index.vue"
+import { getCurrentInstance, reactive, ref, watch } from "vue"
+import { isArray, isFunction, isObject, isString } from "lodash"
+import { isComponent } from "@arco-design/web-vue/es/_utils/vue-utils"
+const emit = defineEmits(["visible", "validateError", "open", "cancel", "close"])
+const app = getCurrentInstance().appContext.app
+const maFormRef = ref()
+const prop = defineProps({
+    width: { type: Number, default: 1200 }, // modal框大小
+    title: { type: String, default: "" }, // 弹出框标题
+    column: { type: Array, default: [] }, // ma-form字段
+    default_visible: { type: Boolean, default: false }, // 默认隐藏
+    options: { type: Object, default: {} }, // ma-form 属性
+    submit: { type: Function, default: () => {} },
+    layout: { type: Object, default: [] },
+    formOptions: { type: Object, default: {} }, // ma-form-options
+    formColumns: { type: Array, default: [] }
+})
+const maInfoRefs = ref([])
+const layout = ref([])
+const infoData = ref({})
+const form = ref({})
+
+watch(
+    () => prop.layout,
+    (val) => {
+        layout.value = val
+    },
+    {
+        immediate: true
+    }
+)
+
+let columnMap = {}
+const init = async () => {
+    let column = prop.column
+    column.forEach((item) => {
+        columnMap[item.dataIndex] = item
+    })
+    if (layout.value.length > 0) {
+        layout.value.forEach((item) => {
+            if (item.component) {
+                app.component(item.component, item.child)
+                return
+            }
+            item.child.forEach((child, index) => {
+                if (isString(child)) {
+                    item.child[index] = columnMap[child]
+                }
+            })
+        })
+    } else {
+        layout.value.push({
+            title: "",
+            child: column
+        })
+    }
+}
+
+const modal = reactive({
+    visible: prop.default_visible,
+    open(data, formData = {}) {
+        modal.visible = true
+        for (let [key, value] of Object.entries(data)) {
+            infoData.value[key] = value
+        }
+        for (let [key, value] of Object.entries(formData)) {
+            form.value[key] = value
+        }
+        emit("open", infoData)
+    },
+    close() {
+        modal.visible = false
+    },
+    async submit() {
+        let validate = await maFormRef.value.validateForm()
+        if (validate) {
+            emit("validateError", validate)
+            return false
+        }
+        return prop.submit(form._rawValue)
+    },
+    cancel() {
+        emit("cancel")
+    }
+})
+
+init()
+defineExpose({
+    open: modal.open,
+    close: modal.close,
+    data: infoData
+})
+</script>
+
+<style scoped></style>