vue更新3.5，以及mime打更新

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

@@ -1,20 +1,23 @@
 <template>
     <a-modal
+        :width="prop.width"
+        :fullscreen="isFull"
         v-model:visible="modal.visible"
         :on-before-ok="modal.submit"
         unmount-on-close
         @cancel="modal.cancel"
-        :width="width"
-        draggable
-        :on-before-cancel="modal.customCancel"
-        v-bind="$attrs"
     >
         <template #title>
             {{ prop.title }}
         </template>
         <slot name="body"></slot>
-        <ma-form ref="maFormRef" :columns="prop.column" v-model="form" :options="{ ...options, showButtons: false }">
-            <template #[`inputPrepend-version`]>V </template>
+        <a-space v-if="prop.infoColumns.length">
+            <ma-info :columns="prop.infoColumns" :data="prop.infoData" />
+        </a-space>
+        <ma-form ref="maFormRef" :columns="formColumns" v-model="form" :options="{ ...options, showButtons: false }">
+            <template v-for="(value, key) in $slots" #[key]="slotProps" :key="key">
+                <slot :name="key" v-bind="slotProps"></slot>
+            </template>
         </ma-form>
     </a-modal>
 </template>
@@ -28,29 +31,50 @@
 import { reactive, ref, watch } from "vue"
 import MaForm from "@/components/ma-form/index.vue"
 import { Message } from "@arco-design/web-vue"
+import MaInfo from "@/components/ma-info/index.vue"
+import { setModalSizeEvent } from "@/utils/common"
+
 const emit = defineEmits(["visible", "validateError", "open", "cancel", "close"])
 const form = ref({})
+const formColumns = ref([])
 const prop = defineProps({
+    width: { type: Number, default: 1200 }, // modal框大小
+    isFull: { type: Boolean, default: false }, // 是否全屏
     title: { type: String, default: "" }, // 弹出框标题
     column: { type: Array, default: [] }, // ma-form字段
+    columns: { type: Array, default: [] }, // ma-form字段 别名
+    infoColumns: { type: Array, default: [] },
+    infoData: { type: Object, default: {} },
     default_visible: { type: Boolean, default: false }, // 默认隐藏
     options: { type: Object, default: {} }, // ma-form 属性
-    submit: { type: Function, default: () => {} },
-    width: { type: String, default: "1000" + "px" },
-    // 自定义异步取消参数
-    customCancel: { type: Function, default: null }
+    submit: { type: Function, default: () => {} }
 })
 
+const isFull = ref(prop.isFull)
+setModalSizeEvent((config) => {
+    isFull.value = config.isFull
+})
+
+formColumns.value = [...prop.column, ...prop.columns]
+let submitEvent = prop.submit
+
 const maFormRef = ref()
 
 const modal = reactive({
     visible: prop.default_visible,
-    open(data) {
+    open(formData, infoData = {}) {
         modal.visible = true
-        for (let [key, value] of Object.entries(data)) {
+        for (let [key, value] of Object.entries(formData)) {
             form.value[key] = value
         }
-        emit("open", data)
+        for (let [key, value] of Object.entries(infoData)) {
+            prop.infoData[key] = value
+        }
+        emit("open", formData, infoData)
+    },
+    onSubmit(func) {
+        submitEvent = func
+        return this
     },
     close() {
         modal.visible = false
@@ -61,13 +85,7 @@ const modal = reactive({
             emit("validateError", validate)
             return false
         }
-        return prop.submit(form._rawValue)
-    },
-    customCancel() {
-        if (prop.customCancel) {
-            return prop.customCancel()
-        }
-        return true
+        return submitEvent(form._rawValue)
     },
     cancel() {
         emit("cancel")
@@ -82,11 +100,17 @@ watch(
     { immediate: true }
 )
 
+const getAttr = (key) => {
+    return form.value[key]
+}
+
 defineExpose({
     open: modal.open,
     close: modal.close,
     form: form,
-    formRef: maFormRef
+    getAttr,
+    formRef: maFormRef,
+    onSubmit: modal.onSubmit
 })
 </script>