import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Card, Col, Row, Menu, notification, Spin, Input, Tabs, Button, Tree, Empty, Select } from 'antd'
|
import { BankOutlined } from '@ant-design/icons'
|
import md5 from 'md5'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import MKEmitter from '@/utils/events.js'
|
import './index.scss'
|
|
const { Search } = Input
|
const { TabPane } = Tabs
|
const { TreeNode, DirectoryTree } = Tree
|
|
let linkMap = new Map()
|
let selectMap = null
|
|
export default class RoleManage extends Component {
|
static propTpyes = {
|
MenuID: PropTypes.string // 菜单Id
|
}
|
|
state = {
|
loading: true,
|
loadingTree: false,
|
loadingAppTree: false,
|
roleList: null,
|
filterRoleList: [],
|
selectRoleId: '',
|
mainMenus: null,
|
menuTrees: null,
|
checkedKeys: [],
|
menuOpenKeys: [],
|
selectMenuTrees: null,
|
selectMenuOpenKeys: [],
|
primarykey: '',
|
submitloading: false,
|
initCheckKeys: null,
|
activeKey: 'manage',
|
appTrees: null,
|
appCheckedKeys: [],
|
appOpenKeys: [],
|
applist: [],
|
selectApp: null,
|
selectSubApp: null,
|
selectAppTrees: null,
|
selectAppOpenKeys: [],
|
}
|
|
/**
|
* @description 获取角色列表
|
*/
|
getRoleList = async () => {
|
let param = {
|
func: 's_rolemenu_get_list'
|
}
|
let result = await Api.getSystemConfig(param)
|
|
if (result.status) {
|
this.setState({
|
roleList: result.data,
|
filterRoleList: result.data || []
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
}
|
|
getAppList = () => {
|
let param = {
|
func: 's_get_kei'
|
}
|
|
Api.getSystemConfig(param).then(result => {
|
if (result.status) {
|
let applist = result.data.map(item => {
|
item.sublist = item.data_detail || []
|
item.sublist = item.sublist.map(cell => {
|
cell.ID = cell.d_id
|
return cell
|
})
|
|
return item
|
})
|
let selectApp = applist[0] || null
|
|
this.setState({ applist, selectApp })
|
} else {
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
/**
|
* @description 获取一级菜单，用于构建结构树
|
*/
|
getMainMenuList = async () => {
|
let param = {
|
func: 's_rolemenu_get_FstMenu',
|
version: 1
|
}
|
let result = await Api.getSystemConfig(param)
|
|
if (result.status) {
|
this.setState({
|
loadingTree: true,
|
loading: false,
|
mainMenus: result.data.map(item => {
|
return {
|
title: item.langname ? item.MenuName + '(' + item.langname + ')' : item.MenuName,
|
key: item.MenuID,
|
children: [],
|
selected: true
|
}
|
})
|
}, () => {
|
this.getAllMenuList()
|
})
|
} else {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
}
|
|
/**
|
* @description 获取所有菜单节点，形成权限树
|
*/
|
getAllMenuList = async () => {
|
const { selectRoleId, mainMenus } = this.state
|
|
let param = {
|
func: 's_rolemenu_get_FunMenu',
|
RoleID: selectRoleId,
|
SelectedType: '',
|
version: 1
|
}
|
|
let result = await Api.getSystemConfig(param)
|
|
if (result.status) {
|
let _openKeys = []
|
// MenuID（菜单Id）、MenuName（菜单名称）、OnlySelf（值为true，表示三级菜单，增加-仅页面）、Type（菜单级别）
|
// ParentID（父级Id）、Selected（是否选中-已失效）、Tabs（ 标签类型）、TypeCharOne 菜单类型PC或其他
|
// result.data.forEach(item => { // 测试
|
// if (item.ParentID === '0') {
|
// item.ParentID = item.TypeCharOne
|
// }
|
// })
|
// let map = new Map() // 去重
|
|
// result.data = result.data.filter(item => {
|
// if (map.has(item.ParentID + item.MenuID)) return false
|
|
// map.set(item.ParentID + item.MenuID, true)
|
|
// return true
|
// })
|
|
let _tree = this.getTree(fromJS(mainMenus).toJS(), result.data)
|
if (_tree[0]) {
|
if (_tree[0].key.indexOf('PC') > -1 && _tree[0].children) {
|
// _openKeys = _tree[0].children.map(cell => cell.key)
|
this.getOpenNode(_tree[0].children[0], _openKeys)
|
} else {
|
this.getOpenNode(_tree[0], _openKeys)
|
}
|
}
|
|
this.setState({
|
loadingTree: false,
|
menuTrees: _tree,
|
menuOpenKeys: _openKeys
|
})
|
} else {
|
this.setState({
|
loadingTree: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
}
|
|
/**
|
* @description 选择角色且存在权限树时，获取已分配结构
|
*/
|
getSelectMenuList = async () => {
|
const { selectRoleId, menuTrees, activeKey } = this.state
|
if (!menuTrees || !selectRoleId || activeKey !== 'manage') return
|
|
let param = {
|
func: 's_rolemenu_get_Menulist',
|
RoleID: selectRoleId,
|
version: 1
|
}
|
|
this.setState({
|
loadingTree: true
|
})
|
|
let result = await Api.getSystemConfig(param)
|
|
if (result.status) {
|
let _openKeys = []
|
|
let _initKeys = result.data.map(item => item.MenuID)
|
_initKeys = Array.from(new Set(_initKeys))
|
|
selectMap = new Map()
|
this.getCheckedKeys(fromJS(menuTrees).toJS(), _initKeys)
|
|
if (menuTrees[0]) {
|
if (menuTrees[0].key.indexOf('PC') > -1 && menuTrees[0].children) {
|
this.getOpenNode(menuTrees[0].children[0], _openKeys)
|
} else {
|
this.getOpenNode(menuTrees[0], _openKeys)
|
}
|
}
|
|
let _openkeys = []
|
let Keys = result.data.map(item => item.MenuID)
|
let _tree = this.getSelectTree(fromJS(menuTrees).toJS(), Keys)
|
|
if (_tree[0]) {
|
if (_tree[0].key.indexOf('PC') > -1 && _tree[0].children) {
|
this.getOpenNode(_tree[0].children[0], _openkeys)
|
} else {
|
this.getOpenNode(_tree[0], _openkeys)
|
}
|
}
|
|
this.setState({
|
loadingTree: false,
|
initCheckKeys: _initKeys,
|
checkedKeys: Array.from(selectMap.keys()),
|
menuOpenKeys: _openKeys,
|
selectMenuTrees: _tree,
|
selectMenuOpenKeys: _openkeys
|
})
|
} else {
|
this.setState({
|
loadingTree: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
}
|
|
/**
|
* @description 选择角色且存在权限树时，获取已分配结构
|
*/
|
getSelectAppNodeList = async () => {
|
const { selectRoleId, selectSubApp, selectApp, appTrees, activeKey } = this.state
|
|
if (!appTrees || !selectRoleId || activeKey !== 'app' || !selectSubApp || !selectApp) return
|
|
let param = {
|
func: 's_rolemenu_get_Menulist',
|
RoleID: selectRoleId,
|
TypeCharOne: selectApp.kei_no,
|
typename: selectSubApp.typename,
|
lang: selectSubApp.lang,
|
version: 1
|
}
|
|
this.setState({
|
loadingAppTree: true
|
})
|
|
let result = await Api.getSystemConfig(param)
|
|
if (result.status) {
|
let _initKeys = result.data.map(item => item.MenuID)
|
_initKeys = Array.from(new Set(_initKeys))
|
let _checkedKeys = []
|
|
let getCheckedKeys = (parents) => {
|
parents.forEach(item => {
|
if (_initKeys.includes(item.key)) {
|
if (item.children && item.children.length > 0) {
|
getCheckedKeys(item.children)
|
} else {
|
_checkedKeys.push(item.key)
|
}
|
}
|
})
|
}
|
|
getCheckedKeys(appTrees)
|
|
let _openKeys = []
|
let getOpenNode = (parentNode) => {
|
if (parentNode && parentNode.children && parentNode.children.length > 0) {
|
_openKeys.push(parentNode.key)
|
parentNode.children.forEach(node => {
|
getOpenNode(node)
|
})
|
}
|
}
|
getOpenNode(appTrees[0])
|
|
let Keys = result.data.map(item => item.MenuID)
|
let _tree = this.getSelectTree(fromJS(appTrees).toJS(), Keys)
|
|
|
let _openkeys = []
|
let _getOpenNode = (parentNode) => {
|
if (parentNode && parentNode.children && parentNode.children.length > 0) {
|
_openkeys.push(parentNode.key)
|
parentNode.children.forEach(node => {
|
_getOpenNode(node)
|
})
|
}
|
}
|
_getOpenNode(_tree[0])
|
|
this.setState({
|
loadingAppTree: false,
|
appInitCheckKeys: _initKeys,
|
appCheckedKeys: _checkedKeys,
|
appOpenKeys: _openKeys,
|
selectAppTrees: _tree,
|
selectAppOpenKeys: _openkeys
|
})
|
} else {
|
this.setState({
|
loadingAppTree: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
}
|
|
/**
|
* @description 获取展开节点
|
*/
|
getOpenNode = (parentNode, keys) => {
|
if (parentNode.children) {
|
keys.push(parentNode.key)
|
parentNode.children.forEach(node => {
|
this.getOpenNode(node, keys)
|
})
|
}
|
}
|
|
/**
|
* @description 获取权限分配树
|
*/
|
getTree = (parents, options, addSelf) => {
|
parents.forEach(parent => {
|
parent.children = []
|
|
// 添加菜单的子元素
|
options.forEach(option => {
|
if (option.ParentID === parent.key) {
|
parent.children.push({
|
title: option.MenuName,
|
key: option.MenuID,
|
addSelf: option.OnlySelf === 'true',
|
// tabs: option.Tabs
|
})
|
}
|
})
|
|
if (parent.children.length === 0) {
|
parent.children = null
|
// 针对标签，生成新的id，并保存关联关系（标签不唯一）
|
// if (parent.tabs) {
|
// let _uuid = Utils.getuuid()
|
// linkMap.set(_uuid, parent.key)
|
|
// parent.originKey = parent.key
|
// parent.key = _uuid
|
// }
|
} else {
|
// 三级菜单创建子项
|
if (parent.addSelf) {
|
let _uuid = Utils.getuuid()
|
linkMap.set(_uuid, parent.key)
|
parent.subKey = _uuid
|
|
parent.children.unshift({
|
title: parent.title + '(仅页面)',
|
key: _uuid,
|
// isSubView: true
|
})
|
} else if (addSelf) {
|
let _uuid = Utils.getuuid()
|
linkMap.set(_uuid, parent.key)
|
parent.subKey = _uuid
|
|
parent.children.unshift({
|
title: parent.title + '(表格)',
|
key: _uuid,
|
})
|
}
|
|
// 针对标签，生成新的id，并保存关联关系（标签不唯一）
|
// if (parent.tabs) {
|
// let _uuid = Utils.getuuid()
|
// linkMap.set(_uuid, parent.key)
|
|
// parent.originKey = parent.key
|
// parent.key = _uuid
|
// }
|
|
parent.children = this.getTree(parent.children, options, parent.addSelf)
|
}
|
})
|
return parents
|
}
|
|
/**
|
* @description 获取已选择的节点
|
*/
|
getCheckedKeys = (parents, initKeys) => {
|
parents.forEach(parent => {
|
if ((parent.originKey && initKeys.indexOf(parent.originKey) > -1) || initKeys.indexOf(parent.key) > -1) {
|
if (parent.children) {
|
if (parent.subKey) {
|
selectMap.set(parent.subKey, true)
|
}
|
this.getCheckedKeys(parent.children, initKeys)
|
} else {
|
selectMap.set(parent.key, true)
|
}
|
}
|
})
|
}
|
|
/**
|
* @description 生成已分配权限的结构树
|
*/
|
getSelectTree = (parents, options) => {
|
return parents.filter(parent => {
|
if ((parent.originKey && options.indexOf(parent.originKey) > -1) || options.indexOf(parent.key) > -1) {
|
if (parent.children) {
|
parent.children = this.getSelectTree(parent.children, options)
|
if (parent.children.length === 0) {
|
parent.children = null
|
}
|
}
|
return true
|
// } else if (parent.isSubView) {
|
// return true
|
}
|
return false
|
})
|
}
|
|
/**
|
* @description 角色切换
|
*/
|
changeRole = (role) => {
|
const { selectRoleId } = this.state
|
|
if (selectRoleId === role.RoleID) return
|
|
this.setState({
|
selectRoleId: role.RoleID
|
}, () => {
|
this.getSelectMenuList()
|
this.getSelectAppNodeList()
|
})
|
}
|
|
/**
|
* @description 获取树节点
|
*/
|
renderTreeNodes = (data) => {
|
return data.map(item => {
|
if (item.children) {
|
return (
|
<TreeNode title={item.title} key={item.key} dataRef={item}>
|
{this.renderTreeNodes(item.children)}
|
</TreeNode>
|
)
|
}
|
return <TreeNode key={item.key} showIcon={true} {...item} isLeaf />
|
})
|
}
|
|
/**
|
* @description 节点选择事件
|
*/
|
onCheck = (checkedKeys, info) => {
|
this.setState({
|
checkedKeys: checkedKeys,
|
halfCheckedKeys: info.halfCheckedKeys,
|
initCheckKeys: null
|
})
|
}
|
|
/**
|
* @description 节点选择事件
|
*/
|
onAppCheck = (checkedKeys, info) => {
|
this.setState({
|
appCheckedKeys: checkedKeys,
|
appHalfCheckedKeys: info.halfCheckedKeys,
|
appInitCheckKeys: null
|
})
|
}
|
|
/**
|
* @description 提交已选的权限
|
*/
|
roleSubmit = () => {
|
const { checkedKeys, halfCheckedKeys, selectRoleId, initCheckKeys } = this.state
|
|
let _keys = []
|
|
if (initCheckKeys) {
|
_keys = initCheckKeys
|
} else {
|
let _cKeys = checkedKeys.concat(halfCheckedKeys)
|
_cKeys.forEach(key => {
|
if (linkMap.has(key)) {
|
_keys.push(linkMap.get(key))
|
} else {
|
_keys.push(key)
|
}
|
})
|
|
_keys = Array.from(new Set(_keys))
|
}
|
|
let param = {
|
func: 's_rolemenu_sub',
|
RoleID: selectRoleId,
|
RoleMenu: _keys.map(key => {
|
return {MenuID: key}
|
})
|
}
|
|
let localParam = fromJS(param).toJS()
|
localParam.func = 's_rolemenu_sub_local'
|
|
this.setState({
|
submitloading: true
|
})
|
|
Api.getSystemConfig(param).then(result => {
|
if (result.status) {
|
notification.success({
|
top: 92,
|
message: '保存成功',
|
duration: 2
|
})
|
this.setState({
|
submitloading: false
|
}, () => {
|
this.getSelectMenuList()
|
this.clearBackSqlCache()
|
})
|
if (window.GLOB.mainSystemApi) {
|
Api.genericInterface(localParam).then(res => {
|
if (!res.status) {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
} else {
|
this.setState({
|
submitloading: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
clearBackSqlCache = () => {
|
if (!window.backend) return
|
|
Api.cacheInterface({}).then(res => {
|
if (!res.status) {
|
notification.warning({
|
top: 92,
|
message: res.message || '缓存清空失败！',
|
duration: 5
|
})
|
}
|
})
|
}
|
|
/**
|
* @description 提交已选的权限
|
*/
|
appRoleSubmit = () => {
|
const { selectApp, selectSubApp, appCheckedKeys, appHalfCheckedKeys, selectRoleId, appInitCheckKeys } = this.state
|
|
let _keys = []
|
|
if (appInitCheckKeys) {
|
_keys = appInitCheckKeys
|
} else {
|
_keys = appCheckedKeys.concat(appHalfCheckedKeys)
|
}
|
|
let param = {
|
func: 's_rolemenu_sub',
|
RoleID: selectRoleId,
|
TypeCharOne: selectApp.kei_no,
|
typename: selectSubApp.typename,
|
lang: selectSubApp.lang,
|
RoleMenu: _keys.map(key => {
|
return {MenuID: key}
|
})
|
}
|
|
let localParam = fromJS(param).toJS()
|
localParam.func = 's_rolemenu_sub_local'
|
|
this.setState({
|
submitloading: true
|
})
|
|
Api.getSystemConfig(param).then(result => {
|
if (result.status) {
|
notification.success({
|
top: 92,
|
message: '保存成功',
|
duration: 2
|
})
|
this.setState({
|
submitloading: false
|
}, () => {
|
this.getSelectAppNodeList()
|
})
|
|
if (window.GLOB.mainSystemApi) {
|
Api.genericInterface(localParam).then(res => {
|
if (!res.status) {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
} else {
|
this.setState({
|
submitloading: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
reloadMenuView = (menuId) => {
|
const { MenuID } = this.props
|
|
if (MenuID !== menuId) return
|
|
this.setState({
|
loading: true,
|
loadingTree: false,
|
roleList: null,
|
filterRoleList: [],
|
selectRoleId: '',
|
mainMenus: null,
|
menuTrees: null,
|
checkedKeys: [],
|
appCheckedKeys: [],
|
menuOpenKeys: [],
|
selectMenuTrees: null,
|
selectMenuOpenKeys: [],
|
primarykey: '',
|
submitloading: false,
|
initCheckKeys: null,
|
appInitCheckKeys: null,
|
activeKey: 'manage',
|
appTrees: null,
|
appOpenKeys: [],
|
applist: [],
|
selectApp: null,
|
selectSubApp: null,
|
selectAppTrees: null,
|
selectAppOpenKeys: []
|
})
|
this.getRoleList()
|
this.getMainMenuList()
|
this.getAppList()
|
}
|
|
filterRole = () => {
|
const { primarykey, roleList } = this.state
|
|
let _roleList = []
|
|
if (roleList && roleList.length > 0) {
|
_roleList = roleList.filter(role => role.RoleName.toLowerCase().indexOf(primarykey.toLowerCase()) >= 0)
|
}
|
|
this.setState({filterRoleList: _roleList})
|
}
|
|
getTreeList = () => {
|
const { selectApp, selectSubApp } = this.state
|
let param = {
|
func: 's_get_menus_roles_tree',
|
typecharone: selectApp.kei_no,
|
lang: selectSubApp.lang
|
}
|
|
param.upid = md5(window.GLOB.appkey + selectApp.kei_no + selectSubApp.typename + selectSubApp.lang)
|
|
this.setState({loadingAppTree: true})
|
|
Api.getSystemConfig(param).then(result => {
|
if (result.status) {
|
if (!result.data || result.data.length === 0) {
|
this.setState({loadingAppTree: false, appTrees: [], appInitCheckKeys: null, appCheckedKeys: [], appOpenKeys: [], selectAppTrees: [], selectAppOpenKeys: []})
|
} else {
|
this.initTrees(result.data)
|
}
|
} else {
|
this.setState({loadingAppTree: false, appTrees: [], appInitCheckKeys: null, appCheckedKeys: [], appOpenKeys: [], selectAppTrees: [], selectAppOpenKeys: []})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
initTrees = (data) => {
|
let trees = []
|
let map = new Map()
|
let _data = data.sort((a, b) => {
|
return a.sort - b.sort
|
})
|
|
_data.forEach(menu => {
|
if (menu.ParentID === 'top') {
|
trees.push({
|
key: menu.MenuID,
|
title: menu.MenuName,
|
children: []
|
})
|
} else {
|
map.set(menu.MenuID, menu)
|
}
|
})
|
|
let reset = (m) => {
|
return m.map(n => {
|
[...map.keys()].forEach(key => {
|
if (map.get(key).ParentID === n.key) {
|
let c = map.get(key)
|
n.children.push({
|
key: c.MenuID,
|
title: c.MenuName,
|
children: []
|
})
|
map.delete(key)
|
}
|
})
|
if (n.children.length > 0) {
|
n.children = reset(n.children)
|
}
|
return n
|
})
|
}
|
|
trees = reset(trees)
|
|
let expandedKeys = this.getExpandedKeys(trees, 0, [])
|
|
this.setState({loadingAppTree: false, appInitCheckKeys: null, appCheckedKeys: [], selectAppTrees: [], selectAppOpenKeys: [], appTrees: trees, appOpenKeys: expandedKeys}, () => {
|
this.getSelectAppNodeList()
|
})
|
}
|
|
getExpandedKeys = (trees, i, keys) => {
|
if (i >= 3 || !trees[0]) return keys
|
|
keys.push(trees[0].key)
|
|
i++
|
|
if (trees[0].children && trees[0].children.length > 0) {
|
keys = this.getExpandedKeys(trees[0].children, i, keys)
|
}
|
|
return keys
|
}
|
|
changeType = (val) => {
|
this.setState({
|
activeKey: val
|
}, () => {
|
this.getSelectMenuList()
|
this.getSelectAppNodeList()
|
})
|
}
|
|
changeApp = (val) => {
|
const { applist } = this.state
|
|
let app = applist.filter(item => item.ID === val)[0]
|
|
this.setState({selectApp: app, selectSubApp: null})
|
}
|
|
changeSubApp = (val) => {
|
const { selectApp } = this.state
|
|
let subapp = selectApp.sublist.filter(item => item.ID === val)[0]
|
|
this.setState({selectSubApp: subapp}, () => {
|
this.getTreeList()
|
})
|
}
|
|
UNSAFE_componentWillMount () {
|
this.getRoleList()
|
this.getMainMenuList()
|
this.getAppList()
|
}
|
|
componentDidMount () {
|
MKEmitter.addListener('reloadMenuView', this.reloadMenuView)
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('reloadMenuView', this.reloadMenuView)
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
render() {
|
const { activeKey, filterRoleList, applist, selectApp, selectSubApp, loading, loadingTree, loadingAppTree, primarykey, menuTrees, appTrees, checkedKeys, appCheckedKeys, menuOpenKeys, selectMenuTrees, selectAppTrees, selectRoleId, selectMenuOpenKeys, selectAppOpenKeys, submitloading, appOpenKeys } = this.state
|
|
return (
|
<div className={'rolemanage' + (applist.length === 0 ? ' manager' : '')}>
|
{loading && <Spin size="large" />}
|
<Tabs activeKey={activeKey} type="card" onChange={this.changeType}>
|
<TabPane tab="管理系统" key="manage">
|
<Row gutter={16}>
|
<Col span={5}>
|
<Card
|
className="role-list"
|
title={
|
<span className="role-title">
|
<BankOutlined />
|
<span className="title">角色</span>
|
<Search placeholder="" value={primarykey} onChange={e => this.setState({primarykey: e.target.value})} onSearch={this.filterRole} />
|
</span>
|
}
|
bordered={false}
|
>
|
<Menu selectedKeys={[selectRoleId]} mode="inline">
|
{filterRoleList.map((role) =>
|
<Menu.Item key={role.RoleID} onClick={() => this.changeRole(role)}>{role.RoleName}</Menu.Item>
|
)}
|
</Menu>
|
</Card>
|
</Col>
|
<Col span={19}>
|
<Tabs defaultActiveKey="all">
|
<TabPane tab="权限" key="all">
|
{selectRoleId ? <Button className="submitBtn" type="primary" loading={submitloading} onClick={this.roleSubmit}>提交</Button> : null}
|
{!loadingTree && menuTrees && menuTrees.length > 0 ? <Tree
|
checkable
|
selectable={false}
|
defaultExpandedKeys={menuOpenKeys}
|
autoExpandParent={true}
|
onCheck={this.onCheck}
|
checkedKeys={checkedKeys}
|
>
|
{this.renderTreeNodes(menuTrees)}
|
</Tree> : null}
|
{!loadingTree && (!menuTrees || menuTrees.length === 0) ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : null}
|
{loadingTree ? <Spin className="load-tree" /> : null}
|
</TabPane>
|
<TabPane tab="已授权" key="selected">
|
{!loadingTree && selectMenuTrees && selectMenuTrees.length > 0 ? <DirectoryTree multiple defaultExpandedKeys={selectMenuOpenKeys}>
|
{this.renderTreeNodes(selectMenuTrees)}
|
</DirectoryTree> : null}
|
{!loadingTree && (!selectMenuTrees || selectMenuTrees.length === 0) ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : null}
|
{loadingTree ? <Spin className="load-tree" /> : null}
|
</TabPane>
|
</Tabs>
|
</Col>
|
</Row>
|
</TabPane>
|
<TabPane tab="应用" key="app">
|
<div className="app-select">
|
<div className="mk-form-item">
|
<label>应用:</label>
|
<Select value={selectApp ? selectApp.ID : ''} onChange={this.changeApp}>
|
{applist.map(option =>
|
<Select.Option key={option.ID} value={option.ID}>{option.remark}</Select.Option>
|
)}
|
</Select>
|
</div>
|
<div className="mk-form-item">
|
<label>子应用:</label>
|
<Select value={selectSubApp ? selectSubApp.ID : ''} onChange={this.changeSubApp}>
|
{selectApp && selectApp.sublist.map(option =>
|
<Select.Option key={option.ID} value={option.ID}>{`${option.typename}（${option.lang}）`}</Select.Option>
|
)}
|
</Select>
|
</div>
|
</div>
|
<Row gutter={16}>
|
<Col span={5}>
|
<Card
|
className="role-list"
|
title={
|
<span className="role-title">
|
<BankOutlined />
|
<span className="title">角色</span>
|
<Search placeholder="" value={primarykey} onChange={e => this.setState({primarykey: e.target.value})} onSearch={this.filterRole} />
|
</span>
|
}
|
bordered={false}
|
>
|
<Menu selectedKeys={[selectRoleId]} mode="inline">
|
{filterRoleList.map((role) =>
|
<Menu.Item key={role.RoleID} onClick={() => this.changeRole(role)}>{role.RoleName}</Menu.Item>
|
)}
|
</Menu>
|
</Card>
|
</Col>
|
<Col span={19}>
|
<Tabs defaultActiveKey="all">
|
<TabPane tab="权限" key="all">
|
{selectSubApp && selectRoleId ? <Button className="submitBtn" type="primary" loading={submitloading} onClick={this.appRoleSubmit}>提交</Button> : null}
|
{selectSubApp ? <div>
|
{!loadingAppTree && appTrees && appTrees.length > 0 ? <Tree
|
checkable
|
selectable={false}
|
defaultExpandedKeys={appOpenKeys}
|
autoExpandParent={true}
|
onCheck={this.onAppCheck}
|
checkedKeys={appCheckedKeys}
|
>
|
{this.renderTreeNodes(appTrees)}
|
</Tree> : null}
|
{!loadingAppTree && (!appTrees || appTrees.length === 0) ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : null}
|
{loadingAppTree ? <Spin className="load-tree" /> : null}
|
</div> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={'请选择子应用'} />}
|
</TabPane>
|
<TabPane tab="已授权" key="selected">
|
{selectSubApp ? <div>
|
{!loadingAppTree && selectAppTrees && selectAppTrees.length > 0 ? <DirectoryTree multiple defaultExpandedKeys={selectAppOpenKeys}>
|
{this.renderTreeNodes(selectAppTrees)}
|
</DirectoryTree> : null}
|
{!loadingAppTree && (!selectAppTrees || selectAppTrees.length === 0) ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : null}
|
{loadingAppTree ? <Spin className="load-tree" /> : null}
|
</div> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={'请选择子应用'} />}
|
</TabPane>
|
</Tabs>
|
</Col>
|
</Row>
|
</TabPane>
|
</Tabs>
|
</div>
|
)
|
}
|
}
|
