import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Card, Col, Row, Icon, Menu, notification, Spin, Input, Tabs, Button, Tree, Empty } from 'antd'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import zhCN from '@/locales/zh-CN/role.js'
|
import enUS from '@/locales/en-US/role.js'
|
import './index.scss'
|
|
const { Search } = Input
|
const { TabPane } = Tabs
|
const { TreeNode, DirectoryTree } = Tree
|
let checkedKeysMap = null
|
let linkMap = null
|
let selectMap = null
|
|
export default class RoleManage extends Component {
|
static propTpyes = {
|
MenuNo: PropTypes.string, // 菜单参数
|
MenuID: PropTypes.string // 菜单Id
|
}
|
|
state = {
|
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
loading: true,
|
roleList: null,
|
selectRoleId: '',
|
mainMenus: null,
|
menuTrees: null,
|
checkedKeys: [],
|
menuOpenKeys: [],
|
selectMenuTrees: null,
|
selectMenuOpenKeys: [],
|
primarykey: '',
|
tabKey: '',
|
submitloading: false,
|
initCheckKeys: null
|
}
|
|
getRoleList = async () => {
|
let param = {
|
func: 's_rolemenu_get_list'
|
}
|
let result = await Api.getSystemConfig(param)
|
|
if (result.status) {
|
this.setState({
|
roleList: result.data,
|
loading: false
|
})
|
} else {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
}
|
|
getMainMenuList = async () => {
|
let param = {
|
func: 's_rolemenu_get_FstMenu'
|
}
|
let result = await Api.getSystemConfig(param)
|
|
if (result.status) {
|
this.setState({
|
mainMenus: result.data.map(item => {
|
return {
|
title: item.MenuName,
|
key: item.MenuID,
|
children: [],
|
selected: true
|
}
|
})
|
}, () => {
|
this.getAllMenuList()
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
}
|
|
getAllMenuList = async () => {
|
const { selectRoleId, mainMenus, tabKey } = this.state
|
|
let param = {
|
func: 's_rolemenu_get_FunMenu',
|
RoleID: selectRoleId,
|
SelectedType: tabKey
|
}
|
|
let result = await Api.getSystemConfig(param)
|
|
if (result.status) {
|
let _tree = null
|
let _openKeys = []
|
|
let _state = {
|
loading: false
|
}
|
|
if (tabKey === '') {
|
let _initCheckKeys = [] // 初始选中的菜单id
|
checkedKeysMap = new Map()
|
linkMap = new Map()
|
selectMap = new Map()
|
|
result.data.forEach(item => {
|
if (item.Selected !== 'true') return
|
|
checkedKeysMap.set(item.MenuID, true)
|
_initCheckKeys.push(item.MenuID)
|
})
|
|
_initCheckKeys = Array.from(new Set(_initCheckKeys))
|
|
_tree = this.getTree(JSON.parse(JSON.stringify(mainMenus)), result.data)
|
|
if (_tree[0]) {
|
this.getOpenNode(_tree[0], _openKeys)
|
}
|
|
_state.menuTrees = _tree
|
_state.initCheckKeys = _initCheckKeys
|
_state.checkedKeys = Array.from(checkedKeysMap.keys())
|
_state.menuOpenKeys = _openKeys
|
} else {
|
_tree = this.getSelectTree(JSON.parse(JSON.stringify(mainMenus)), result.data)
|
_tree = _tree.filter(node => node.children)
|
|
if (_tree[0]) {
|
this.getOpenNode(_tree[0], _openKeys)
|
}
|
|
_state.selectMenuTrees = _tree
|
_state.selectMenuOpenKeys = _openKeys
|
}
|
|
this.setState(_state)
|
} else {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
}
|
|
getOpenNode = (parentNode, keys) => {
|
if (parentNode.children) {
|
keys.push(parentNode.key)
|
parentNode.children.forEach(node => {
|
this.getOpenNode(node, keys)
|
})
|
}
|
}
|
|
getTree = (parents, options) => {
|
parents.forEach(parent => {
|
parent.children = []
|
|
options.forEach(option => {
|
if (option.ParentID === parent.key) {
|
parent.children.push({
|
title: option.MenuName,
|
key: option.MenuID,
|
selected: parent.selected && option.Selected === 'true',
|
addSelf: option.OnlySelf === 'true',
|
tabs: option.Tabs
|
})
|
}
|
})
|
|
|
if (parent.children.length === 0) {
|
parent.children = null
|
if (parent.tabs) {
|
let _uuid = Utils.getuuid()
|
linkMap.set(_uuid, parent.key)
|
|
if (parent.selected) {
|
checkedKeysMap.set(_uuid, true)
|
checkedKeysMap.delete(parent.key)
|
|
selectMap.set(_uuid, parent.key)
|
}
|
|
parent.key = _uuid
|
}
|
} else {
|
if (parent.selected) {
|
checkedKeysMap.delete(parent.key)
|
}
|
if (parent.addSelf) {
|
let _uuid = Utils.getuuid()
|
linkMap.set(_uuid, parent.key)
|
|
if (parent.selected) {
|
checkedKeysMap.set(_uuid, true)
|
}
|
|
parent.children.unshift({
|
title: parent.title + '(仅页面)',
|
key: _uuid,
|
})
|
}
|
|
if (parent.tabs) {
|
let _uuid = Utils.getuuid()
|
linkMap.set(_uuid, parent.key)
|
|
if (parent.selected) {
|
selectMap.set(_uuid, parent.key)
|
}
|
|
parent.key = _uuid
|
}
|
|
parent.children = this.getTree(parent.children, options)
|
}
|
})
|
|
return parents
|
}
|
|
getSelectTree = (parents, options) => {
|
parents.forEach(parent => {
|
parent.children = []
|
|
options.forEach(option => {
|
if (option.ParentID === parent.key) {
|
parent.children.push({
|
title: option.MenuName,
|
key: option.MenuID,
|
tabs: option.Tabs
|
})
|
}
|
})
|
|
|
parent.key = Utils.getuuid()
|
if (parent.children.length === 0) {
|
parent.children = null
|
} else {
|
parent.children = this.getSelectTree(parent.children, options)
|
}
|
})
|
|
return parents
|
}
|
|
changeRole = (role) => {
|
const { selectRoleId } = this.state
|
|
if (selectRoleId === role.RoleID) return
|
|
this.setState({
|
selectRoleId: role.RoleID,
|
menuTrees: null,
|
checkedKeys: [],
|
menuOpenKeys: [],
|
selectMenuTrees: null,
|
selectMenuOpenKeys: []
|
}, () => {
|
this.getAllMenuList()
|
})
|
}
|
|
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 />
|
})
|
}
|
|
onCheck = (checkedKeys, info) => {
|
this.setState({
|
checkedKeys: checkedKeys,
|
halfCheckedKeys: info.halfCheckedKeys,
|
initCheckKeys: null
|
})
|
}
|
|
changeTab = (key) => {
|
const { menuTrees, selectMenuTrees } = this.state
|
|
this.setState({
|
tabKey: key === 'selected' ? key : ''
|
}, () => {
|
if ((key === 'selected' && !selectMenuTrees) || (key === 'all' && !menuTrees)) {
|
this.getAllMenuList()
|
}
|
})
|
}
|
|
roleSubmit = async () => {
|
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)
|
}
|
})
|
_cKeys = new Map(_cKeys.map(key => [key, true]))
|
_keys = new Map(_keys.map(key => [key, true]))
|
|
Array.from(selectMap.keys()).forEach(key => {
|
if (!_cKeys.has(key)) {
|
_keys.delete(selectMap.get(key))
|
}
|
})
|
|
_keys = Array.from(_keys.keys())
|
}
|
|
// let _LText = _keys.map(key => `select '${key}' as MenuID`)
|
// _LText = _LText.join(' union all ')
|
|
let param = {
|
func: 's_rolemenu_sub',
|
RoleID: selectRoleId,
|
// LText: Utils.formatOptions(_LText)
|
RoleMenu: _keys.map(key => {
|
return {MenuID: key}
|
})
|
}
|
|
this.setState({
|
submitloading: true
|
})
|
|
let result = await Api.getSystemConfig(param)
|
|
if (result.status) {
|
notification.success({
|
top: 92,
|
message: '保存成功',
|
duration: 2
|
})
|
this.setState({
|
submitloading: false,
|
menuTrees: null,
|
checkedKeys: [],
|
menuOpenKeys: [],
|
selectMenuTrees: null,
|
selectMenuOpenKeys: []
|
}, () => {
|
this.getAllMenuList()
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
this.setState({
|
submitloading: false
|
})
|
}
|
}
|
|
UNSAFE_componentWillMount () {
|
this.getRoleList()
|
this.getMainMenuList()
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
render() {
|
const { roleList, loading, primarykey, menuTrees, checkedKeys, menuOpenKeys, selectMenuTrees, tabKey, selectRoleId, selectMenuOpenKeys, submitloading } = this.state
|
|
let _roleList = []
|
|
if (roleList && roleList.length > 0) {
|
_roleList = roleList.filter(role => role.RoleName.toLowerCase().indexOf(primarykey.toLowerCase()) >= 0)
|
}
|
|
return (
|
<div className="rolemanage">
|
{loading && <Spin size="large" />}
|
<Row gutter={16}>
|
<Col span={5}>
|
<Card
|
className="role-list"
|
title={
|
<span className="role-title">
|
<Icon type="bank" />
|
<span className="title">{this.state.dict['role.title']}</span>
|
<Search placeholder="" onSearch={value => this.setState({primarykey: value})} />
|
</span>
|
}
|
bordered={false}
|
>
|
<Menu
|
onClick={this.handleClick}
|
mode="inline"
|
>
|
{_roleList.map((role, index) =>
|
<Menu.Item key={index} onClick={() => this.changeRole(role)}>{role.RoleName}</Menu.Item>
|
)}
|
</Menu>
|
</Card>
|
</Col>
|
<Col span={19}>
|
<Tabs defaultActiveKey="all" tabBarExtraContent={!tabKey && selectRoleId ? <Button type="primary" loading={submitloading} onClick={this.roleSubmit}>提交</Button> : null} onChange={this.changeTab}>
|
<TabPane tab="菜单列表" key="all">
|
{menuTrees && menuTrees.length > 0 ? <Tree
|
checkable
|
selectable={false}
|
defaultExpandedKeys={menuOpenKeys}
|
autoExpandParent={true}
|
onCheck={this.onCheck}
|
checkedKeys={checkedKeys}
|
>
|
{this.renderTreeNodes(menuTrees)}
|
</Tree> : null}
|
{menuTrees && menuTrees.length === 0 ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : null}
|
{!loading && !menuTrees ? <Spin className="load-tree" /> : null}
|
</TabPane>
|
<TabPane tab="已授权菜单" key="selected">
|
{selectMenuTrees && selectMenuTrees.length > 0 ? <DirectoryTree multiple defaultExpandedKeys={selectMenuOpenKeys}>
|
{this.renderTreeNodes(selectMenuTrees)}
|
</DirectoryTree> : null}
|
{selectMenuTrees && selectMenuTrees.length === 0 ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : null}
|
{!loading && !selectMenuTrees ? <Spin className="load-tree" /> : null}
|
</TabPane>
|
</Tabs>
|
</Col>
|
</Row>
|
</div>
|
)
|
}
|
}
|
