feat(editor,form): 新增属性配置表单error事件

re #557

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);

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>

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>'));
     }
   },

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">