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

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

@inject("archivesStore")
@observer
export default class AccumulationFundForm extends React.Component {

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

  // 表单变化
  handleFormChange(params) {
    const { archivesStore: { accumulationFundForm, setAccumulationFundForm }, onChangeRecordFundSchemeId } = this.props;
    const { data } = accumulationFundForm;
    let request = { ...data, ...params };
    request.fundName = request.fundSchemeId;
    let form = { ...accumulationFundForm };
    form.data = request;
    setAccumulationFundForm(form);
    Object.keys(params).length>1 &&
    onChangeRecordFundSchemeId(params.fundSchemeId)
  }

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


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

  render() {
    const { archivesStore: { accumulationFundForm, accumulationFundPaymentForm } } = this.props;
    const { items } = accumulationFundForm;
    let baseData = accumulationFundForm.data;
    let paymentData = accumulationFundPaymentForm.data;
    let paymentItems = accumulationFundPaymentForm.items;
    let data = { ...baseData };
    // 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={(accumulationFundForm.data && accumulationFundForm.data.fundSchemeId) ? 3 : 2}
                format="yyyy-MM"
                value={data && data.fundStartTime}
                onChange={value => this.handleFormChange({ fundStartTime: 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.fundSchemeId}
                style={{ width: "100%" }}
                onChange={(value, showname) => {
                  this.handleFormChange({ fundSchemeId: value, fundName: showname });
                  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.fundEndTime}
                onChange={value => this.handleFormChange({ fundEndTime: value })}
              />
            </Col>
            <Col span={6} className="formItem borderR-none borderB-none">公积金账号：</Col>
            <Col span={6} className="formItem borderB-none">
              <WeaInput
                value={data && data.fundAccount}
                onChange={(value) => this.handleFormChange({ fundAccount: value })}/>
            </Col>
          </Row>
          <Row>
            <Col span={6} className="formItem borderR-none">补充公积金账号：</Col>
            <Col span={6} className="formItem borderR-none">
              <WeaInput value={data && data.supplementFundAccount}
                        onChange={(value) => this.handleFormChange({ supplementFundAccount: value })}/>
            </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>
          {/*<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.fundSchemeId && 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")}>{item.label}：</Col>
                            <Col span={12}
                                 className={cs("formItem", { "borderR-none": idx === 0 })}>
                              <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>
    );
  }
}