From fbe1d88d27bcaf53ea606706c2526fa5436e7e78 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 21 Dec 2023 16:30:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor,form):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E9=85=8D=E7=BD=AE=E8=A1=A8=E5=8D=95error?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

re #557
---
 packages/editor/src/Editor.vue             |  4 ++++
 packages/editor/src/layouts/PropsPanel.vue | 12 +++++++-----
 packages/form/src/Form.vue                 |  5 ++++-
 playground/src/pages/Editor.vue            |  7 +++++++
 4 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index 95d5b96f..3782d394 100644
--- a/packages/editor/src/Editor.vue
+++ b/packages/editor/src/Editor.vue
@@ -70,6 +70,8 @@
         <PropsPanel
           :extend-state="extendFormState"
           @mounted="(instance: any) => $emit('props-panel-mounted', instance)"
+          @form-error="(e: any) => $emit('props-form-error', e)"
+          @submit-error="(e: any) => $emit('props-submit-error', e)"
         >
           <template #props-panel-header>
             <slot name="props-panel-header"></slot>
@@ -137,6 +139,8 @@ defineOptions({
 const emit = defineEmits<{
   'props-panel-mounted': [instance: InstanceType<typeof PropsPanel>];
   'update:modelValue': [value: MApp | null];
+  'props-form-error': [e: any];
+  'props-submit-error': [e: any];
 }>();
 
 const props = withDefaults(defineProps<EditorProps>(), defaultEditorProps);
diff --git a/packages/editor/src/layouts/PropsPanel.vue b/packages/editor/src/layouts/PropsPanel.vue
index 6e9c153a..7ef63f6f 100644
--- a/packages/editor/src/layouts/PropsPanel.vue
+++ b/packages/editor/src/layouts/PropsPanel.vue
@@ -10,6 +10,7 @@
       :config="curFormConfig"
       :extend-state="extendState"
       @change="submit"
+      @error="errorHandler"
     ></MForm>
   </div>
 </template>
@@ -17,7 +18,6 @@
 <script lang="ts" setup>
 import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
 
-import { tMagicMessage } from '@tmagic/design';
 import type { FormState, FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
 
@@ -33,7 +33,7 @@ defineProps<{
   extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
 }>();
 
-const emit = defineEmits(['mounted']);
+const emit = defineEmits(['mounted', 'submit-error', 'form-error']);
 
 const internalInstance = getCurrentInstance();
 const values = ref<FormValue>({});
@@ -79,11 +79,13 @@ const submit = async () => {
     const values = await configForm.value?.submitForm();
     services?.editorService.update(values);
   } catch (e: any) {
-    console.error(e);
-    tMagicMessage.closeAll();
-    tMagicMessage.error(e.message);
+    emit('submit-error', e);
   }
 };
 
+const errorHandler = (e: any) => {
+  emit('form-error', e);
+};
+
 defineExpose({ configForm, submit });
 </script>
diff --git a/packages/form/src/Form.vue b/packages/form/src/Form.vue
index 4a721c45..27056ee6 100644
--- a/packages/form/src/Form.vue
+++ b/packages/form/src/Form.vue
@@ -79,7 +79,7 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['change', 'field-input', 'field-change']);
+const emit = defineEmits(['change', 'error', 'field-input', 'field-change']);
 
 const tMagicForm = ref<InstanceType<typeof TMagicForm>>();
 const initialized = ref(false);
@@ -182,6 +182,8 @@ defineExpose({
       await tMagicForm.value?.validate();
       return native ? values.value : cloneDeep(toRaw(values.value));
     } catch (invalidFields: any) {
+      emit('error', invalidFields);
+
       const error: string[] = [];
 
       Object.entries(invalidFields).forEach(([, ValidateError]) => {
@@ -191,6 +193,7 @@ defineExpose({
           if (!field && message) error.push(`${message}`);
         });
       });
+
       throw new Error(error.join('<br>'));
     }
   },
diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue
index 3633a5e2..4b03e6fa 100644
--- a/playground/src/pages/Editor.vue
+++ b/playground/src/pages/Editor.vue
@@ -17,6 +17,7 @@
       :moveable-options="moveableOptions"
       :auto-scroll-into-view="true"
       :stage-rect="stageRect"
+      @props-submit-error="propsSubmitErrorHandler"
     >
       <template #workspace-content>
         <DeviceGroup ref="deviceGroup" v-model="stageRect"></DeviceGroup>
@@ -237,6 +238,12 @@ editorService.usePlugin({
 onBeforeUnmount(() => {
   editorService.removeAllPlugins();
 });
+
+const propsSubmitErrorHandler = async (e: any) => {
+  console.error(e);
+  tMagicMessage.closeAll();
+  tMagicMessage.error(e.message);
+};
 </script>
 
 <style lang="scss">