feat(form): text组件配置的append.hander函数添加setModel/setFormValue方法

packages/form-schema/src/base.ts

@@ -15,14 +15,14 @@ export interface ChangeRecord {
 
 export interface OnChangeHandlerData {
   model: FormValue;
-  values?: Readonly<FormValue>;
+  values?: Readonly<FormValue> | null;
   parent?: FormValue;
   formValue?: FormValue;
   config: Readonly<any>;
   prop: string;
   changeRecords: ChangeRecord[];
   setModel: (prop: string, value: any) => void;
-  setFromValue: (prop: string, value: any) => void;
+  setFormValue: (prop: string, value: any) => void;
 }
 
 export type FormValue = Record<string | number, any>;
@@ -361,7 +361,10 @@ export interface TextConfig extends FormItem, Input {
           mForm: FormState | undefined,
           data: {
             model: any;
-            values: any;
+            values?: Readonly<FormValue> | null;
+            formValue?: FormValue;
+            setModel: (prop: string, value: any) => void;
+            setFormValue: (prop: string, value: any) => void;
           },
         ) => void;
       };
@@ -553,7 +556,8 @@ export interface LinkConfig extends FormItem {
         mForm: FormState | undefined,
         data: {
           model: Record<any, any>;
-          values: Record<any, any>;
+          values?: Readonly<FormValue> | null;
+          formValue?: FormValue;
         },
       ) => FormConfig);
   fullscreen?: boolean;

packages/form/src/fields/Link.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref } from 'vue';
+import { computed, inject, readonly, ref } from 'vue';
 
 import { TMagicButton } from '@tmagic/design';
 
@@ -54,7 +54,8 @@ const formConfig = computed(() => {
   if (typeof props.config.form === 'function') {
     return props.config.form(mForm, {
       model: props.model || {},
-      values: props.values || {},
+      values: mForm ? readonly(mForm.initValues) : null,
+      formValue: props.values || {},
     });
   }
   return props.config.form;

packages/form/src/fields/Text.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, shallowRef, watch } from 'vue';
+import { computed, inject, readonly, ref, shallowRef, watch } from 'vue';
 import type { Instance } from '@popperjs/core';
 import { createPopper } from '@popperjs/core';
 import { debounce } from 'lodash-es';
@@ -49,7 +49,7 @@ import { debounce } from 'lodash-es';
 import { TMagicButton, TMagicInput } from '@tmagic/design';
 import { isNumber } from '@tmagic/utils';
 
-import type { FieldProps, FormState, TextConfig } from '../schema';
+import type { ChangeRecord, ContainerChangeEventData, FieldProps, FormState, TextConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
@@ -59,7 +59,7 @@ defineOptions({
 const props = defineProps<FieldProps<TextConfig>>();
 
 const emit = defineEmits<{
-  change: [value: string];
+  change: [value: string, eventData?: ContainerChangeEventData];
   input: [value: string];
 }>();
 
@@ -121,10 +121,28 @@ const inputHandler = (v: string) => {
 const buttonClickHandler = () => {
   if (!appendConfig.value) return;
   if (typeof appendConfig.value.handler === 'function') {
+    const newChangeRecords: ChangeRecord[] = [];
+    const setModel = (key: string, value: any) => {
+      newChangeRecords.push({ propPath: props.prop.replace(`${props.name}`, key), value });
+    };
+
+    const setFormValue = (key: string, value: any) => {
+      newChangeRecords.push({ propPath: key, value });
+    };
+
     appendConfig.value.handler(mForm, {
       model: props.model,
-      values: mForm?.values,
+      values: mForm ? readonly(mForm.initValues) : null,
+      formValue: props.values || {},
+      setModel,
+      setFormValue,
     });
+
+    if (newChangeRecords.length > 0) {
+      emit('change', props.model[props.name], {
+        changeRecords: newChangeRecords,
+      });
+    }
   }
 };