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

/*
 * Author: 黎永顺
 * name: 调薪计薪规则
 * Description:
 * Date: 2022/12/12
 */
import React, { Component } from "react";
import { WeaButtonIcon, WeaTab, WeaTable } from "ecCom";
import { Modal } from "antd";
import LedgerAdjustRuleAddModal from "./ledgerAdjustRuleAddModal";
import { listAdjustmentRule } from "../../../apis/ledger";

class LedgerSalaryAdjustmentRules extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      adjustRuleAddModal: {
        visible: false,
        title: "调薪计薪规则项",
        salarySobId: ""
      }
    };
  }

  componentDidMount() {
    this.listAdjustmentRule();
  }

  listAdjustmentRule = () => {
    const { editId: salarySobId, saveSalarySobId } = this.props;
    listAdjustmentRule({ salarySobId: salarySobId || saveSalarySobId }).then(({ status, data }) => {
      if (status) {
        this.setState({
          dataSource: data
        }, () => {
          const { onSaveParams } = this.props;
          const { dataSource } = this.state;
          onSaveParams(dataSource);
        });
      }
    });
  };
  handleAddAdjustRule = () => {
    const { adjustRuleAddModal } = this.state;
    const { editId, saveSalarySobId } = this.props;
    this.setState({
      adjustRuleAddModal: {
        ...adjustRuleAddModal,
        visible: true,
        salarySobId: editId || saveSalarySobId
      }
    });
  };
  handleCloseModal = () => {
    const { adjustRuleAddModal } = this.state;
    this.setState({
      adjustRuleAddModal: {
        ...adjustRuleAddModal,
        visible: false,
        salarySobId: ""
      }
    });
  };
  handleDelete = (index) => {
    const { dataSource } = this.state;
    Modal.confirm({
      title: "信息确认",
      content: "确认要删除吗?",
      onOk: () => {
        this.setState({
          dataSource: _.filter(dataSource, (it, idx) => idx !== index)
        }, () => {
          const { onSaveParams } = this.props;
          const { dataSource } = this.state;
          onSaveParams(dataSource);
        });
      }
    });
  };
  convertAdjustmentType = (index) => {
    const nameList = {
      1: "取调薪前薪资",
      2: "取调薪后薪资",
      3: "平均值",
      4: "分段计薪"
    };
    return nameList[Number(index)];
  };

  render() {
    const { record, editId, onSaveParams } = this.props;
    const { adjustRuleAddModal } = this.state;
    const { dataSource } = this.state;
    const showOperateBtn = editId ? record.opts.includes("admin") : true;
    const btns = showOperateBtn ? [
      <WeaButtonIcon buttonType="add" type="primary" onClick={this.handleAddAdjustRule}/>
    ] : [];
    const columns = [
      {
        dataIndex: "salaryItemName",
        title: "薪资项目",
        render: (text) => {
          return <span className="tdEllipsis" title={text}>{text}</span>;
        }
      },
      {
        dataIndex: "salaryCalculationRules",
        title: "计薪规则",
        render: (text, record) => {
          const salaryCalculationRules = `${record.dayOfMonth}号（含）之前调薪，${this.convertAdjustmentType(record.beforeAdjustmentType)}；${record.dayOfMonth}号之后调薪，${this.convertAdjustmentType(record.afterAdjustmentType)}`;
          return <span className="tdEllipsis" title={salaryCalculationRules}>{salaryCalculationRules}</span>;
        }
      },
      {
        dataIndex: "",
        title: "操作",
        width: 80,
        render: (text, record, index) => {
          return showOperateBtn ?
            <a href="javascript: void(0);" onClick={() => this.handleDelete(index)}>删除</a> : <span></span>;
        }
      }
    ];
    return (
      <div>
        <WeaTab datas={[]} keyParam="viewcondition" buttons={btns}/>
        <WeaTable
          rowKey="id"
          dataSource={dataSource}
          columns={columns}
          pagination={false}
        />
        <LedgerAdjustRuleAddModal
          {...adjustRuleAddModal}
          salaryRuleItemsList={dataSource}
          onCancel={this.handleCloseModal}
          onSave={(dataSource) => {
            this.setState({ dataSource }, () => {
              const { dataSource } = this.state;
              const ruleParams = _.map(dataSource, it => {
                const { salaryCalculationRules, ...params } = it;
                return { ...params };
              });
              onSaveParams(ruleParams);
            });
          }}
        />
      </div>
    );
  }
}

export default LedgerSalaryAdjustmentRules;