diff --git a/apps/web-antd/src/views/system/user/user-drawer.vue b/apps/web-antd/src/views/system/user/user-drawer.vue index f3ae9e58..afd0fce2 100644 --- a/apps/web-antd/src/views/system/user/user-drawer.vue +++ b/apps/web-antd/src/views/system/user/user-drawer.vue @@ -18,6 +18,7 @@ import { userAdd, userUpdate, } from '#/api/system/user'; +import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup'; import { authScopeOptions } from '#/views/system/role/data'; import { drawerSchema } from './data'; @@ -134,8 +135,15 @@ async function loadDefaultPassword(update: boolean) { } } +const { onBeforeClose, updateInitialized, setSubmitted, resetInitialized } = + useBeforeCloseDiff({ + initializedGetter: defaultFormValueGetter(formApi), + currentGetter: defaultFormValueGetter(formApi), + }); + const [BasicDrawer, drawerApi] = useVbenDrawer({ - onCancel: handleCancel, + onBeforeClose, + onClosed: handleClosed, onConfirm: handleConfirm, async onOpenChange(isOpen) { if (!isOpen) { @@ -149,6 +157,7 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({ return null; } drawerApi.drawerLoading(true); + const { id } = drawerApi.getData() as { id?: number | string }; isUpdate.value = !!id; /** update时 禁用用户名修改 不显示密码框 */ @@ -199,36 +208,39 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({ setupPostOptions(user.deptId), ]); } + await updateInitialized(); + drawerApi.drawerLoading(false); }, }); async function handleConfirm() { try { - drawerApi.drawerLoading(true); + drawerApi.lock(true); const { valid } = await formApi.validate(); if (!valid) { return; } const data = cloneDeep(await formApi.getValues()); await (isUpdate.value ? userUpdate(data) : userAdd(data)); + setSubmitted(); emit('reload'); - await handleCancel(); + drawerApi.close(); } catch (error) { console.error(error); } finally { - drawerApi.drawerLoading(false); + drawerApi.lock(false); } } -async function handleCancel() { - drawerApi.close(); - await formApi.resetForm(); +async function handleClosed() { + formApi.resetForm(); + resetInitialized(); } 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 525596e2..d2e7d690 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 @@ -88,10 +88,10 @@ export class DrawerApi { /** * 关闭弹窗 */ - 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; /** * 点击取消按钮的回调 */