salary-management-front/pc4mobx/hrmSalary/components/selectItemsModal/selectItemsWrapper.js

/*
 * Author: 黎永顺
 * name: 设置项目
 * Description:
 * Date: 2023/3/6
 */
import React, { Component } from "react";
import { WeaCheckbox, WeaSearchGroup } from "ecCom";

class SelectItemsWrapper extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchVal: "", selectItem: [], groupItem: [], showOnlyChecked: false
    };
  }

  componentDidMount() {
    this.initSelectItem();
  }

  initSelectItem = () => {
    const { dataSource } = this.props;
    this.setState({
      selectItem: _.map(_.filter(_.reduce(dataSource, (pre, cur) => {
        return [...pre, ...cur.items];
      }, []), item => !!item.checked), it => it.id)
    });
  };

  handleSearchItemSet = (searchVal) => this.setState({ searchVal });
  handleShowOnlyChecked = (showOnlyChecked) => this.setState({ showOnlyChecked: !!Number(showOnlyChecked) });
  handleSelectGroupAll = (groupId, checked) => {
    const { selectItem, groupItem } = this.state;
    const { dataSource } = this.props;
    _.map(dataSource, item => {
      if (item.groupId === groupId) {
        if (!!Number(checked)) {
          this.setState({
            groupItem: [...groupItem, ..._.map(item.items, child => child.id)]
          }, () => this.setState({ selectItem: [...selectItem, ...this.state.groupItem] }));
        } else {
          this.setState({
            groupItem: _.differenceWith(groupItem, _.map(item.items, child => child.id), _.isEqual)
          }, () => this.setState({ selectItem: this.state.groupItem }));
        }
      }
    });
  };
  handleSelectItem = (id, checked) => {
    const { selectItem } = this.state;
    this.setState({
      selectItem: !!Number(checked) ? [...selectItem, id] : _.xorWith(selectItem, [id], _.isEqual)
    });
  };
  renderTitle = (item) => {
    const { onSelectGroupAll } = this.props;
    const { groupName, groupId, items } = item;
    const number = _.filter(items, it => !!it.checked).length;
    const value = _.every(items, it => !!it.checked) ? "1" : "0";
    return <div className="setGroupWrapper">
      <WeaCheckbox content={groupName} value={value} onChange={(val) => onSelectGroupAll(groupId, val)}/>
      <span className="checkedtitle">已选择{number}个字段</span>
    </div>;
  };

  render() {
    const { searchVal, selectItem, showOnlyChecked } = this.state;
    const { onSelectItem, dataSource } = this.props;
    let setItemList = _.map(dataSource, item => {
      return {
        ...item,
        items: _.filter(item.items || [], child => child.name.indexOf(searchVal) !== -1)
      };
    });
    setItemList = _.map(setItemList, item => {
      return {
        ...item,
        items: _.map(item.items, child => {
          return { ...child, checked: selectItem.includes(child.id) };
        })
      };
    });
    if (showOnlyChecked) {
      setItemList = _.map(setItemList, item => {
        return { ...item, items: _.filter(item.items, it => !!it.checked) };
      });
    }
    return (
      <React.Fragment>
        {
          _.map(setItemList, item => {
            const { items } = item;
            return <WeaSearchGroup title={this.renderTitle(item)} showGroup>
              <div className="itemsWrapper">
                {
                  _.isEmpty(items) ?
                    <span className="empty">暂无数据</span> :
                    <ul className="itemContUl">
                      {
                        _.map(items, child => {
                          const { name, checked, id } = child;
                          return <li title={name}>
                            <WeaCheckbox
                              content={name} value={checked ? "1" : "0"}
                              onChange={(val) => onSelectItem(id, val)}
                            />
                          </li>;
                        })
                      }
                    </ul>
                }
              </div>
            </WeaSearchGroup>;
          })
        }
      </React.Fragment>
    );
  }
}

export default SelectItemsWrapper;