feat(公共): 离开页面提示hooks和取消异步函数hooks

frontend/src/components/pure/ms-dialog/index.vue

@@ -35,7 +35,7 @@
             <a-button
               class="ml-3"
               type="primary"
-              :loading="props.loading"
+              :loading="confirmLoading"
               :disabled="props.disabledOk"
               @click="confirmHandler"
             >
@@ -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<boolean>(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;
+      }
     }
   };
 </script>

frontend/src/hooks/useAsyncFun.ts

@@ -1,23 +0,0 @@
-import { ref } from 'vue';
-
-export default function useAsyncHandler() {
-  const loading = ref<boolean>(false);
-
-  async function handleAsyncProcess<T>(reqAsyncFun: T): Promise<any> {
-    loading.value = true;
-    try {
-      await reqAsyncFun;
-    } catch (error) {
-      console.log(error);
-      loading.value = false;
-      return Promise.reject();
-    } finally {
-      loading.value = false;
-    }
-  }
-
-  return {
-    loading,
-    handleAsyncProcess,
-  };
-}

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,
+  };
+}

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',
 };

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': '离开',
 };