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 } 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 _checkedKeys = 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: 10
|
})
|
}
|
}
|
|
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: []
|
}
|
})
|
}, () => {
|
this.getAllMenuList()
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 10
|
})
|
}
|
}
|
|
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 _mainMenuKeys = mainMenus.map(menu => menu.key)
|
|
_checkedKeys = []
|
let _checkMainKeys = [] // 选中的一级菜单，需判断是否含有子菜单
|
let _initCheckKeys = [] // 初始选中的菜单id
|
result.data.forEach(item => {
|
if (item.Selected !== 'true') return
|
|
if (!_mainMenuKeys.includes(item.MenuID)) {
|
_checkedKeys.push(item.MenuID)
|
} else {
|
_checkMainKeys.push(item.MenuID)
|
}
|
_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)
|
}
|
|
_tree.forEach(item => {
|
if (_checkMainKeys.includes(item.key) && !item.children) {
|
_checkedKeys.push(item.key)
|
}
|
})
|
|
_state.menuTrees = _tree
|
_state.initCheckKeys = _initCheckKeys
|
_state.checkedKeys = _checkedKeys
|
_state.menuOpenKeys = _openKeys
|
} else {
|
_tree = this.getTree(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: 10
|
})
|
}
|
}
|
|
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, index) => {
|
if (option.ParentID === parent.key) {
|
parent.children.push({
|
title: option.MenuName,
|
key: option.MenuID,
|
selected: option.Selected === 'true'
|
})
|
}
|
})
|
|
|
if (parent.children.length === 0) {
|
parent.children = null
|
} else {
|
if (_checkedKeys && parent.selected) {
|
_checkedKeys = _checkedKeys.filter(key => key !== parent.key)
|
}
|
parent.children = this.getTree(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) => {
|
console.log(checkedKeys)
|
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 {
|
_keys = checkedKeys.concat(halfCheckedKeys)
|
}
|
|
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)
|
}
|
|
this.setState({
|
submitloading: true
|
})
|
|
let result = await Api.getSystemConfig(param)
|
|
if (result.status) {
|
notification.success({
|
top: 92,
|
message: '保存成功',
|
duration: 2
|
})
|
this.setState({
|
submitloading: false,
|
selectMenuTrees: null,
|
selectMenuOpenKeys: []
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 10
|
})
|
this.setState({
|
submitloading: false
|
})
|
}
|
}
|
|
UNSAFE_componentWillMount () {
|
this.getRoleList()
|
this.getMainMenuList()
|
}
|
|
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 ? <p className="nodata">未查询到菜单列表</p> : 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 ? <p className="nodata">未查询到已授权菜单</p> : null}
|
{!loading && !selectMenuTrees ? <Spin className="load-tree" /> : null}
|
</TabPane>
|
</Tabs>
|
</Col>
|
</Row>
|
</div>
|
)
|
}
|
}
|
