From d3172b799eccdf7fa69050a0f2d596309bd78059 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 03 六月 2020 18:48:46 +0800
Subject: [PATCH] 2020-06-03
---
src/tabviews/treepage/index.jsx | 185 ++++++++++++++++++++++++++++++++-------------
1 files changed, 131 insertions(+), 54 deletions(-)
diff --git a/src/tabviews/treepage/index.jsx b/src/tabviews/treepage/index.jsx
index 462efa1..1f29603 100644
--- a/src/tabviews/treepage/index.jsx
+++ b/src/tabviews/treepage/index.jsx
@@ -53,6 +53,8 @@
settingVisible: false,// 鑷畾涔夎缃ā鎬佹
triggerBtn: null, // 鐐瑰嚮琛ㄦ牸涓垨蹇嵎閿Е鍙戠殑鎸夐挳
tabActive: null, // 鏍囩椤靛睍寮�鎺у埗
+ expandedKeys: [], // 灞曞紑鐨勬爲鑺傜偣
+ selectedKeys: [] // 閫変腑鐨勬爲鑺傜偣
}
/**
@@ -110,9 +112,13 @@
// 鏉冮檺杩囨护
config.tabgroups.forEach(group => {
- group.sublist = group.sublist.filter(tab => permAction[tab.linkTab])
+ group.sublist = group.sublist.filter(tab => {
+ if (tab.supMenu === 'mainTable') {
+ tab.isTreeNode = true
+ }
+ return permAction[tab.linkTab]}
+ )
})
- config.tabgroups = config.tabgroups.filter(group => group.sublist.length > 0)
if (_curUserConfig) {
config.setting = {...config.setting, ..._curUserConfig.setting}
@@ -236,7 +242,7 @@
* @description 涓昏〃鏁版嵁鍔犺浇
*/
async loadmaindata () {
- const { setting, BIDs } = this.state
+ const { setting, searchKey } = this.state
let param = ''
this.setState({
@@ -247,12 +253,6 @@
param = this.getCustomParam()
} else {
param = this.getDefaultParam()
- }
-
- this.handleTableId('mainTable', '', '')
-
- if (!param) { // 鏈幏鍙栧弬鏁版椂锛屼笉鍙戣姹�
- return
}
let result = await Api.genericInterface(param)
@@ -281,15 +281,19 @@
}
})
let _treedata = this.getTree(parentNodes, _options)
+
+ let _treeNodes = []
+
+ if (!searchKey) {
+ _treeNodes = fromJS(_treedata).toJS()
+ } else {
+ _treeNodes = this.getFilterTree(fromJS(_treedata).toJS(), searchKey.toLowerCase())
+ }
this.setState({
treedata: _treedata,
- treeNodes: fromJS(_treedata).toJS(),
- loading: false,
- BIDs: {
- ...BIDs,
- mainTable: ''
- }
+ treeNodes: _treeNodes,
+ loading: false
})
} else {
this.setState({
@@ -338,7 +342,7 @@
return nodes.map(item => {
if (item.children) {
return (
- <TreeNode icon={<Icon type="folder-open" />} title={item.title} key={item.key} dataRef={item}>
+ <TreeNode icon={<span><Icon type="folder-open" /><Icon type="folder" /></span>} title={item.title} key={item.key} dataRef={item}>
{this.renderTreeNodes(item.children)}
</TreeNode>
)
@@ -347,35 +351,86 @@
})
}
- selectTreeNode = (selectedKeys, {selected, node}) => {
- const { config } = this.state
+ treeFilter = (value) => {
+ const { treedata } = this.state
- let selectId = selectedKeys[0]
- let _data = fromJS(node.props.dataRef).toJS()
- delete _data.children
+ let _treeNodes = []
- let _tabgroups = []
- let _tabActive = {}
-
- config.tabgroups.forEach(group => {
- let _group = fromJS(group).toJS()
- _group.sublist = _group.sublist.filter(tab => !tab.level || (selected && tab.level === _data.level))
-
- if (_group.sublist.length > 0) {
- _tabActive[_group.uuid] = _group.sublist[0].uuid
- _tabgroups.push(_group)
- }
- })
+ if (!value) {
+ _treeNodes = fromJS(treedata).toJS()
+ } else {
+ _treeNodes = this.getFilterTree(fromJS(treedata).toJS(), value.toLowerCase())
+ }
this.setState({
- tabgroups: _tabgroups,
- tabActive: _tabActive
+ searchKey: value,
+ treeNodes: _treeNodes
})
+ }
+
+ /**
+ * @description 鑾峰彇缁撴瀯鏍戜俊鎭�
+ */
+ getFilterTree = (parents, searchKey) => {
+ return parents.filter(node => {
+ if (!node.children) {
+ return (node.title.toLowerCase().indexOf(searchKey) >= 0 || node.key.toLowerCase().indexOf(searchKey) >= 0)
+ } else {
+ if (node.title.toLowerCase().indexOf(searchKey) >= 0 || node.key.toLowerCase().indexOf(searchKey) >= 0) {
+ return true
+ }
+
+ node.children = this.getFilterTree(node.children, searchKey)
+ if (node.children.length === 0) {
+ return false
+ } else {
+ return true
+ }
+ }
+ })
+ }
+
+ selectTreeNode = (selectedKeys, {selected, node}) => {
+ const { config } = this.state
+ let _expandedKeys = fromJS(this.state.expandedKeys).toJS()
+ let _data = fromJS(node.props.dataRef).toJS()
+
+ if (_expandedKeys.indexOf(_data.key) >= 0) {
+ _expandedKeys = _expandedKeys.filter(key => key !== _data.key)
+ } else {
+ if (_data.children) {
+ _expandedKeys.push(_data.key)
+ _expandedKeys = Array.from(new Set(_expandedKeys))
+ }
+ }
if (selected) {
- this.handleTableId('mainTable', selectId, _data)
+ let _tabgroups = []
+ let _tabActive = {}
+
+ config.tabgroups.forEach(group => {
+ let _group = fromJS(group).toJS()
+ _group.sublist = _group.sublist.filter(tab => (!tab.level && tab.level !== 0) || tab.level === _data.level)
+
+ if (_group.sublist.length > 0) {
+ _tabActive[_group.uuid] = _group.sublist[0].uuid
+ _tabgroups.push(_group)
+ }
+ })
+
+ delete _data.children
+ this.handleTableId('mainTable', _data.key, _data)
+ this.setState({
+ tabgroups: _tabgroups,
+ tabActive: _tabActive,
+ expandedKeys: _expandedKeys,
+ selectedKeys: [_data.key]
+ })
} else {
- this.handleTableId('mainTable', '', '')
+ this.setState({
+ expandedKeys: _expandedKeys,
+ selectedKeys: [_data.key]
+ })
}
}
@@ -481,28 +536,17 @@
this.setState({
loadingview: true,
viewlost: false,
- lostmsg: '',
config: {},
userConfig: null,
- userParam: null,
setting: null,
treedata: null,
treeNodes: null,
loading: false,
BIDs: {},
+ expandedKeys: [],
+ selectedKeys: []
}, () => {
this.loadconfig()
- })
- }
-
- /**
- * @description 琛ㄦ牸鍒锋柊
- */
- reloadtable = () => {
- this.setState({
- pageIndex: 1
- }, () => {
- this.loadmaindata()
})
}
@@ -511,9 +555,9 @@
*/
handleMainTable = (type, tab) => {
if (type === 'maingrid' && tab.supMenu === 'mainTable') {
- this.reloadtable()
+ this.loadmaindata()
} else if (type === 'mainline' && tab.supMenu === 'mainTable') {
- this.reloadtable()
+ this.loadmaindata()
} else if ((type === 'maingrid' || type === 'mainline') && tab.supMenu) {
this.setState({
refreshtabs: [type, tab.supMenu]
@@ -733,8 +777,37 @@
document.onkeydown = () => {}
}
+ changeExpandedKeys = (expandedKeys) => {
+ this.setState({
+ expandedKeys: expandedKeys
+ })
+ }
+
+ // 鍙抽敭灞曞紑鑺傜偣涓嬬殑鍏ㄩ儴鍒嗘敮
+ changeExpandedAllKeys = ({event, node}) => {
+ const { expandedKeys } = this.state
+ let _node = node.props.dataRef
+ event.stopPropagation()
+
+ let keys = []
+ this.getExpandKeys(_node, keys)
+
+ this.setState({
+ expandedKeys: Array.from(new Set([...keys, ...expandedKeys])),
+ })
+ }
+
+ getExpandKeys = (node, keys) => {
+ if (node.children) {
+ keys.push(node.key)
+ node.children.forEach(_node => {
+ this.getExpandKeys(_node, keys)
+ })
+ }
+ }
+
render() {
- const { setting, loadingview, viewlost, config, triggerBtn, userConfig, tabActive, tabgroups, treeNodes, treedata } = this.state
+ const { setting, loadingview, viewlost, config, triggerBtn, userConfig, tabActive, tabgroups, treeNodes, treedata, expandedKeys, selectedKeys } = this.state
return (
<div className="tree-page" id={this.state.ContainerId}>
@@ -746,7 +819,7 @@
title={
<span className="tree-title">
<span className="title">{setting.title}</span>
- {setting.searchable !== 'false' ? <Search onSearch={this.treeFilter} /> : null}
+ {setting.searchable !== 'false' ? <Search allowClear onSearch={this.treeFilter} /> : null}
</span>
}
bordered={false}
@@ -755,6 +828,10 @@
<Tree
blockNode
onSelect={this.selectTreeNode}
+ expandedKeys={expandedKeys}
+ selectedKeys={selectedKeys}
+ onRightClick={this.changeExpandedAllKeys}
+ onExpand={this.changeExpandedKeys}
showIcon={setting.showIcon === 'true'}
showLine={setting.showLine === 'true'}
>
--
Gitblit v1.8.0