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

/*
 * Author: 黎永顺
 * name: 新增调薪计薪规
 * Description:
 * Date: 2022/12/12
 */
import React, { Component } from "react";
import { WeaDialog, WeaFormItem, WeaHelpfulTip, WeaSearchGroup, WeaSelect } from "ecCom";
import { Button, Modal, Radio } from "antd";
import { monthDays } from "../config";
import { listSalarySobItem } from "../../../apis/ledger";
import "./index.less";

class LedgerAdjustRuleAddModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      beforeAdjustmentType: 2,
      afterAdjustmentType: 1,
      salaryItemId: "",
      salaryItemName: "",
      dayOfMonth: "1",
      salaryItemOptions: []
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visible && nextProps.salarySobId) this.listSalarySobItem(nextProps.salarySobId);
  }

  listSalarySobItem = (salarySobId) => {
    const { salaryRuleItemsList } = this.props;
    const payload = {
      excludeSalaryItemIds: _.map(salaryRuleItemsList, item => item.salaryItemId),
      salarySobId
    };
    listSalarySobItem(payload).then(({ status, data }) => {
      if (status) {
        this.setState({
          salaryItemOptions: _.map(data, it => ({ key: it.salaryItemId.toString(), showname: it.salaryItemName }))
        });
      }
    });
  };
  handleSave = () => {
    const { salaryRuleItemsList, onSave } = this.props;
    const { salaryItemOptions, ...extraItems } = this.state;
    if (_.isEmpty(extraItems.salaryItemId)) {
      Modal.warning({
        title: "信息确认",
        content: "必要信息不完整，红色*为必填项！"
      });
      return;
    }
    const items = { ...extraItems, salaryItemName: this.state.salaryItemName };
    const { salaryItemName, salaryItemId, ...extraFileds } = items;
    const salaryItemNameFiled = salaryItemName.split(","), salaryItemIdFiled = salaryItemId.split(",");
    const fields = _.map(salaryItemNameFiled, (item, index) => {
      return {
        ...extraFileds,
        salaryItemName: item,
        salaryItemId: salaryItemIdFiled[index]
      };
    });
    this.handleReset();
    onSave([...salaryRuleItemsList, ...fields]);
  };
  handleReset = () => {
    this.setState({
      beforeAdjustmentType: 2,
      afterAdjustmentType: 1,
      salaryItemId: "",
      salaryItemName: "",
      dayOfMonth: "1",
      salaryItemOptions: []
    }, () => {
      const { onCancel } = this.props;
      onCancel();
    });
  };


  render() {
    const {
      salaryItemId,
      salaryItemOptions,
      dayOfMonth,
      beforeAdjustmentType,
      afterAdjustmentType
    } = this.state;
    const { title, visible } = this.props;
    const buttons = [<Button type="primary" onClick={this.handleSave}>保存</Button>];
    return (
      <WeaDialog
        initLoadCss
        className="adjustRuleModalWrapper"
        title={title}
        visible={visible}
        style={{ width: 750 }}
        buttons={buttons}
        onCancel={this.handleReset}
      >
        <WeaSearchGroup col={1} needTigger title="" showGroup center>
          <WeaFormItem label="薪资项目" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}
                       style={{ tableLayout: "fixed" }}>
            <WeaSelect
              multiple
              viewAttr={3}
              style={{ width: "350px" }}
              options={salaryItemOptions}
              value={salaryItemId}
              onChange={(salaryItemId, salaryItemName) => this.setState({ salaryItemId, salaryItemName })}
            />
          </WeaFormItem>
          <WeaFormItem label={<AdjustTitle/>} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} colon={false}>
            <div className="adjustRuleDetailWrapper">
              <div className="adjustSalaryFlex">
                <span>如果：调薪生效日期在</span>
                <WeaSelect
                  viewAttr={3}
                  style={{ width: 60, margin: "0 6px" }}
                  value={dayOfMonth}
                  options={monthDays}
                  onChange={(dayOfMonth) => this.setState({ dayOfMonth })}
                />
                <span>（含）之前</span>
              </div>
              <div className="adjustSalaryFlex">
                <span>计薪规则为：</span>
                <Radio.Group onChange={(e) => this.setState({ beforeAdjustmentType: e.target.value })}
                             value={beforeAdjustmentType}>
                  <Radio value={2}>取调整后薪资</Radio>
                  <Radio value={4}>分段计薪<WeaHelpfulTip
                    style={{ marginLeft: "10px" }}
                    width={200}
                    title="=调整前薪资/当月自然日天数*调整前自然日天数+调整后薪资/当月自然日天数*调整后自然日天数"
                    placement="topLeft"
                  /></Radio>
                  <Radio value={3}>取平均<WeaHelpfulTip
                    style={{ marginLeft: "10px" }}
                    width={200}
                    title="=（调整前薪资+调整后薪资）/2"
                    placement="topLeft"
                  />
                  </Radio>
                </Radio.Group>
              </div>
              <div style={{ marginBottom: 10 }}>否则：调薪生效日期在{dayOfMonth}号之后</div>
              <div className="adjustSalaryFlex">
                <span>计薪规则为：</span>
                <Radio.Group onChange={(e) => this.setState({ afterAdjustmentType: e.target.value })}
                             value={afterAdjustmentType}>
                  <Radio value={1}>取调整前薪资</Radio>
                  <Radio value={4}>分段计薪<WeaHelpfulTip
                    style={{ marginLeft: "10px" }}
                    width={200}
                    title="=调整前薪资/当月自然日天数*调整前自然日天数+调整后薪资/当月自然日天数*调整后自然日天数"
                    placement="topLeft"
                  /></Radio>
                  <Radio value={3}>取平均<WeaHelpfulTip
                    style={{ marginLeft: "10px" }}
                    width={200}
                    title="=（调整前薪资+调整后薪资）/2"
                    placement="topLeft"
                  />
                  </Radio>
                </Radio.Group>
              </div>
            </div>
          </WeaFormItem>
        </WeaSearchGroup>
      </WeaDialog>
    );
  }
}

export default LedgerAdjustRuleAddModal;

const AdjustTitle = () => {
  return <div className="titleTipWrapper">
    <span className="title">计薪规则</span>
    <WeaHelpfulTip
      width={200}
      title="该规则适用于一个薪资核算周期内只调整一次薪资或个税扣缴义务人的情况，其他情况默认按照分段计薪规则核算"
      placement="topLeft"
    />
    <span className="title">:</span>
  </div>;
};