feat: 增加全局loading

frontend/src/api/system/user.js

@@ -11,7 +11,8 @@ export function userLists(page, size, data) {
   return request({
     url: pathMap.queryPath + page + '/' + size,
     method: 'post',
-    data
+    data,
+    loading: true
   })
 }
 

frontend/src/layout/components/AppMain.vue

 <template>
-<section class="app-main">
+  <section class="app-main">
     <transition name="fade-transform" mode="out-in">
-        <el-main class="ms-main-container">
-            <keep-alive>
-                <router-view :key="key"/>
-            </keep-alive>
-        </el-main>
+      <el-main class="ms-main-container">
+        <keep-alive>
+          <router-view :key="key" />
+        </keep-alive>
+      </el-main>
     </transition>
-</section>
+  </section>
 </template>
 
 <script>

frontend/src/layout/components/Topbar.vue

@@ -106,6 +106,7 @@ export default {
       'permission_routes'
     ])
   },
+
   mounted() {
     this.initCurrentRoutes()
   },
@@ -190,6 +191,7 @@ export default {
       await this.$store.dispatch('user/logout')
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
     }
+
   }
 }
 </script>

frontend/src/permission.js

@@ -31,6 +31,7 @@ router.beforeEach(async(to, from, next) => {
       const hasGetUserInfo = store.getters.name
       if (hasGetUserInfo) {
         next()
+        store.dispatch('permission/setCurrentPath', to.path)
       } else {
         if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
           // get user info

frontend/src/store/getters.js

@@ -14,6 +14,8 @@ const getters = {
   addRouters: state => state.permission.addRouters,
   errorLogs: state => state.errorLog.logs,
   sceneData: state => state.dataset.sceneData,
-  table: state => state.dataset.table
+  table: state => state.dataset.table,
+  loadingMap: state => state.request.loadingMap,
+  currentPath: state => state.permission.currentPath
 }
 export default getters

frontend/src/store/index.js

@@ -7,7 +7,7 @@ import user from './modules/user'
 import permission from './modules/permission'
 import dataset from './modules/dataset'
 import chart from './modules/chart'
-
+import request from './modules/request'
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
@@ -17,7 +17,8 @@ const store = new Vuex.Store({
     user,
     permission,
     dataset,
-    chart
+    chart,
+    request
   },
   getters
 })

frontend/src/store/modules/permission.js

@@ -2,6 +2,7 @@ import { constantRoutes } from '@/router'
 import Layout from '@/layout/index'
 
 const state = {
+  currentPath: null,
   routes: [],
   addRoutes: [],
   currentRoutes: {}
@@ -14,12 +15,18 @@ const mutations = {
   },
   SET_CURRENT_ROUTES: (state, routes) => {
     state.currentRoutes = routes
+  },
+  SET_CURRENT_PATH: (state, path) => {
+    state.currentPath = path
   }
 }
 
 const actions = {
   GenerateRoutes({ commit }, asyncRouter) {
     commit('SET_ROUTERS', asyncRouter)
+  },
+  setCurrentPath({ commit }, path) {
+    commit('SET_CURRENT_PATH', path)
   }
 }
 

frontend/src/store/modules/request.js

+const state = {
+  loadingMap: {}
+}
+
+const mutations = {
+
+  SET_LOADING_MAP: (state, value) => {
+    state.loadingMap = value
+  },
+  ADD_LOADING: (state, key) => {
+    if (state.loadingMap.hasOwnProperty(key)) {
+      const map = state.loadingMap
+      map[key] += 1
+      state.loadingMap = map
+    } else {
+      const nMap = {}
+      nMap[key] = 1
+
+      state.loadingMap = nMap
+    }
+  },
+  REDUCE_LOADING: (state, key) => {
+    if (state.loadingMap) {
+      const map = state.loadingMap
+      map[key] -= 1
+      state.loadingMap = map
+    }
+  }
+}
+
+const actions = {
+  addLoading({ commit }, data) {
+    commit('ADD_LOADING', data)
+  },
+  reduceLoading({ commit }, data) {
+    commit('REDUCE_LOADING', data)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+

frontend/src/utils/loading.js

+import store from '@/store'
+
+export const tryShowLoading = identification => {
+  if (!identification) return
+  // const count = store.getters.loadingMap[identification]
+
+  store.dispatch('request/addLoading', identification)
+}
+
+export const tryHideLoading = identification => {
+  if (!identification) return
+  const count = store.getters.loadingMap[identification]
+  if (count > 0) {
+    // setTimeout(() => {
+    //   store.dispatch('request/reduceLoading', identification)
+    // }, 1000)
+    store.dispatch('request/reduceLoading', identification)
+  }
+}
+

frontend/src/utils/request.js

@@ -5,6 +5,9 @@ import { $alert, $error } from './message'
 import { getToken } from '@/utils/auth'
 import Config from '@/settings'
 
+import { tryShowLoading, tryHideLoading } from './loading'
+// import router from '@/router'
+
 const TokenKey = Config.TokenKey
 // create an axios instance
 const service = axios.create({
@@ -24,6 +27,10 @@ service.interceptors.request.use(
       // please modify it according to the actual situation
       config.headers[TokenKey] = getToken()
     }
+    // 增加loading
+
+    config.loading && tryShowLoading(store.getters.currentPath)
+
     return config
   },
   error => {
@@ -97,6 +104,7 @@ service.interceptors.response.use(
 */
 // 请根据实际需求修改
 service.interceptors.response.use(response => {
+  response.config.loading && tryHideLoading(store.getters.currentPath)
   checkAuth(response)
   return response.data
 }, error => {

frontend/src/views/system/menu/index.vue

 <template>
-  <div v-loading="result.loading">
+  <div v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
 
     <el-card class="table-card">
       <template v-slot:header>

frontend/src/views/system/user/index.vue

 <template>
-  <div v-loading="result.loading">
+  <div v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
 
     <el-card class="table-card">
       <template v-slot:header>
@@ -181,6 +181,7 @@ import { allRoles } from '@/api/system/role'
 import { getDeptTree } from '@/api/system/dept'
 export default {
   name: 'MsUser',
+
   components: {
     // MsCreateBox,
     MsTablePagination,
@@ -276,11 +277,13 @@ export default {
       formType: 'add'
     }
   },
+
   activated() {
     // this.form = Object.assign({}, this.defaultForm);
     this.allRoles()
     this.search()
   },
+
   methods: {
     create() {
       this.formType = 'add'