92 lines
2.6 KiB
JavaScript
92 lines
2.6 KiB
JavaScript
|
/*
|
||
|
|
* 自定义浏览框组件
|
||
|
|
* 选择框右边
|
||
|
|
* @Author: 黎永顺
|
||
|
|
* @Date: 2024/8/30
|
||
|
|
* @Wechat:
|
||
|
|
* @Email: 971387674@qq.com
|
||
|
|
* @description:
|
||
|
|
*/
|
||
|
|
import React, { Component } from "react";
|
||
|
|
import { WeaInputSearch, WeaLocaleProvider, WeaNewScroll } from "ecCom";
|
||
|
|
import { Tree } from "antd";
|
||
|
|
|
||
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
||
|
|
const TreeNode = Tree.TreeNode;
|
||
|
|
|
||
|
|
let timeout = null;
|
||
|
|
|
||
|
|
class CustomBrowserMutiRight extends Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
key: ""
|
||
|
|
};
|
||
|
|
this.nodeIds = [];
|
||
|
|
this.nodeObj = {};
|
||
|
|
}
|
||
|
|
|
||
|
|
generateTreeNodes = () => {
|
||
|
|
const { data } = this.props, { key } = this.state;
|
||
|
|
const treeNodes = [];
|
||
|
|
let showData = [...data];
|
||
|
|
if (_.trim(key)) {
|
||
|
|
showData = showData.filter((item) => {
|
||
|
|
return item.name.indexOf(_.trim(key)) > -1;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
showData = _.uniqBy(showData, "id");
|
||
|
|
this.nodeIds = [];
|
||
|
|
this.nodeObj = {};
|
||
|
|
showData.map((item) => {
|
||
|
|
let title = (
|
||
|
|
<div>
|
||
|
|
<div className="item-wrap" style={{ whiteSpace: "normal" }}>
|
||
|
|
<div className="item-top">
|
||
|
|
<span style={{ marginRight: "5px" }}>{item.name}</span>
|
||
|
|
</div>
|
||
|
|
<div className="item-bottom"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
treeNodes.push(<TreeNode title={title} key={item["id"]} isLeaf={true}/>);
|
||
|
|
this.nodeIds.push(item["id"]);
|
||
|
|
this.nodeObj[item["id"]] = item;
|
||
|
|
});
|
||
|
|
return treeNodes;
|
||
|
|
};
|
||
|
|
handleSearchChange = (v) => this.setState({ key: v });
|
||
|
|
checkHandler = (v) => {
|
||
|
|
clearTimeout(timeout);
|
||
|
|
timeout = setTimeout(() => {
|
||
|
|
this.props.checkedCb && this.props.checkedCb(v);
|
||
|
|
}, 200);
|
||
|
|
};
|
||
|
|
onDoubleClick = (key) => {
|
||
|
|
clearTimeout(timeout);
|
||
|
|
this.props.onDoubleClick && this.props.onDoubleClick(key);
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { height, checkedKeys } = this.props;
|
||
|
|
return (
|
||
|
|
<div className="wea-transfer-right">
|
||
|
|
<WeaInputSearch placeholder={getLabel(111, "请输入关键字搜索")} value={this.state.key}
|
||
|
|
onSearchChange={_.debounce(this.handleSearchChange, 200)}/>
|
||
|
|
<div>
|
||
|
|
<WeaNewScroll height={height || 400}>
|
||
|
|
<Tree className="transfer-tree" draggable multiple={true} async={true} selectable={true}
|
||
|
|
onSelect={this.checkHandler}
|
||
|
|
onDoubleClick={this.onDoubleClick}
|
||
|
|
selectedKeys={checkedKeys}>
|
||
|
|
{this.generateTreeNodes()}
|
||
|
|
</Tree>
|
||
|
|
</WeaNewScroll>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default CustomBrowserMutiRight;
|