From c7414c3cc93649479119d51b230c4b8e36884ca7 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 23 七月 2021 18:18:55 +0800
Subject: [PATCH] 2021-07-23
---
src/views/rolemanage/index.jsx | 211 ++++++++++++++++++++++++----------------------------
1 files changed, 96 insertions(+), 115 deletions(-)
diff --git a/src/views/rolemanage/index.jsx b/src/views/rolemanage/index.jsx
index 0603de2..acadb50 100644
--- a/src/views/rolemanage/index.jsx
+++ b/src/views/rolemanage/index.jsx
@@ -1,6 +1,6 @@
import React, {Component} from 'react'
-// import { fromJS } from 'immutable'
-import { Spin, notification, Button, Table, Modal, ConfigProvider, Tree } from 'antd'
+import { fromJS } from 'immutable'
+import { Spin, notification, Button, Table, Modal, ConfigProvider, Tree, Input, Empty } from 'antd'
import moment from 'moment'
// import md5 from 'md5'
import enUS from 'antd/es/locale/en_US'
@@ -14,7 +14,7 @@
const { confirm } = Modal
const { TreeNode } = Tree
// const { Paragraph } = Typography
-// const { Search } = Input
+const { Search } = Input
const _locale = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
const Header = asyncComponent(() => import('./header'))
@@ -47,109 +47,14 @@
confirmLoading: false,
targetKeys: [],
trees: [],
- expandedKeys: []
+ expandedKeys: [],
+ searchkey: ''
}
UNSAFE_componentWillMount() {
let param = JSON.parse(window.decodeURIComponent(window.atob(this.props.match.params.param)))
- let expandedKeys = []
- const data = [
- {
- key: Utils.getuuid(),
- title: '瀵艰埅鏍�',
- children: [
- {
- key: Utils.getuuid(),
- title: '閲囪喘',
- children: [
- {
- key: Utils.getuuid(),
- title: '閲囪喘涓氬姟',
- children: [
- {
- key: Utils.getuuid(),
- title: '閲囪喘鍗曠鐞�'
- },
- {
- key: Utils.getuuid(),
- title: '濮斿閲囪喘'
- }
- ]
- },
- {
- key: Utils.getuuid(),
- title: '涓绘暟鎹�'
- }
- ]
- },
- {
- key: Utils.getuuid(),
- title: '搴撳瓨',
- children: [
- {
- key: Utils.getuuid(),
- title: '搴撳瓨绠＄悊',
- children: [
- {
- key: Utils.getuuid(),
- title: '鏀惰揣绠＄悊'
- },
- {
- key: Utils.getuuid(),
- title: '閿�閫�鏀惰揣'
- },
- {
- key: Utils.getuuid(),
- title: '鍙戣揣閫氱煡鍗�'
- }
- ]
- }
- ]
- },
- {
- key: Utils.getuuid(),
- title: '鎶ヨ〃',
- children: [
- {
- key: Utils.getuuid(),
- title: '鎶ヨ〃鏌ヨ',
- children: [
- {
- key: Utils.getuuid(),
- title: '閲囪喘鏌ヨ'
- },
- {
- key: Utils.getuuid(),
- title: '搴撳瓨鏌ヨ'
- },
- {
- key: Utils.getuuid(),
- title: '鍑哄簱鏌ヨ'
- }
- ]
- }
- ]
- }
- ]
- },
- {
- key: Utils.getuuid(),
- title: '棣栭〉001'
- },
- {
- key: Utils.getuuid(),
- title: '渚涘簲鍟�'
- }
- ]
-
- if (data[0]) {
- expandedKeys.push(data[0].key)
- if (data[0].children && data[0].children[0]) {
- expandedKeys.push(data[0].children[0].key)
- }
- }
- this.setState({app: param, trees: data, expandedKeys}, () => {
+ this.setState({app: param}, () => {
this.getMenuList()
this.getThawMenulist()
})
@@ -185,7 +90,25 @@
if (result.status) {
this.setState({
loading: false,
- menulist: result.menus
+ menulist: result.menus.map(item => {
+ item.nodes = ''
+ item.type = 'view'
+ if (item.menus_rolelist) {
+ try {
+ let pageParam = JSON.parse(window.decodeURIComponent(window.atob(item.menus_rolelist)))
+ item.nodes = pageParam
+ if (pageParam.type === 'navbar') {
+ item.type = 'navbar'
+ }
+ } catch {
+ item.nodes = ''
+ }
+ }
+
+ return item
+ })
+ }, () => {
+ this.initMenutree()
})
} else {
this.setState({
@@ -197,6 +120,63 @@
duration: 5
})
}
+ })
+ }
+
+ initMenutree = () => {
+ const { menulist } = this.state
+
+ let navbars = []
+ let map = new Map()
+
+ fromJS(menulist).toJS().forEach(menu => {
+ if (!menu.nodes) return
+
+ if (menu.type === 'navbar') {
+ navbars.push(menu.nodes)
+ } else {
+ map.set(menu.MenuID, menu.nodes)
+ }
+ })
+
+ let data = []
+
+ if (navbars.length === 0) {
+ data = [...map.values()]
+ } else {
+ let reset = (m) => {
+ return m.map(n => {
+ if (n.children && n.children.length > 0) {
+ n.children = reset(n.children)
+ } else if (map.has(n.key)) {
+ let p = map.get(n.key)
+ if (p.children && p.children.length > 0) {
+ n.children = reset(p.children)
+ }
+ map.delete(n.key)
+ }
+ return n
+ })
+ }
+
+ data = reset(navbars)
+ data = [...data, ...map.values()]
+ }
+
+ let expandedKeys = []
+
+ if (data[0]) {
+ expandedKeys.push(data[0].key)
+ if (data[0].children && data[0].children[0]) {
+ expandedKeys.push(data[0].children[0].key)
+ if (data[0].children[0].children && data[0].children[0].children[0]) {
+ expandedKeys.push(data[0].children[0].children[0].key)
+ }
+ }
+ }
+
+ this.setState({trees: [], expandedKeys: []}, () => {
+ this.setState({trees: data, expandedKeys})
})
}
@@ -318,13 +298,6 @@
})
}
- onDragEnter = info => {
- // expandedKeys 闇�瑕佸彈鎺ф椂璁剧疆
- // this.setState({
- // expandedKeys: info.expandedKeys,
- // });
- }
-
onDrop = info => {
const dropKey = info.node.props.eventKey;
const dragKey = info.dragNode.props.eventKey;
@@ -396,10 +369,11 @@
}
initTree = () => {
+ const _this = this
confirm({
content: '鍒濆鍖栦細鏍规嵁鑿滃崟閲嶇疆鏉冮檺鏍戯紝纭畾鎵ц鍚楋紵',
onOk() {
-
+ _this.initMenutree()
},
onCancel() {}
})
@@ -426,7 +400,12 @@
}
render () {
- const { app, loading, columns, menulist, trees } = this.state
+ const { app, loading, columns, menulist, trees, searchkey } = this.state
+ let _menulist = menulist
+
+ if (searchkey) {
+ _menulist = _menulist.filter(item => item.MenuName.toLowerCase().indexOf(searchkey.toLowerCase()) > -1)
+ }
return (
<div className="mk-role-manage">
@@ -442,11 +421,12 @@
<div className="app-table">
<div className="app-action">
<Button className="mk-green" onClick={() => this.setState({ visible: true, targetKeys: [] })}>瑙ｅ喕鑿滃崟</Button>
+ <Search placeholder="缁煎悎鎼滅储" onSearch={value => this.setState({ searchkey: value })} enterButton />
</div>
<Table
rowKey="MenuID"
columns={columns}
- dataSource={menulist}
+ dataSource={_menulist}
pagination={false}
/>
</div>
@@ -457,17 +437,18 @@
<Button className="mk-purple" onClick={this.syncTree}>鍚屾</Button>
<Button className="mk-green save" onClick={this.saveTree}>淇濆瓨</Button>
</div>
- <Tree
+ {trees.length ? <Tree
className="draggable-tree"
defaultExpandedKeys={this.state.expandedKeys}
// showLine
draggable
blockNode
- onDragEnter={this.onDragEnter}
onDrop={this.onDrop}
>
{this.renderNode(trees)}
- </Tree>
+ </Tree> : <div className="empty">
+ <Empty />
+ </div>}
</div>
</div>
<Modal
--
Gitblit v1.8.0