salary-management-front/pc4mobx/hrmSalary/pages/ledger/step4/RuleEditModal.js

import React from "react";
import { Button, Col, message, Radio, Row } from "antd";
import { WeaDialog, WeaHelpfulTip, WeaSelect } from "ecCom";
import { inject, observer } from "mobx-react";
import { daysOptions } from "../options";
import RequiredLabelTip from "../../../components/requiredLabelTip";
import { notNull } from "../../../util/validate";
import "./index.less";

@inject("ledgerStore")
@observer
export default class RuleEditModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      itemValue: "",
      effectiveDate: "",
      beforeAdjustmentType: 2,
      afterAdjustmentType: 1,
      initedSelect: false
    };
  }

  componentWillMount() {
    const { ledgerStore: { listSalarySobItem } } = this.props;
    listSalarySobItem().then(() => {
      this.setState({
        initedSelect: true
      });
    });
  }

  beforeAdjustmentTypeChange(e) {
    this.setState({ beforeAdjustmentType: e.target.value });
  }

  afterAdjustmentTypeChange(e) {
    this.setState({ afterAdjustmentType: e.target.value });
  }

  validateForm() {
    const { itemValue, effectiveDate, beforeAdjustmentType, afterAdjustmentType } = this.state;
    if (!notNull(itemValue)) {
      message.warning("薪资项目不能为空");
      return false;
    }

    if (!notNull(effectiveDate)) {
      message.warning("计薪规则不能为空");
      return false;
    }

    if (!notNull(beforeAdjustmentType)) {
      message.warning("计薪规则不能为空");
      return false;
    }

    if (!notNull(afterAdjustmentType)) {
      message.warning("计薪规则不能为空");
      return false;
    }

    return true;
  }

  handleSave() {
    if (!this.validateForm()) {
      return;
    }
    const { ledgerStore } = this.props;
    const { ruleOptionList } = ledgerStore;
    let salaryItemName = "";
    ruleOptionList.map(item => {
      if (item.key == this.state.itemValue) {
        salaryItemName = item.showname;
      }
    });

    this.props.onSave({
      salaryItemId: this.state.itemValue,
      dayOfMonth: this.state.effectiveDate,
      beforeAdjustmentType: this.state.beforeAdjustmentType,
      afterAdjustmentType: this.state.afterAdjustmentType,
      salaryItemName
    });

    this.props.onCancel();
  }

  render() {
    const { ledgerStore } = this.props;
    const { ruleOptionList } = ledgerStore;
    const { beforeAdjustmentType, afterAdjustmentType, initedSelect } = this.state;
    return (
      <WeaDialog
        style={{ width: 800 }}
        initLoadCss
        title="调薪计薪规则项"
        visible={this.props.visible}
        onCancel={() => {
          this.props.onCancel();
        }}
        className="rule-modal-wrapper"
        buttons={[<Button
          type="primary"
          onClick={() => {
            this.handleSave();
          }}>保存</Button>]}
      >
        <div style={{ padding: "16px 100px" }}>
          <Row style={{ lineHeight: "40px" }}>
            <Col span={4}>薪资项目:</Col>
            <Col span={16}>
              {
                initedSelect &&
                <WeaSelect
                  style={{ width: "200px" }}
                  viewAttr={3}
                  options={ruleOptionList}
                  value={this.state.itemValue}
                  onChange={(value) => {
                    this.setState({ itemValue: value });
                  }}/>
              }
            </Col>
          </Row>
          <Row style={{ lineHeight: "40px" }}>
            <Col span={4}>计薪规则:</Col>
            <Col span={16}>
              <div className="item">
                <WeaHelpfulTip
                  style={{ marginLeft: "10px" }}
                  width={200}
                  title="该规则适用于一个薪资核算周期内只调整一次薪资或个税扣缴义务人的情况，其他情况默认按照分段计薪规则核算"
                  placement="topLeft"
                />
                <span style={{ margin: "0 10px" }}>如果：调薪生效日期在</span>
                <WeaSelect
                  style={{ width: "100px" }}
                  options={daysOptions}
                  viewAttr={3}
                  value={this.state.effectiveDate}
                  onChange={(value) => {
                    this.setState({ effectiveDate: value });
                  }}/>
                <span>（含）之前</span>
              </div>
              <div>
                计薪规则为：
                <Radio.Group onChange={(value) => {
                  this.beforeAdjustmentTypeChange(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>
                否则：调薪生效日期在 {this.state.effectiveDate} 号之后
              </div>
              <div>
                计薪规则为：
                <Radio.Group onChange={(value) => {
                  this.afterAdjustmentTypeChange(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>
            </Col>
          </Row>
        </div>
      </WeaDialog>
    );
  }
}