Modify code organization

cmdb-ui/src/store/getters.js

@@ -0,0 +1,15 @@
+const getters = {
+  device: state => state.app.device,
+  theme: state => state.app.theme,
+  color: state => state.app.color,
+  token: state => state.user.token,
+  avatar: state => state.user.avatar,
+  nickname: state => state.user.name,
+  welcome: state => state.user.welcome,
+  roles: state => state.user.roles,
+  userInfo: state => state.user.info,
+  addRouters: state => state.permission.addRouters,
+  multiTab: state => state.app.multiTab
+}
+
+export default getters

cmdb-ui/src/store/index.js

@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import app from './modules/app'
+import user from './modules/user'
+import permission from './modules/permission'
+import getters from './getters'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  modules: {
+    app,
+    user,
+    permission
+  },
+  state: {
+
+  },
+  mutations: {
+
+  },
+  actions: {
+
+  },
+  getters
+})

cmdb-ui/src/store/modules/app.js

@@ -0,0 +1,123 @@
+import Vue from 'vue'
+import {
+  SIDEBAR_TYPE,
+  DEFAULT_THEME,
+  DEFAULT_LAYOUT_MODE,
+  DEFAULT_COLOR,
+  DEFAULT_COLOR_WEAK,
+  DEFAULT_FIXED_HEADER,
+  DEFAULT_FIXED_SIDEMENU,
+  DEFAULT_FIXED_HEADER_HIDDEN,
+  DEFAULT_CONTENT_WIDTH_TYPE,
+  DEFAULT_MULTI_TAB
+} from '@/store/mutation-types'
+
+const app = {
+  state: {
+    name: 'cmdb',
+    sidebar: true,
+    device: 'desktop',
+    theme: '',
+    layout: '',
+    contentWidth: '',
+    fixedHeader: true,
+    fixSiderbar: true,
+    autoHideHeader: true,
+    color: null,
+    weak: false,
+    multiTab: false
+  },
+  mutations: {
+    SET_SIDEBAR_TYPE: (state, type) => {
+      state.sidebar = type
+      Vue.ls.set(SIDEBAR_TYPE, type)
+    },
+    CLOSE_SIDEBAR: (state) => {
+      Vue.ls.set(SIDEBAR_TYPE, true)
+      state.sidebar = false
+    },
+    TOGGLE_DEVICE: (state, device) => {
+      state.device = device
+    },
+    TOGGLE_THEME: (state, theme) => {
+      // setStore('_DEFAULT_THEME', theme)
+      Vue.ls.set(DEFAULT_THEME, theme)
+      state.theme = theme
+    },
+    TOGGLE_LAYOUT_MODE: (state, layout) => {
+      Vue.ls.set(DEFAULT_LAYOUT_MODE, layout)
+      state.layout = layout
+    },
+    TOGGLE_FIXED_HEADER: (state, fixed) => {
+      Vue.ls.set(DEFAULT_FIXED_HEADER, fixed)
+      state.fixedHeader = fixed
+    },
+    TOGGLE_FIXED_SIDERBAR: (state, fixed) => {
+      Vue.ls.set(DEFAULT_FIXED_SIDEMENU, fixed)
+      state.fixSiderbar = fixed
+    },
+    TOGGLE_FIXED_HEADER_HIDDEN: (state, show) => {
+      Vue.ls.set(DEFAULT_FIXED_HEADER_HIDDEN, show)
+      state.autoHideHeader = show
+    },
+    TOGGLE_CONTENT_WIDTH: (state, type) => {
+      Vue.ls.set(DEFAULT_CONTENT_WIDTH_TYPE, type)
+      state.contentWidth = type
+    },
+    TOGGLE_COLOR: (state, color) => {
+      Vue.ls.set(DEFAULT_COLOR, color)
+      state.color = color
+    },
+    TOGGLE_WEAK: (state, flag) => {
+      Vue.ls.set(DEFAULT_COLOR_WEAK, flag)
+      state.weak = flag
+    },
+    TOGGLE_MULTI_TAB: (state, bool) => {
+      Vue.ls.set(DEFAULT_MULTI_TAB, bool)
+      state.multiTab = bool
+    }
+  },
+  actions: {
+    setSidebar ({ commit }, type) {
+      commit('SET_SIDEBAR_TYPE', type)
+    },
+    CloseSidebar ({ commit }) {
+      commit('CLOSE_SIDEBAR')
+    },
+    ToggleDevice ({ commit }, device) {
+      commit('TOGGLE_DEVICE', device)
+    },
+    ToggleTheme ({ commit }, theme) {
+      commit('TOGGLE_THEME', theme)
+    },
+    ToggleLayoutMode ({ commit }, mode) {
+      commit('TOGGLE_LAYOUT_MODE', mode)
+    },
+    ToggleFixedHeader ({ commit }, fixedHeader) {
+      if (!fixedHeader) {
+        commit('TOGGLE_FIXED_HEADER_HIDDEN', false)
+      }
+      commit('TOGGLE_FIXED_HEADER', fixedHeader)
+    },
+    ToggleFixSiderbar ({ commit }, fixSiderbar) {
+      commit('TOGGLE_FIXED_SIDERBAR', fixSiderbar)
+    },
+    ToggleFixedHeaderHidden ({ commit }, show) {
+      commit('TOGGLE_FIXED_HEADER_HIDDEN', show)
+    },
+    ToggleContentWidth ({ commit }, type) {
+      commit('TOGGLE_CONTENT_WIDTH', type)
+    },
+    ToggleColor ({ commit }, color) {
+      commit('TOGGLE_COLOR', color)
+    },
+    ToggleWeak ({ commit }, weakFlag) {
+      commit('TOGGLE_WEAK', weakFlag)
+    },
+    ToggleMultiTab ({ commit }, bool) {
+      commit('TOGGLE_MULTI_TAB', bool)
+    }
+  }
+}
+
+export default app

cmdb-ui/src/store/modules/permission.js

@@ -0,0 +1,62 @@
+import { generatorDynamicRouter, constantRouterMap } from '@/config/router.config'
+
+/**
+ * 过滤账户是否拥有某一个权限，并将菜单从加载列表移除
+ *
+ * @param permission
+ * @param route
+ * @returns {boolean}
+ */
+function hasPermission (permission, route) {
+  if (route.meta && route.meta.permission) {
+    let flag = false
+    for (let i = 0, len = permission.length; i < len; i++) {
+      flag = route.meta.permission.includes(permission[i])
+      if (flag) {
+        return true
+      }
+    }
+    return false
+  }
+  return true
+}
+
+function filterAsyncRouter (routerMap, roles) {
+  const accessedRouters = routerMap.filter(route => {
+    if (hasPermission(roles.permissions, route)) {
+      if (route.children && route.children.length) {
+        route.children = filterAsyncRouter(route.children, roles)
+      }
+      return true
+    }
+    return false
+  })
+  return accessedRouters
+}
+
+const permission = {
+  state: {
+    routers: constantRouterMap,
+    addRouters: []
+  },
+  mutations: {
+    SET_ROUTERS: (state, routers) => {
+      state.addRouters = routers
+      state.routers = constantRouterMap.concat(routers)
+    }
+  },
+  actions: {
+    GenerateRoutes ({ commit }, data) {
+      return new Promise(resolve => {
+        const { roles } = data
+        generatorDynamicRouter(roles).then(routers => {
+          const accessedRouters = filterAsyncRouter(routers, roles)
+          commit('SET_ROUTERS', accessedRouters)
+          resolve()
+        })
+      })
+    }
+  }
+}
+
+export default permission

cmdb-ui/src/store/modules/user.js

@@ -0,0 +1,95 @@
+import Vue from 'vue'
+import { login, getInfo, logout } from '@/api/login'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import { welcome } from '@/utils/util'
+
+const user = {
+  state: {
+    token: '',
+    name: '',
+    welcome: '',
+    avatar: '',
+    roles: [],
+    info: {}
+  },
+
+  mutations: {
+    SET_TOKEN: (state, token) => {
+      state.token = token
+    },
+    SET_NAME: (state, { name, welcome }) => {
+      state.name = name
+      state.welcome = welcome
+    },
+    SET_AVATAR: (state, avatar) => {
+      state.avatar = avatar
+    },
+    SET_ROLES: (state, roles) => {
+      state.roles = roles
+    },
+    SET_INFO: (state, info) => {
+      state.info = info
+    }
+  },
+
+  actions: {
+    // 登录
+    Login ({ commit }, userInfo) {
+      return new Promise((resolve, reject) => {
+        login(userInfo).then(response => {
+          Vue.ls.set(ACCESS_TOKEN, response.token, 7 * 24 * 60 * 60 * 1000)
+          commit('SET_TOKEN', response.token)
+          resolve()
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+
+    // 获取用户信息
+    GetInfo ({ commit }) {
+      return new Promise((resolve, reject) => {
+        getInfo().then(response => {
+          const result = response.result
+
+          const role = result.role
+          role.permissions = result.role.permissions
+          role.permissions.map(per => {
+            if (per.actionEntitySet != null && per.actionEntitySet.length > 0) {
+              const action = per.actionEntitySet.map(action => { return action.action })
+              per.actionList = action
+            }
+          })
+          role.permissionList = role.permissions.map(permission => { return permission })
+          commit('SET_ROLES', result.role)
+          commit('SET_INFO', result)
+          commit('SET_NAME', { name: result.name, welcome: welcome() })
+          commit('SET_AVATAR', result.avatar)
+
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+
+    // 登出
+    Logout ({ commit, state }) {
+      return new Promise((resolve) => {
+        commit('SET_TOKEN', '')
+        commit('SET_ROLES', [])
+        Vue.ls.remove(ACCESS_TOKEN)
+
+        logout(state.token).then(() => {
+          window.location.reload()
+          resolve()
+        }).catch(() => {
+          resolve()
+        })
+      })
+    }
+
+  }
+}
+
+export default user

cmdb-ui/src/store/mutation-types.js

@@ -0,0 +1,16 @@
+export const ACCESS_TOKEN = 'Access-Token'
+export const SIDEBAR_TYPE = 'SIDEBAR_TYPE'
+export const DEFAULT_THEME = 'DEFAULT_THEME'
+export const DEFAULT_LAYOUT_MODE = 'DEFAULT_LAYOUT_MODE'
+export const DEFAULT_COLOR = 'DEFAULT_COLOR'
+export const DEFAULT_COLOR_WEAK = 'DEFAULT_COLOR_WEAK'
+export const DEFAULT_FIXED_HEADER = 'DEFAULT_FIXED_HEADER'
+export const DEFAULT_FIXED_SIDEMENU = 'DEFAULT_FIXED_SIDEMENU'
+export const DEFAULT_FIXED_HEADER_HIDDEN = 'DEFAULT_FIXED_HEADER_HIDDEN'
+export const DEFAULT_CONTENT_WIDTH_TYPE = 'DEFAULT_CONTENT_WIDTH_TYPE'
+export const DEFAULT_MULTI_TAB = 'DEFAULT_MULTI_TAB'
+
+export const CONTENT_WIDTH_TYPE = {
+  Fluid: 'Fluid',
+  Fixed: 'Fixed'
+}