From 5252480b09e8c4f75a6d72a9ebc76362a1aafb5f Mon Sep 17 00:00:00 2001 From: zhouda1fu <825542578@qq.com> Date: Wed, 16 Apr 2025 11:22:59 +0800 Subject: [PATCH 1/5] fix: missing await in department form(#5967) --- playground/src/views/system/dept/modules/form.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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) From 8f3881eabf444f92c4229c8742babba7b0f8aa13 Mon Sep 17 00:00:00 2001 From: LinaBell <15891557205@163.com> Date: Wed, 16 Apr 2025 11:27:13 +0800 Subject: [PATCH 2/5] perf: `beforeClose` of drawer support promise (#5932) * perf: the beforeClose function of drawer is consistent with that of modal * refactor: drawer test update --- .../popup-ui/src/drawer/__tests__/drawer-api.test.ts | 1 - packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts | 7 ++++--- packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) 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 46dcafc3..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 @@ -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 785a9029..a4a3ac4a 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,12 +86,13 @@ export class DrawerApi { } /** - * 关闭弹窗 + * 关闭抽屉 + * @description 关闭抽屉时会调用 onBeforeClose 钩子函数，如果 onBeforeClose 返回 false，则不关闭弹窗 */ - close() { + async close() { // 通过 onBeforeClose 钩子函数来判断是否允许关闭弹窗 // 如果 onBeforeClose 返回 false，则不关闭弹窗 - const allowClose = this.api.onBeforeClose?.() ?? true; + const allowClose = (await this.api.onBeforeClose?.()) ?? true; if (allowClose) { this.store.setState((prev) => ({ ...prev, diff --git a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts index b3ae0fb8..30009a64 100644 --- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts +++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts @@ -1,6 +1,6 @@ import type { Component, Ref } from 'vue'; -import type { ClassType } from '@vben-core/typings'; +import type { ClassType, MaybePromise } from '@vben-core/typings'; import type { DrawerApi } from './drawer-api'; @@ -151,7 +151,7 @@ export interface DrawerApiOptions extends DrawerState { * 关闭前的回调，返回 false 可以阻止关闭 * @returns */ - onBeforeClose?: () => void; + onBeforeClose?: () => MaybePromise; /** * 点击取消按钮的回调 */ From 3318d76bab25221c54426c5286765b299a78b830 Mon Sep 17 00:00:00 2001 From: ming4762 Date: Wed, 16 Apr 2025 11:28:36 +0800 Subject: [PATCH 3/5] perf: improve `destroyOnClose` for VbenModal (#5964) --- packages/@core/ui-kit/popup-ui/src/modal/modal.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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() { From 0936861da18b7096fad92ef2accd0d50aadc4902 Mon Sep 17 00:00:00 2001 From: Netfan Date: Wed, 16 Apr 2025 11:29:01 +0800 Subject: [PATCH 4/5] feat: pass `fieldsChanged` into the `handleValuesChange` callback function (#5968) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fieldsChanged(已被改变值的字段名)将传入handleValuesChange回调函数 --- docs/src/components/common-ui/vben-form.md | 8 +++- packages/@core/ui-kit/form-ui/src/types.ts | 5 ++- .../ui-kit/form-ui/src/vben-use-form.vue | 40 ++++++++++++++++--- playground/src/views/examples/form/basic.vue | 3 ++ 4 files changed, 48 insertions(+), 8 deletions(-) diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md index 616d17ce..5c6cf58e 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(不含)以上版本可用。 + +::: + ::: 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/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..4a39c5bd 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/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在同一行 From f7a4d13a4c5f78a25ff9e08d7d62e6d2b0176bc6 Mon Sep 17 00:00:00 2001 From: Netfan Date: Wed, 16 Apr 2025 14:11:04 +0800 Subject: [PATCH 5/5] fix: fixed arguments of callbacks in `formApi` (#5970) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 修复 `handleValuesChange` 传递的参数不是处理后的表单值的问题 * 修复 `handleReset` 未能传递正确参数的问题 --- docs/src/components/common-ui/vben-form.md | 2 +- .../@core/ui-kit/form-ui/src/components/form-actions.vue | 2 +- packages/@core/ui-kit/form-ui/src/vben-use-form.vue | 7 +++++-- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md index 5c6cf58e..7abb3051 100644 --- a/docs/src/components/common-ui/vben-form.md +++ b/docs/src/components/common-ui/vben-form.md @@ -327,7 +327,7 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单 ::: tip handleValuesChange -`handleValuesChange` 回调函数的第一个参数`values`装载了表单改变后的当前值对象，第二个参数`fieldsChanged`是一个数组，包含了所有被改变的字段名。注意：第二个参数仅在v5.5.4(不含)以上版本可用。 +`handleValuesChange` 回调函数的第一个参数`values`装载了表单改变后的当前值对象，第二个参数`fieldsChanged`是一个数组，包含了所有被改变的字段名。注意：第二个参数仅在v5.5.4(不含)以上版本可用，并且传递的是已在schema中定义的字段名。如果你使用了字段映射并且需要检查是哪些字段发生了变化的话，请注意该参数并不会包含映射后的字段名。 ::: 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/vben-use-form.vue b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue index 4a39c5bd..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 @@ -72,7 +72,7 @@ onMounted(async () => { await nextTick(); watch( () => form.values, - (newVal) => { + async (newVal) => { if (forward.value.handleValuesChange) { const fields = state.value.schema?.map((item) => { return item.fieldName; @@ -91,7 +91,10 @@ onMounted(async () => { if (changedFields.length > 0) { // 调用handleValuesChange回调，传入所有表单值的深拷贝和变更的字段列表 - forward.value.handleValuesChange(cloneDeep(newVal), changedFields); + forward.value.handleValuesChange( + cloneDeep(await forward.value.formApi.getValues()), + changedFields, + ); } } }