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 "./index.less";
import FormalFormModal from "../../salaryItem/formalFormModal";

@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: ""
    };
  }

  componentWillUnmount() {
    this.handleResetFormnul();
  }

  handleEditFormnul = (field, record) => {
    const { valueType, formulaId, dateType: dataType, id } = record;
    const { editFormulModal } = this.state;
    this.setState({
      editFormulModal: {
        ...editFormulModal,
        visible: true,
        valueType, formulaId, dataType
      },
      formnulField: field,
      formnulId: id
    });
  };
  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) {
        return { ...it, formulaId: data.id, formulaContent: data.formula };
      }
      return { ...it };
    });
    onSaveFormnul(formnulField.id, 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: ""
    });
  };

  render() {
    const {
      dataSource,
      onSaveCategory,
      onDropCategoryItem,
      onHandleItemhide,
      onChangeSelectedRowKeys,
      onAddSalaryItems
    } = this.props;
    const { categoryModal, addCategoryItemsVisible, editFormulModal } = this.state;
    return (
      <WeaSearchGroup needTigger={false} showGroup title={<TitleComp onAddCategory={this.handleAddCategory}/>}>
        <div className="categroyListWrapper">
          {
            _.map(dataSource, field => {
              const { items } = field;
              return <WeaSearchGroup
                needTigger showGroup
                title={
                  <TitleNormalComp
                    {...field}
                    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}
                  onDropCategoryItem={(data) => onDropCategoryItem(field, data)}
                  onHandleItemhide={(data) => onHandleItemhide(field, data)}
                  onChangeSelectedRowKeys={(data) => onChangeSelectedRowKeys(field, data)}
                  onEditFormnul={(data) => this.handleEditFormnul(field, data)}
                />
              </WeaSearchGroup>;
            })
          }
          <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, id, onUpgo,
    onDowngo, selectedRowKeys = [], onDeleteCategoryItems,
    onAddCategoryItems
  } = props;
  return <div className="titleNormalWrapper">
    <div className="titleWrapper">
      <span>{name}</span>
      {
        name !== "未分类" &&
        <i className="icon-coms-edit" title="编辑" onClick={() => onEditCategory(name, id)}/>
      }
      {
        name !== "未分类" &&
        <i className="icon-coms-Delete" title="删除" onClick={() => onDeleteCategory(id)}/>
      }
      {
        sortedIndex !== 0 &&
        <i className="icon-coms-Reverse" title="向上移动" onClick={() => onUpgo(sortedIndex)}/>
      }
      {
        sortedIndex !== dataSourceLen - 1 &&
        <i className="icon-coms-positive-sequence" title="向下移动" onClick={() => onDowngo(sortedIndex)}/>
      }
    </div>
    <div className="titleBtnWrapper">
      <WeaButtonIcon buttonType="del" type="primary" disabled={_.isEmpty(selectedRowKeys)}
                     onClick={() => onDeleteCategoryItems(id, selectedRowKeys)}/>
      <WeaButtonIcon buttonType="add" type="primary" onClick={() => onAddCategoryItems(id)}/>
    </div>
  </div>;
};

const TitleComp = (props) => {
  const { onAddCategory } = props;
  return <div className="titleWrapper">
    <span>正常工资薪金所得</span>
    <Button type="ghost" onClick={() => onAddCategory()}>新增分类</Button>
  </div>;
};