diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md index 616d17ce..7abb3051 100644 --- a/docs/src/components/common-ui/vben-form.md +++ b/docs/src/components/common-ui/vben-form.md @@ -310,7 +310,7 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单 | actionWrapperClass | 表单操作区域class | `any` | - | | handleReset | 表单重置回调 | `(values: Record,) => Promise \| void` | - | | handleSubmit | 表单提交回调 | `(values: Record,) => Promise \| void` | - | -| handleValuesChange | 表单值变化回调 | `(values: Record,) => void` | - | +| handleValuesChange | 表单值变化回调 | `(values: Record, fieldsChanged: string[]) => void` | - | | actionButtonsReverse | 调换操作按钮位置 | `boolean` | `false` | | resetButtonOptions | 重置按钮组件参数 | `ActionButtonOptions` | - | | submitButtonOptions | 提交按钮组件参数 | `ActionButtonOptions` | - | @@ -325,6 +325,12 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单 | submitOnChange | 字段值改变时提交表单(内部防抖，这个属性一般用于表格的搜索表单) | `boolean` | false | | compact | 是否紧凑模式(忽略为校验信息所预留的空间) | `boolean` | false | +::: tip handleValuesChange + +`handleValuesChange` 回调函数的第一个参数`values`装载了表单改变后的当前值对象，第二个参数`fieldsChanged`是一个数组，包含了所有被改变的字段名。注意：第二个参数仅在v5.5.4(不含)以上版本可用，并且传递的是已在schema中定义的字段名。如果你使用了字段映射并且需要检查是哪些字段发生了变化的话，请注意该参数并不会包含映射后的字段名。 + +::: + ::: tip fieldMappingTime 此属性用于将表单内的数组值映射成 2 个字段，它应当传入一个数组，数组的每一项是一个映射规则，规则的第一个成员是一个字符串，表示需要映射的字段名，第二个成员是一个数组，表示映射后的字段名，第三个成员是一个可选的格式掩码，用于格式化日期时间字段；也可以提供一个格式化函数（参数分别为当前值和当前字段名，返回格式化后的值）。如果明确地将格式掩码设为null，则原值映射而不进行格式化（适用于非日期时间字段）。例如：`[['timeRange', ['startTime', 'endTime'], 'YYYY-MM-DD']]`，`timeRange`应当是一个至少具有2个成员的数组类型的值。Form会将`timeRange`的值前两个值分别按照格式掩码`YYYY-MM-DD`格式化后映射到`startTime`和`endTime`字段上。每一项的第三个参数是一个可选的格式掩码， diff --git a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue index fb90a5e4..c5a3f9c2 100644 --- a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue +++ b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue @@ -62,7 +62,7 @@ async function handleReset(e: Event) { e?.stopPropagation(); const props = unref(rootProps); - const values = toRaw(props.formApi?.getValues()); + const values = toRaw(await props.formApi?.getValues()); if (isFunction(props.handleReset)) { await props.handleReset?.(values); diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts index da706591..34312ae7 100644 --- a/packages/@core/ui-kit/form-ui/src/types.ts +++ b/packages/@core/ui-kit/form-ui/src/types.ts @@ -378,7 +378,10 @@ export interface VbenFormProps< /** * 表单值变化回调 */ - handleValuesChange?: (values: Record) => void; + handleValuesChange?: ( + values: Record, + fieldsChanged: string[], + ) => void; /** * 重置按钮参数 */ diff --git a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue index f22053cd..3e7b00b6 100644 --- a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue +++ b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue @@ -1,12 +1,13 @@ diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts b/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts index 399ddc1b..365a2e4a 100644 --- a/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts +++ b/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts @@ -9,7 +9,11 @@ vi.mock('@vben-core/shared/store', () => { return { isFunction: (fn: any) => typeof fn === 'function', Store: class { + get state() { + return this._state; + } private _state: DrawerState; + private options: any; constructor(initialState: DrawerState, options: any) { @@ -25,10 +29,6 @@ vi.mock('@vben-core/shared/store', () => { this._state = fn(this._state); this.options.onUpdate(); } - - get state() { - return this._state; - } }, }; }); @@ -54,7 +54,6 @@ describe('drawerApi', () => { }); it('should close the drawer if onBeforeClose allows it', () => { - drawerApi.open(); drawerApi.close(); expect(drawerApi.store.state.isOpen).toBe(false); }); diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts b/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts index d2e7d690..a19a1717 100644 --- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts +++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts @@ -86,7 +86,8 @@ export class DrawerApi { } /** - * 关闭弹窗 + * 关闭抽屉 + * @description 关闭抽屉时会调用 onBeforeClose 钩子函数，如果 onBeforeClose 返回 false，则不关闭弹窗 */ async close() { // 通过 onBeforeClose 钩子函数来判断是否允许关闭弹窗 diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue index fcbb8c55..1e61d8db 100644 --- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue +++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue @@ -186,7 +186,7 @@ const getAppendTo = computed(() => { }); const getForceMount = computed(() => { - return !unref(destroyOnClose); + return !unref(destroyOnClose) && unref(firstOpened); }); function handleClosed() { diff --git a/playground/src/views/examples/form/basic.vue b/playground/src/views/examples/form/basic.vue index 75e868d8..b98ace26 100644 --- a/playground/src/views/examples/form/basic.vue +++ b/playground/src/views/examples/form/basic.vue @@ -42,6 +42,9 @@ const [BaseForm, baseFormApi] = useVbenForm({ fieldMappingTime: [['rangePicker', ['startTime', 'endTime'], 'YYYY-MM-DD']], // 提交函数 handleSubmit: onSubmit, + handleValuesChange(_values, fieldsChanged) { + message.info(`表单以下字段发生变化：${fieldsChanged.join('，')}`); + }, // 垂直布局，label和input在不同行，值为vertical // 水平布局，label和input在同一行 diff --git a/playground/src/views/system/dept/modules/form.vue b/playground/src/views/system/dept/modules/form.vue index e57f115c..18a13966 100644 --- a/playground/src/views/system/dept/modules/form.vue +++ b/playground/src/views/system/dept/modules/form.vue @@ -37,7 +37,7 @@ const [Modal, modalApi] = useVbenModal({ const { valid } = await formApi.validate(); if (valid) { modalApi.lock(); - const data = formApi.getValues(); + const data = await formApi.getValues(); try { await (formData.value?.id ? updateDept(formData.value.id, data)