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 = {
      list: [],
      filterList: []
    };
  }

  componentDidMount() {
    this.setState({
      list: this.props.dataSource
    });
  }

  handleSearchItemSet = (val) => {
    const { dataSource } = this.props;
    this.setState({
      filterList: _.map(dataSource, item => {
        return {
          ...item,
          items: _.filter(item.items || [], child => child.name.indexOf(val) !== -1)
        };
      })
    });
  };
  handleShowOnlyChecked = (checked) => {
    const { dataSource } = this.props;
    const { list } = this.state;
    if (!!Number(checked)) {
      this.setState({
        list: _.map(list, item => {
          return {
            ...item,
            items: _.filter(item.items || [], child => !!child.checked)
          };
        })
      });
    } else {
      this.setState({ list: dataSource });
    }
  };
  handleSelectGroupAll = (groupId, checked) => {
    const { list, filterList } = this.state;
    const key = !_.isEmpty(filterList) ? "filterList" : "list";
    this.setState({
      [key]: _.map(!_.isEmpty(filterList) ? filterList : list, item => {
        if (groupId === item.groupId) {
          return {
            ...item,
            items: _.map(item.items || [], child => {
              return { ...child, checked: !!Number(checked) };
            })
          };
        }
        return { ...item };
      })
    });
  };
  handleSelectItem = (id, checked) => {
    const { list, filterList } = this.state;
    const key = !_.isEmpty(filterList) ? "filterList" : "list";
    this.setState({
      [key]: _.map(!_.isEmpty(filterList) ? filterList : list, item => {
        return {
          ...item,
          items: _.map(item.items || [], child => {
            if (id === child.id) {
              return { ...child, checked: !!Number(checked) };
            }
            return { ...child };
          })
        };
      })
    });
  };
  renderTitle = (item) => {
    const { onSelectGroupAll } = this.props;
    const { groupName, groupId } = item;
    return <div className="setGroupWrapper">
      <WeaCheckbox content={groupName} onChange={(val) => onSelectGroupAll(groupId, val)}/>
      <span className="checkedtitle">已选择0个字段</span>
    </div>;
  };

  render() {
    const { list, filterList } = this.state;
    const { onSelectItem } = this.props;
    console.log("filterList", filterList);
    return (
      <React.Fragment>
        {
          _.map(!_.isEmpty(filterList) ? filterList : list, 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;