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

import React from "react";
import {
  WeaCheckbox,
  WeaFormItem,
  WeaHelpfulTip,
  WeaInput,
  WeaInputNumber,
  WeaLocaleProvider,
  WeaSearchGroup,
  WeaSelect,
  WeaTimePicker
} from "ecCom";
import { inject, observer } from "mobx-react";
import { getReplenishRuleSetOptions } from "../../../apis/payroll";
import { commonEnumList } from "../../../apis/payrollFiles";
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: [],
      salaryMonthOptions: [],
      request: {}
    };
  }

  componentWillMount() {
    const { payrollStore } = this.props;
    const { getPayrollBaseForm } = payrollStore;
    const templateBaseData = window.localStorage.getItem("template-basedata") || "{}";
    this.commonEnumList();
    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: "",
            autoSendStatus: !_.isNil(data.templateBaseData.autoSendStatus) ? data.templateBaseData.autoSendStatus : false
          }
        }, () => {
          this.props.onChange && this.props.onChange(this.state.request);
          this.setState({
            inited: true
          });
        }
      );
    });
    JSON.parse(templateBaseData).salarySob && this.getReplenishRuleSetOptions({ salarySobId: JSON.parse(templateBaseData).salarySob });
  }

  handleChange = (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 }))
        });
      }
    });
  };
  commonEnumList = () => {
    commonEnumList({ enumClass: "com.engine.salary.enums.salarysend.SalaryAutoSendCycleTypeEnum" })
      .then(({ status, data }) => {
        if (status && !_.isEmpty(data)) {
          this.setState({
            salaryMonthOptions: _.map(data, it => ({ key: it.value.toString(), showname: it.defaultLabel }))
          });
        }
      });
  };

  render() {
    const { request, options, replenishRuleOptions, salaryMonthOptions } = this.state;
    const {
      salarySob, name, description, replenishName, replenishRule, reissueRule, msgStatus, emailStatus,
      ackFeedbackStatus, autoAckDays, feedbackUrl, autoSendStatus, autoSendDayOfMonth, autoSendTimeOfDay,
      autoSendCycleType
    } = 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
                disabled={this.props.id}
                viewAttr={3}
                options={options}
                value={salarySob ? salarySob : ""}
                style={{ width: 200 }}
                onChange={value => this.handleChange({ salarySob: value })}/>
            }
          </WeaFormItem>
          <WeaFormItem
            label="工资单模板名称"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
          >
            <WeaInput
              value={name}
              viewAttr={3}
              onChange={value => this.handleChange({ name: value })}
            />
          </WeaFormItem>
          <WeaFormItem
            label="补发工资单模板名称"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
          >
            <WeaInput
              value={replenishName}
              viewAttr={3}
              onChange={value => this.handleChange({ 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.handleChange({ reissueRule: value })}
            />
          </WeaFormItem>
          {
            reissueRule !== "0" &&
            <WeaFormItem
              label="规则设置"
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 18 }}
            >
              <WeaSelect
                options={replenishRuleOptions}
                value={replenishRule}
                viewAttr={3}
                onChange={value => this.handleChange({ replenishRule: value })}
              />
            </WeaFormItem>
          }
          <WeaFormItem
            label="备注"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
          >
            <WeaInput
              value={description}
              onChange={value => this.handleChange({ 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.handleChange({ msgStatus: value === "1" })}/>
          </WeaFormItem>
          <WeaFormItem label={getLabel(111, "邮件")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
            <WeaCheckbox value={emailStatus ? "1" : "0"} display="switch"
                         onChange={value => this.handleChange({ emailStatus: value === "1" })}/>
          </WeaFormItem>
          <WeaFormItem label={getLabel(111, "定时发送")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
            <WeaCheckbox value={autoSendStatus ? "1" : "0"} display="switch"
                         onChange={value => {
                           this.handleChange({
                             autoSendStatus: value === "1",
                             autoSendDayOfMonth: value === "1" ? "1" : null,
                             autoSendTimeOfDay: value === "1" ? "09:00" : null,
                             autoSendCycleType: value === "1" ? 1 : null
                           });
                         }}/>
            <WeaHelpfulTip title={getLabel(111, "开启后，还需在计划任务中配置定时任务，执行工资单定时发送任务；")}
                           style={{ marginLeft: 10 }}
                           placement="top" width={200}/>
          </WeaFormItem>
          {
            autoSendStatus &&
            <WeaFormItem label={getLabel(111, "发送时间")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
              <SendTimeComp
                salaryMonthOptions={salaryMonthOptions}
                value={{
                  autoSendDayOfMonth,
                  autoSendTimeOfDay,
                  autoSendCycleType
                }}
                onChange={this.handleChange}
              />
            </WeaFormItem>
          }
        </WeaSearchGroup>
        <WeaSearchGroup title={getLabel(111, "工资单确认反馈设置")} showGroup needTigger col={1}
                        className="payrollBaseInfoWrapper">
          <WeaFormItem label={getLabel(111, "启用工资单确认")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
            <WeaCheckbox value={ackFeedbackStatus ? "1" : "0"} display="switch"
                         onChange={value => this.handleChange({
                           ackFeedbackStatus: value === "1",
                           autoAckDays: 7,
                           feedbackUrl: "/"
                         })}/>
          </WeaFormItem>
          {
            ackFeedbackStatus &&
            <React.Fragment>
              <WeaFormItem label={getLabel(111, "自动确认超时天数")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
                <WeaInputNumber
                  min={1} value={autoAckDays} viewAttr={3}
                  style={{ width: "95%" }}
                  onChange={autoAckDays => this.handleChange({ autoAckDays })}
                />
                <WeaHelpfulTip
                  title={getLabel(111, "开启后，还需在计划任务中配置定时任务，执行自动确认任务；邮箱端查看工资单暂不支持确认及反馈；")}
                  style={{ marginLeft: 10 }}
                  placement="top" width={200}/>
              </WeaFormItem>
              <WeaFormItem label={getLabel(111, "反馈流程地址")} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
                <WeaInput
                  value={feedbackUrl} viewAttr={3}
                  onChange={feedbackUrl => this.handleChange({ feedbackUrl })}
                />
              </WeaFormItem>
            </React.Fragment>
          }
        </WeaSearchGroup>
      </React.Fragment>
    );
  }
}

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

  const handleChangeSendtime = (key, val) => {
    onChange({ autoSendDayOfMonth, autoSendTimeOfDay, autoSendCycleType, [key]: val });
  };
  return <div className="customTimeCompWrapper">
    <div>
      <span>{getLabel(542604, "薪资所属月")}</span>
      <WeaSelect
        value={autoSendCycleType.toString()}
        options={salaryMonthOptions}
        onChange={v => handleChangeSendtime("autoSendCycleType", Number(v))}
      />
      <WeaSelect
        value={!_.isNil(autoSendDayOfMonth) ? autoSendDayOfMonth : "1"}
        options={_.map(getDay(autoSendCycleType), 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 = (num = 1) => {
  let days = [];
  let day = getDaysInMonth(moment().year(), moment().month() + num);
  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();
};