salary-management-front/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSlide.js

/*
 * Author: 黎永顺
 * name: 新增编辑薪资账套
 * Description:
 * Date: 2022/12/8
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaSlideModal, WeaSteps } from "ecCom";
import { Button, message, Modal } from "antd";
import SlideModalTitle from "../../../components/slideModalTitle";
import LedgerBaseSetting from "./ledgerBaseSetting";
import LedgerAssociatedPersonnel from "./ledgerAssociatedPersonnel";
import LedgerSalaryAdjustmentRules from "./ledgerSalaryAdjustmentRules";
import LedgerBackCalculatedSalaryItem from "./ledgerBackCalculatedSalaryItem";
import LedgerSalaryItem from "./ledgerSalaryItem";
import { saveAdjustmentRule, saveLedgerBasic, saveLedgerItem } from "../../../apis/ledger";
import "./index.less";

const Step = WeaSteps.Step;
const tabs = [
  { key: 0, title: "基础设置" },
  { key: 1, title: "关联人员" },
  { key: 2, title: "薪资项目" },
  { key: 3, title: "回算薪资项目" },
  { key: 4, title: "调薪计薪规则" }
];

@inject("taxAgentStore", "ledgerStore")
@observer
class LedgerSlide extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 0,
      loading: false,
      baseSettingInfo: {},
      adjustRules: [],
      empFields: [], itemGroups: [],
      saveSalarySobId: ""
    };
  }

  componentWillUnmount() {
    this.setState({
      saveSalarySobId: ""
    });
  }

  /*
   * Author: 黎永顺
   * Description: 保存基本信息
   * Params:
   * Date: 2022/12/12
   */
  saveLedgerBasic = () => {
    const { baseSettingInfo, current } = this.state;
    const { editId } = this.props;
    const { description, canEdit, ...extra } = baseSettingInfo;
    const bool = _.every(Object.keys(extra), key => !!extra[key]);
    if (!bool || _.isEmpty(baseSettingInfo)) {
      Modal.warning({
        title: "信息确认",
        content: "必要信息不完整，红色*为必填项！"
      });
      return false;
    }
    this.setState({ loading: true });
    saveLedgerBasic({ ...extra, description, id: editId }).then(({ status, data, errormsg }) => {
      this.setState({ loading: false });
      if (status) {
        const { onRefreshList } = this.props;
        message.success("保存成功");
        onRefreshList();
        !editId && this.setState({ current: current + 1, saveSalarySobId: data });
      } else {
        message.error(errormsg || "保存失败");
      }
    }).catch(() => this.setState({ loading: false }));
  };
  /*
   * Author: 黎永顺
   * Description: 保存调薪计薪规则
   * Params:
   * Date: 2022/12/12
   */
  saveLedgerAdjustRule = () => {
    const { adjustRules, saveSalarySobId } = this.state;
    const payload = {
      salarySobId: this.props.editId || saveSalarySobId,
      ruleParams: adjustRules
    };
    this.setState({ loading: true });
    saveAdjustmentRule(payload).then(({ status, errormsg }) => {
      this.setState({ loading: false });
      if (status) {
        message.success("保存成功");
        this.handleClose();
      } else {
        message.success(errormsg || "保存失败");
      }
    }).catch(() => this.setState({ loading: false }));
  };
  /*
   * Author: 黎永顺
   * Description: 薪资项目保存
   * Params:
   * Date: 2022/12/14
   */
  saveLedgerItem = () => {
    const { empFields, itemGroups, saveSalarySobId } = this.state;
    const { editId: salarySobId } = this.props;
    const payload = {
      empFields: _.map(empFields, it => {
        if (Object.prototype.toString.call(it.id) === "[object Number]") delete it.id;
        return { ...it };
      }),
      itemGroups: _.map(_.filter(itemGroups, it => it.name !== "未分类"), item => {
        return {
          ...item,
          items: _.map(item.items, it => {
            // delete it.formulaContent;
            // if (it.id && it.id.length > 4) delete it.id;
            return { ...it };
          })
        };
      }),
      items: _.map(_.find(itemGroups, it => it.name === "未分类").items, child => {
        // if (child.id && child.id.length > 4) delete child.id;
        // delete child.formulaContent;
        return { ...child };
      }) || [],
      salarySobId: salarySobId || saveSalarySobId
    };
    this.setState({ loading: true });
    saveLedgerItem(payload).then(({ status, errormsg }) => {
      this.setState({ loading: false });
      if (status) {
        message.success("保存成功");
      } else {
        message.error(errormsg || "保存失败");
      }
    }).catch(() => this.setState({ loading: false }));
  };
  handleChangeSlideTab = (current) => {
    this.setState({ current: Number(current) });
  };
  handleClose = () => {
    this.setState({ current: 0 }, () => this.props.onCancel());
  };
  /*
   * Author: 黎永顺
   * Description: 基础信息字段切换
   * Params:
   * Date: 2022/12/9
   */
  handleChangeSaveParams = (baseSettingInfo) => {
    this.setState({ baseSettingInfo });
  };
  /*
   * Author: 黎永顺
   * Description: 薪资项目保存数据
   * Params:
   * Date: 2022/12/14
   */
  handleSaveSalaryItemParams = (empFields, itemGroups) => {
    this.setState({ empFields, itemGroups });
  };
  renderChildren = () => {
    const { current, saveSalarySobId } = this.state;
    let CurrentDom = null;
    switch (current) {
      case 0:
        CurrentDom = <LedgerBaseSetting {...this.props} onSaveParams={this.handleChangeSaveParams}/>;
        break;
      case 1:
        CurrentDom = <LedgerAssociatedPersonnel {...this.props} saveSalarySobId={saveSalarySobId}/>;
        break;
      case 2:
        CurrentDom = <LedgerSalaryItem {...this.props} saveSalarySobId={saveSalarySobId}
                                       onSaveSalaryItem={this.handleSaveSalaryItemParams}/>;
        break;
      case 3:
        CurrentDom = <LedgerBackCalculatedSalaryItem {...this.props} saveSalarySobId={saveSalarySobId}/>;
        break;
      case 4:
        CurrentDom =
          <LedgerSalaryAdjustmentRules {...this.props} saveSalarySobId={saveSalarySobId}
                                       onSaveParams={(adjustRules) => this.setState({ adjustRules })}/>;
        break;
      default:
        CurrentDom = null;
        break;
    }
    return CurrentDom;
  };
  renderCustomOperate = () => {
    const { taxAgentStore: { showOperateBtn }, editId } = this.props;
    const { current, loading } = this.state;
    let CurrentDom = [];
    //管理员操作权限
    if (showOperateBtn) {
      switch (current) {
        case 0:
          CurrentDom = [
            <Button
              type="primary"
              loading={loading}
              onClick={this.saveLedgerBasic}
            >{editId ? "保存" : "保存并进入下一步"}</Button>
          ];
          break;
        case 1:
          CurrentDom = !editId ? [
            <Button type="ghost" onClick={this.handleClose}>完成，跳过所有步骤</Button>,
            <Button type="primary" onClick={() => this.setState({ current: current + 1 })}>下一步</Button>
          ] : [];
          break;
        case 2:
          CurrentDom = !editId ?
            [
              <Button type="ghost" onClick={this.handleClose}>完成，跳过所有步骤</Button>,
              <Button type="ghost" onClick={() => this.setState({ current: current - 1 })}>上一步</Button>,
              <Button
                type="primary"
                loading={loading}
                onClick={() => {
                  this.setState({ current: current + 1 }, () => {
                    this.saveLedgerItem();
                  });
                }}
              >保存并进入下一步</Button>
            ] : [
              <Button type="primary" loading={loading} onClick={this.saveLedgerItem}>保存</Button>
            ];
          break;
        case 3:
          CurrentDom = !editId ?
            [
              <Button type="ghost" onClick={this.handleClose}>完成，跳过所有步骤</Button>,
              <Button type="ghost" onClick={() => this.setState({ current: current - 1 })}>上一步</Button>,
              <Button type="primary" onClick={() => this.setState({ current: current + 1 })}>下一步</Button>
            ] : [];
          break;
        case 4:
          CurrentDom = !editId ?
            [
              <Button type="ghost" onClick={() => this.setState({ current: current - 1 })}>上一步</Button>,
              <Button type="primary" loading={loading} onClick={this.saveLedgerAdjustRule}>完成</Button>
            ] : [
              <Button type="primary" loading={loading} onClick={this.saveLedgerAdjustRule}>保存</Button>
            ];
          break;
        default:
          break;
      }
    }
    return CurrentDom;
  };

  render() {
    const { title, visible, editId, taxAgentStore: { showOperateBtn } } = this.props;
    const { current } = this.state;
    return (
      <WeaSlideModal
        className="slideOuterWrapper"
        visible={visible}
        top={0}
        width={65}
        height={100}
        direction="right"
        measure="%"
        title={
          <SlideModalTitle
            subtitle={title}
            tabs={editId ? tabs : []}
            loading={false}
            showOperateBtn={showOperateBtn}
            editable={false}
            onSave={() => {
            }}
            selectedTab={current}
            customOperate={this.renderCustomOperate()}
            subItemChange={this.handleChangeSlideTab}
          />
        }
        content={
          <div className="ledgerSlideContent">
            {
              !editId &&
              <WeaSteps current={current} style={{ margin: "20px 0" }}>
                {
                  _.map(tabs, item => {
                    const { key, title } = item;
                    return <Step description={title} key={key}/>;
                  })
                }
              </WeaSteps>
            }
            {
              this.renderChildren()
            }
          </div>
        }
        onClose={this.handleClose}
      />
    );
  }
}

export default LedgerSlide;