salary-management-front/pc4mobx/hrmSalary/components/CustomSelect/index.js

/*
  *  自定义多选下拉框
  *  支持搜索
  * @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 || ""
    };
    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 } = this.state;
    const { options, defaultValue, value } = this.props;
    const clsname = classNames({
      "wea-associative-search-mult": true
    });
    console.log(value);
    return (
      <div className={`customMuiSelect wea-associative-search ${clsname}`} ref="customSelectMui">
        <Select
          {...this.props}
          hasScroll={false}
          hideSelected={true}
          transitionName=""
          animation=""
          multiple={true}
          notFoundContent=""
          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;