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

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

const getLabel = WeaLocaleProvider.getLabel;
@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("template-basedata") || "{}";
    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,
            msgStatus: !this.props.id ? "1" : data.templateBaseData.msgStatus,
            reissueRule: data.templateBaseData.replenishRule ? "1" : "0",
            ...JSON.parse(templateBaseData)
          }
        }, () => {
          this.props.onChange && this.props.onChange(this.state.request);
          this.setState({
            inited: true
          });
        }
      );
    });
    JSON.parse(templateBaseData).salarySob && this.getReplenishRuleSetOptions({ salarySobId: JSON.parse(templateBaseData).salarySob });
  }

  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 = (params = {}) => {
    const { request } = this.state;
    getReplenishRuleSetOptions({ salarySobId: request.salarySob, ...params }).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, msgStatus, emailStatus } = request;

    return (
      <React.Fragment>
        <WeaSearchGroup title="基础信息" items={[]} needTigger showGroup col={1} className="payrollBaseInfoWrapper">
          <WeaFormItem
            label="薪资账套"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
          >
            {
              this.state.inited &&
              <WeaSelect
                viewAttr={3}
                options={options}
                value={salarySob ? salarySob : ""}
                style={{ width: 200 }}
                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>
        <WeaSearchGroup title={getLabel(111, "发送设置")} items={[]} needTigger showGroup col={1}
                        className="payrollBaseInfoWrapper">
          <WeaFormItem label={getLabel(111, "系统消息")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
            <WeaCheckbox value={msgStatus ? "1" : "0"} display="switch"
                         onChange={value => this.hanldeChange({ msgStatus: value === "1" })}/>
          </WeaFormItem>
          <WeaFormItem label={getLabel(111, "邮件")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
            <WeaCheckbox value={emailStatus ? "1" : "0"} display="switch"
                         onChange={value => this.hanldeChange({ emailStatus: value === "1" })}/>
          </WeaFormItem>
        </WeaSearchGroup>
      </React.Fragment>
    );
  }
}