salary-management-front/pc4mobx/hrmSalary/pages/payrollRelease/components/updatePayrollTemplateSlide/index.js

/*
 * Author: 黎永顺
 * name: 工资单发放-重构页面编辑模板
 * Description:
 * Date: 2023/10/13
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaLocaleProvider, WeaSlideModal, WeaSteps } from "ecCom";
import { Button, message } from "antd";
import PayrollTempBaseSet from "../payrollTempBaseSet";
import { savePayroll } from "../../../../apis/payroll";

const Step = WeaSteps.Step;
const getLabel = WeaLocaleProvider.getLabel;

@inject("payrollStore")
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 0, loading: false
    };
    this.tmpBaseSetRef = null;
  }

  save = async () => {
    const {
      payrollStore: {
        payrollTempForm, payrollTempFeedbackForm, initPayrollTempForm, initPayrollTempFeedbackForm
      }
    } = this.props;
    const [tempFormm, fbForm] = await Promise.all([payrollTempForm.validateForm(), payrollTempFeedbackForm.validateForm()]);
    if (tempFormm.isValid && fbForm.isValid) {
      const { replenishRule, autoSendStatus, emailStatus, msgStatus, ...extraBs } = payrollTempForm.getFormParams(),
        { ackFeedbackStatus, autoAckDays, ...extraFb } = payrollTempFeedbackForm.getFormParams(),
        { formData } = this.tmpBaseSetRef.state;
      const payload = {
        ...extraFb, ...formData, ...extraBs,
        ackFeedbackStatus: ackFeedbackStatus === "1",
        autoSendStatus: autoSendStatus === "1",
        emailStatus: emailStatus === "1",
        msgStatus: msgStatus === "1",
        autoAckDays: Number(autoAckDays),
        replenishRule: replenishRule === "0" ? "" : replenishRule
      };
      this.setState({
        current: this.state.current + 1
      }, () => {
        initPayrollTempForm();
        initPayrollTempFeedbackForm();
      });
    } else {
      tempFormm.showErrors();
      fbForm.showErrors();
      this.forceUpdate();
    }
  };
  savePayroll = (payload) => {
    this.setState({ loading: true });
    savePayroll(payload).then(({ status, errormsg }) => {
      this.setState({ loading: false });
      if (status) {
        message.success(getLabel(30700, "操作成功！"));
      } else {
        message.error(errormsg);
      }
    }).catch(() => this.setState({ loading: false }));
  };
  renderTitle = () => {
    const { tmplId } = this.props, { current, loading } = this.state;
    return <div className="payroll-title-flex titleDialog">
      <div className="titleCol titleLeftBox">
        <div className="titleIcon"><i className="icon-coms-fa"/></div>
        <div className="title">{tmplId ? getLabel(543583, "编辑工资单模板") : getLabel(543582, "新建工资单模板")}</div>
      </div>
      <div className="titleCol titleRightBox">
        {
          current === 0 ?
            <Button type="primary" loading={loading} onClick={this.save}>{getLabel(1402, "下一步")}</Button> :
            current === 1 ?
              <React.Fragment>
                <Button type="ghost"
                        onClick={() => this.setState({ current: current - 1 })}>{getLabel(1876, "上一步")}</Button>
                <Button type="primary">{getLabel(1402, "下一步")}</Button>
                <Button type="ghost">{getLabel(221, "预览")}</Button>
              </React.Fragment> :
              <React.Fragment>
                <Button type="ghost"
                        onClick={() => this.setState({ current: current - 1 })}>{getLabel(1876, "上一步")}</Button>
                <Button type="primary">{getLabel(537558, "保存")}</Button>
              </React.Fragment>
        }
      </div>
    </div>;
  };
  renderSlideContent = () => {
    const { current } = this.state;
    let dom = null;
    switch (current) {
      case 0:
        dom = <PayrollTempBaseSet {...this.props} ref={dom => this.tmpBaseSetRef = dom}/>;
        break;
      default:
        break;
    }
    return dom;
  };

  render() {
    const { current } = this.state;
    const tabs = [
      { key: 0, title: getLabel(82751, "基础设置") },
      { key: 1, title: getLabel(543579, "正常核算工资单模板") },
      { key: 2, title: getLabel(543580, "补发工资单模版") }
    ];
    return (
      <WeaSlideModal {...this.props} title={this.renderTitle()} className="payroll-tmpl-layout"
                     content={(<div className="payroll-tmpl-content">
                       <WeaSteps current={current} style={{ margin: "0 0 20px 0" }}>
                         {
                           _.map(tabs, item => {
                             const { key, title } = item;
                             return <Step description={title} key={key}/>;
                           })
                         }
                       </WeaSteps>
                       {this.renderSlideContent()}
                     </div>)}
      />
    );
  }
}

export default Index;