diff --git a/frontend/src/components/pure/ms-dialog/index.vue b/frontend/src/components/pure/ms-dialog/index.vue index 70178604a2..d149f5c724 100644 --- a/frontend/src/components/pure/ms-dialog/index.vue +++ b/frontend/src/components/pure/ms-dialog/index.vue @@ -35,7 +35,7 @@ @@ -74,7 +74,6 @@ title: string; confirm?: (enable: boolean | undefined) => void; // 确定 visible: boolean; - loading: boolean; close: () => void; }; @@ -118,9 +117,19 @@ props?.close(); }; + const confirmLoading = ref(false); + const confirmHandler = async () => { if (props.confirm) { - props.confirm(switchEnable.value); + confirmLoading.value = true; + try { + await props.confirm(switchEnable.value); + confirmLoading.value = false; + } catch (error) { + console.log(error); + } finally { + confirmLoading.value = false; + } } }; diff --git a/frontend/src/hooks/useAsyncFun.ts b/frontend/src/hooks/useAsyncFun.ts deleted file mode 100644 index 3e126b9c35..0000000000 --- a/frontend/src/hooks/useAsyncFun.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ref } from 'vue'; - -export default function useAsyncHandler() { - const loading = ref(false); - - async function handleAsyncProcess(reqAsyncFun: T): Promise { - loading.value = true; - try { - await reqAsyncFun; - } catch (error) { - console.log(error); - loading.value = false; - return Promise.reject(); - } finally { - loading.value = false; - } - } - - return { - loading, - handleAsyncProcess, - }; -} diff --git a/frontend/src/hooks/useLeaveUnSaveTip.ts b/frontend/src/hooks/useLeaveUnSaveTip.ts new file mode 100644 index 0000000000..f1fc401065 --- /dev/null +++ b/frontend/src/hooks/useLeaveUnSaveTip.ts @@ -0,0 +1,48 @@ +import { ref, onUnmounted } from 'vue'; +import useModal from '@/hooks/useModal'; +import { onBeforeRouteLeave } from 'vue-router'; +import { useI18n } from '@/hooks/useI18n'; + +// 离开页面确认提示 +export default function useLeaveUnSaveTip() { + const isSave = ref(false); + const { openModal } = useModal(); + const { t } = useI18n(); + + const setSaveStatus = (status: boolean) => { + isSave.value = status; + }; + + onBeforeRouteLeave((to, from, next) => { + if (to.path === from.path) { + return; + } + // 如果已保存 + if (isSave.value) { + next(); + } else { + openModal({ + type: 'error', + title: t('common.unSaveLeaveTitle'), + content: t('common.unSaveLeaveContent'), + okText: t('common.leave'), + cancelText: t('common.cancel'), + okButtonProps: { + status: 'normal', + }, + onBeforeOk: async () => { + setSaveStatus(true); + next(); + }, + hideCancel: false, + }); + } + }); + onUnmounted(() => { + isSave.value = false; + }); + + return { + setSaveStatus, + }; +} diff --git a/frontend/src/locale/en-US/common.ts b/frontend/src/locale/en-US/common.ts index 97efe0e286..48f1573462 100644 --- a/frontend/src/locale/en-US/common.ts +++ b/frontend/src/locale/en-US/common.ts @@ -40,4 +40,7 @@ export default { 'common.admin': 'Admin', 'common.revokeDelete': 'Revoke delete', 'common.revokeDeleteSuccess': 'Revoke delete success', + 'common.unSaveLeaveTitle': 'Leave this page?', + 'common.unSaveLeaveContent': 'The system may not save your changes', + 'common.leave': 'Leave', }; diff --git a/frontend/src/locale/zh-CN/common.ts b/frontend/src/locale/zh-CN/common.ts index 5d339f8ec0..a34d36e3a8 100644 --- a/frontend/src/locale/zh-CN/common.ts +++ b/frontend/src/locale/zh-CN/common.ts @@ -40,4 +40,7 @@ export default { 'common.admin': '管理员', 'common.revokeDelete': '撤销删除', 'common.revokeDeleteSuccess': '已撤销删除', + 'common.unSaveLeaveTitle': '离开此页面?', + 'common.unSaveLeaveContent': '系统可能不会保存你所做的更改', + 'common.leave': '离开', };