fix: 已登录情况下访问时loading无法消除问题。

meadmin-cn · Oct 19, 2022 · b928655 · b928655
1 parent 674d849
commit b928655
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 26 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <el-config-provider :locale="settingStore.elLocale" :size="settingStore.themeConfig.size">
     <router-view v-slot="{ Component }">
-      <me-component :is="Component" done-progress close-loading></me-component>
+      <me-component :is="Component" done-progress close-loading="layout"></me-component>
     </router-view>
   </el-config-provider>
 </template>

diff --git a/src/components/meComponent.ts b/src/components/meComponent.ts
@@ -3,7 +3,7 @@ import { MeKeepAliveProps, default as MeKeepAlive } from './meKeepAlive';
 import { useLoadMessages } from '@/locales/i18n';
 import { done } from '@/utils/nProgress';
 import { localeConfig } from '@/config';
-import { closeLoading } from '@/utils/loading';
+import { closeLoading, loadingObject } from '@/utils/loading';
 export default defineComponent({
   name: 'MeComponent',
   props: {
@@ -13,7 +13,7 @@ export default defineComponent({
     keepAlive: Object as PropType<MeKeepAliveProps>,
     componentKey: [Number, String, Symbol],
     doneProgress: Boolean,
-    closeLoading: Boolean,
+    closeLoading: String as PropType<keyof typeof loadingObject>,
     transition: Object as PropType<TransitionProps>,
   },
   setup(props, { attrs }) {
@@ -30,7 +30,7 @@ export default defineComponent({
           key.value = props.componentKey;
           _attrs.value = attrs;
           props.doneProgress && done();
-          props.closeLoading && closeLoading();
+          props.closeLoading && closeLoading(false,1,props.closeLoading);
         }
       },
       { immediate: true },

diff --git a/src/layout/components/page.vue b/src/layout/components/page.vue
@@ -6,7 +6,7 @@
       :keep-alive="keepAliveProps"
       :component-key="route.fullPath"
       done-progress
-      close-loading
+      close-loading="layout"
     >
     </me-component>
   </router-view>

diff --git a/src/router/guard/index.ts b/src/router/guard/index.ts
@@ -32,7 +32,7 @@ function createPermissionGuard(router: Router) {
 function createProgressGuard(router: Router) {
   router.beforeEach(async (to) => {
     start(to.matched.length);
-    loading({}, to.matched.length);
+    loading({}, to.matched.length,'layout');
     return true;
   });
 }

diff --git a/src/utils/loading.ts b/src/utils/loading.ts
@@ -2,7 +2,6 @@ import { useGlobalStore } from '@/store';
 import { LoadingOptions } from 'element-plus';
 import { throttle } from 'lodash-es';
 let loadingInstance: ReturnType<typeof ElLoading.service>;
-export type LoadingMode = 'auto'|'global'|'page'
 class Loading {
   constructor(private execLoading: (options?: LoadingOptions) => void, private execClose: () => void) {
     this.execLoading = execLoading;
@@ -35,30 +34,29 @@ class Loading {
     this.throttleClose.cancel();
   }
 }
-export const globalLoading = new Loading(
-  (options?: LoadingOptions) => (loadingInstance = ElLoading.service(options)),
-  () => loadingInstance.close(),
-);
-export const layoutLoading = new Loading(
-  (options?: LoadingOptions) => (useGlobalStore().loadingOptions = options ? reactive(options) : {}),
-  () => (useGlobalStore().loadingOptions = undefined),
-);
-function getLoading(mode:LoadingMode) {
-  if (mode === 'page' || ( mode ==='auto' && useGlobalStore().layoutLoaded)) {
-    return layoutLoading;
-  }
-  return globalLoading;
-}
 
-export function loading(options?: LoadingOptions, number = 1, mode:LoadingMode = 'auto'): void {
-  getLoading(mode).loading(options, number);
+export const loadingObject = {
+  global: new Loading(
+    (options?: LoadingOptions) => (loadingInstance = ElLoading.service(options)),
+    () => loadingInstance.close(),
+  ),
+  layout:new Loading(
+    (options?: LoadingOptions) => (useGlobalStore().loadingOptions = options ? reactive(options) : {}),
+    () => (useGlobalStore().loadingOptions = undefined),
+  ),
 }
 
+export function loading(options?: LoadingOptions, number = 1, mode:keyof typeof loadingObject = 'global') {
+  const loading = loadingObject[mode]
+  loading.loading(options, number);
+  return loading;
+}
 
-export function closeLoading(force = false, number = 1, mode:LoadingMode = 'auto'): void {
+export function closeLoading(force = false, number = 1, mode:keyof typeof loadingObject = 'global'): void {
+  const loading = loadingObject[mode]
   if (force) {
-    getLoading(mode).forceClose();
+    loading.forceClose();
     return;
   }
-  getLoading(mode).close(number);
+  loading.close(number);
 }