提交 02230d5e authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw

feat: 增加全局loading

上级 2b104fa0
...@@ -11,7 +11,8 @@ export function userLists(page, size, data) { ...@@ -11,7 +11,8 @@ export function userLists(page, size, data) {
return request({ return request({
url: pathMap.queryPath + page + '/' + size, url: pathMap.queryPath + page + '/' + size,
method: 'post', method: 'post',
data data,
loading: true
}) })
} }
......
<template> <template>
<section class="app-main"> <section class="app-main">
<transition name="fade-transform" mode="out-in"> <transition name="fade-transform" mode="out-in">
<el-main class="ms-main-container"> <el-main class="ms-main-container">
<keep-alive> <keep-alive>
<router-view :key="key"/> <router-view :key="key" />
</keep-alive> </keep-alive>
</el-main> </el-main>
</transition> </transition>
</section> </section>
</template> </template>
<script> <script>
......
...@@ -106,6 +106,7 @@ export default { ...@@ -106,6 +106,7 @@ export default {
'permission_routes' 'permission_routes'
]) ])
}, },
mounted() { mounted() {
this.initCurrentRoutes() this.initCurrentRoutes()
}, },
...@@ -190,6 +191,7 @@ export default { ...@@ -190,6 +191,7 @@ export default {
await this.$store.dispatch('user/logout') await this.$store.dispatch('user/logout')
this.$router.push(`/login?redirect=${this.$route.fullPath}`) this.$router.push(`/login?redirect=${this.$route.fullPath}`)
} }
} }
} }
</script> </script>
......
...@@ -31,6 +31,7 @@ router.beforeEach(async(to, from, next) => { ...@@ -31,6 +31,7 @@ router.beforeEach(async(to, from, next) => {
const hasGetUserInfo = store.getters.name const hasGetUserInfo = store.getters.name
if (hasGetUserInfo) { if (hasGetUserInfo) {
next() next()
store.dispatch('permission/setCurrentPath', to.path)
} else { } else {
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息 if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
// get user info // get user info
......
...@@ -14,6 +14,8 @@ const getters = { ...@@ -14,6 +14,8 @@ const getters = {
addRouters: state => state.permission.addRouters, addRouters: state => state.permission.addRouters,
errorLogs: state => state.errorLog.logs, errorLogs: state => state.errorLog.logs,
sceneData: state => state.dataset.sceneData, 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 export default getters
...@@ -7,7 +7,7 @@ import user from './modules/user' ...@@ -7,7 +7,7 @@ import user from './modules/user'
import permission from './modules/permission' import permission from './modules/permission'
import dataset from './modules/dataset' import dataset from './modules/dataset'
import chart from './modules/chart' import chart from './modules/chart'
import request from './modules/request'
Vue.use(Vuex) Vue.use(Vuex)
const store = new Vuex.Store({ const store = new Vuex.Store({
...@@ -17,7 +17,8 @@ const store = new Vuex.Store({ ...@@ -17,7 +17,8 @@ const store = new Vuex.Store({
user, user,
permission, permission,
dataset, dataset,
chart chart,
request
}, },
getters getters
}) })
......
...@@ -2,6 +2,7 @@ import { constantRoutes } from '@/router' ...@@ -2,6 +2,7 @@ import { constantRoutes } from '@/router'
import Layout from '@/layout/index' import Layout from '@/layout/index'
const state = { const state = {
currentPath: null,
routes: [], routes: [],
addRoutes: [], addRoutes: [],
currentRoutes: {} currentRoutes: {}
...@@ -14,12 +15,18 @@ const mutations = { ...@@ -14,12 +15,18 @@ const mutations = {
}, },
SET_CURRENT_ROUTES: (state, routes) => { SET_CURRENT_ROUTES: (state, routes) => {
state.currentRoutes = routes state.currentRoutes = routes
},
SET_CURRENT_PATH: (state, path) => {
state.currentPath = path
} }
} }
const actions = { const actions = {
GenerateRoutes({ commit }, asyncRouter) { GenerateRoutes({ commit }, asyncRouter) {
commit('SET_ROUTERS', asyncRouter) commit('SET_ROUTERS', asyncRouter)
},
setCurrentPath({ commit }, path) {
commit('SET_CURRENT_PATH', path)
} }
} }
......
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
}
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)
}
}
...@@ -5,6 +5,9 @@ import { $alert, $error } from './message' ...@@ -5,6 +5,9 @@ import { $alert, $error } from './message'
import { getToken } from '@/utils/auth' import { getToken } from '@/utils/auth'
import Config from '@/settings' import Config from '@/settings'
import { tryShowLoading, tryHideLoading } from './loading'
// import router from '@/router'
const TokenKey = Config.TokenKey const TokenKey = Config.TokenKey
// create an axios instance // create an axios instance
const service = axios.create({ const service = axios.create({
...@@ -24,6 +27,10 @@ service.interceptors.request.use( ...@@ -24,6 +27,10 @@ service.interceptors.request.use(
// please modify it according to the actual situation // please modify it according to the actual situation
config.headers[TokenKey] = getToken() config.headers[TokenKey] = getToken()
} }
// 增加loading
config.loading && tryShowLoading(store.getters.currentPath)
return config return config
}, },
error => { error => {
...@@ -97,6 +104,7 @@ service.interceptors.response.use( ...@@ -97,6 +104,7 @@ service.interceptors.response.use(
*/ */
// 请根据实际需求修改 // 请根据实际需求修改
service.interceptors.response.use(response => { service.interceptors.response.use(response => {
response.config.loading && tryHideLoading(store.getters.currentPath)
checkAuth(response) checkAuth(response)
return response.data return response.data
}, error => { }, error => {
......
<template> <template>
<div v-loading="result.loading"> <div v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
<el-card class="table-card"> <el-card class="table-card">
<template v-slot:header> <template v-slot:header>
......
<template> <template>
<div v-loading="result.loading"> <div v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
<el-card class="table-card"> <el-card class="table-card">
<template v-slot:header> <template v-slot:header>
...@@ -181,6 +181,7 @@ import { allRoles } from '@/api/system/role' ...@@ -181,6 +181,7 @@ import { allRoles } from '@/api/system/role'
import { getDeptTree } from '@/api/system/dept' import { getDeptTree } from '@/api/system/dept'
export default { export default {
name: 'MsUser', name: 'MsUser',
components: { components: {
// MsCreateBox, // MsCreateBox,
MsTablePagination, MsTablePagination,
...@@ -276,11 +277,13 @@ export default { ...@@ -276,11 +277,13 @@ export default {
formType: 'add' formType: 'add'
} }
}, },
activated() { activated() {
// this.form = Object.assign({}, this.defaultForm); // this.form = Object.assign({}, this.defaultForm);
this.allRoles() this.allRoles()
this.search() this.search()
}, },
methods: { methods: {
create() { create() {
this.formType = 'add' this.formType = 'add'
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论