salary-management-front/pc4mobx/hrmSalary/pages/socialSecurityBenefits/archives/socialSecurityForm.js

import React from "react";
import GroupCard from "../../../components/groupCard";
import { Col, Row } from "antd";
import { WeaCheckbox, WeaDatePicker, WeaInput, WeaInputNumber, WeaSelect } from "ecCom";
import { inject, observer } from "mobx-react";
import cs from "classnames";
import "./index.less";

@inject("archivesStore")
@observer
export default class SocialSecurityForm extends React.Component {
  componentWillMount() {
    const { archivesStore } = this.props;
    const { getBaseForm, getPaymentForm } = archivesStore;
    const siSchemeId = this.props.record.siSchemeId;
    getBaseForm(this.props.employeeId, "SOCIAL_SECURITY", this.props.record.paymentOrganization);
    getPaymentForm(this.props.employeeId, "SOCIAL_SECURITY", siSchemeId, this.props.record.paymentOrganization);
  }

  // 表单变化
  handleFormChange(params) {
    const { archivesStore: { socialSecurityForm, setSocialSecurityForm }, onChangeRecordSchemeId } = this.props;
    const { data } = socialSecurityForm;
    let request = { ...data, ...params };
    let form = { ...socialSecurityForm };
    form.data = request;
    setSocialSecurityForm(form);
    Object.keys(params).length > 1 &&
    onChangeRecordSchemeId(params.socialSchemeId);
  }

  // 获取基数表单
  handleFetchPaymentForm(value) {
    const { archivesStore: { getPaymentForm } } = this.props;
    getPaymentForm(this.props.employeeId, "SOCIAL_SECURITY", value, this.props.record.paymentOrganization);
  }

  //基数变化
  handlePaymentChange(params) {
    const { archivesStore: { socialSecurityPaymentForm, setSocialSecurityPaymentForm } } = this.props;
    const { data } = socialSecurityPaymentForm;
    let request = { ...data, ...params };
    let form = { ...socialSecurityPaymentForm };
    form.data = request;
    setSocialSecurityPaymentForm(form);
  }

  render() {
    const { archivesStore: { socialSecurityForm, socialSecurityPaymentForm } } = this.props;
    const { items } = socialSecurityForm;
    let baseData = socialSecurityForm.data;
    let paymentData = socialSecurityPaymentForm.data;
    let paymentItems = socialSecurityPaymentForm.items;
    // Integer数据转为string
    let data = { ...baseData };
    if (data) {
      Object.keys(data).map(key => {
        if (data[key]) {
          data[key] = data[key].toString();
        }
      });
    }
    return (
      <div className="socialFormWrapper">
        <div style={{ overflow: "hidden" }}>
          <WeaCheckbox
            style={{ float: "right", marginRight: "10px", marginTop: "10px" }}
            value={data && data.nonPayment}
            id="nonPayment"
            content="暂不缴纳"
            onChange={(value) => {
              this.handleFormChange({ nonPayment: value });
            }}
          />
        </div>
        <GroupCard title="社保基础信息">
          <Row>
            <Col span={6} className="formItem borderR-none borderB-none">社保起始缴纳月：</Col>
            <Col span={6} className="formItem borderR-none borderB-none">
              <WeaDatePicker
                viewAttr={(socialSecurityForm.data && socialSecurityForm.data.socialSchemeId) ? 3 : 2}
                format="YYYY-MM"
                value={data && data.socialStartTime}
                onChange={value => {
                  this.handleFormChange({ socialStartTime: value });
                }}
              />
            </Col>
            <Col span={6} className="formItem borderR-none borderB-none">社保方案名称：</Col>
            <Col span={6} className="formItem">
              <WeaSelect
                options={(items && items[0].items && items[0].items[0]) ? [{
                  key: "",
                  showname: ""
                }, ...items[0].items[0].options] : []}
                value={data && data.socialSchemeId}
                style={{ width: "100%" }}
                onChange={(value, showName) => {
                  this.handleFormChange({ socialName: showName, socialSchemeId: value });
                  this.handleFetchPaymentForm(value);
                }}
              />
            </Col>
          </Row>
          <Row>
            <Col span={6} className="formItem borderR-none borderB-none">社保最后缴纳月：</Col>
            <Col span={6} className="formItem borderR-none borderB-none">
              <WeaDatePicker
                format="YYYY-MM"
                value={data && data.socialEndTime}
                onChange={value => this.handleFormChange({ socialEndTime: value })}
              />
            </Col>
            <Col span={6} className="formItem borderR-none">社保账号：</Col>
            <Col span={6} className="formItem">
              <WeaInput value={data && data.schemeAccount} onChange={(value) => {
                this.handleFormChange({ schemeAccount: value });
              }}/>
            </Col>
          </Row>
          <Row>
            {/*<Col span={6} className="formItem borderR-none">个税扣缴义务人：</Col>*/}
            {/*<Col span={6} className="formItem borderR-none">*/}
            {/*  <Select*/}
            {/*    defaultValue={data && data.paymentOrganization}*/}
            {/*    value={data && data.paymentOrganization}*/}
            {/*    style={{ width: "100%" }}*/}
            {/*    notFoundContent={"暂无数据"}*/}
            {/*    onChange={(value) => this.handleFormChange({ paymentOrganization: value })}>*/}
            {/*    {*/}
            {/*      items && items[0].items && items[0].items[1] && items[0].items[1].options.map(item => (*/}
            {/*        <Option value={item.key}>{item.showname}</Option>*/}
            {/*      ))*/}
            {/*    }*/}
            {/*  </Select>*/}
            {/*</Col>*/}
            <Col span={6} className="formItem borderR-none">社保个人实际承担方：</Col>
            <Col span={6} className="formItem">
              <WeaSelect
                options={(items && items[0].items && items[0].items[2]) ? items[0].items[2].options : []}
                value={data && data.underTake}
                style={{ width: "100%" }}
                onChange={(value) => {
                  this.handleFormChange({ underTake: value });
                }}
              />
            </Col>
          </Row>
        </GroupCard>

        {
          data.socialSchemeId && paymentItems && paymentItems.map(group => (
            <div>
              {
                group.items && group.items.length > 0 && <GroupCard title={group.title}>
                  <Row>
                    {
                      group.items && group.items.map((item, idx) => (
                        <Col span={12}>
                          <Row>
                            <Col span={12}
                                 className={cs("formItem", "borderR-none", { "borderB-none": idx !== group.items.length - 1 && idx !== group.items.length - 2 })}>{item.label}：</Col>
                            <Col span={12} className={cs("formItem", {
                              "borderR-none": idx === 0 || idx === 2,
                              "borderB-none": idx === 0 || idx === 2 || idx === 1
                            })}>
                              <WeaInputNumber
                                min={0}
                                precision={2}
                                value={(paymentData && paymentData[item.domkey[0]]) ? Number(paymentData[item.domkey[0]]) : 0}
                                onChange={(value) => {
                                  this.handlePaymentChange({ [item.domkey[0]]: value ? String(value) : '0' });
                                }}
                              />
                            </Col>
                          </Row>
                        </Col>
                      ))
                    }
                  </Row>
                </GroupCard>
              }
            </div>
          ))
        }
      </div>
    );
  }
}