127 lines
4.0 KiB
JavaScript
127 lines
4.0 KiB
JavaScript
/*
|
|
* 自定义多选下拉框
|
|
* 支持搜索
|
|
* @Author: 黎永顺
|
|
* @Date: 2024/9/13
|
|
* @Wechat:
|
|
* @Email: 971387674@qq.com
|
|
* @description:
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { WeaCheckbox, WeaInput, WeaLocaleProvider, WeaNewScroll } from "ecCom";
|
|
import classNames from "classnames";
|
|
import { Dropdown } from "antd";
|
|
import "./index.less";
|
|
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
|
|
class Index extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
visible: false, value: props.value ? props.value.split(",") : [],
|
|
keywords: ""
|
|
};
|
|
}
|
|
|
|
isAllChecked = () => {
|
|
const { options } = this.props, { value, keywords } = this.state;
|
|
let v = "0";
|
|
if (_.uniq(value).length === options.filter(k => k.showname.indexOf(keywords) >= 0).length) v = "1";
|
|
return v;
|
|
};
|
|
|
|
isChecked = (v) => {
|
|
const { value } = this.state;
|
|
return value.indexOf(v) > -1 ? "1" : "0";
|
|
};
|
|
onAllChange = (v) => {
|
|
const { options, onChange } = this.props, { keywords } = this.state;
|
|
let values = [], shownames = [];
|
|
if (v == 1) {
|
|
options.filter(k => k.showname.indexOf(keywords) >= 0).forEach(o => {
|
|
values.push(o.key);
|
|
shownames.push(o.showname);
|
|
});
|
|
}
|
|
this.setState({ value: values });
|
|
onChange && onChange(values.join(","), shownames.join(","));
|
|
};
|
|
|
|
onItemChange = (v, id) => {
|
|
const { onChange, options } = this.props, { value } = this.state;
|
|
let values = !_.isEmpty(value) ? value : [], shownames = [];
|
|
if (v == "1") {
|
|
values.push(id);
|
|
} else {
|
|
values = values.filter(val => val !== id);
|
|
}
|
|
values.forEach(val => {
|
|
let target = options.filter((data) => data.key == val)[0];
|
|
if (target) shownames.push(target.showname);
|
|
});
|
|
this.setState({ value: values });
|
|
onChange && onChange(values.join(","), shownames.join(","));
|
|
};
|
|
|
|
getList = () => {
|
|
const { options } = this.props, { keywords } = this.state;
|
|
let style = {};
|
|
if (options.length > 5) style = { height: 200 };
|
|
return <div className="wea-select-panel" style={style}>
|
|
<WeaNewScroll className="wea-select-scroll" height="100%">
|
|
<div className="wea-select-panel-item">
|
|
<WeaInput value={keywords} onChange={keywords => this.setState({ keywords })}/>
|
|
</div>
|
|
<div className="wea-select-panel-item">
|
|
<WeaCheckbox
|
|
content={"全选"}
|
|
value={this.isAllChecked()}
|
|
onChange={this.onAllChange}
|
|
>
|
|
</WeaCheckbox>
|
|
</div>
|
|
{options && options.filter(k => k.showname.indexOf(keywords) >= 0).map(o => {
|
|
return <div className="wea-select-panel-item">
|
|
<WeaCheckbox
|
|
content={o.showname}
|
|
value={this.isChecked(o.key)}
|
|
onChange={(v) => this.onItemChange(v, o.key)}
|
|
>
|
|
</WeaCheckbox>
|
|
</div>;
|
|
})}
|
|
</WeaNewScroll>
|
|
</div>;
|
|
};
|
|
|
|
getShownames = () => {
|
|
const { options } = this.props;
|
|
let { value } = this.state;
|
|
let shownames = [];
|
|
value.forEach(val => {
|
|
let target = options.filter((data) => data.key == val)[0];
|
|
if (target) shownames.push(target.showname);
|
|
});
|
|
return shownames.join(",");
|
|
};
|
|
|
|
render() {
|
|
const { visible } = this.state, { layout } = this.props;
|
|
const clsname = classNames({
|
|
"wea-associative-search-mult": true
|
|
});
|
|
return (<div className={`customMuiSelect wea-associative-search ${clsname}`} ref="customSelectMui">
|
|
<Dropdown trigger={["click"]} overlay={this.getList()}
|
|
onVisibleChange={visible => this.setState({ visible })} visible={visible}
|
|
getPopupContainer={() => (layout || document.body)}>
|
|
<div className="wea-select-input wdb cursor-pointer" ref="selectInput">
|
|
<span className="wdb">{this.getShownames()}</span>
|
|
{!this.state.visible ? <i className="icon-coms-down2 arrow"/> : <i className="icon-coms-up2 arrow"/>}
|
|
</div>
|
|
</Dropdown>
|
|
</div>);
|
|
}
|
|
}
|
|
|
|
export default Index; |