//后台返回一维数组 第一步处理成多维数组 第二步处理成所需键值对 render() { const { personInfo: { data,//树形数据 一维数组 }, loading, dispatch, } = this.props; let partArr = []; partArr = data.list || []; // tree树 const { Search } = Input; const x = 3; const y = 2; const z = 1; const gData = []; const generateData = (_level, _preKey, _tns) => { const preKey = _preKey || '0'; const tns = _tns || gData; const children = []; for (let i = 0; i < x; i++) { const key = `${preKey}-${i}`; tns.push({ title: key, key }); if (i < y) { children.push(key); } } if (_level < 0) { return tns; } const level = _level - 1; children.forEach((key, index) => { tns[index].children = []; return generateData(level, key, tns[index].children); }); }; generateData(z); const toTree = function(tarArray) { var obj = {}; tarArray.map((item, index) => { obj[item.departId] = item; }); let resDefault = []; for (var i = 0; i < tarArray.length; i++) { var item = tarArray[i]; var parent = obj[item.parentId]; // console.log("parent") // console.log(parent) if (parent) { if (parent.children) { let isHere = parent.children.find(_item => _item.departId === item.departId); //是否存在 // parent.children.push(item); if (isHere) { } else { parent.children.push(item); } } else { parent.children = []; parent.children.push(item); } } else { resDefault.push(item); } } return resDefault; }; let partTree = []; partTree = toTree(partArr) || []; // 因为之前有key,所以先把key替换成别的名字,再把departId替换成key let treeList = []; treeList = JSON.parse( JSON.stringify(partTree) .replace(/departName/g, 'title') .replace(/key/g, 'id') .replace(/departId/g, 'key') ); // if (treeList.length != 0) { // } else { // } // let treeList = [...new Set(ss.reduce((item, next) => { // return item.concat(next) // }, []))].reduce((item,next)=>{ // if(next.name){ // hashKey[next.name]?'':hashKey[next.name]=true&&item.push(next) // } // else{ // item.push(next) // } // return item // },[]); // const changeTitle = org => { // const haveChildren = Array.isArray(org.children) && org.children.length > 0; // return { // //分别将我们查询出来的值做出改变他的key // title: org.departName, // key: org.departId, // // value: org.id, // // data: { ...org }, // //判断它是否存在子集,若果存在就进行再次进行遍历操作,知道不存在子集便对其他的元素进行操作 // children: haveChildren ? org.children.map(i => changeTitle(i)) : [], // }; // }; // // let treeList = changeTitle(partTree) // let treeList = partTree.map(org => changeTitle(org)); const dataList = []; const generateList = data => { for (let i = 0; i < data.length; i++) { const node = data[i]; const { key } = node; dataList.push({ key, title: key }); if (node.children) { generateList(node.children); } } }; generateList(gData); const getParentKey = (key, tree) => { let parentKey; for (let i = 0; i < tree.length; i++) { const node = tree[i]; if (node.children) { if (node.children.some(item => item.key === key)) { parentKey = node.key; } else if (getParentKey(key, node.children)) { parentKey = getParentKey(key, node.children); } } } return parentKey; }; class SearchTree extends React.Component { state = { expandedKeys: [], searchValue: '', autoExpandParent: true, departId: '', }; onExpand = expandedKeys => { this.setState({ expandedKeys, autoExpandParent: true, }); }; onChange = value => { const expandedKeys = treeList .map(item => { if (item.title.indexOf(value) > -1) { return getParentKey(item.key, gData); } return null; }) .filter((item, i, self) => item && self.indexOf(item) === i); this.setState({ expandedKeys, searchValue: value, autoExpandParent: true, }); }; onSelect = (selectedKeys, info) => { console.log('selected', selectedKeys, info); // this.setState({ // departId: selectedKeys[0], // AuthVisible: false, // }); let name = info.node.props.title; getpersonArr(selectedKeys[0], name); }; render() { const { searchValue, expandedKeys, autoExpandParent } = this.state; const onCheck = (checkedKeys, info) => { console.log('onCheck', checkedKeys, info); }; const rootId = 'all'; return ( <div> {/* onChange={this.onChange} */} {/* <Search style={{ marginBottom: 8 }} placeholder="Search" onSearch={this.onChange} enterButton="Search" /> */} {/* <Tree // checkable // height={233} onExpand={this.onExpand} // expandedKeys={expandedKeys} // autoExpandParent={autoExpandParent} onSelect={this.onSelect} // onCheck={onCheck} treeData={treeList} /> */} {treeList && treeList.length ? ( // <Tree // defaultExpandedKeys={[rootId]} // defaultSelectedKeys={[rootId]} // selectedKeys={[this.state.curTreeNode.key]} // treeData={this.state.treeData} // /> <Tree // checkable // height={233} onExpand={this.onExpand} // defaultExpandAll={true} // defaultExpandedKeys={[rootId]} // defaultSelectedKeys={[rootId]} // expandedKeys={expandedKeys} // autoExpandParent={autoExpandParent} onSelect={this.onSelect} // onCheck={onCheck} treeData={treeList} /> ) : ( <div className="page-empty">暂无数据</div> )} </div> ); } } return ( <PageHeaderWrapper title="树形数据"> <Row> <Col span={4}> <Card style={{ height: '80vh', overflow: 'scroll' }}> <div className={styles.tableList}> <SearchTree /> </div> </Card> </Col> </Row> </PageHeaderWrapper> ); }