import React, { Component } from 'react' import './staffTree.less' import { Tree } from 'antd' const { TreeNode } = Tree /** * 树形选择器 */ class staffTree extends Component { state = { expandedKeys: [], autoExpandParent: true, checkedKeys: [], } componentDidMount(){ } componentWillReceiveProps(nextProps) { let checkedKeys = this.getKeys(nextProps.treeData, 'Checked', []) this.setState({checkedKeys}) let expandedKeys = this.getKeys(nextProps.treeData, 'Expanded', []) this.setState({expandedKeys}) } renderTreeNodes = (treeData) => { return treeData.map(item => { if (item.ChildNodes && item.ChildNodes.length) { return ( <TreeNode title={item.Text || '人员机构列表'} key={item.Value || 'root'} checkable={item.ShowCheckBox}> {this.renderTreeNodes(item.ChildNodes)} </TreeNode> ) } return <TreeNode key={item.Value} {...item} title={item.Text || '人员机构列表'} Value={item.Value || 'root'}/> }) } getKeys(data, key, arr) { data && data.length && data.forEach(item => { if (item[key]) { arr.push(item.Value || 'root') } this.getKeys(item.ChildNodes, key, arr) }) return arr } onExpand = expandedKeys => { // console.log('onExpand', expandedKeys) this.setState({ expandedKeys, autoExpandParent: false, }) } onCheck = checkedKeys => { // console.log('onCheck', checkedKeys) this.setState({checkedKeys}) } // 获取勾选keys getCheckedKeys() { const { checkedKeys } = this.state let res = [] checkedKeys.forEach(item => { if (item.includes('/')) { res.push(item) } }) return res } render(){ const { treeData } = this.props return ( <div className="flowCenter_staffTree_warp"> <Tree checkable selectable={false} onExpand={this.onExpand} expandedKeys={this.state.expandedKeys} autoExpandParent={this.state.autoExpandParent} onCheck={this.onCheck} checkedKeys={this.state.checkedKeys} > {this.renderTreeNodes(treeData)} </Tree> </div> ) } } export default staffTree