diff --git a/apps/web-antd/src/utils/popup.ts b/apps/web-antd/src/utils/popup.ts index ee771b9e..0d5c9aaf 100644 --- a/apps/web-antd/src/utils/popup.ts +++ b/apps/web-antd/src/utils/popup.ts @@ -29,48 +29,52 @@ interface BeforeCloseDiffProps { } /** - * @deprecated 注意为实验性功能 可能有api变动/被移除 + * 用于Drawer/Modal使用 判断表单是否有变动来决定是否弹窗提示 * @param props props * @returns hook - * - * 待解决问题: 网速慢情况直接关闭 会导致数据不一致问题 - * 但是使用api.lock会导致在报错情况无法关闭(因为目前代码没有finally) */ export function useBeforeCloseDiff(props: BeforeCloseDiffProps) { const { initializedGetter, currentGetter, compare } = props; + /** + * 记录初始值 json + */ const initialized = ref(''); + /** + * 是否已经初始化了 通过这个值判断是否需要进行对比 为false直接关闭 不弹窗 + */ const isInitialized = ref(false); - const isSubmitted = ref(false); - async function updateInitialized(data?: string) { + /** + * 标记是否已经完成初始化 后续需要进行对比 + * @param data 自定义初始化数据 可选 + */ + async function markInitialized(data?: string) { initialized.value = data || (await initializedGetter()); isInitialized.value = true; } + /** + * 重置初始化状态 需要在closed前调用 或者打开窗口时 + */ function resetInitialized() { initialized.value = ''; isInitialized.value = false; } - function setSubmitted() { - isSubmitted.value = true; - } - + /** + * 提供给useVbenForm/useVbenDrawer使用 + * @returns 是否允许关闭 + */ async function onBeforeClose(): Promise { // 如果还未初始化,直接允许关闭 if (!isInitialized.value) { return true; } - // 如果已经提交过,直接允许关闭 - if (isSubmitted.value) { - // 重置状态 - isSubmitted.value = false; - return true; - } try { + // 获取当前表单数据 const current = await currentGetter(); - + // 自定义比较的情况 if (isFunction(compare) && compare(initialized.value, current)) { return true; } else { @@ -104,8 +108,7 @@ export function useBeforeCloseDiff(props: BeforeCloseDiffProps) { return { onBeforeClose, - updateInitialized, - setSubmitted, + markInitialized, resetInitialized, }; } diff --git a/apps/web-antd/src/views/system/config/config-modal.vue b/apps/web-antd/src/views/system/config/config-modal.vue index c07eb49b..00727a4a 100644 --- a/apps/web-antd/src/views/system/config/config-modal.vue +++ b/apps/web-antd/src/views/system/config/config-modal.vue @@ -26,11 +26,12 @@ const [BasicForm, formApi] = useVbenForm({ showDefaultActions: false, }); -const { onBeforeClose, updateInitialized, setSubmitted, resetInitialized } = - useBeforeCloseDiff({ +const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff( + { initializedGetter: defaultFormValueGetter(formApi), currentGetter: defaultFormValueGetter(formApi), - }); + }, +); const [BasicModal, modalApi] = useVbenModal({ fullscreenButton: false, @@ -50,7 +51,7 @@ const [BasicModal, modalApi] = useVbenModal({ const record = await configInfo(id); await formApi.setValues(record); } - await updateInitialized(); + await markInitialized(); modalApi.modalLoading(false); }, @@ -65,7 +66,7 @@ async function handleConfirm() { } const data = cloneDeep(await formApi.getValues()); await (isUpdate.value ? configUpdate(data) : configAdd(data)); - setSubmitted(); + resetInitialized(); emit('reload'); modalApi.close(); } catch (error) { 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 afd0fce2..e55ce889 100644 --- a/apps/web-antd/src/views/system/user/user-drawer.vue +++ b/apps/web-antd/src/views/system/user/user-drawer.vue @@ -135,11 +135,12 @@ async function loadDefaultPassword(update: boolean) { } } -const { onBeforeClose, updateInitialized, setSubmitted, resetInitialized } = - useBeforeCloseDiff({ +const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff( + { initializedGetter: defaultFormValueGetter(formApi), currentGetter: defaultFormValueGetter(formApi), - }); + }, +); const [BasicDrawer, drawerApi] = useVbenDrawer({ onBeforeClose, @@ -208,7 +209,7 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({ setupPostOptions(user.deptId), ]); } - await updateInitialized(); + await markInitialized(); drawerApi.drawerLoading(false); }, @@ -223,7 +224,7 @@ async function handleConfirm() { } const data = cloneDeep(await formApi.getValues()); await (isUpdate.value ? userUpdate(data) : userAdd(data)); - setSubmitted(); + resetInitialized(); emit('reload'); drawerApi.close(); } catch (error) {