diff --git a/frontend/src/api/system/user.js b/frontend/src/api/system/user.js index 181a809ea9..eaa7473916 100644 --- a/frontend/src/api/system/user.js +++ b/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 }) } diff --git a/frontend/src/layout/components/AppMain.vue b/frontend/src/layout/components/AppMain.vue index 72c3aff242..475cfda6e5 100644 --- a/frontend/src/layout/components/AppMain.vue +++ b/frontend/src/layout/components/AppMain.vue @@ -1,13 +1,13 @@ diff --git a/frontend/src/permission.js b/frontend/src/permission.js index 44eed1a58e..6bb2d162ea 100644 --- a/frontend/src/permission.js +++ b/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 diff --git a/frontend/src/store/getters.js b/frontend/src/store/getters.js index 1378045356..4f1af6f479 100644 --- a/frontend/src/store/getters.js +++ b/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 diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js index ae20c164df..244abb69f3 100644 --- a/frontend/src/store/index.js +++ b/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 }) diff --git a/frontend/src/store/modules/permission.js b/frontend/src/store/modules/permission.js index 40cc1c0152..1477744af1 100644 --- a/frontend/src/store/modules/permission.js +++ b/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) } } diff --git a/frontend/src/store/modules/request.js b/frontend/src/store/modules/request.js new file mode 100644 index 0000000000..b46b39ab20 --- /dev/null +++ b/frontend/src/store/modules/request.js @@ -0,0 +1,46 @@ +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 +} + diff --git a/frontend/src/utils/loading.js b/frontend/src/utils/loading.js new file mode 100644 index 0000000000..37af129066 --- /dev/null +++ b/frontend/src/utils/loading.js @@ -0,0 +1,20 @@ +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) + } +} + diff --git a/frontend/src/utils/request.js b/frontend/src/utils/request.js index f2fc12e6eb..837302bfad 100644 --- a/frontend/src/utils/request.js +++ b/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 => { diff --git a/frontend/src/views/system/menu/index.vue b/frontend/src/views/system/menu/index.vue index de867829f6..d2b87aba76 100644 --- a/frontend/src/views/system/menu/index.vue +++ b/frontend/src/views/system/menu/index.vue @@ -1,5 +1,5 @@