| | |
| | | settingVisible: false,// 自定义设置模态框 |
| | | triggerBtn: null, // 点击表格中或快捷键触发的按钮 |
| | | tabActive: null, // 标签页展开控制 |
| | | expandedKeys: [], // 展开的树节点 |
| | | selectedKeys: [] // 选中的树节点 |
| | | } |
| | | |
| | | /** |
| | |
| | | |
| | | // 权限过滤 |
| | | 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} |
| | |
| | | * @description 主表数据加载 |
| | | */ |
| | | async loadmaindata () { |
| | | const { setting, BIDs } = this.state |
| | | const { setting, searchKey } = this.state |
| | | let param = '' |
| | | |
| | | this.setState({ |
| | |
| | | param = this.getCustomParam() |
| | | } else { |
| | | param = this.getDefaultParam() |
| | | } |
| | | |
| | | this.handleTableId('mainTable', '', '') |
| | | |
| | | if (!param) { // 未获取参数时,不发请求 |
| | | return |
| | | } |
| | | |
| | | let result = await Api.genericInterface(param) |
| | |
| | | } |
| | | }) |
| | | 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({ |
| | |
| | | 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> |
| | | ) |
| | |
| | | }) |
| | | } |
| | | |
| | | 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] |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | 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() |
| | | }) |
| | | } |
| | | |
| | |
| | | */ |
| | | 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] |
| | |
| | | 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}> |
| | |
| | | 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} |
| | |
| | | <Tree |
| | | blockNode |
| | | onSelect={this.selectTreeNode} |
| | | expandedKeys={expandedKeys} |
| | | selectedKeys={selectedKeys} |
| | | onRightClick={this.changeExpandedAllKeys} |
| | | onExpand={this.changeExpandedKeys} |
| | | showIcon={setting.showIcon === 'true'} |
| | | showLine={setting.showLine === 'true'} |
| | | > |