1122

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

@@ -0,0 +1,73 @@
+<template>
+    <a-modal v-model:visible="modal.visible" :on-before-ok="modal.submit" unmount-on-close @cancel="modal.cancel">
+        <template #title>
+            {{ prop.title }}
+        </template>
+        <slot name="body"></slot>
+        <ma-form ref="maFormRef" :columns="prop.column" v-model="form" :options="{ ...options, showButtons: false }" />
+    </a-modal>
+</template>
+
+<script setup>
+/**
+ * 组件 - 弹窗form组件
+ * 事件
+ *  @visible(show = true|false) 显示关闭事件
+ */
+import { reactive, ref, watch } from "vue"
+import MaForm from "@/components/ma-form/index.vue"
+import { Message } from "@arco-design/web-vue"
+const emit = defineEmits(["visible", "validateError", "open", "cancel", "close"])
+const form = ref({})
+const prop = defineProps({
+    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: () => {} }
+})
+
+const maFormRef = ref()
+
+const modal = reactive({
+    visible: prop.default_visible,
+    open(data) {
+        modal.visible = true
+        for (let [key, value] of Object.entries(data)) {
+            form.value[key] = value
+        }
+        emit("open", data)
+    },
+    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")
+    }
+})
+
+watch(
+    () => modal.visible,
+    (vl) => {
+        emit("visible", modal.visible)
+    },
+    { immediate: true }
+)
+
+defineExpose({
+    open: modal.open,
+    close: modal.close,
+    form: form,
+    formRef: maFormRef
+})
+</script>
+
+<style scoped></style>