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

import React from "react";
import { inject, observer } from "mobx-react";
import { message } from "antd";
import { WeaSearchGroup } from "ecCom";
import { toJS } from "mobx";
import {
  ConsistentWelfare,
  SocialDatePicker,
  SocialInputNumber,
  SocialSelect,
  SocialTitle
} from "./socialSecurityForm";
import "./index.less";

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

  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, true);
  };
  handleFormChange = ({ key, value }) => {
    const params = { [key]: value };
    const { archivesStore: { otherForm, setOtherForm }, onChangeRecordOtherSchemeId } = this.props;
    const { data } = otherForm;
    let request = { ...data, ...params };
    let form = { ...otherForm };
    form.data = request;
    setOtherForm(form);
    key === "otherSchemeId" && this.setState({ Welfare: "" });
    key === "otherSchemeId" && this.handleFetchPaymentForm(value);
    key === "otherSchemeId" && onChangeRecordOtherSchemeId(value);
  };
  handlePaymentChange = ({ key, value }) => {
    const params = { [key]: !_.isNil(value) ? value.toString() : "" };
    const { archivesStore: { otherPaymentForm, setOtherPaymentForm } } = this.props;
    const { data } = otherPaymentForm;
    let request = { ...data, ...params };
    let form = { ...otherPaymentForm };
    form.data = request;
    setOtherPaymentForm(form);
  };
  handleBlurChange = ({ key, value, minNum, maxNum }) => {
    const params = {
      [key]: _.isNil(value) ? "" : (Number(value) > maxNum && maxNum !== 0) ? maxNum :
        (Number(value) < minNum && minNum !== 0) ? minNum : value.toString()
    };
    const { archivesStore: { otherPaymentForm, setOtherPaymentForm } } = this.props;
    const { data } = otherPaymentForm;
    let request = { ...data, ...params };
    let form = { ...otherPaymentForm };
    form.data = request;
    setOtherPaymentForm(form);
  };

  handleChangeWelfare = (val) => {
    const { archivesStore: { otherPaymentForm, setOtherPaymentForm } } = this.props;
    let paymentData = toJS(otherPaymentForm.data);
    const [paymentFormItems] = toJS(otherPaymentForm.items);
    const { items } = paymentFormItems;
    if (val) {
      _.forEach(items, (it) => {
        const { min, max, domkey } = it;
        const minNum = !_.isNil(min) ? Number(min) : 0, maxNum = !_.isNil(max) ? Number(max) : 0;
        if ((val < minNum || val > maxNum) && !_.isNil(min) && !_.isNil(max) && (!!maxNum || !!minNum)) {
          message.warning("超出所选缴纳方案设置的基数上下限范围，将自动按基数上下限填充。");
          paymentData = {
            ...paymentData,
            [domkey[0]]: (val < minNum && !!minNum) ? minNum : (val > maxNum && !!maxNum) ? maxNum : val
          };
        } else {
          paymentData = { ...paymentData, [domkey[0]]: val };
        }
      });
    } else {
      _.forEach(items, (it) => {
        const { domkey } = it;
        paymentData = { ...paymentData, [domkey[0]]: "" };
      });
    }
    setOtherPaymentForm({ ...otherPaymentForm, data: { ...paymentData } });
  };

  render() {
    const { Welfare } = this.state;
    const { archivesStore: { otherForm, otherPaymentForm } } = this.props;
    const { items, data: otherData } = otherForm;
    let paymentData = otherPaymentForm.data;
    let paymentItems = otherPaymentForm.items;
    const { nonPayment = "", otherStartTime = "", otherEndTime = "", otherSchemeId = "" } = otherData || {};
    const otherItems = !_.isNil(toJS(items)) ? [
      ..._.map(_.filter(toJS(items)[0].items, it => it.domkey[0] !== "paymentOrganization"),
        item => ({
          com: SocialSelect({
            key: item["domkey"][0],
            label: item.label,
            value: !_.isNil(otherData[item["domkey"][0]]) ? otherData[item["domkey"][0]].toString() : "",
            options: item.options,
            onChange: this.handleFormChange
          })
        })),
      {
        com: SocialDatePicker({
          key: "otherStartTime",
          label: "其他福利起始缴纳月",
          viewAttr: otherSchemeId ? 3 : 2,
          value: otherStartTime,
          disabledDate: (current) => {
            return current && otherEndTime && current.getTime() > new Date(otherEndTime).getTime();
          },
          onChange: this.handleFormChange
        })
      },
      {
        com: SocialDatePicker({
          key: "otherEndTime",
          label: "其他福利最后缴纳月",
          value: otherEndTime,
          disabledDate: (current) => {
            return current && otherStartTime && current.getTime() < new Date(otherStartTime).getTime();
          },
          onChange: this.handleFormChange
        })
      }
    ] : [];
    return (
      <div className="socialFormWrapper">
        <WeaSearchGroup
          title="其他福利基础信息"
          customComponent={<SocialTitle keyname="nonPayment" value={!_.isNil(nonPayment) ? nonPayment.toString() : "0"}
                                        onChange={this.handleFormChange}/>}
          items={otherItems} col={2} showGroup needTigger={false}/>
        {
          otherSchemeId && !_.isEmpty(toJS(paymentItems)) && _.map(toJS(paymentItems), item => {
            const { title, items } = item;
            return <WeaSearchGroup
              items={_.map(items, child => ({
                com: SocialInputNumber({
                  key: child["domkey"][0],
                  label: child.label,
                  value: !_.isNil(paymentData[child["domkey"][0]]) ? paymentData[child["domkey"][0]].toString() : "",
                  onChange: this.handlePaymentChange,
                  onBlurChange: this.handleBlurChange,
                  min: child.min,
                  max: child.max
                })
              }))}
              customComponent={<ConsistentWelfare value={Welfare} onChange={(Welfare) => this.setState({ Welfare })}
                                                  onBlurChange={this.handleChangeWelfare}/>}
              title={title} col={2} showGroup
            />;
          })
        }
      </div>
    );
  }
}