feat(form,editor): 代码块编辑后关闭新增确认弹窗

packages/editor/src/components/CodeBlockEditor.vue

@@ -9,16 +9,19 @@
     :config="functionConfig"
     :values="content"
     :disabled="disabled"
+    :before-close="beforeClose"
+    @change="changeHandler"
     @submit="submitForm"
     @error="errorHandler"
     @open="openHandler"
+    @closed="closedHandler"
   ></MFormDrawer>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
 
-import { tMagicMessage } from '@tmagic/design';
+import { tMagicMessage, tMagicMessageBox } from '@tmagic/design';
 import { ColumnConfig, FormState, MFormDrawer } from '@tmagic/form';
 import type { CodeBlockContent } from '@tmagic/schema';
 
@@ -139,7 +142,7 @@ const functionConfig = computed(() => [
   },
 ]);
 
-const submitForm = async (values: CodeBlockContent) => {
+const submitForm = (values: CodeBlockContent) => {
   emit('submit', values);
 };
 
@@ -158,6 +161,36 @@ const openHandler = () => {
   });
 };
 
+const changedValue = ref<CodeBlockContent>();
+const changeHandler = (values: CodeBlockContent) => {
+  changedValue.value = values;
+};
+
+const beforeClose = (done: (cancel?: boolean) => void) => {
+  if (!changedValue.value) {
+    done();
+    return;
+  }
+  tMagicMessageBox
+    .confirm('当前代码块已修改，是否保存？', '提示', {
+      confirmButtonText: '保存并关闭',
+      cancelButtonText: '不保存并关闭',
+      type: 'warning',
+      distinguishCancelAndClose: true,
+    })
+    .then(() => {
+      changedValue.value && submitForm(changedValue.value);
+      done();
+    })
+    .catch((action: string) => {
+      done(action === 'close');
+    });
+};
+
+const closedHandler = () => {
+  changedValue.value = undefined;
+};
+
 defineExpose({
   show() {
     fomDrawer.value?.show();

packages/editor/src/layouts/CodeEditor.vue

@@ -33,8 +33,8 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<{
-    initValues?: string | Record<string | number, any> | null;
+    initValues?: any;
-    modifiedValues?: string | Record<string | number, any> | null;
+    modifiedValues?: any;
     type?: 'diff';
     language?: string;
     options?: {

packages/form/src/Form.vue

@@ -47,12 +47,12 @@ const props = withDefaults(
     /** 表单配置 */
     config: FormConfig;
     /** 表单值 */
-    initValues: Object;
+    initValues: Record<string, any>;
     /** 需对比的值（开启对比模式时传入） */
-    lastValues?: Object;
+    lastValues?: Record<string, any>;
     /** 是否开启对比模式 */
     isCompare?: boolean;
-    parentValues?: Object;
+    parentValues?: Record<string, any>;
     labelWidth?: string;
     disabled?: boolean;
     height?: string;

packages/form/src/FormDrawer.vue

@@ -1,6 +1,7 @@
 <template>
   <TMagicDrawer
     class="m-form-drawer"
+    ref="drawer"
     v-model="visible"
     :title="title"
     :close-on-press-escape="closeOnPressEscape"
@@ -9,8 +10,11 @@
     :close-on-click-modal="true"
     :size="width"
     :zIndex="zIndex"
+    :before-close="beforeClose"
     @open="openHandler"
     @opened="openedHandler"
+    @close="closeHandler"
+    @closed="closedHandler"
   >
     <div v-if="visible" ref="drawerBody" class="m-drawer-body">
       <Form
@@ -37,7 +41,7 @@
         </TMagicCol>
         <TMagicCol :span="12">
           <slot name="footer">
-            <TMagicButton @click="hide">关闭</TMagicButton>
+            <TMagicButton @click="handleClose">关闭</TMagicButton>
             <TMagicButton type="primary" :disabled="disabled" :loading="saveFetch" @click="submitHandler">{{
               confirmText
             }}</TMagicButton>
@@ -75,6 +79,8 @@ withDefaults(
     confirmText?: string;
     inline?: boolean;
     labelPosition?: string;
+    /** 关闭前的回调，会暂停 Drawer 的关闭; done 是个 function type 接受一个 boolean 参数, 执行 done 使用 true 参数或不提供参数将会终止关闭 */
+    beforeClose?: (done: (cancel?: boolean) => void) => void;
   }>(),
   {
     closeOnPressEscape: true,
@@ -84,8 +90,9 @@ withDefaults(
   },
 );
 
-const emit = defineEmits(['close', 'submit', 'error', 'change', 'open', 'opened']);
+const emit = defineEmits(['close', 'closed', 'submit', 'error', 'change', 'open', 'opened']);
 
+const drawer = ref<InstanceType<typeof TMagicDrawer>>();
 const form = ref<InstanceType<typeof Form>>();
 const drawerBody = ref<HTMLDivElement>();
 const visible = ref(false);
@@ -111,12 +118,20 @@ const changeHandler = (value: any) => {
   emit('change', value);
 };
 
-const openHandler = (value: any) => {
+const openHandler = () => {
-  emit('open', value);
+  emit('open');
 };
 
-const openedHandler = (value: any) => {
+const openedHandler = () => {
-  emit('opened', value);
+  emit('opened');
+};
+
+const closeHandler = () => {
+  emit('close');
+};
+
+const closedHandler = () => {
+  emit('closed');
 };
 
 const show = () => {
@@ -127,6 +142,11 @@ const hide = () => {
   visible.value = false;
 };
 
+/** 用于关闭 Drawer, 该方法会调用传入的 before-close 方法 */
+const handleClose = () => {
+  drawer.value?.handleClose();
+};
+
 defineExpose({
   form,
   saveFetch,
@@ -134,5 +154,6 @@ defineExpose({
 
   show,
   hide,
+  handleClose,
 });
 </script>