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

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

@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);
    }
  }

  render() {
    const { request, ledgerStore, taxAgentStore, edit } = this.props;
    const { baseInfoRequest } = ledgerStore;
    const { taxAgentOption } = taxAgentStore;
    const {
      canEdit = "true",
      name,
      taxAgentId,
      taxableItems,
      salaryCycleType,
      salaryCycleFromDay,
      taxCycleType,
      attendCycleType,
      attendCycleFromDay,
      socialSecurityCycleType,
      description,
    } = baseInfoRequest;
    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={canEdit !== "true" || (taxAgentId ? edit : false)}
                    showSearch // 设置select可搜索
                    style={{ width: 190 }}
                    options={taxAgentOption}
                    value={taxAgentId}
                    onChange={(v) => {
                      this.handleChange({ taxAgentId: v });
                    }}
                  />
                </Col>
              </Row>
              <Row className="formItem">
                <Col span={6}>
                  薪资类型
                  <RequiredLabelTip />
                </Col>
                <Col span={18}>
                  <WeaSelect
                    disabled={canEdit !== "true"}
                    options={[
                      {
                        key: "1",
                        selected: true,
                        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" }}>至本月最后一天</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" }}>至本月最后一天</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">
                    {this.getMonth(salaryCycleType)}-30
                  </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">
                    {this.getMonth(attendCycleType)}-30
                  </span>
                </p>
                <div className="tipLabel">福利台账月份</div>
                <p className="greytip">
                  引用
                  <span className="higelinered">
                    {this.getMonth(socialSecurityCycleType)}
                  </span>
                  的福利台账数据
                </p>
              </TipLabel>
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}