From 1dfd49b103e721f9bb63fd4d472b6fcc225d94a1 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 12 三月 2020 18:42:20 +0800
Subject: [PATCH] 2020-03-12
---
src/tabviews/rolemanage/index.jsx | 288 ++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 271 insertions(+), 17 deletions(-)
diff --git a/src/tabviews/rolemanage/index.jsx b/src/tabviews/rolemanage/index.jsx
index 91b720c..d34b705 100644
--- a/src/tabviews/rolemanage/index.jsx
+++ b/src/tabviews/rolemanage/index.jsx
@@ -1,14 +1,18 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Card, Col, Row, Icon, Menu, notification, Spin, Input } from 'antd'
+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 = {
@@ -18,9 +22,19 @@
state = {
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
- loadingview: true,
+ loading: true,
roleList: null,
- primarykey: ''
+ selectRoleId: '',
+ mainMenus: null,
+ menuTrees: null,
+ checkedKeys: [],
+ menuOpenKeys: [],
+ selectMenuTrees: null,
+ selectMenuOpenKeys: [],
+ primarykey: '',
+ tabKey: '',
+ submitloading: false,
+ initCheckKeys: null
}
getRoleList = async () => {
@@ -31,11 +45,12 @@
if (result.status) {
this.setState({
- roleList: result.data
+ roleList: result.data,
+ loading: false
})
} else {
this.setState({
- loadingview: false
+ loading: false
})
notification.warning({
top: 92,
@@ -45,17 +60,103 @@
}
}
- getMenuList = async () => {
+ 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 = [] // 鍒濆閫変腑鐨勮彍鍗昳d
+ 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({
- loadingview: false
+ loading: false
})
notification.warning({
top: 92,
@@ -65,13 +166,146 @@
}
}
- changeRole = () => {
+ 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.getMenuList()
+ this.getMainMenuList()
}
shouldComponentUpdate (nextProps, nextState) {
@@ -79,7 +313,7 @@
}
render() {
- const { roleList, loadingview, primarykey } = this.state
+ const { roleList, loading, primarykey, menuTrees, checkedKeys, menuOpenKeys, selectMenuTrees, tabKey, selectRoleId, selectMenuOpenKeys, submitloading } = this.state
let _roleList = []
@@ -89,9 +323,9 @@
return (
<div className="rolemanage">
- {loadingview && <Spin size="large" />}
+ {loading && <Spin size="large" />}
<Row gutter={16}>
- <Col span={6}>
+ <Col span={5}>
<Card
className="role-list"
title={
@@ -113,10 +347,30 @@
</Menu>
</Card>
</Col>
- <Col span={18}>
- <Card title="Card title" bordered={false}>
- Card content
- </Card>
+ <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>
--
Gitblit v1.8.0