82 lines
2.2 KiB
JavaScript
82 lines
2.2 KiB
JavaScript
/*
|
|
* 自定义浏览框组件
|
|
* 选择框左边
|
|
* @Author: 黎永顺
|
|
* @Date: 2024/8/30
|
|
* @Wechat:
|
|
* @Email: 971387674@qq.com
|
|
* @description:
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { WeaLocaleProvider } from "ecCom";
|
|
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
|
|
let timeout = null;
|
|
|
|
class CustomBrowserMutiLeft extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.dataObj = {};
|
|
}
|
|
|
|
onClick = (data) => {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(() => {
|
|
let { selectedKeys } = this.props;
|
|
let keys = selectedKeys ? [...selectedKeys] : [];
|
|
let datas = [];
|
|
if (keys.indexOf(data.id) > -1) {
|
|
keys = keys.filter((k) => k !== data.id);
|
|
} else {
|
|
keys.push(data.id);
|
|
}
|
|
keys.forEach((k) => this.dataObj[k] && datas.push(this.dataObj[k]));
|
|
this.props.onClick && this.props.onClick(keys, datas);
|
|
}, 200);
|
|
};
|
|
onDoubleClick = (data) => {
|
|
clearTimeout(timeout);
|
|
this.props.onDoubleClick && this.props.onDoubleClick([data]);
|
|
};
|
|
cls = (item) => {
|
|
const { selectedKeys, filterData } = this.props;
|
|
let cls = [];
|
|
if (selectedKeys && selectedKeys.indexOf(item.id) > -1) {
|
|
cls.push("selected");
|
|
}
|
|
if (filterData && filterData.filter((d) => d.id === item.id).length > 0) {
|
|
cls.push("hide");
|
|
}
|
|
return cls.join(" ");
|
|
};
|
|
|
|
render() {
|
|
const { datas, selectedKeys } = this.props;
|
|
const list = datas.map(item => {
|
|
this.dataObj[item.id] = item;
|
|
return <li className={this.cls(item)} onClick={() => this.onClick(item)}
|
|
onDoubleClick={() => this.onDoubleClick(item)}>
|
|
<div className="item-wrap" style={{ fontSize: 12 }}> {item.name} </div>
|
|
<div className="icon-wrap"/>
|
|
<i className="icon-coms-Selected"/>
|
|
</li>;
|
|
});
|
|
return (
|
|
<div className="wea-crm-list">
|
|
<ul className="wea-crm-list-wrapper">
|
|
{list}
|
|
</ul>
|
|
{
|
|
list.length === 0 &&
|
|
<div className="empty-tip" style={{ color: "#2f2929", paddingTop: 30, textAlign: "center" }}>
|
|
{getLabel(111, "没有可显示的数据")}
|
|
</div>
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default CustomBrowserMutiLeft;
|