imatrix-ui 0.0.1-dsn

package/src/store/index.js

@@ -0,0 +1,19 @@
+import * as Vue from 'vue'
+import * as Vuex from 'vuex'
+import app from './modules/app'
+import user from './modules/user'
+import permission from './modules/permission'
+import tabContent from './modules/tab-content'
+import getters from './getters'
+
+const store = Vuex.createStore({
+  modules: {
+    app,
+    user,
+    permission,
+    tabContent,
+  },
+  getters,
+})
+
+export default store

package/src/store/modules/app.js

@@ -0,0 +1,54 @@
+const app = {
+  state: {
+    sidebar: {
+      opened: !+window.sessionStorage.getItem('sidebarStatus'),
+      withoutAnimation: false,
+    },
+    device: 'desktop',
+    preventReclick: false,
+    whiteList: [],
+  },
+  mutations: {
+    toggleSidebar: (state) => {
+      if (state.sidebar.opened) {
+        window.sessionStorage.setItem('sidebarStatus', 1)
+      } else {
+        window.sessionStorage.setItem('sidebarStatus', 0)
+      }
+      state.sidebar.opened = !state.sidebar.opened
+      state.sidebar.withoutAnimation = false
+    },
+    closeSidebar: (state, withoutAnimation) => {
+      window.sessionStorage.setItem('sidebarStatus', 1)
+      state.sidebar.opened = false
+      state.sidebar.withoutAnimation = withoutAnimation
+    },
+    toggleDevice: (state, device) => {
+      state.device = device
+    },
+    togglePreventReclick: (state, preventReclick) => {
+      state.preventReclick = preventReclick
+    },
+    setWhiteList: (state, whiteList) => {
+      if (whiteList instanceof Array) {
+        state.whiteList = whiteList
+      }
+    },
+  },
+  actions: {
+    toggleSidebar: ({ commit }) => {
+      commit('toggleSidebar')
+    },
+    closeSidebar({ commit }, { withoutAnimation }) {
+      commit('closeSidebar', withoutAnimation)
+    },
+    toggelDevice({ commit }, device) {
+      commit('toggleDevice', device)
+    },
+    addWhiteList({ commit }, whiteList) {
+      commit('setWhiteList', whiteList)
+    },
+  },
+}
+
+export default app

package/src/store/modules/permission.js

@@ -0,0 +1,145 @@
+import { protectedRouterMap } from '../../router'
+
+/**
+ * 通过meta.role判断是否与当前用户权限匹配
+ * @param roles
+ * @param route
+ */
+function hasPermission(currentUserPermissions, route) {
+  let result = true
+  const orgPermission = route.meta.permission
+  if (orgPermission) {
+    result = false
+    const currentPermission = orgPermission.replace(/\./g, '__')
+    const permissionResult = currentUserPermissions[currentPermission]
+    if (permissionResult !== undefined && permissionResult === true) {
+      result = true
+    }
+  }
+  return result
+}
+
+/**
+ * 递归过滤受权限保护的路由表，返回符合用户权限的路由表
+ * @param allRoutes 即protectedRouterMap
+ * @param currentUserPermissions 后台返回的当前用户具有的权限
+ */
+function filterProtectedRouter(allRoutes, currentUserPermissions) {
+  // console.log('filterProtectedRouter--', allRoutes)
+  const res = []
+  const menuRouters = []
+
+  allRoutes.forEach((route) => {
+    const tmp = { ...route }
+
+    if (tmp.children && tmp.children.length > 0) {
+      const routerResult = filterProtectedRouter(
+        tmp.children,
+        currentUserPermissions
+      )
+      // 所有有权限的路由，包括不是菜单的路由
+      tmp.children = routerResult.allRouters
+      // 所有菜单路由
+      tmp.menuChildren = routerResult.menuRouters
+      if (tmp.menuChildren && tmp.menuChildren.length > 0) {
+        if (tmp.redirectTmp) {
+          tmp.redirectTmp = tmp.redirectTmp + '/' + tmp.menuChildren[0].path
+        } else {
+          tmp.redirectTmp = tmp.path + '/' + tmp.menuChildren[0].path
+        }
+        res.push(tmp)
+        menuRouters.push(tmp)
+      }
+    } else {
+      if (tmp.path === '') {
+        // 表示是空路由,即系统路由
+        res.push(tmp)
+      } else {
+        if (hasPermission(currentUserPermissions, tmp)) {
+          if (
+            typeof tmp.hidden === 'undefined' ||
+            (typeof tmp.hidden !== 'undefined' && tmp.hidden === false)
+          ) {
+            menuRouters.push(tmp)
+          }
+          res.push(tmp)
+        }
+      }
+    }
+  })
+
+  return { allRouters: res, menuRouters: menuRouters }
+}
+
+const permission = {
+  state: {
+    // routers: publicRouterMap,
+    protectedRouters: [],
+    currentUserPermissions: [],
+  },
+  mutations: {
+    setCurrentUserPermissions: (state, currentUserPermissions) => {
+      state.currentUserPermissions = currentUserPermissions
+    },
+    setRouters: (state, routers) => {
+      state.protectedRouters = routers
+      // 把公共路由，用户有权限的路由，错误路由合并后就是当前用户的完整路由表
+      // state.routers = publicRouterMap.concat(routers).concat(errorRouterMap)
+    },
+  },
+  actions: {
+    generateRoutes({ commit }, data) {
+      return new Promise((resolve) => {
+        const currentUserPermissions = data
+        // commit('setCurrentUserPermissions', currentUserPermissions)
+        const a = new Date().getTime()
+        const accessableRoutersResult = filterProtectedRouter(
+          protectedRouterMap,
+          currentUserPermissions
+        )
+        const b = new Date().getTime()
+        window.sessionStorage.setItem('generateRoutes==>执行时间:', b - a + '')
+        const accessableRouters = accessableRoutersResult.allRouters
+        const allMenuRoutes = accessableRoutersResult.menuRouters
+        // console.log('有权限的路由表结果==', accessableRouters)
+        // 动态添加空路由（即系统路由）
+        if (accessableRouters.length > 0) {
+          // 获得所有菜单路由
+          // console.log('allMenuRoutes==', allMenuRoutes)
+          const emptyPathRouter = {
+            path: '',
+          }
+          if (allMenuRoutes.length > 0) {
+            if (accessableRouters[0].path !== '') {
+              // 表示不包含空路由，需要添加空路由
+              if (allMenuRoutes[0].redirectTmp) {
+                emptyPathRouter.redirect = allMenuRoutes[0].redirectTmp
+              }
+              accessableRouters.push(emptyPathRouter)
+            } else if (
+              allMenuRoutes.length > 0 &&
+              accessableRouters[0].path === '' &&
+              (!allMenuRoutes[0].children ||
+                allMenuRoutes[0].children.length === 0)
+            ) {
+              // 表示自己配置了空路由，且没有子路由
+              if (allMenuRoutes[0].redirectTmp) {
+                accessableRouters[0].redirect = allMenuRoutes[0].redirectTmp
+              }
+            }
+            // console.log('更新后的有权限的路由表结果，更新了根路由跳转的地址==', accessableRouters)
+          }
+        }
+        commit('setRouters', accessableRouters)
+        const c = new Date().getTime()
+        window.sessionStorage.setItem(
+          'generateRoutes==>执行时间c-a:',
+          c - a + ''
+        )
+        resolve()
+      })
+    },
+  },
+}
+
+export default permission

package/src/store/modules/tab-content.js

@@ -0,0 +1,36 @@
+const tabContent = {
+  state: {
+    openTab: [], // 所有打开的路由
+    activeIndex: null, // 激活状态
+  },
+  mutations: {
+    // 添加tabs
+    add_tabs(state, data) {
+      state.openTab.push(data)
+    },
+    // 删除tabs
+    delete_tabs(state, route) {
+      let index = 0
+      for (const option of state.openTab) {
+        if (option.code === route.code) {
+          break
+        }
+        index++
+      }
+      state.openTab.splice(index, 1)
+    },
+    // 设置当前激活的tab
+    set_active_index(state, index) {
+      state.activeIndex = index
+    },
+    // 清空tabs
+    clear_tabs(state, route) {
+      if (state.openTab.length > 0) {
+        state.openTab.splice(0, state.openTab.length)
+      }
+    },
+  },
+  actions: {},
+}
+
+export default tabContent

package/src/store/modules/user.js

@@ -0,0 +1,298 @@
+import ssoService from '../../api/sso-service'
+import {
+  setToken,
+  removeToken,
+  setUsername,
+  getUsername,
+  removeUsername,
+  setCurrentUser,
+  removeCurrentUser,
+  setLanguage,  
+  removeLanguage,
+  removeAllLanguages
+} from '../../utils/auth'
+
+import {
+  removePermissions,
+  getPermissions,
+  setPermissions,
+  getMenus,
+  setMenus,
+  removeMenus,
+} from '../../utils/permissionAuth'
+
+import { isPlateSys } from '../../utils/common-util'
+
+const user = {
+  state: {
+    token: '',
+    name: '',
+    menus: [],
+  },
+
+  mutations: {
+    setToken: (state, token) => {
+      state.token = token
+    },
+    setName: (state, name) => {
+      state.name = name
+    },
+    setMenus: (state, menus) => {
+      state.menus = menus
+    },
+  },
+
+  actions: {
+    // 登录
+    login({ commit }, userInfo) {
+      const username = userInfo.username.trim()
+      return new Promise((resolve, reject) => {
+        ssoService
+          .login(username, userInfo.password, userInfo.language)
+          .then((data) => {
+            // const data = response.data
+            setToken(data.jwt)
+            setLanguage(data.language)
+            commit('setToken', data.jwt)
+            return ssoService.getCurrentUserPermissionsBySystem(data.subject)
+          })
+          .then((permissions) => {
+            let currentPermissions = ['index']
+            currentPermissions = currentPermissions.concat(permissions)
+            setPermissions(currentPermissions)
+            resolve()
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    // 登录
+    loginWithValidateCode({ commit }, userInfo) {
+      const username = userInfo.username.trim()
+      return new Promise((resolve, reject) => {
+        ssoService
+          .loginWithValidateCode(
+            username,
+            userInfo.password,
+            userInfo.language,
+            userInfo.validCode,
+            userInfo.imageCodeKey
+          )
+          .then((data) => {
+            // const data = response.data
+            setToken(data.jwt)
+            setLanguage(data.language)
+            commit('setToken', data.jwt)
+            return ssoService.getCurrentUserPermissionsBySystem(data.subject)
+          })
+          .then((permissions) => {
+            let currentPermissions = ['index']
+            currentPermissions = currentPermissions.concat(permissions)
+            setPermissions(currentPermissions)
+            resolve()
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    // 登录。根据token登录系统
+    loginWithCookieToken({ commit }, loginName) {
+      return new Promise((resolve, reject) => {
+        if (loginName) {
+          // setToken(tokenInfo.jwt)
+          // commit('setToken', tokenInfo.jwt)
+          ssoService
+            .getCurrentUserPermissionsBySystem(loginName)
+            .then((permissions) => {
+              let currentPermissions = ['index']
+              currentPermissions = currentPermissions.concat(permissions)
+              setPermissions(currentPermissions)
+              resolve()
+            })
+            .catch((error) => {
+              reject(error)
+            })
+        }
+      })
+    },
+
+    // 获取用户信息
+    getCurrentUser({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        const storeUserName = getUsername()
+        if (
+          typeof storeUserName === 'undefined' ||
+          storeUserName === '' ||
+          storeUserName === null
+        ) {
+          ssoService
+            .getCurrentUser()
+            .then((user) => {
+              if (user) {
+                setUsername(user.loginName)
+                setCurrentUser(user)
+                commit('setName', user.name)
+              } else {
+                removeUsername()
+                removeCurrentUser()
+                commit('setName', '')
+              }
+              // commit('SET_AVATAR', data.avatar)
+              resolve(user)
+            })
+            .catch((error) => {
+              reject(error)
+            })
+        } else {
+          commit('setName', storeUserName)
+          resolve({ loginName: storeUserName })
+        }
+      })
+    },
+
+    // 登出
+    logout({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        ssoService
+          .logout(state.token)
+          .then((data) => {
+            commit('setToken', '')
+            removeToken()
+            removeLanguage()
+            removeAllLanguages()
+
+            commit('setName', '')
+            removeUsername()
+            removeCurrentUser()
+
+            removePermissions()
+
+            removeMenus()
+
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+
+    // 出现401错误时清空过期的jwt
+    clearToken({ commit }) {
+      return new Promise((resolve) => {
+        commit('setToken', '')
+        removeToken()
+        removeLanguage()
+        removeAllLanguages()
+
+        commit('setName', '')
+        removeUsername()
+        removeCurrentUser()
+
+        removePermissions()
+
+        removeMenus()
+
+        resolve()
+      })
+    },
+
+    // 获得当前用户权限集合
+    getCurrentUserPermissions({ commit }, loginName, systemCode) {
+      return new Promise((resolve, reject) => {
+        let storePermissions = getPermissions()
+        // 这个判断会导致资源不会重新加载？？
+        if (
+          typeof storePermissions === 'undefined' ||
+          storePermissions === '' ||
+          storePermissions === null
+        ) {
+          ssoService
+            .getCurrentUserPermissionsBySystem(loginName, systemCode)
+            .then((permissions) => {
+              let currentPermissions = ['index']
+              currentPermissions = currentPermissions.concat(permissions)
+              storePermissions = setPermissions(currentPermissions)
+              resolve(storePermissions)
+            })
+            .catch((error) => {
+              reject(error)
+            })
+        } else {
+          resolve(storePermissions)
+        }
+      })
+    },
+
+    // 判断当前用户密码是否过期
+    isPasswordExpired({ commit }, userInfo) {
+      const username = userInfo.username.trim()
+      return new Promise((resolve, reject) => {
+        ssoService
+          .isPasswordExpired(username, userInfo.password)
+          .then((message) => {
+            resolve(message)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+
+    updatePassword({ commit }, map) {
+      return new Promise((resolve, reject) => {
+        ssoService
+          .updatePassword(map, map.userId)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    // 判断jwt是否超时，防止出现401错误提示信息
+    isLoginTimeOut({ commit }) {
+      return new Promise((resolve, reject) => {
+        ssoService
+          .isLoginTimeOut()
+          .then((message) => {
+            resolve(message)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+    // 获得有权限的菜单集合
+    getPermissionMenus({ commit }, systemCode) {
+      return new Promise((resolve, reject) => {
+        const storePermissionMenus = getMenus(systemCode)
+        if (
+          isPlateSys(systemCode) || (
+            typeof storePermissionMenus === 'undefined' ||
+            storePermissionMenus === '' ||
+            storePermissionMenus === null
+          )
+        ) {
+          ssoService
+            .getUserPermissionMenusBySystemCode(systemCode)
+            .then((menus) => {
+              // commit('setMenus', menus)
+              setMenus(menus, systemCode)
+              resolve(menus)
+            })
+            .catch((error) => {
+              reject(error)
+            })
+        } else {
+          resolve(storePermissionMenus)
+        }
+      })
+    },
+  },
+}
+
+export default user

package/src/styles/display-layout.scss

@@ -0,0 +1,34 @@
+.flex-container {
+  display: flex;
+  width: 100%;
+
+  .tree-area {
+    flex: 0 0 200px;
+    overflow: auto;
+  }
+
+  .list-area {
+    flex: 1;
+    overflow: auto;
+    margin-left: 20px;
+  }
+}
+
+.three-column-layout {
+  height: calc(100vh - 20px);
+
+  .el-aside {
+    margin-right: 20px;
+    padding-top: 20px;
+    background-color: #FFFFFF;
+    box-shadow: 0px 1px 8px 0px #00000019;
+
+  }
+
+  .el-main {
+    padding: 20px 0 0 20px;
+    border-radius: 6px;
+    background: #FFFFFF;
+    box-shadow: 0px 1px 8px 0px #00000019;
+  }
+}

package/src/styles/element-ui.scss

@@ -0,0 +1,29 @@
+ //to reset element-ui default css
+ .el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+//element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}