80 lines
2.3 KiB
JavaScript
80 lines
2.3 KiB
JavaScript
/*
|
|
* 自定义多选下拉框
|
|
* 支持搜索
|
|
* @Author: 黎永顺
|
|
* @Date: 2024/9/13
|
|
* @Wechat:
|
|
* @Email: 971387674@qq.com
|
|
* @description:
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { WeaLocaleProvider } from "ecCom";
|
|
import classNames from "classnames";
|
|
import { Select } from "antd";
|
|
import "./index.less";
|
|
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
const Option = Select.Option;
|
|
|
|
class Index extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
visible: false, dropdownWidth: 200, value: props.value ? props.value.split(",") : []
|
|
};
|
|
this.selectedData = {};
|
|
}
|
|
|
|
componentDidMount() {
|
|
const { dropdownWidth } = this.state;
|
|
const w = $(this.refs.customSelectMui).outerWidth();
|
|
if (dropdownWidth < w) {
|
|
this.setState({ dropdownWidth: w });
|
|
}
|
|
}
|
|
|
|
handleChange = (value) => {
|
|
this.setState({ value });
|
|
typeof this.props.onChange == "function" &&
|
|
this.props.onChange(`${value}`);
|
|
};
|
|
|
|
render() {
|
|
const { dropdownWidth, visible, value } = this.state;
|
|
const { options = [], defaultValue } = this.props;
|
|
const clsname = classNames({
|
|
"wea-associative-search-mult": true
|
|
});
|
|
return (
|
|
<div className={`customMuiSelect wea-associative-search ${clsname}`} ref="customSelectMui">
|
|
<Select
|
|
{...this.props}
|
|
hasScroll={false}
|
|
dropdownMatchSelectWidth={false}
|
|
hideSelected={true}
|
|
transitionName=""
|
|
animation=""
|
|
multiple={true}
|
|
notFoundContent={getLabel(111, "暂无数据")}
|
|
defaultActiveFirstOption={true}
|
|
showArrow={true}
|
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
|
defaultValue={defaultValue}
|
|
value={value}
|
|
dropdownStyle={{ minWidth: dropdownWidth }}
|
|
onChange={this.handleChange}
|
|
onBlur={() => this.setState({ visible: !visible })}
|
|
onFocus={() => this.setState({ visible: !visible })}
|
|
>
|
|
{options.map(d => <Option key={d.id} title={d.name}>{d.name}</Option>)}
|
|
</Select>
|
|
<div className="ant-input-group-wrap">
|
|
{!visible ? <i className="icon-coms-down2 arrow"/> : <i className="icon-coms-up2 arrow"/>}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Index;
|