fix: 将请求loading改为使用全局loading

meadmin-cn · Oct 8, 2022 · 6781d61 · 6781d61
1 parent d763c63
commit 6781d61
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/src/utils/loading.ts b/src/utils/loading.ts
@@ -1,7 +1,8 @@
 import { useGlobalStore } from '@/store';
 import { LoadingOptions } from 'element-plus';
-import { throttle, transform } from 'lodash-es';
+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;
@@ -34,29 +35,30 @@ class Loading {
     this.throttleClose.cancel();
   }
 }
-const globalLoading = new Loading(
+export const globalLoading = new Loading(
   (options?: LoadingOptions) => (loadingInstance = ElLoading.service(options)),
   () => loadingInstance.close(),
 );
-const layoutLoading = new Loading(
+export const layoutLoading = new Loading(
   (options?: LoadingOptions) => (useGlobalStore().loadingOptions = options ? reactive(options) : {}),
   () => (useGlobalStore().loadingOptions = undefined),
 );
-function getLoading(forceGlobal = false) {
-  if (!forceGlobal && useGlobalStore().layoutLoaded) {
+function getLoading(mode:LoadingMode) {
+  if (mode === 'page' || ( mode ==='auto' && useGlobalStore().layoutLoaded)) {
     return layoutLoading;
   }
   return globalLoading;
 }
 
-export function loading(options?: LoadingOptions, number = 1, forceGlobal = false): void {
-  getLoading(forceGlobal).loading(options, number);
+export function loading(options?: LoadingOptions, number = 1, mode:LoadingMode = 'auto'): void {
+  getLoading(mode).loading(options, number);
 }
 
-export function closeLoading(force = false, number = 1, forceGlobal = false): void {
+
+export function closeLoading(force = false, number = 1, mode:LoadingMode = 'auto'): void {
   if (force) {
-    getLoading(forceGlobal).forceClose();
+    getLoading(mode).forceClose();
     return;
   }
-  getLoading(forceGlobal).close(number);
+  getLoading(mode).close(number);
 }
diff --git a/src/utils/request.ts b/src/utils/request.ts
@@ -3,7 +3,7 @@ import axios, { AxiosRequestConfig } from 'axios';
 import { ElMessage } from 'element-plus';
 import log from './log';
 import { useRequest, Options, setGlobalOptions } from 'vue-request';
-import { loading, closeLoading } from './loading';
+import { globalLoading } from './loading';
 
 const service = axios.create({
   baseURL: '/', // url = base url + request url
@@ -78,7 +78,7 @@ function request<R, P extends unknown[] = [], T = boolean>(
 ) {
   const axiosService = async (...args: P): Promise<R> => {
     try {
-      !options?.noLoading && loading();
+      !options?.noLoading && globalLoading.loading();
       const { data: res } = await service(await axiosConfig(...args));
       if (!res || res.code === undefined) {
         throw Error('返回值解析失败');
@@ -94,10 +94,10 @@ function request<R, P extends unknown[] = [], T = boolean>(
       if (options?.success) {
         ElMessage.success({ message: res.msg });
       }
-      !options?.noLoading && closeLoading();
+      !options?.noLoading && globalLoading.close();
       return options?.needAll ? res : res.data;
     } catch (e) {
-      !options?.noLoading && closeLoading();
+      !options?.noLoading && globalLoading.close();
       !options?.noError &&
         ElMessage.error({
           message: e instanceof Error ? e.message : String(e),