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 PayrollTempBaseSet from "../payrollTempBaseSet";
import { Button } from "antd";

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

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

  renderTitle = () => {
    const { tmplId } = this.props, { current } = 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">{getLabel(1402, "下一步")}</Button> :
            current === 1 ?
              <React.Fragment>
                <Button type="ghost">{getLabel(1876, "上一步")}</Button>
                <Button type="primary">{getLabel(1402, "下一步")}</Button>
                <Button type="ghost">{getLabel(221, "预览")}</Button>
              </React.Fragment> :
              <React.Fragment>
                <Button type="ghost">{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}/>;
        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;