/* eslint-disable */
|
import React from 'react';
|
import { Row, Col, Tree, Input, Icon, Button } from 'antd';
|
|
const TreeNode = Tree.TreeNode;
|
const Search = Input.Search;
|
|
const getParentKey = (title, tree) => {
|
let parentKey;
|
for (let i = 0; i < tree.length; i++) {
|
const node = tree[i];
|
if (node.children) {
|
if (node.children.some(item => item.title === title)) {
|
parentKey = node.key;
|
} else if (getParentKey(title, node.children)) {
|
parentKey = getParentKey(title, node.children);
|
}
|
}
|
}
|
return parentKey;
|
};
|
|
export default class SearchTree extends React.Component {
|
constructor(props) {
|
super(props)
|
this.gData = this.props.data;
|
this.dataList = []
|
this.state = {
|
expandedKeys: props.expandedKeys,
|
selectedKeys: props.selectedKeys,
|
clickEle: '',
|
searchValue: '',
|
autoExpandParent: true,
|
showSearch: true,
|
checkable: false
|
}
|
}
|
componentDidMount() {
|
const generateList = (data) => {
|
for (let i = 0; i < data.length; i++) {
|
const node = data[i];
|
const key = node.key;
|
const title = node.title;
|
this.dataList.push({ key, title });
|
if (node.children) {
|
generateList(node.children, title);
|
}
|
}
|
};
|
generateList(this.props.data)
|
}
|
|
onExpand = (expandedKeys) => {
|
//this.props.onExpand(expandedKeys)
|
this.setState({
|
expandedKeys,
|
autoExpandParent: false,
|
});
|
}
|
|
onChange = (e) => {
|
const value = e.target.value;
|
const expandedKeys = this.dataList.map((item) => {
|
if (item.title.indexOf(value) > -1) {
|
return getParentKey(item.title, this.gData);
|
}
|
return null;
|
}).filter((item, i, self) => item && self.indexOf(item) === i);
|
this.setState({
|
expandedKeys,
|
searchValue: value,
|
autoExpandParent: true,
|
});
|
}
|
|
treeSelect = (selectedKeys, e) => {
|
console.log(selectedKeys)
|
let _this = this;
|
_this.props.onSelect && _this.props.onSelect(selectedKeys);
|
if (selectedKeys.length == 0 && typeof this.props.clearKeys !== "undefined") {
|
this.props.clearKeys();
|
this.setState({ clickEle: '' });//置空点击节点
|
}
|
const getOwnNodes = (data) => {
|
for (let i = 0; i < data.length; i++) {
|
const node = data[i]
|
const key = node.key;
|
if (key == selectedKeys) {
|
this.setState({ clickEle: node });
|
if (data[i].children) { //如果有子，则返回所有子节点
|
this.props.treeSelect(node.children, [node])
|
} else { //没有子节点，就返回当前节点
|
this.props.treeSelect([node], [node])
|
}
|
return null;
|
} else {
|
if (data[i].children) {
|
getOwnNodes(data[i].children)
|
}
|
}
|
}
|
};
|
getOwnNodes(this.gData)
|
}
|
|
onCheck = (checkedKeys, { checked: bool, checkedNodes, node, event }) => {
|
console.log('checkedKeys', checkedKeys, 'checkedNodes', checkedNodes)
|
let _this = this;
|
let selectleafNodeKeys = [];
|
|
for (var i = 0; i < checkedNodes.length; i++) {
|
if (checkedNodes[i].props.children && checkedNodes[i].props.children.length > 0) {
|
} else {
|
selectleafNodeKeys.push(checkedNodes[i].key)
|
}
|
}
|
console.log('子节点选中的key', selectleafNodeKeys);
|
let treeCheckArr = []; //选中节点的信息
|
const getOwnNodes = (data, checkedKey) => {
|
let _this = this;
|
for (let i = 0; i < data.length; i++) {
|
const node = data[i]
|
if (node.key == checkedKey) {
|
if (data[i].children) { //如果有子，也返回当前节点
|
treeCheckArr.push(data[i]);
|
} else { //没有子节点，就返回当前节点
|
treeCheckArr.push(data[i]);
|
}
|
return null;
|
} else {
|
if (data[i].children) {
|
getOwnNodes(data[i].children, checkedKey)
|
}
|
}
|
}
|
};
|
for (var j = 0; j < selectleafNodeKeys.length; j++) {
|
getOwnNodes(_this.gData, selectleafNodeKeys[j]);
|
}
|
_this.props.currentTreeCheck(treeCheckArr);
|
_this.props.onCheck(checkedKeys, checkedNodes);
|
}
|
|
add = () => {
|
this.props.add()
|
}
|
|
delete = () => {
|
this.props.delete(this.state.clickEle)
|
}
|
render() {
|
const { searchValue, expandedKeys, autoExpandParent, selectedKeys } = this.state;
|
const showSearch = typeof this.props.showSearch === "undefined" ? this.state.showSearch : this.props.showSearch;
|
const checkable = typeof this.props.checkable === "undefined" ? this.state.checkable : this.props.checkable;
|
|
const loop = data => data.map((item) => {
|
const disabled = item.disabled || false;
|
const index = item.title.indexOf(searchValue);
|
const beforeStr = item.title.substr(0, index);
|
const afterStr = item.title.substr(index + searchValue.length);
|
const title = index > -1 ? (
|
<span>
|
{beforeStr}
|
<span style={{ color: '#f50' }}>{searchValue}</span>
|
{afterStr}
|
</span>
|
) : <span>{item.title}</span>;
|
if (item.children) {
|
return (
|
<TreeNode key={item.key} title={title} disabled={disabled}>
|
{loop(item.children)}
|
</TreeNode>
|
);
|
}
|
return <TreeNode key={item.key} title={title} disabled={disabled} />;
|
});
|
|
return (
|
|
<div>
|
<div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
|
{showSearch && <Search style={{ marginBottom: 1 }} placeholder="搜索资源名称" onChange={this.onChange} />}
|
{this.props.add && <Button onClick={this.add} style={{ marginLeft: 5 }}><Icon type="plus-circle-o" style={{ fontSize: 16 }} /></Button>}
|
{this.props.delete && <Button onClick={this.delete} style={{ marginLeft: 5 }}><Icon type="delete" style={{ fontSize: 16 }} /></Button>}
|
</div>
|
{
|
this.gData.length > 0 &&
|
// style={{height: 413, overflowY: 'auto'}}
|
<div>
|
<Tree
|
defaultExpandAll={true}
|
onSelect={this.treeSelect}
|
// onExpand={this.onExpand}
|
// expandedKeys={expandedKeys}
|
autoExpandParent={autoExpandParent}
|
showLine
|
checkable={checkable}
|
onCheck={this.onCheck}
|
checkedKeys={this.props.checkedKeys}
|
selectedKeys={this.props.selectedKeys}
|
>
|
{loop(this.gData)}
|
</Tree>
|
</div>
|
}
|
</div>
|
);
|
}
|
}
|
