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 { 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;