salary-management-front/pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemSettings.js

/*
 * Author: 黎永顺
 * name: 工资单模板-薪资项目设置
 * Description:
 * Date: 2023/2/2
 */
import React, { Component } from "react";
import { toJS } from "mobx";
import { WeaFormItem, WeaInput, WeaSortable, WeaTransfer } from "ecCom";
import { Icon, Modal } from "antd";
import SalaryItemModal from "./salaryItemModal";
import { getAvailableSalaryGroupSet, getAvailableSalaryItemSet } from "../../../apis/payroll";

class SalaryItemSettings extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataList: [],
      checkedValue: "",
      modalPayload: {
        visible: false,
        title: "",
        groupId: "",
        groupName: "",
        options: []
      }
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.dataSource !== this.props.dataSource) {
      this.setState({
        dataList: _.map(toJS(nextProps.dataSource), item => {
          return {
            ...item,
            id: item.groupId
          };
        })
      });
    }
  }

  /*
   * Author: 黎永顺
   * Description:删除薪资项目大类
   * Params:
   * Date: 2023/2/2
   */
  handleDeleteClick = (group) => {
    Modal.confirm({
      title: "信息确认",
      content: "确认删除",
      onOk: () => {
        let resultSalaryItemSet = [...this.state.dataList];
        resultSalaryItemSet.map((sourceGroup, index) => {
          if (sourceGroup.groupId === group.groupId) {
            resultSalaryItemSet.splice(index, 1);
          }
        });
        this.setState({
          dataList: resultSalaryItemSet
        }, () => {
          this.props.onChangeSalaryItem(resultSalaryItemSet);
        });
      }
    });
  };
  /*
   * Author: 黎永顺
   * Description: 删除薪资项目项
   * Params:
   * Date: 2023/2/2
   */
  handleDeleteSalaryItem = (group, item) => {
    let resultSalaryItemSet = [...this.state.dataList];
    resultSalaryItemSet.map(sourceGroup => {
      if (sourceGroup.groupId === group.groupId) {
        sourceGroup.items.map((sourceItem, index) => {
          if (sourceItem.id === item.id) {
            sourceGroup.items.splice(index, 1);
          }
        });
      }
    });
    this.setState({
      dataList: resultSalaryItemSet
    }, () => {
      this.props.onChangeSalaryItem(resultSalaryItemSet);
    });
  };
  handleCloseModal = () => {
    const { modalPayload } = this.state;
    this.setState({
      checkedValue: "",
      modalPayload: {
        ...modalPayload,
        visible: false,
        title: "",
        groupId: "",
        groupName: "",
        options: []
      }
    });
  };
  handleOpenModal = (record, title, isItem) => {
    if (title === "分类名称编辑") {
      const { modalPayload } = this.state;
      this.setState({
        modalPayload: {
          ...modalPayload,
          visible: true,
          title,
          groupId: record.groupId,
          groupName: record.groupName
        }
      });
    } else {
      isItem ? this.getAvailableSalaryItemSet(record, title) : this.getAvailableSalaryGroupSet(record, title);
    }
  };
  getAvailableSalaryItemSet = (record, title) => {
    const payload = {
      salarySobId: this.props.salarySobId,
      existSalaryItemIds: _.map(record.items, it => it.id),
      groupId: record.groupId,
      isReplenish: this.props.isReplenish
    };
    getAvailableSalaryItemSet(payload).then(({ status, data }) => {
      if (status) {
        const { modalPayload } = this.state;
        this.setState({
          modalPayload: {
            ...modalPayload,
            visible: true,
            title,
            groupId: record.groupId,
            options: _.map(data, it => ({ ...it, name: it.name, id: it.salaryItemId }))
          }
        });
      }
    });
  };
  getAvailableSalaryGroupSet = (salarySobId, title) => {
    const { dataList } = this.state;
    const payload = {
      salarySobId,
      existSalaryGroupIds: _.map(dataList, it => it.groupId),
      isReplenish: this.props.isReplenish
    };
    getAvailableSalaryGroupSet(payload).then(({ status, data }) => {
      if (status) {
        const { modalPayload } = this.state;
        this.setState({
          modalPayload: {
            ...modalPayload,
            visible: true,
            title,
            options: _.map(data, it => ({ ...it, name: it.groupName, id: it.groupId }))
          }
        });
      }
    });
  };
  handleChangeClassName = (groupName) => {
    const { modalPayload } = this.state;
    this.setState({
      modalPayload: {
        ...modalPayload,
        groupName
      }
    });
  };
  /*
   * Author: 黎永顺
   * Description:添加薪资项目项
   * Params:
   * Date: 2023/2/2
   */
  handleConfirm = () => {
    const { modalPayload, checkedValue, dataList } = this.state;
    const { options = [], groupId, groupName } = modalPayload;
    if (groupName) {
      this.setState({
        dataList: _.map(dataList, it => {
          if (it.groupId === groupId) {
            return {
              ...it,
              groupName
            };
          }
          return { ...it };
        })
      }, () => {
        this.props.onChangeSalaryItem(this.state.dataList);
        this.handleCloseModal();
      });
    } else {
      this.setState({
        dataList: groupId ? _.map(dataList, it => {
          if (it.groupId === groupId) {
            return {
              ...it,
              items: [...it.items, ..._.filter(options, child => checkedValue.split(",").includes(child.salaryItemId))]
            };
          }
          return { ...it };
        }) : [...dataList, ..._.filter(options, child => checkedValue.split(",").includes(child.groupId))]
      }, () => {
        this.props.onChangeSalaryItem(this.state.dataList);
        this.handleCloseModal();
      });
    }
  };

  render() {
    const { onChangeSalaryItem } = this.props;
    const { dataList, modalPayload, checkedValue } = this.state;
    return (
      <div className="salaryItemSettingWrapper">
        <WeaSortable
          datas={dataList}
          onChange={(list) => onChangeSalaryItem(list)}
          renderNodeItem={(item) => {
            return <div className="salaryItemWrapper">
              <div className="salaryItemHeader">
                <span className="titleWrapper">
                  <span className="salaryClassTitle">{item.groupName}</span>
                  <span className="iconWrapper">
                    <i className="icon-coms-edit" onClick={() => this.handleOpenModal(item, "分类名称编辑")}/>
                    <i className="icon-coms-Delete" onClick={() => this.handleDeleteClick(item)}/>
                  </span>
                </span>
                <i className="icon-coms-Add-to" onClick={() => this.handleOpenModal(item, "请选择薪资项目", true)}/>
              </div>
              <div className="salaryItemContent">
                {
                  !_.isEmpty(item.items) ?
                    <WeaSortable
                      datas={item.items}
                      onChange={(items) => onChangeSalaryItem(
                        _.map(dataList, child => {
                          if (child.id === item.id) {
                            return { ...child, items };
                          }
                          return { ...child };
                        })
                      )}
                      renderNodeItem={(filed) => {
                        return <div className="salaryItemList">
                          <div className="salaryItem">
                            <div className="salaryItemName">{filed.name}</div>
                            <Icon type="cross" onClick={() => this.handleDeleteSalaryItem(item, filed)}/>
                          </div>
                        </div>;
                      }}
                      className="wea-sortable-salary-item"
                    /> :
                    <div className="empty">暂无数据</div>
                }
              </div>
            </div>;
          }}
          className="wea-sortable-salary-item"
        />
        <SalaryItemModal {...modalPayload} onCancel={this.handleCloseModal} onConfirm={this.handleConfirm}>
          <div className="modalContent">
            {
              modalPayload.title === "分类名称编辑" ?
                <WeaFormItem label="分类名称" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
                  <WeaInput value={modalPayload.groupName} onChange={this.handleChangeClassName}/>
                </WeaFormItem>
                : <WeaTransfer
                  data={modalPayload.options}
                  selectedKeys={checkedValue ? checkedValue.split(",") : []}
                  onChange={v => this.setState({ checkedValue: v.join(",") })}
                />
            }
          </div>
        </SalaryItemModal>
      </div>
    );
  }
}

export default SalaryItemSettings;