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

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

@inject("archivesStore")
@observer
export default class OtherForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inited: false
    };
  }

  componentWillMount() {
    const { archivesStore: { getBaseForm, getPaymentForm } } = this.props;
    getBaseForm(this.props.employeeId, "OTHER", this.props.record.paymentOrganization);
    getPaymentForm(this.props.employeeId, "OTHER", this.props.record.otherSchemeId, this.props.record.paymentOrganization);
  }

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

  // 表单变化
  handleFormChange(params) {
    const { archivesStore: { otherForm, setOtherForm }, onChangeRecordOtherSchemeId } = this.props;
    const { data } = otherForm;
    let request = { ...data, ...params };
    let form = { ...otherForm };
    form.data = request;
    setOtherForm(form);
    Object.keys(params).length>1 &&
    onChangeRecordOtherSchemeId(params.otherSchemeId)
  }

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

  render() {
    const { archivesStore: { otherForm, otherPaymentForm } } = this.props;
    const { items } = otherForm;
    let baseData = otherForm.data;
    let data = { ...baseData };
    let paymentData = otherPaymentForm.data;
    let paymentItems = otherPaymentForm.items;
    // Integer数据转为string
    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={(otherForm.data && otherForm.data.otherSchemeId) ? 3 : 2}
                format="yyyy-MM"
                value={data && data.otherStartTime}
                onChange={value => this.handleFormChange({ otherStartTime: value })}
              />
            </Col>
            <Col span={6} className="formItem borderR-none borderB-none">其他福利方案名称：</Col>
            <Col span={6} className="formItem borderB-none">
              <WeaSelect
                options={(items && items[0].items && items[0].items[0]) ? [{
                  key: "",
                  showname: ""
                }, ...items[0].items[0].options] : []}
                value={data && data.otherSchemeId}
                style={{ width: "100%" }}
                onChange={(value, showname) => {
                  this.handleFormChange({ otherName: showname, otherSchemeId: value });
                  this.handleFetchPaymentForm(value);
                }}/>
            </Col>
          </Row>
          <Row>
            <Col span={6} className="formItem borderR-none">其他福利最后缴纳月：</Col>
            <Col span={6} className="formItem borderR-none">
              <WeaDatePicker
                format="yyyy-MM"
                value={data && data.otherEndTime}
                onChange={value => this.handleFormChange({ otherEndTime: value })}
              />
            </Col>
            <Col span={6} className="formItem borderR-none"><span
              title="其他福利个人实际承担方">其他福利个人实际承担方：</span></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>
          {/*<Row>*/}
          {/*<Col span={6} className="formItem">社保缴纳组织：</Col>*/}
          {/*<Col span={6} className="formItem">*/}
          {/*    <Select defaultValue={data && data.paymentOrganization} */}
          {/*        notFoundContent="暂无数据" value={data && data.paymentOrganization} style={{ width: "100%" }} 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>*/}
          {/*</Row>*/}

        </GroupCard>
        {
          data.otherSchemeId && paymentItems && paymentItems.map(group => (
            <div>
              {
                group.items && group.items.length > 0 && <GroupCard title={group.title}>
                  <Row>
                    {
                      group.items && group.items.map(item => (
                        <Col span={12}>
                          <Row>
                            <Col span={12} className="formItem">{item.label}：</Col>
                            <Col span={12} className="formItem">
                              <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>
    );
  }
}