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

/*
 * Author: 黎永顺
 * name: 薪资项目-正常薪资所得
 * Description:
 * Date: 2022/12/13
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaButtonIcon, WeaSearchGroup } from "ecCom";
import { Button, Modal } from "antd";
import CategoryAddModal from "./categoryAddModal";
import LedgerSalaryItemAddModal from "./ledgerSalaryItemAddModal";
import LedgerSalaryItemTable from "./ledgerSalaryItemTable";
import FormalFormModal from "../../salaryItem/formalFormModal";
import LedgerMovoTo from "./ledgerMovoTo";
import "./index.less";

@inject("ledgerStore")
@observer
class LedgerSalaryItemNormal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      addCategoryItemsVisible: false,
      categoryModal: {
        visible: false,
        title: "新增分类",
        name: "",
        id: ""
      },
      editFormulModal: {
        visible: false,
        formulaId: "",
        valueType: "",
        dataType: ""
      },
      //公式保存数据
      formnulField: {},
      formnulId: "",
      moveModalPayload: {
        visible: false, title: "",
        dataList: [], record: null, value: ""
      }
    };
  }

  componentWillUnmount() {
    this.handleResetFormnul();
  }

  handleEditFormnul = (field, record) => {
    const { valueType, formulaId, dateType: dataType, id, key } = record;
    const { editFormulModal } = this.state;
    this.setState({
      editFormulModal: {
        ...editFormulModal,
        visible: true,
        valueType, formulaId, dataType
      },
      formnulField: field,
      formnulId: id || key
    });
  };
  handleSaveFormnul = (data) => {
    const { onSaveFormnul } = this.props;
    const { formnulField, formnulId } = this.state;
    const tmpV = _.cloneDeep(formnulField.items);
    const formnulData = _.map(tmpV, it => {
      if (it.id === formnulId || it.key === formnulId) {
        return { ...it, formulaId: data.id, formulaContent: data.formula };
      }
      return { ...it };
    });
    onSaveFormnul(formnulField.uuid, formnulData);
  };
  handleAddCategory = (name = "", id = "") => {
    const { categoryModal } = this.state;
    this.setState({
      categoryModal: {
        ...categoryModal,
        visible: true,
        name,
        title: name ? "编辑分类" : "新增分类",
        id
      }
    });
  };
  handleDeleteCategory = (id) => {
    const { onDeleteCategroy } = this.props;
    Modal.confirm({
      title: "信息确认",
      content: "确认要删除吗?",
      onOk: () => {
        onDeleteCategroy(id);
      }
    });
  };
  handleDeleteCategoryItems = (id, selectedRowKeys) => {
    const { onDeleteCategroyItems } = this.props;
    Modal.confirm({
      title: "信息确认",
      content: "确认删除所选薪资项目吗？删除后此项目下的进位规则/保留小数位/公式内容会一起被清除!",
      onOk: () => {
        onDeleteCategroyItems(id, selectedRowKeys);
      }
    });
  };
  handleUpgo = (sortedIndex) => {
    const { onUpgo } = this.props;
    onUpgo(sortedIndex);
  };
  handleDowngo = (sortedIndex) => {
    const { onDowngo } = this.props;
    onDowngo(sortedIndex);
  };
  handleClose = () => {
    const { ledgerStore } = this.props;
    const { categoryForm: form } = ledgerStore;
    const { categoryModal } = this.state;
    this.setState({
      categoryModal: {
        ...categoryModal,
        visible: false,
        title: "新增分类",
        name: "",
        id: ""
      }
    }, () => form.resetForm());
  };
  handleCloseFormnul = () => {
    const { editFormulModal } = this.state;
    this.setState({
      editFormulModal: {
        ...editFormulModal,
        visible: false,
        formulaId: "",
        valueType: "", dataType: ""
      }
    });
  };
  handleResetFormnul = () => {
    this.setState({
      formnulField: {},
      formnulId: ""
    });
  };
  handleCancelMove = () => {
    this.setState({
      moveModalPayload: {
        visible: false, title: "",
        dataList: [], value: "",
        record: null
      }
    });
  };
  handleChangeMoveVal = (value) => {
    const { moveModalPayload } = this.state;
    this.setState({
      moveModalPayload: {
        ...moveModalPayload, value
      }
    });
  };
  handleMoveTo = (record) => {
    const { salaryItemGroupId } = record;
    const { dataSource } = this.props;
    this.setState({
      moveModalPayload: {
        visible: true,
        title: "移动到",
        value: salaryItemGroupId !== "0" ? salaryItemGroupId : (_.find(dataSource, it => it.name === "未分类").id || _.find(dataSource, it => it.name === "未分类").uuid),
        record,
        dataList: _.map(dataSource, item => ({ key: item.id || item.uuid, showname: item.name }))
      }
    });
  };
  handleSubmitMoveTo = () => {
    const { onMoveSalaryItem, dataSource } = this.props;
    const { moveModalPayload } = this.state;
    const { record, value } = moveModalPayload;
    this.handleCancelMove();
    onMoveSalaryItem(value, record, _.find(dataSource, it => (it.id === value || it.uuid === value)).name);
  };

  render() {
    const {
      dataSource,
      onSaveCategory,
      onDropCategoryItem,
      onHandleItemhide,
      onChangeSelectedRowKeys,
      onAddSalaryItems,
      incomeCategoriesTitleName,
      taxAgentStore
    } = this.props;
    const { showOperateBtn } = taxAgentStore;
    const { categoryModal, addCategoryItemsVisible, editFormulModal, moveModalPayload } = this.state;
    return (
      <WeaSearchGroup needTigger={false} showGroup
                      title={<TitleComp showOperateBtn={showOperateBtn} titleName={incomeCategoriesTitleName}
                                        onAddCategory={this.handleAddCategory}/>}>
        <div className="categroyListWrapper">
          {
            _.map(dataSource, field => {
              const { items } = field;
              return <WeaSearchGroup
                needTigger showGroup
                title={
                  <TitleNormalComp
                    {...field}
                    showOperateBtn={showOperateBtn}
                    dataSourceLen={dataSource.length}
                    onEditCategory={this.handleAddCategory}
                    onDeleteCategory={this.handleDeleteCategory}
                    onDeleteCategoryItems={this.handleDeleteCategoryItems}
                    onAddCategoryItems={(id) => this.setState({ addCategoryItemsVisible: { visible: true, id } })}
                    onUpgo={this.handleUpgo}
                    onDowngo={this.handleDowngo}
                  />
                }
              >
                <LedgerSalaryItemTable
                  dataSource={items}
                  selectedRowKeys={field.selectedRowKeys || []}
                  onDropCategoryItem={(data) => onDropCategoryItem(field, data)}
                  onHandleItemhide={(data) => onHandleItemhide(field, data)}
                  onChangeSelectedRowKeys={(data) => onChangeSelectedRowKeys(field, data)}
                  onEditFormnul={(data) => this.handleEditFormnul(field, data)}
                  onMoveTo={this.handleMoveTo}
                />
              </WeaSearchGroup>;
            })
          }
          <LedgerMovoTo
            {...moveModalPayload}
            onCancel={this.handleCancelMove}
            onChangeMoveVal={this.handleChangeMoveVal}
            onSubmitMoveTo={this.handleSubmitMoveTo}
          />
          <LedgerSalaryItemAddModal
            {...addCategoryItemsVisible}
            itemGroups={dataSource}
            onCancel={() => this.setState({ addCategoryItemsVisible: { visible: false, id: "" } })}
            onAddSalaryItems={onAddSalaryItems}
          />
          <CategoryAddModal
            {...categoryModal}
            onSaveCategory={onSaveCategory}
            onCancel={this.handleClose}
          />
          {/*公式编辑*/}
          {
            editFormulModal.visible &&
            <FormalFormModal
              {...editFormulModal}
              onSaveFormal={this.handleSaveFormnul}
              onCancel={this.handleCloseFormnul}
            />
          }
        </div>
      </WeaSearchGroup>
    );
  }
}

export default LedgerSalaryItemNormal;
const TitleNormalComp = (props) => {
  const {
    name, onEditCategory, onDeleteCategory,
    sortedIndex, dataSourceLen, uuid, onUpgo,
    onDowngo, selectedRowKeys = [], onDeleteCategoryItems,
    onAddCategoryItems, items, showOperateBtn
  } = props;
  return <div className="titleNormalWrapper">
    <div className="titleWrapper">
      <span>{name}</span>
      {
        name !== "未分类" && showOperateBtn &&
        <i className="icon-coms-edit" title="编辑" onClick={() => onEditCategory(name, uuid)}/>
      }
      {
        name !== "未分类" && _.isEmpty(items) && showOperateBtn &&
        <i className="icon-coms-Delete" title="删除" onClick={() => onDeleteCategory(uuid)}/>
      }
      {
        sortedIndex !== 0 && showOperateBtn &&
        <i className="icon-coms-Reverse" title="向上移动" onClick={() => onUpgo(sortedIndex)}/>
      }
      {
        sortedIndex !== dataSourceLen - 1 && showOperateBtn &&
        <i className="icon-coms-positive-sequence" title="向下移动" onClick={() => onDowngo(sortedIndex)}/>
      }
    </div>
    <div className="titleBtnWrapper">
      {
        showOperateBtn && <React.Fragment>
          <WeaButtonIcon buttonType="del" type="primary" disabled={_.isEmpty(selectedRowKeys)}
                         onClick={() => onDeleteCategoryItems(uuid, selectedRowKeys)}/>
          <WeaButtonIcon buttonType="add" type="primary" onClick={() => onAddCategoryItems(uuid)}/>
        </React.Fragment>
      }
    </div>
  </div>;
};

const TitleComp = (props) => {
  const { onAddCategory, titleName, showOperateBtn } = props;
  return <div className="titleWrapper">
    <span>{titleName}</span>
    {
      showOperateBtn &&
      <Button type="ghost" onClick={() => onAddCategory()}>新增分类</Button>
    }
  </div>;
};