feat(form): onChange添加setModel参数，用于修改model并添加至修改记录中

packages/editor/src/fields/CodeSelect.vue

@@ -80,13 +80,11 @@ const codeConfig = computed<GroupListConfig>(() => ({
             { value: HookCodeType.DATA_SOURCE_METHOD, text: '数据源方法' },
           ],
           defaultValue: 'code',
-          onChange: (mForm, v: HookCodeType, { model, prop, changeRecords }) => {
+          onChange: (_mForm, v: HookCodeType, { setModel }) => {
             if (v === HookCodeType.DATA_SOURCE_METHOD) {
-              model.codeId = [];
+              setModel('codeId', []);
-              changeRecords.push({ propPath: prop.replace('codeType', 'codeId'), value: [] });
             } else {
-              model.codeId = '';
+              setModel('codeId', '');
-              changeRecords.push({ propPath: prop.replace('codeType', 'codeId'), value: '' });
             }
 
             return v;
@@ -97,7 +95,7 @@ const codeConfig = computed<GroupListConfig>(() => ({
           name: 'codeId',
           span: 18,
           labelWidth: 0,
-          display: (mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
+          display: (_mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
           notEditable: () => !codeBlockService.getEditStatus(),
         },
         {
@@ -105,7 +103,7 @@ const codeConfig = computed<GroupListConfig>(() => ({
           name: 'codeId',
           span: 18,
           labelWidth: 0,
-          display: (mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
+          display: (_mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
           notEditable: () => !dataSourceService.get('editable'),
         },
       ],

packages/editor/src/fields/CodeSelectCol.vue

@@ -121,24 +121,28 @@ const selectConfig = {
     }
     return [];
   },
-  onChange: (formState: any, codeId: Id, { model }: any) => {
+  onChange: (formState: any, codeId: Id, { setModel, model }: any) => {
     // 通过下拉框选择的codeId变化后修正model的值，避免写入其他codeId的params
     paramsConfig.value = getParamItemsConfig(codeId);
 
     if (paramsConfig.value.length) {
-      model.params = createValues(formState, paramsConfig.value, {}, model.params);
+      setModel('params', createValues(formState, paramsConfig.value, {}, model.params));
     } else {
-      model.params = {};
+      setModel('params', {});
     }
 
     return codeId;
   },
 };
 
-const onCodeIdChangeHandler = (value: any) => {
+const onCodeIdChangeHandler = (value: any, eventData: ContainerChangeEventData) => {
   props.model.params = value.params;
+
   emit('change', props.model, {
-    changeRecords: [
+    changeRecords: eventData.changeRecords?.map((item) => ({
+      prop: `${props.prop.replace(props.name, '')}${item.propPath}`,
+      value: item.value,
+    })) || [
       {
         propPath: props.prop,
         value: value[props.name],

packages/editor/src/fields/DataSourceFields.vue

@@ -65,6 +65,7 @@ import FloatingBox from '@editor/components/FloatingBox.vue';
 import { useEditorContentHeight } from '@editor/hooks';
 import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
 import { useServices } from '@editor/hooks/use-services';
+import { error } from '@editor/utils/logger';
 
 defineOptions({
   name: 'MFieldsDataSourceFields',
@@ -144,6 +145,7 @@ const fieldColumns: ColumnConfig[] = [
       try {
         return JSON.stringify(row.defaultValue);
       } catch (e) {
+        error(e);
         return row.defaultValue;
       }
     },
@@ -193,9 +195,9 @@ const dataSourceFieldsConfig: FormConfig = [
       { text: 'null', value: 'null' },
       { text: 'any', value: 'any' },
     ],
-    onChange: (formState, v: string, { model }) => {
+    onChange: (_formState, v: string, { setModel }) => {
       if (!['any', 'array', 'object'].includes(v)) {
-        model.fields = [];
+        setModel('fields', []);
       }
       return v;
     },

packages/editor/src/fields/DataSourceMethodSelect.vue

@@ -37,7 +37,14 @@ import { Edit, View } from '@element-plus/icons-vue';
 
 import type { Id } from '@tmagic/core';
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
-import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
+import {
+  createValues,
+  type FieldProps,
+  filterFunction,
+  type FormState,
+  MContainer,
+  type OnChangeHandlerData,
+} from '@tmagic/form';
 
 import CodeParams from '@editor/components/CodeParams.vue';
 import MIcon from '@editor/components/Icon.vue';
@@ -92,14 +99,18 @@ const getParamItemsConfig = ([dataSourceId, methodName]: [Id, string] = ['', '']
 
 const paramsConfig = ref<CodeParamStatement[]>(getParamItemsConfig(props.model[props.name || 'dataSourceMethod']));
 
-const setParamsConfig = (dataSourceMethod: [Id, string], formState: any = {}) => {
+const setParamsConfig = (
+  dataSourceMethod: [Id, string],
+  formState: any = {},
+  setModel: OnChangeHandlerData['setModel'],
+) => {
   // 通过下拉框选择的codeId变化后修正model的值，避免写入其他codeId的params
   paramsConfig.value = dataSourceMethod ? getParamItemsConfig(dataSourceMethod) : [];
 
   if (paramsConfig.value.length) {
-    props.model.params = createValues(formState, paramsConfig.value, {}, props.model.params);
+    setModel('params', createValues(formState, paramsConfig.value, {}, props.model.params));
   } else {
-    props.model.params = {};
+    setModel('params', {});
   }
 };
 
@@ -125,8 +136,8 @@ const cascaderConfig = computed(() => ({
   name: props.name,
   options: methodsOptions.value,
   disable: props.disabled,
-  onChange: (formState: any, dataSourceMethod: [Id, string]) => {
+  onChange: (formState: any, dataSourceMethod: [Id, string], { setModel }: OnChangeHandlerData) => {
-    setParamsConfig(dataSourceMethod, formState);
+    setParamsConfig(dataSourceMethod, formState, setModel);
 
     return dataSourceMethod;
   },

packages/editor/src/fields/EventSelect.vue

@@ -63,6 +63,7 @@ import type {
   ContainerChangeEventData,
   FieldProps,
   FormState,
+  OnChangeHandlerData,
   PanelConfig,
 } from '@tmagic/form';
 import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
@@ -202,8 +203,8 @@ const targetCompConfig = computed(() => {
     text: '联动组件',
     type: 'ui-select',
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
-    onChange: (MForm: FormState, v: string, { model }: any) => {
+    onChange: (MForm: FormState, v: string, { setModel }: OnChangeHandlerData) => {
-      model.method = '';
+      setModel('method', '');
       return v;
     },
   };

packages/form/src/containers/Container.vue

@@ -228,6 +228,7 @@ import { WarningFilled } from '@element-plus/icons-vue';
 import { isEqual } from 'lodash-es';
 
 import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from '@tmagic/design';
+import { setValueByKeyPath } from '@tmagic/utils';
 
 import type { ChildConfig, ContainerChangeEventData, ContainerCommonConfig, FormState, FormValue } from '../schema';
 import { display as displayFunction, filterFunction, getRules } from '../utils/form';
@@ -423,6 +424,12 @@ const onChangeHandler = async function (v: any, eventData: ContainerChangeEventD
           prop: itemProp.value,
           config: props.config,
           changeRecords: newChangeRecords,
+          setModel: (key: string, value: any) => {
+            setValueByKeyPath(key, value, props.model);
+            if (props.config.name) {
+              newChangeRecords.push({ propPath: itemProp.value.replace(`${props.config.name}`, key), value });
+            }
+          },
         })) ?? value;
     }
     value = trimHandler(trim, value) ?? value;
@@ -442,10 +449,10 @@ const onChangeHandler = async function (v: any, eventData: ContainerChangeEventD
     valueProp = valueProp ? `${valueProp}.${eventData.modifyKey}` : eventData.modifyKey!;
 
     // 需要清除掉modifyKey，不然往上层抛出后还会被认为需要修改
+    // eslint-disable-next-line no-param-reassign
     delete eventData.modifyKey;
   } else if (isValidName() && props.model !== value && (v !== value || props.model[name.value] !== value)) {
     // field内容下包含field-link时，model===value, 这里避免循环引用
-    // eslint-disable-next-line vue/no-mutating-props
     props.model[name.value] = value;
   }
 

react-components/container/src/formConfig.ts

@@ -28,14 +28,14 @@ export default [
       { value: 'absolute', text: '绝对定位' },
       { value: 'relative', text: '流式布局' },
     ],
-    onChange: (formState: any, v: string, { model }: any) => {
+    onChange: (formState: any, v: string, { setModel, model }: any) => {
       if (!model.style) return v;
       if (v === 'relative') {
-        model.style.height = 'auto';
+        setModel('style.height', 'auto');
       } else {
         const el = getElById()(formState.stage?.renderer?.contentWindow.document, model.id);
         if (el) {
-          model.style.height = el.getBoundingClientRect().height;
+          setModel('style.height', el.getBoundingClientRect().height);
         }
       }
     },

react-components/iterator-container/src/formConfig.ts

@@ -25,12 +25,12 @@ export default [
     dataSourceFieldType: ['array'],
     checkStrictly: true,
     type: 'data-source-field-select',
-    onChange: (_vm: any, v: string[] = [], { model }: any) => {
+    onChange: (_vm: any, v: string[] = [], { setModel }: any) => {
       if (Array.isArray(v) && v.length > 1) {
         const [dsId, ...keys] = v;
-        model.dsField = [dsId.replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, ''), ...keys];
+        setModel('dsField', [dsId.replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, ''), ...keys]);
       } else {
-        model.dsField = [];
+        setModel('dsField', []);
       }
     },
   },

react-components/page-fragment/src/formConfig.ts

@@ -37,14 +37,14 @@ export default [
       { value: 'absolute', text: '绝对定位' },
       { value: 'relative', text: '流式布局' },
     ],
-    onChange: (formState: any, v: string, { model }: any) => {
+    onChange: (formState: any, v: string, { model, setModel }: any) => {
       if (!model.style) return v;
       if (v === 'relative') {
-        model.style.height = 'auto';
+        setModel('style.height', 'auto');
       } else {
         const el = getElById()(formState.stage?.renderer?.contentWindow.document, model.id);
         if (el) {
-          model.style.height = el.getBoundingClientRect().height;
+          setModel('style.height', el.getBoundingClientRect().height);
         }
       }
     },

react-components/page/src/formConfig.ts

@@ -39,14 +39,14 @@ export default [
       { value: 'absolute', text: '绝对定位' },
       { value: 'relative', text: '流式布局' },
     ],
-    onChange: (formState: any, v: string, { model }: any) => {
+    onChange: (formState: any, v: string, { model, setModel }: any) => {
       if (!model.style) return v;
       if (v === 'relative') {
-        model.style.height = 'auto';
+        setModel('style.height', 'auto');
       } else {
         const el = getElById()(formState.stage?.renderer?.contentWindow.document, model.id);
         if (el) {
-          model.style.height = el.getBoundingClientRect().height;
+          setModel('style.height', el.getBoundingClientRect().height);
         }
       }
     },

vue-components/container/src/formConfig.ts

@@ -33,14 +33,14 @@ export default [
       { value: 'absolute', text: '绝对定位' },
       { value: 'relative', text: '流式布局' },
     ],
-    onChange: (formState: any, v: string, { model }: any) => {
+    onChange: (formState: any, v: string, { model, setModel }: any) => {
       if (!model.style) return v;
       if (v === 'relative') {
-        model.style.height = 'auto';
+        setModel('style.height', 'auto');
       } else {
         const el = getElById()(formState.stage?.renderer?.contentWindow.document, model.id);
         if (el) {
-          model.style.height = el.getBoundingClientRect().height;
+          setModel('style.height', el.getBoundingClientRect().height);
         }
       }
     },

vue-components/iterator-container/src/formConfig.ts

@@ -30,12 +30,12 @@ export default [
     dataSourceFieldType: ['array'],
     checkStrictly: true,
     type: 'data-source-field-select',
-    onChange: (_vm: any, v: string[] = [], { model }: any) => {
+    onChange: (_vm: any, v: string[] = [], { setModel }: any) => {
       if (Array.isArray(v) && v.length > 1) {
         const [dsId, ...keys] = v;
-        model.dsField = [dsId.replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, ''), ...keys];
+        setModel('dsField', [dsId.replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, ''), ...keys]);
       } else {
-        model.dsField = [];
+        setModel('dsField', []);
       }
     },
   },

vue-components/page-fragment/src/formConfig.ts

@@ -37,14 +37,14 @@ export default [
       { value: 'absolute', text: '绝对定位' },
       { value: 'relative', text: '流式布局' },
     ],
-    onChange: (formState: any, v: string, { model }: any) => {
+    onChange: (formState: any, v: string, { model, setModel }: any) => {
       if (!model.style) return v;
       if (v === 'relative') {
-        model.style.height = 'auto';
+        setModel('style.height', 'auto');
       } else {
         const el = getElById()(formState.stage?.renderer?.contentWindow.document, model.id);
         if (el) {
-          model.style.height = el.getBoundingClientRect().height;
+          setModel('style.height', el.getBoundingClientRect().height);
         }
       }
     },

vue-components/page/src/formConfig.ts

@@ -38,14 +38,14 @@ export default [
       { value: 'absolute', text: '绝对定位' },
       { value: 'relative', text: '流式布局' },
     ],
-    onChange: (formState: any, v: string, { model }: any) => {
+    onChange: (formState: any, v: string, { model, setModel }: any) => {
       if (!model.style) return v;
       if (v === 'relative') {
-        model.style.height = 'auto';
+        setModel('style.height', 'auto');
       } else {
         const el = getElById()(formState.stage?.renderer?.contentWindow.document, model.id);
         if (el) {
-          model.style.height = el.getBoundingClientRect().height;
+          setModel('style.height', el.getBoundingClientRect().height);
         }
       }
     },