salary-management-front/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSalaryItem.js

/*
 * Author: 黎永顺
 * name: 薪资项目
 * Description:
 * Date: 2022/12/13
 */
import React, { Component } from "react";
import LedgerSalaryItemBaseInfo from "./ledgerSalaryItemBaseInfo";
import LedgerSalaryItemNormal from "./ledgerSalaryItemNormal";
import LedgerSalaryItemPreviewModal from "./ledgerSalaryItemPreviewModal";
import { getLedgerItemForm } from "../../../apis/ledger";
import "./index.less";

class LedgerSalaryItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      previewVisible: false, //预览标识
      empFields: [], //员工基本信息
      itemGroups: [] //正常工资薪金所得项
    };
  }

  componentDidMount() {
    this.getLedgerItemForm();
  }

  /*
   * Author: 黎永顺
   * Description: 薪资项目以及员工基本信息查询
   * Params:
   * Date: 2022/12/14
   */
  getLedgerItemForm = () => {
    const { editId: salarySobId, saveSalarySobId } = this.props;
    getLedgerItemForm({ salarySobId: salarySobId || saveSalarySobId }).then(({ status, data }) => {
      if (status) {
        const { empFields, itemGroups, items } = data;
        const obj = {
          id: itemGroups.length,
          itemHide: null,
          items,
          name: "未分类",
          salarySobId,
          sortedIndex: itemGroups.length
        };
        this.setState({ empFields, itemGroups: [...itemGroups, obj] }, () => {
          const { empFields, itemGroups } = this.state;
          const { onSaveSalaryItem } = this.props;
          onSaveSalaryItem(empFields, itemGroups);
        });
      }
    });
  };
  /*
   * Author: 黎永顺
   * Description: 员工基本信息排序
   * Params:
   * Date: 2022/12/14
   */
  handleChangeSortableList = (empFields) => {
    this.setState({ empFields }, () => {
      const { empFields, itemGroups } = this.state;
      const { onSaveSalaryItem } = this.props;
      onSaveSalaryItem(empFields, itemGroups);
    });
  };
  /*
   * Author: 黎永顺
   * Description:编辑保存性子项目分类
   * Params:
   * Date: 2022/12/13
   */
  handleSaveCateGory = (payload) => {
    const { itemGroups } = this.state;
    if (payload.id) {
      this.setState({
        itemGroups: _.map(itemGroups, it => {
          if (it.id === payload.id) {
            return { ...it, name: payload.name };
          }
          return { ...it };
        })
      });
    } else {
      const obj = {
        id: new Date().getTime(),
        itemHide: null,
        items: [],
        name: payload.name
      };
      this.setState({
        itemGroups: _.map([obj, ...itemGroups], (it, idx) => ({ ...it, sortedIndex: idx }))
      }, () => {
        const { empFields, itemGroups } = this.state;
        const { onSaveSalaryItem } = this.props;
        onSaveSalaryItem(empFields, itemGroups);
      });
    }
  };
  /*
   * Author: 黎永顺
   * Description: 删除分类
   * Params:
   * Date: 2022/12/14
   */
  handleDeleteCategroy = (id) => {
    const { itemGroups } = this.state;
    this.setState({
      itemGroups: _.filter(itemGroups, it => it.id !== id)
    }, () => {
      const { empFields, itemGroups } = this.state;
      const { onSaveSalaryItem } = this.props;
      onSaveSalaryItem(empFields, itemGroups);
    });
  };
  /*
   * Author: 黎永顺
   * Description: 删除分类项下的列表数据
   * Params:
   * Date: 2022/12/14
   */
  handleDeleteCategroyItems = (id, selectedRowKeys) => {
    const { itemGroups } = this.state;
    this.setState({
      itemGroups: _.map(itemGroups, item => {
        if (item.id === id) {
          return {
            ...item,
            items: _.filter(item.items, it => !selectedRowKeys.includes(it.id)),
            selectedRowKeys: []
          };
        }
        return { ...item };
      })
    }, () => {
      const { empFields, itemGroups } = this.state;
      const { onSaveSalaryItem } = this.props;
      onSaveSalaryItem(empFields, itemGroups);
    });
  };
  /*
   * Author: 黎永顺
   * Description: 修改信息项目分类的顺序-向上移动
   * Params:
   * Date: 2022/12/14
   */
  handleUpgo = (index) => {
    const { itemGroups } = this.state;
    let newItemGroups = [...itemGroups];
    if (index !== 0) {
      newItemGroups[index] = newItemGroups.splice(index - 1, 1, newItemGroups[index])[0];
    } else {
      newItemGroups.push(newItemGroups.shift());
    }
    this.setState({
      itemGroups: _.map(newItemGroups, (it, idx) => ({
        ...it,
        sortedIndex: idx
      }))
    }, () => {
      const { empFields, itemGroups } = this.state;
      const { onSaveSalaryItem } = this.props;
      onSaveSalaryItem(empFields, itemGroups);
    });
  };
  /*
   * Author: 黎永顺
   * Description: 修改信息项目分类的顺序-向下移动
   * Params:
   * Date: 2022/12/14
   */
  handleDowngo = (index) => {
    const { itemGroups } = this.state;
    let newItemGroups = [...itemGroups];
    if (index !== newItemGroups.length - 1) {
      newItemGroups[index] = newItemGroups.splice(index + 1, 1, newItemGroups[index])[0];
    } else {
      newItemGroups.unshift(newItemGroups.splice(index, 1)[0]);
    }
    this.setState({
      itemGroups: _.map(newItemGroups, (it, idx) => ({
        ...it,
        sortedIndex: idx
      }))
    }, () => {
      const { empFields, itemGroups } = this.state;
      const { onSaveSalaryItem } = this.props;
      onSaveSalaryItem(empFields, itemGroups);
    });
  };
  /*
   * Author: 黎永顺
   * Description: 移動分类下的列表数据\切换薪资分类-隐藏复选框
   * Params:
   * Date: 2022/12/14
   */
  handleDropCategroyItem = (filed, data) => {
    const { itemGroups } = this.state;
    this.setState({
      itemGroups: _.map(itemGroups, it => {
        if (filed.id === it.id) {
          return {
            ...it,
            items: _.map(data, (child, childIndex) => {
              return {
                ...child,
                sortedIndex: childIndex
              };
            })
          };
        }
        return { ...it };
      })
    }, () => {
      const { empFields, itemGroups } = this.state;
      const { onSaveSalaryItem } = this.props;
      onSaveSalaryItem(empFields, itemGroups);
    });
  };
  /*
   * Author: 黎永顺
   * Description: 薪资分类选中复选框
   * Params:
   * Date: 2022/12/14
   */
  handleChangeSelectedRowKeys = (filed, data) => {
    const { itemGroups } = this.state;
    this.setState({
      itemGroups: _.map(itemGroups, it => {
        if (filed.id === it.id) {
          return { ...it, selectedRowKeys: data };
        }
        return { ...it };
      })
    }, () => {
      const { empFields, itemGroups } = this.state;
      const { onSaveSalaryItem } = this.props;
      onSaveSalaryItem(empFields, itemGroups);
    });
  };
  /*
   * Author: 黎永顺
   * Description: 薪资项目-新增项
   * Params:
   * Date: 2022/12/14
   */
  handleAddSalaryItems = (id, items) => {
    const { itemGroups } = this.state;
    this.setState({
      itemGroups: _.map(itemGroups, it => {
        if (id === it.id) {
          return { ...it, items: [...it.items, ...items] };
        }
        return { ...it };
      })
    }, () => {
      const { empFields, itemGroups } = this.state;
      const { onSaveSalaryItem } = this.props;
      onSaveSalaryItem(empFields, itemGroups);
    });
  };
  /*
   * Author: 黎永顺
   * Description: 保存薪资项目公式
   * Params:
   * Date: 2022/12/14
   */
  handleSaveFormnul = (id, items) => {
    const { itemGroups } = this.state;
    this.setState({
      itemGroups: _.map(itemGroups, it => {
        if (id === it.id) {
          return { ...it, items };
        }
        return { ...it };
      })
    }, () => {
      const { empFields, itemGroups } = this.state;
      const { onSaveSalaryItem } = this.props;
      onSaveSalaryItem(empFields, itemGroups);
    });
  };

  /*
   * Author: 黎永顺
   * Description: 员工基本信息-预览
   * Params:
   * Date: 2022/12/14
   */
  handlePreview = () => {
    this.setState({ previewVisible: true });
  };

  render() {
    const { empFields, itemGroups, previewVisible } = this.state;
    return (
      <div className="ledgerSalaryItemWrapper">
        <LedgerSalaryItemBaseInfo
          {...this.props} dataSource={empFields}
          onChangeSortableList={this.handleChangeSortableList}
          onPreview={this.handlePreview}
        />
        <LedgerSalaryItemPreviewModal
          visible={previewVisible}
          empFields={empFields} itemGroups={itemGroups}
          onCancel={() => this.setState({ previewVisible: false })}
        />
        <LedgerSalaryItemNormal
          ref={dom => this.ledgerSalaryItemNormalRef = dom}
          {...this.props} dataSource={itemGroups}
          onSaveCategory={this.handleSaveCateGory}
          onDeleteCategroy={this.handleDeleteCategroy}
          onDeleteCategroyItems={this.handleDeleteCategroyItems}
          onUpgo={this.handleUpgo}
          onDowngo={this.handleDowngo}
          onDropCategoryItem={this.handleDropCategroyItem}
          onHandleItemhide={this.handleDropCategroyItem}
          onChangeSelectedRowKeys={this.handleChangeSelectedRowKeys}
          onAddSalaryItems={this.handleAddSalaryItems}
          onSaveFormnul={this.handleSaveFormnul}
        />
      </div>
    );
  }
}

export default LedgerSalaryItem;