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

import React from "react";
import { WeaCheckbox, WeaFormItem, WeaInput, WeaLocaleProvider, WeaSearchGroup, WeaSelect, WeaTimePicker } from "ecCom";
import { inject, observer } from "mobx-react";
import { getReplenishRuleSetOptions } from "../../../apis/payroll";
import moment from "moment";
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),
            sendEmail: ""
          }
        }, () => {
          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,
      autoSendStatus,
      autoSendDayOfMonth,
      autoSendTimeOfDay
    } = 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>
          <WeaFormItem label={getLabel(111, "定时发送")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
            <WeaCheckbox value={autoSendStatus ? "1" : "0"} display="switch"
                         onChange={value => this.hanldeChange({ autoSendStatus: value === "1" })}/>
          </WeaFormItem>
          {
            autoSendStatus &&
            <WeaFormItem label={getLabel(111, "发送时间")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
              <SendTimeComp
                value={{
                  autoSendDayOfMonth,
                  autoSendTimeOfDay
                }}
                onChange={this.hanldeChange}
              />
            </WeaFormItem>
          }
        </WeaSearchGroup>
      </React.Fragment>
    );
  }
}

const SendTimeComp = (props) => {
  const { value, onChange } = props;
  const { autoSendDayOfMonth, autoSendTimeOfDay } = value;

  const handleChangeSendtime = (key, val) => {
    onChange({ autoSendDayOfMonth, autoSendTimeOfDay, [key]: val });
  };
  return <div className="customTimeCompWrapper">
    <div>
      <span>{getLabel(111, "每月")}</span>
      <WeaSelect
        value={!_.isNil(autoSendDayOfMonth) ? autoSendDayOfMonth : "1"}
        options={_.map(getDay(), item => ({ key: item, showname: item }))}
        onChange={v => handleChangeSendtime("autoSendDayOfMonth", v)}
      />
      <span>{getLabel(16992, "号")}</span>
    </div>
    <WeaTimePicker value={!_.isNil(autoSendTimeOfDay) ? autoSendTimeOfDay : "09:00"} size="small"
                   onChange={v => handleChangeSendtime("autoSendTimeOfDay", v)}/>
  </div>;
};

const getDay = () => {
  let days = [];
  let day = getDaysInMonth(moment().year(), moment().month() + 1);
  for (let i = 1; i <= day; i++) {
    days.push(i);
  }
  return days;
};

const getDaysInMonth = (year, month) => {
  month = parseInt(month, 10);
  let d = new Date(year, month, 0);
  return d.getDate();
};