salary-management-front/pc4mobx/hrmSalary/pages/ledger/slideBaseForm.js

import React from "react";
import {Col, Row} from "antd";
import {WeaCheckbox, WeaInput, WeaSelect, WeaTextarea} from "ecCom";
import "./index.less";
import TipLabel from "../../components/TipLabel";
import {cycleTypeOption, daysOptions} from "./options";
import {inject, observer} from "mobx-react";
import RequiredLabelTip from "../../components/requiredLabelTip";
import {getAddMonthYearMonth, getCurrentMonth, getCurrentYearMonth, getSubtractMonthYearMonth} from "../../util/date";
import moment from "moment";

@inject("ledgerStore", "taxAgentStore")
@observer
export default class SlideBaseForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      taxableItems: 1
    };
  }

  componentWillMount() {
    const {edit} = this.props;
    const {ledgerStore: {initBaseInfoRequest}} = this.props;
    if (edit) {
      const {ledgerStore: {getLedgerBasicForm}} = this.props;
      getLedgerBasicForm();
    } else {
      initBaseInfoRequest();
    }
  }

  handleChange(params) {
    const {ledgerStore: {baseInfoRequest, setBaseInfoRequest}} = this.props;
    let request = {...baseInfoRequest};
    Object.keys(params).map(key => {
      request[key] = params[key];
    });
    setBaseInfoRequest(request);
  }

  // 获取开始日期
  getStartDate(salaryCycleType, day) {
    day = Number(day);
    return this.getMonth(salaryCycleType) + "-" + (day < 10 ? "0" + day : day);
  }

  // 获取开始月份
  getMonth(salaryCycleType) {
    switch (salaryCycleType) {
      case "1": // 上上月
        return getSubtractMonthYearMonth(2);
      case "2": //  上月
        return getSubtractMonthYearMonth(1);
      case "3": // 本月
        return getCurrentYearMonth();
      case "4": // 下月
        return getAddMonthYearMonth(1);
    }
  }

  initPeriodStr = (periodStrType, type, fromDay) => {
    let str = "", tmpDate = null;
    switch (type) {
      case "1":
        tmpDate = moment().subtract(2, "month");
        const is_31H = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
        if (fromDay == 1) {
          tmpDate = moment().subtract(2, "month").endOf("month");
          str = `至上上月最后一天`;
        } else {
          tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
            .add(is_31H ? 30 : 29, "days");
          str = `至上月${moment(tmpDate).date()}号`;
        }
        break;
      case "2":
        tmpDate = moment().subtract(1, "month");
        const is_31 = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
        if (fromDay == 1) {
          tmpDate = moment().subtract(1, "month").endOf("month");
          str = `至上月最后一天`;
        } else {
          tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
            .add(is_31 ? 30 : 29, "days");
          str = `至本月${moment(tmpDate).date()}号`;
        }
        break;
      case "3":
        tmpDate = moment().add(0, "month");
        const is_31K = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
        if (fromDay == 1) {
          tmpDate = moment().endOf("month");
          str = `至本月最后一天`;
        } else {
          tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
            .add(is_31K ? 30 : 29, "days");
          str = `至下月${moment(tmpDate).date()}号`;
        }
        break;
      case "4":
        tmpDate = moment().add(1, "month");
        const is_31L = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
        if (fromDay == 1) {
          tmpDate = moment().add(1, "month").endOf("month");
          str = `至下月最后一天`;
        } else {
          tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
            .add(is_31L ? 30 : 29, "days");
          str = `至下下月${moment(tmpDate).date()}号`;
        }
        break;
      default:
        break;
    }
    return {
      [periodStrType]: str,
      date: moment(tmpDate).format("YYYY-MM-DD")
    };
  };

  render() {
    const {request, ledgerStore, taxAgentStore, edit} = this.props;
    const {baseInfoRequest} = ledgerStore;
    const {taxAgentAdminOption} = taxAgentStore;
    const {
      canEdit = "true",
      name,
      taxAgentId,
      taxableItems,
      salaryCycleType,
      salaryCycleFromDay,
      taxCycleType,
      attendCycleType,
      attendCycleFromDay,
      socialSecurityCycleType,
      description
    } = baseInfoRequest;
    const salaryCycleStrObj = this.initPeriodStr("salaryCycleStr", salaryCycleType, salaryCycleFromDay);
    const attendCycleStrObj = this.initPeriodStr("attendCycleStr", attendCycleType, attendCycleFromDay);
    return (
      <div className="slideBaseForm">
        <Row>
          <Col span={18}>
            <div className="leftContentWrapper">
              <Row className="formItem">
                <Col span={6}>
                  账套名称
                  <RequiredLabelTip/>
                </Col>
                <Col span={18}>
                  <WeaInput
                    disabled={canEdit !== "true"}
                    style={{width: "190px"}}
                    value={name}
                    onChange={value => {
                      this.handleChange({name: value});
                    }}
                  />
                </Col>
              </Row>
              <Row className="formItem">
                <Col span={6}>
                  个税扣缴义务人
                  <RequiredLabelTip/>
                </Col>
                <Col span={18}>
                  <WeaSelect
                    disabled={taxAgentId ? edit : false}
                    showSearch // 设置select可搜索
                    style={{width: 190}}
                    options={taxAgentAdminOption}
                    value={taxAgentId}
                    onChange={v => {
                      this.handleChange({taxAgentId: v});
                    }}
                  />
                </Col>
              </Row>
              <Row className="formItem">
                <Col span={6}>
                  薪资类型
                  <RequiredLabelTip/>
                </Col>
                <Col span={18}>
                  <WeaSelect
                    disabled={edit}
                    options={[
                      {
                        key: "1",
                        selected: true,
                        showname: "正常工资薪金所得"
                      },
                      {
                        key: "4",
                        selected: false,
                        showname: "劳务报酬所得"
                      },
                    ]}
                    style={{width: "190px"}}
                    value={taxableItems}
                    onChange={value => {
                      this.handleChange({taxableItems: value});
                    }}
                  />
                </Col>
              </Row>
              <Row className="formItem">
                <Col span={6}>
                  薪资周期
                  <RequiredLabelTip/>
                </Col>
                <Col span={18}>
                  <WeaSelect
                    disabled={canEdit !== "true"}
                    options={cycleTypeOption}
                    style={{width: "90px"}}
                    value={salaryCycleType}
                    onChange={value => {
                      this.handleChange({salaryCycleType: value});
                    }}
                  />
                  <WeaSelect
                    disabled={canEdit !== "true"}
                    options={daysOptions}
                    style={{width: "90px", marginLeft: "10px"}}
                    value={salaryCycleFromDay}
                    onChange={value => {
                      this.handleChange({salaryCycleFromDay: value});
                    }}
                  />
                  <span style={{marginLeft: "10px"}}>{salaryCycleStrObj.salaryCycleStr}</span>
                </Col>
              </Row>
              <Row className="formItem">
                <Col span={6}>
                  税款所属期
                  <RequiredLabelTip/>
                </Col>
                <Col span={18}>
                  <WeaSelect
                    disabled={canEdit !== "true"}
                    options={cycleTypeOption}
                    style={{width: "90px"}}
                    value={taxCycleType}
                    onChange={value => {
                      this.handleChange({taxCycleType: value});
                    }}
                  />
                </Col>
              </Row>
              <Row className="formItem">
                <Col span={6}>
                  考勤周期
                  <RequiredLabelTip/>
                </Col>
                <Col span={18}>
                  <WeaSelect
                    disabled={canEdit !== "true"}
                    options={cycleTypeOption}
                    style={{width: "90px"}}
                    value={attendCycleType}
                    onChange={value => {
                      this.handleChange({attendCycleType: value});
                    }}
                  />
                  <WeaSelect
                    disabled={canEdit !== "true"}
                    options={daysOptions}
                    style={{width: "90px", marginLeft: "10px"}}
                    value={attendCycleFromDay}
                    onChange={value => {
                      this.handleChange({attendCycleFromDay: value});
                    }}
                  />
                  <span style={{marginLeft: "10px"}}>{attendCycleStrObj.attendCycleStr}</span>
                </Col>
              </Row>
              <Row className="formItem">
                <Col span={6}>
                  福利台账月份
                  <RequiredLabelTip/>
                </Col>
                <Col span={18}>
                  <WeaSelect
                    disabled={canEdit !== "true"}
                    options={cycleTypeOption}
                    style={{width: "90px"}}
                    value={socialSecurityCycleType}
                    onChange={value => {
                      this.handleChange({socialSecurityCycleType: value});
                    }}
                  />
                </Col>
              </Row>

              <Row className="formItem">
                <Col span={6}>
                  核算人员范围
                  <RequiredLabelTip/>
                </Col>
                <Col span={18}>
                  <WeaCheckbox
                    value={true}
                    viewAttr={1}
                    content="【起薪日期≤薪资周期止】且【最后发薪日期≥薪资周期起】"
                  />
                </Col>
              </Row>
              <Row className="formItem">
                <Col span={6}>备注</Col>
                <Col span={18}>
                  <WeaTextarea
                    disabled={canEdit !== "true"}
                    style={{width: "190px"}}
                    value={description}
                    onChange={value => {
                      this.handleChange({description: value});
                    }}
                  />
                </Col>
              </Row>
            </div>
          </Col>
          <Col span={6}>
            <div className="rightContentWrapper">
              <TipLabel title="月份周期说明">
                <p className="greytip">
                  例：薪资所属月是
                  <span className="higelinered">{getCurrentYearMonth()}</span>
                  （即核算员工
                  <span className="higelinered">{getCurrentMonth()}</span>
                  月的工资）
                </p>
                <p className="greytip">根据您当前的选择，相应的周期为：</p>
                <div className="tipLabel">薪资周期</div>
                <p className="greytip">
                  <span className="higelinered">
                    {this.getStartDate(salaryCycleType, salaryCycleFromDay)}
                  </span>
                  至
                  <span className="higelinered">
                    {salaryCycleStrObj.date}
                  </span>
                </p>
                <div className="tipLabel">税款所属期</div>
                <p className="greytip higelinered">
                  {this.getMonth(taxCycleType)}
                </p>
                <div className="tipLabel">考勤取值周期</div>
                <p className="greytip">
                  <span className="higelinered">
                    {this.getStartDate(attendCycleType, attendCycleFromDay)}
                  </span>
                  至
                  <span className="higelinered">
                    {attendCycleStrObj.date}
                  </span>
                </p>
                <div className="tipLabel">福利台账月份</div>
                <p className="greytip">
                  引用
                  <span className="higelinered">
                    {this.getMonth(socialSecurityCycleType)}
                  </span>
                  的福利台账数据
                </p>
              </TipLabel>
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}