111 lines
3.2 KiB
JavaScript
111 lines
3.2 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);
|
|
};
|
|
onDragStart = (obj) => {
|
|
clearTimeout(timeout);
|
|
this.props.checkedCb && this.props.checkedCb([]);
|
|
};
|
|
onDrop = (obj) => {
|
|
const dragNodes = obj.dragNodesKeys;
|
|
const targetNode = obj.node.props.eventKey;
|
|
const result = [];
|
|
this.nodeIds.filter((item) => {
|
|
return dragNodes.indexOf(String(item)) === -1;
|
|
}).forEach((id) => {
|
|
if (String(id) === targetNode) {
|
|
dragNodes.forEach((drag) => {
|
|
result.push(this.nodeObj[drag]);
|
|
});
|
|
}
|
|
result.push(this.nodeObj[id]);
|
|
});
|
|
this.props.onDrag && this.props.onDrag(result);
|
|
};
|
|
|
|
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}
|
|
onDragStart={this.onDragStart} onDrop={this.onDrop}>
|
|
{this.generateTreeNodes()}
|
|
</Tree>
|
|
</WeaNewScroll>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default CustomBrowserMutiRight;
|