mirror of
https://github.com/veops/cmdb.git
synced 2025-08-09 15:36:41 +08:00
前后端全面升级
This commit is contained in:
pycook
124
cmdb-ui/src/store/global/app.js
Normal file
124
cmdb-ui/src/store/global/app.js
Normal file
@@ -0,0 +1,124 @@
|
||||
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/global/mutation-types'
|
||||
|
||||
const app = {
|
||||
state: {
|
||||
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
|
||||
18
cmdb-ui/src/store/global/getters.js
Normal file
18
cmdb-ui/src/store/global/getters.js
Normal file
@@ -0,0 +1,18 @@
|
||||
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,
|
||||
username: state => state.user.username,
|
||||
uid: state => state.user.uid,
|
||||
rid: state => state.user.rid,
|
||||
welcome: state => state.user.welcome,
|
||||
roles: state => state.user.roles,
|
||||
userInfo: state => state.user.info,
|
||||
appRoutes: state => state.routes.appRoutes,
|
||||
multiTab: state => state.app.multiTab,
|
||||
}
|
||||
|
||||
export default getters
|
||||
31
cmdb-ui/src/store/global/logo.js
Normal file
31
cmdb-ui/src/store/global/logo.js
Normal file
@@ -0,0 +1,31 @@
|
||||
import { getCompanyInfo } from '@/api/company'
|
||||
|
||||
const logo = {
|
||||
state: {
|
||||
file_name: '',
|
||||
small_file_name: ''
|
||||
},
|
||||
mutations: {
|
||||
SET_FILENAME: (state, name) => {
|
||||
state.file_name = name
|
||||
},
|
||||
SET_SMALL_FILENAME: (state, name) => {
|
||||
state.small_file_name = name
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
getCompanyInfo({ commit }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getCompanyInfo().then(res => {
|
||||
commit('SET_FILENAME', res.info.logoName)
|
||||
commit('SET_SMALL_FILENAME', res.info.smallLogoName)
|
||||
resolve(res.info)
|
||||
}).catch(err => {
|
||||
console.log('获取失败', err)
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
export default logo
|
||||
16
cmdb-ui/src/store/global/mutation-types.js
Normal file
16
cmdb-ui/src/store/global/mutation-types.js
Normal file
@@ -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'
|
||||
}
|
||||
17
cmdb-ui/src/store/global/notice.js
Normal file
17
cmdb-ui/src/store/global/notice.js
Normal file
@@ -0,0 +1,17 @@
|
||||
const notice = {
|
||||
state: {
|
||||
totalUnreadNum: 0,
|
||||
appUnreadNum: []
|
||||
},
|
||||
mutations: {
|
||||
SET_TOTAL_UNREAD_NUM: (state, totalUnreadNum) => {
|
||||
state.totalUnreadNum = totalUnreadNum
|
||||
},
|
||||
SET_APP_UNREAD_NUM: (state, appUnreadNum) => {
|
||||
state.appUnreadNum = appUnreadNum
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
}
|
||||
}
|
||||
export default notice
|
||||
67
cmdb-ui/src/store/global/routes.js
Normal file
67
cmdb-ui/src/store/global/routes.js
Normal file
@@ -0,0 +1,67 @@
|
||||
import { generatorDynamicRouter, constantRouterMap } from '@/router/config'
|
||||
import user from './user'
|
||||
/**
|
||||
* 过滤账户是否拥有某一个权限，并将菜单从加载列表移除
|
||||
*
|
||||
* @param permission
|
||||
* @param route
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function hasPermission(permission, route) {
|
||||
const { detailPermissions } = user.state
|
||||
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
|
||||
const totalPer = [...route.meta.appName && detailPermissions[`${route.meta.appName}`] ? detailPermissions[`${route.meta.appName}`].map(item => item.name) : [], ...permission]
|
||||
return route.meta.permission.some(item => totalPer.includes(item))
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
function filterAsyncRouter(routerMap, roles) {
|
||||
return routerMap.filter(route => {
|
||||
const default_route = ['company_info', 'company_structure', 'company_group']
|
||||
if (default_route.includes(route.name)) {
|
||||
return true
|
||||
}
|
||||
if (hasPermission(roles.permissions, route)) {
|
||||
if (route.children && route.children.length) {
|
||||
route.children = filterAsyncRouter(route.children, roles)
|
||||
}
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
}
|
||||
|
||||
const routes = {
|
||||
state: {
|
||||
routers: constantRouterMap,
|
||||
appRoutes: []
|
||||
},
|
||||
mutations: {
|
||||
SET_ROUTERS: (state, routers) => {
|
||||
state.appRoutes = routers
|
||||
state.routers = constantRouterMap.concat(routers)
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
GenerateRoutes({ commit }, data) {
|
||||
return new Promise(resolve => {
|
||||
const { roles } = data
|
||||
generatorDynamicRouter().then(routers => {
|
||||
const accessedRouters = filterAsyncRouter(routers, roles)
|
||||
commit('SET_ROUTERS', accessedRouters)
|
||||
resolve(accessedRouters)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
export default routes
|
||||
203
cmdb-ui/src/store/global/user.js
Normal file
203
cmdb-ui/src/store/global/user.js
Normal file
@@ -0,0 +1,203 @@
|
||||
import Vue from 'vue'
|
||||
import { login, getInfo, logout } from '@/api/login'
|
||||
import { ACCESS_TOKEN } from '@/store/global/mutation-types'
|
||||
import { welcome } from '@/utils/util'
|
||||
import { getAllUsers } from '../../api/login'
|
||||
import { searchPermResourceByRoleId } from '@/modules/acl/api/permission'
|
||||
import { getEmployeeByUid, getEmployeeList } from '@/api/employee'
|
||||
import { getAllDepartmentList } from '@/api/company'
|
||||
|
||||
const user = {
|
||||
state: {
|
||||
token: '',
|
||||
name: '',
|
||||
welcome: '',
|
||||
avatar: '',
|
||||
uid: 0,
|
||||
roles: [],
|
||||
info: {},
|
||||
authed: false,
|
||||
allUsers: [],
|
||||
allEmployees: [],
|
||||
allDepartments: [],
|
||||
detailPermissions: {
|
||||
'backend': [
|
||||
{
|
||||
'name': '公司信息',
|
||||
'permissions': ['read']
|
||||
},
|
||||
{
|
||||
'name': '公司架构',
|
||||
'permissions': ['read']
|
||||
},
|
||||
{
|
||||
'name': '用户分组',
|
||||
'permissions': ['read']
|
||||
}
|
||||
]
|
||||
},
|
||||
username: '',
|
||||
mobile: '',
|
||||
department_id: undefined,
|
||||
employee_id: undefined,
|
||||
email: '',
|
||||
nickname: '',
|
||||
sex: '',
|
||||
position_name: '',
|
||||
direct_supervisor_id: null
|
||||
},
|
||||
|
||||
mutations: {
|
||||
SET_TOKEN: (state, token) => {
|
||||
state.token = token
|
||||
},
|
||||
|
||||
SET_USER_INFO: (state, { name, welcome, avatar, roles, info, uid, username, mobile, department_id, employee_id, email, nickname, sex, position_name, direct_supervisor_id, annual_leave }) => {
|
||||
state.name = name
|
||||
state.welcome = welcome
|
||||
state.avatar = avatar
|
||||
state.roles = roles
|
||||
state.info = info
|
||||
state.uid = uid
|
||||
state.authed = true
|
||||
state.username = username
|
||||
state.mobile = mobile
|
||||
state.department_id = department_id
|
||||
state.employee_id = employee_id
|
||||
state.email = email
|
||||
state.nickname = nickname
|
||||
state.sex = sex
|
||||
state.position_name = position_name
|
||||
state.direct_supervisor_id = direct_supervisor_id
|
||||
state.annual_leave = annual_leave
|
||||
},
|
||||
|
||||
LOAD_ALL_USERS: (state, users) => {
|
||||
state.allUsers = users
|
||||
},
|
||||
LOAD_ALL_EMPLOYEES: (state, allEmployees) => {
|
||||
state.allEmployees = allEmployees
|
||||
},
|
||||
LOAD_ALL_DEPARMTMENTS: (state, allDepartments) => {
|
||||
state.allDepartments = allDepartments
|
||||
},
|
||||
SET_DETAIL_PERMISSIONS: (state, data) => {
|
||||
state.detailPermissions = data.backend.length ? {
|
||||
...state.detailPermissions,
|
||||
...data
|
||||
} : state.detailPermissions
|
||||
},
|
||||
},
|
||||
|
||||
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 })
|
||||
searchPermResourceByRoleId(result.rid, {
|
||||
resource_type_id: '操作权限',
|
||||
app_id: 'backend',
|
||||
}).then(res => {
|
||||
commit('SET_DETAIL_PERMISSIONS', { backend: res.resources })
|
||||
resolve(response)
|
||||
})
|
||||
getEmployeeByUid(result.uid).then(res => {
|
||||
commit('SET_USER_INFO', {
|
||||
roles: result.role,
|
||||
info: result,
|
||||
name: result.name,
|
||||
welcome: welcome(),
|
||||
avatar: result.avatar,
|
||||
uid: result.uid,
|
||||
username: result.username,
|
||||
mobile: res.mobile,
|
||||
department_id: res.department_id,
|
||||
employee_id: res.employee_id,
|
||||
email: res.email,
|
||||
nickname: res.nickname,
|
||||
sex: res.sex,
|
||||
position_name: res.position_name,
|
||||
direct_supervisor_id: res.direct_supervisor_id,
|
||||
annual_leave: res.annual_leave
|
||||
})
|
||||
})
|
||||
}).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()
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
loadAllUsers({ commit, state }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getAllUsers({ page_size: 9999 }).then(res => {
|
||||
commit('LOAD_ALL_USERS', res.users)
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
loadAllEmployees({ commit, state }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getEmployeeList({ page_size: 99999 }).then(res => {
|
||||
commit('LOAD_ALL_EMPLOYEES', res.data_list)
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
loadAllDepartments({ commit, state }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getAllDepartmentList({ is_tree: 0 }).then(res => {
|
||||
commit('LOAD_ALL_DEPARMTMENTS', res)
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default user
|
||||
Reference in New Issue
Block a user