feat(form,editor): 表单新增修改数据记录

packages/editor/src/components/CodeBlockEditor.vue

@@ -63,7 +63,13 @@ import { computed, inject, Ref, ref } from 'vue';
 
 import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
-import { type FormConfig, type FormState, MFormBox, type TableColumnConfig } from '@tmagic/form';
+import {
+  type ContainerChangeEventData,
+  type FormConfig,
+  type FormState,
+  MFormBox,
+  type TableColumnConfig,
+} from '@tmagic/form';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
@@ -88,7 +94,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  submit: [values: CodeBlockContent];
+  submit: [values: CodeBlockContent, eventData: ContainerChangeEventData];
 }>();
 
 const services = inject<Services>('services');
@@ -209,9 +215,9 @@ const functionConfig = computed<FormConfig>(() => [
   },
 ]);
 
-const submitForm = (values: CodeBlockContent) => {
+const submitForm = (values: CodeBlockContent, data: ContainerChangeEventData) => {
   changedValue.value = undefined;
-  emit('submit', values);
+  emit('submit', values, data);
 };
 
 const errorHandler = (error: any) => {
@@ -238,7 +244,7 @@ const beforeClose = (done: (cancel?: boolean) => void) => {
       distinguishCancelAndClose: true,
     })
     .then(() => {
-      changedValue.value && submitForm(changedValue.value);
+      changedValue.value && submitForm(changedValue.value, { changeRecords: formBox.value?.form?.changeRecords });
       done();
     })
     .catch((action: string) => {

packages/editor/src/components/CodeParams.vue

@@ -13,7 +13,7 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 
-import { FormConfig, MForm } from '@tmagic/form';
+import { type ContainerChangeEventData, type FormConfig, type FormValue, MForm } from '@tmagic/form';
 
 import type { CodeParamStatement } from '@editor/type';
 import { error } from '@editor/utils';
@@ -59,10 +59,10 @@ const codeParamsConfig = computed(() =>
 /**
  * 参数值修改更新
  */
-const onParamsChangeHandler = async () => {
+const onParamsChangeHandler = async (v: FormValue, eventData: ContainerChangeEventData) => {
   try {
     const value = await form.value?.submitForm(true);
-    emit('change', value);
+    emit('change', value, eventData);
   } catch (e) {
     error(e);
   }

packages/editor/src/fields/Code.vue

@@ -25,7 +25,7 @@ const emit = defineEmits<{
   change: [value: string | any];
 }>();
 
-const props = withDefaults(
+withDefaults(
   defineProps<
     FieldProps<
       {
@@ -44,7 +44,6 @@ const props = withDefaults(
 );
 
 const save = (v: string | any) => {
-  props.model[props.name] = v;
   emit('change', v);
 };
 </script>

packages/editor/src/fields/CodeSelect.vue

@@ -21,16 +21,18 @@ import { isEmpty } from 'lodash-es';
 
 import { HookCodeType, HookType } from '@tmagic/core';
 import { TMagicCard } from '@tmagic/design';
-import type { FieldProps, FormItem } from '@tmagic/form';
-import { FormState, MContainer } from '@tmagic/form';
+import type { ContainerChangeEventData, FieldProps, FormItem, GroupListConfig } from '@tmagic/form';
+import { MContainer } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsCodeSelect',
 });
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+}>();
 
 const services = inject<Services>('services');
 
@@ -45,12 +47,12 @@ const props = withDefaults(
   {},
 );
 
-const codeConfig = computed(() => ({
+const codeConfig = computed<GroupListConfig>(() => ({
   type: 'group-list',
   name: 'hookData',
   enableToggleMode: false,
   expandAll: true,
-  title: (mForm: FormState, { model, index }: any) => {
+  title: (mForm, { model, index }: any) => {
     if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
       if (Array.isArray(model.codeId)) {
         if (model.codeId.length < 2) {
@@ -78,11 +80,13 @@ const codeConfig = computed(() => ({
             { value: HookCodeType.DATA_SOURCE_METHOD, text: '数据源方法' },
           ],
           defaultValue: 'code',
-          onChange: (mForm: FormState, v: HookCodeType, { model }: any) => {
+          onChange: (mForm, v: HookCodeType, { model, prop, changeRecords }) => {
             if (v === HookCodeType.DATA_SOURCE_METHOD) {
               model.codeId = [];
+              changeRecords.push({ propPath: prop.replace('codeType', 'codeId'), value: [] });
             } else {
               model.codeId = '';
+              changeRecords.push({ propPath: prop.replace('codeType', 'codeId'), value: '' });
             }
 
             return v;
@@ -93,15 +97,15 @@ const codeConfig = computed(() => ({
           name: 'codeId',
           span: 18,
           labelWidth: 0,
-          display: (mForm: FormState, { model }: any) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
+          display: (mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
           notEditable: () => !services?.codeBlockService.getEditStatus(),
         },
         {
           type: 'data-source-method-select',
           name: 'codeId',
           span: 18,
           labelWidth: 0,
-          display: (mForm: FormState, { model }: any) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
+          display: (mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
           notEditable: () => !services?.dataSourceService.get('editable'),
         },
       ],
@@ -126,7 +130,5 @@ watch(
   },
 );
 
-const changeHandler = async () => {
-  emit('change', props.model[props.name]);
-};
+const changeHandler = (v: any, eventData: ContainerChangeEventData) => emit('change', v, eventData);
 </script>

packages/editor/src/fields/CodeSelectCol.vue

@@ -7,7 +7,7 @@
         :config="selectConfig"
         :model="model"
         :size="size"
-        @change="onParamsChangeHandler"
+        @change="onCodeIdChangeHandler"
       ></MContainer>
 
       <!-- 查看/编辑按钮 -->
@@ -41,7 +41,14 @@ import { isEmpty, map } from 'lodash-es';
 
 import type { Id } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
+import {
+  type ContainerChangeEventData,
+  createValues,
+  type FieldProps,
+  filterFunction,
+  type FormState,
+  MContainer,
+} from '@tmagic/form';
 
 import CodeParams from '@editor/components/CodeParams.vue';
 import MIcon from '@editor/components/Icon.vue';
@@ -55,7 +62,9 @@ defineOptions({
 const mForm = inject<FormState | undefined>('mForm');
 const services = inject<Services>('services');
 const eventBus = inject<EventBus>('eventBus');
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+}>();
 
 const props = withDefaults(defineProps<FieldProps<CodeSelectColConfig>>(), {
   disabled: false,
@@ -125,12 +134,30 @@ const selectConfig = {
   },
 };
 
+const onCodeIdChangeHandler = (value: any) => {
+  props.model.params = value.params;
+  emit('change', props.model, {
+    changeRecords: [
+      {
+        propPath: props.prop,
+        value: value[props.name],
+      },
+    ],
+  });
+};
+
 /**
  * 参数值修改更新
  */
-const onParamsChangeHandler = (value: any) => {
+const onParamsChangeHandler = (value: any, eventData: ContainerChangeEventData) => {
   props.model.params = value.params;
-  emit('change', props.model);
+  emit('change', props.model, {
+    ...eventData,
+    changeRecords: (eventData.changeRecords || []).map((item) => ({
+      prop: `${props.prop.replace(props.name, '')}${item.propPath}`,
+      value: item.value,
+    })),
+  });
 };
 
 const editCode = (id: string) => {

packages/editor/src/fields/CondOpSelect.vue

@@ -39,7 +39,10 @@ defineOptions({
   name: 'MFieldsCondOpSelect',
 });
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [value: string];
+}>();
+
 const { dataSourceService } = inject<Services>('services') || {};
 
 const props = defineProps<FieldProps<CondOpSelectConfig>>();
@@ -81,7 +84,7 @@ const options = computed(() => {
   return [...arrayOptions, ...eqOptions, ...numberOptions];
 });
 
-const fieldChangeHandler = (v: string[]) => {
+const fieldChangeHandler = (v: string) => {
   emit('change', v);
 };
 </script>

packages/editor/src/fields/DataSourceFields.vue

@@ -51,7 +51,13 @@ import { inject, Ref, ref } from 'vue';
 
 import type { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
-import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
+import {
+  type ContainerChangeEventData,
+  type FieldProps,
+  type FormConfig,
+  type FormState,
+  MFormBox,
+} from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 
@@ -75,7 +81,9 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [v: any, eventData?: ContainerChangeEventData];
+}>();
 
 const services = inject<Services>('services');
 
@@ -91,16 +99,29 @@ const newHandler = () => {
   addDialogVisible.value = true;
 };
 
-const fieldChange = ({ index, ...value }: Record<string, any>) => {
+const fieldChange = ({ index, ...value }: Record<string, any>, data: ContainerChangeEventData) => {
+  addDialogVisible.value = false;
+
   if (index > -1) {
-    props.model[props.name][index] = value;
+    emit('change', value, {
+      modifyKey: index,
+      changeRecords: (data.changeRecords || []).map((item) => ({
+        propPath: `${props.prop}.${index}.${item.propPath}`,
+        value: item.value,
+      })),
+    });
   } else {
-    props.model[props.name].push(value);
+    const modifyKey = props.model[props.name].length;
+    emit('change', value, {
+      modifyKey,
+      changeRecords: [
+        {
+          propPath: `${props.prop}.${modifyKey}`,
+          value,
+        },
+      ],
+    });
   }
-
-  addDialogVisible.value = false;
-
-  emit('change', props.model[props.name]);
 };
 
 const fieldColumns: ColumnConfig[] = [
@@ -310,11 +331,9 @@ const addFromJsonFromChange = ({ data }: { data: string }) => {
   try {
     const value = JSON.parse(data);
 
-    props.model[props.name] = getFieldsConfig(value, props.model[props.name]);
-
     addFromJsonDialogVisible.value = false;
 
-    emit('change', props.model[props.name]);
+    emit('change', getFieldsConfig(value, props.model[props.name]));
   } catch (e: any) {
     tMagicMessage.error(e.message);
   }