salary-management-front/pc4mobx/hrmSalary/pages/payroll/stepForm/baseInformForm.js

import React from "react";
import { WeaFormItem, WeaInput, WeaSearchGroup, WeaSelect } from "ecCom";
import { inject, observer } from "mobx-react";
import { getReplenishRuleSetOptions } from "../../../apis/payroll";
import { toJS } from "mobx";

@inject("payrollStore")
@observer
export default class BaseInformForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inited: false,
      options: [],
      replenishRuleOptions: [],
      request: {}
    };
  }

  componentWillMount() {
    const { payrollStore } = this.props;
    const { getPayrollBaseForm } = payrollStore;
    const templateBaseData = window.localStorage.getItem("templateBaseData") || "{}";
    getPayrollBaseForm(this.props.id).then(data => {
      this.setState(
        {
          replenishRuleOptions: _.map(data.replenishRuleSetOption, it => ({ key: it.id, showname: it.content })),
          options: _.isEmpty(toJS(data.salarySobOptions)) ? [{ key: "", showname: "" }] : [{
            key: "",
            showname: ""
          }, ...toJS(data.salarySobOptions)],
          request: {
            ...data.templateBaseData,
            reissueRule: data.templateBaseData.replenishRule ? "1" : "0",
            ...JSON.parse(templateBaseData)
          }
        }, () => {
          this.props.onChange && this.props.onChange(this.state.request);
          this.setState({
            inited: true
          });
        }
      );
    });
  }

  hanldeChange = (params) => {
    let request = { ...this.state.request, ...params };
    this.setState({
      request
    }, () => {
      if (this.state.request.reissueRule === "1" && this.state.request.salarySob) {
        // TODO：获取规则设置枚举项
        this.getReplenishRuleSetOptions();
      }
    });
    this.props.onChange && this.props.onChange(request);
  };
  getReplenishRuleSetOptions = () => {
    const { request } = this.state;
    getReplenishRuleSetOptions({ salarySobId: request.salarySob }).then(({ status, data }) => {
      if (status && !_.isEmpty(data)) {
        this.setState({
          replenishRuleOptions: _.map(data, it => ({ key: it.id, showname: it.content }))
        });
      }
    });
  };

  render() {
    const { request, options, replenishRuleOptions } = this.state;
    const { salarySob, name, description, replenishName, replenishRule, reissueRule } = request;

    return (
      <WeaSearchGroup title="基础信息" items={[]} needTigger showGroup col={1}>
        <WeaFormItem
          label="薪资账套"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          {
            this.state.inited &&
            <WeaSelect
              viewAttr={3}
              options={options}
              value={salarySob ? salarySob : ""}
              style={{ width: "200px" }}
              onChange={value => this.hanldeChange({ salarySob: value })}/>
          }
        </WeaFormItem>
        <WeaFormItem
          label="工资单模板名称"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          <WeaInput
            value={name}
            viewAttr={3}
            onChange={value => this.hanldeChange({ name: value })}
          />
        </WeaFormItem>
        <WeaFormItem
          label="补发工资单模板名称"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          <WeaInput
            value={replenishName}
            viewAttr={3}
            onChange={value => this.hanldeChange({ replenishName: value })}
          />
        </WeaFormItem>
        <WeaFormItem
          label="补发工资单名单生成规则"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          <WeaSelect
            options={[{ key: "0", showname: "全部" }, { key: "1", showname: "按规则" }]}
            value={reissueRule}
            detailtype={3}
            viewAttr={3}
            onChange={value => this.hanldeChange({ reissueRule: value })}
          />
        </WeaFormItem>
        {
          reissueRule !== "0" &&
          <WeaFormItem
            label="规则设置"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
          >
            <WeaSelect
              options={replenishRuleOptions}
              value={replenishRule}
              viewAttr={3}
              onChange={value => this.hanldeChange({ replenishRule: value })}
            />
          </WeaFormItem>
        }
        <WeaFormItem
          label="备注"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          <WeaInput
            value={description}
            onChange={value => this.hanldeChange({ description: value })}
          />
        </WeaFormItem>
      </WeaSearchGroup>
    );
  }
}