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: [], //正常工资薪金所得项,
      incomeCategoriesTitleName: "" //薪资项目的薪资类型名称
    };
  }

  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, incomeCategories } = data;
        const obj = {
          uuid: itemGroups.length.toString(),
          itemHide: null,
          quote: null,//中航富士达二开-次月同步勾选框
          items,
          name: "未分类",
          salarySobId,
          sortedIndex: itemGroups.length
        };
        this.setState({
          empFields,
          incomeCategoriesTitleName: incomeCategories[0].name,
          itemGroups: [..._.map(itemGroups, it => ({ ...it, uuid: it.id })), 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(_.map(empFields, (it, idx) => ({ ...it, sortedIndex: idx })), 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.uuid === payload.id) {
            return { ...it, name: payload.name };
          }
          return { ...it };
        })
      }, () => {
        const { empFields, itemGroups } = this.state;
        const { onSaveSalaryItem } = this.props;
        onSaveSalaryItem(empFields, itemGroups);
      });
    } else {
      const obj = {
        uuid: new Date().getTime().toString(),
        itemHide: null,
        quote: 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.uuid !== 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.uuid === id) {
          return {
            ...item,
            items: _.filter(item.items, it => !selectedRowKeys.includes(it.id || it.key)),
            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.uuid === it.uuid) {
          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.uuid === it.uuid) {
          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, insertId) => {
    const { itemGroups } = this.state;
    this.setState({
      itemGroups: _.map(itemGroups, it => {
        if (id === it.uuid) {
          items = _.map(items, child => {
            const { id: itemsId, ...extraItems } = child;
            return { ...extraItems, salaryItemGroupId: it.uuid };
          });
          if (insertId) it.items.splice(_.findIndex(it.items, k => (k.id === insertId) || (k.key === insertId)) + 1, 0, ...items);
          return {
            ...it, items: _.map(insertId ? it.items : [...items, ...it.items], (childItem, childItemIndex) => {
              return { ...childItem, sortedIndex: childItemIndex };
            })
          };
        }
        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.uuid) {
          return { ...it, items };
        }
        return { ...it };
      })
    }, () => {
      const { empFields, itemGroups } = this.state;
      const { onSaveSalaryItem } = this.props;
      onSaveSalaryItem(empFields, itemGroups);
    });
  };
  /*
   * Author: 黎永顺
   * Description:确认移动薪资项目项
   * Params:
   * Date: 2023/3/8
   */
  handleMoveSalaryItem = (moveToItemId, items, titleName) => {
    const { itemGroups } = this.state;
    const { salaryItemGroupId: deleteItemId, id, key } = items;
    if (moveToItemId === deleteItemId || (deleteItemId === "0" && titleName === "未分类")) return;
    this.setState({
      itemGroups: _.map(itemGroups, it => {
        if (moveToItemId === it.uuid) {
          const { id: moveId, ...extraItems } = items;
          return {
            ...it,
            items: [...it.items, {
              ...extraItems,
              salaryItemGroupId: moveToItemId,
              key: moveId ? moveId : items.key,
              sortedIndex: !_.isEmpty(it.items) ? it.items[it.items.length - 1].sortedIndex + 1 : 0
            }]
          };
        }
        if (deleteItemId === it.uuid || deleteItemId === "0") {
          return {
            ...it,
            items: _.filter(it.items, filterItem => (filterItem.id !== id || filterItem.key !== key))
          };
        }
        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, incomeCategoriesTitleName, 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}
          incomeCategoriesTitleName={incomeCategoriesTitleName}
          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}
          onMoveSalaryItem={this.handleMoveSalaryItem}
        />
      </div>
    );
  }
}

export default LedgerSalaryItem;