salary-management-front/pc4mobx/hrmSalary/pages/mySalary/mySalaryView.js

/*
 * Author: 黎永顺
 * name: 查看我的薪资-工资单
 * Description:
 * Date: 2023/6/14
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { Button, message, Modal } from "antd";
import { WeaLocaleProvider } from "ecCom";
import Authority from "./authority";
import Content from "../../components/pcTemplate/content";
import { confirmSalaryBill, feedBackSalaryBill, payrollCheckType } from "../../apis/payroll";
import CaptchaModal from "../../components/captchaModal";
import "./index.less";
import { getQueryString } from "../../util/url";

const isPhone = /(iPhone|iPad|iPod|iOS|Android)/i.test(window.navigator.userAgent);
const isEm = window.navigator.userAgent.indexOf("E-Mobile7") >= 0;
const { getLabel } = WeaLocaleProvider;

@inject("mySalaryStore")
@observer
class MySalaryView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      captchaVisible: false,
      mySalaryStore: {}
    };
  }

  async componentDidMount() {
    const { mySalaryStore: { init, getMySalaryBill }, params: { salaryInfoId } } = this.props;
    const { data, status } = await payrollCheckType();
    if (status && data === "PWD") {
      init(false, () => {
        getMySalaryBill(Number(salaryInfoId)).then(data => {
          this.setState({ mySalaryStore: data });
        });
      });
    } else {
      this.setState({ captchaVisible: true });
    }
  }

  confirmSalaryBill = () => {
    const { mySalaryStore: { getMySalaryBill }, params: { salaryInfoId } } = this.props;
    confirmSalaryBill({ salaryInfoId }).then(({ status, errormsg }) => {
      if (status) {
        message.success(getLabel(30700, "操作成功"));
        getMySalaryBill(Number(salaryInfoId)).then(data => {
          this.setState({ mySalaryStore: data });
        });
      } else {
        message.error(errormsg || getLabel(30651, "操作失败"));
      }
    });
  };
  handleGoFeedback = () => {
    Modal.confirm({
      title: getLabel(131329, "信息确认"),
      content: getLabel(544271, "确认是否发起反馈流程？"),
      onOk: () => {
        const { params: { salaryInfoId }, mySalaryStore: { getMySalaryBill } } = this.props;
        feedBackSalaryBill({ salaryInfoId }).then(({ status, errorMsg }) => {
          if (status) {
            const { mySalaryStore } = this.state;
            const { salaryTemplate } = mySalaryStore;
            const { feedbackUrl } = salaryTemplate;
            getMySalaryBill(Number(salaryInfoId)).then(data => {
              this.setState({ mySalaryStore: data }, () => {
                window.open(`${window.ecologyContentPath || ""}${feedbackUrl}`);
              });
            });
          } else {
            message.error(errorMsg);
          }
        });
      }
    });
  };

  render() {
    const { captchaVisible, mySalaryStore } = this.state;
    const { params: { salaryInfoId } } = this.props;
    if (_.isEmpty(mySalaryStore)) {
      return <div>
        <CaptchaModal
          visible={captchaVisible} id={salaryInfoId}
          onCancel={() => this.setState({ captchaVisible: false })}
          onConfirm={() => {
            this.props.mySalaryStore.setInitEmVerify();
            this.props.mySalaryStore.getMySalaryBill(Number(salaryInfoId)).then(data => {
              this.setState({ mySalaryStore: data });
            });
          }}
        />
      </div>;
    }
    const { salaryTemplate, salaryGroups, employeeInformation, sendTime } = mySalaryStore;
    const salaryProps = {
      theme: salaryTemplate.theme, tip: salaryTemplate.textContent, sendTime,
      background: salaryTemplate.background, tipPosi: salaryTemplate.textContentPosition || "",
      itemTypeList: [employeeInformation, ...salaryGroups]
    };
    return (
      <React.Fragment>
        <Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`}
                   store={this.props.mySalaryStore}>
          <div className="weapp-salary-my-salary-view-payroll">
            <Content {...salaryProps}>
              <ConfirmBtns
                showAck={mySalaryStore.showAck} showFeedback={mySalaryStore.showFeedback}
                confirmSalaryBill={this.confirmSalaryBill}
                goFeedback={this.handleGoFeedback}
              />
            </Content>
          </div>
        </Authority>
      </React.Fragment>
    );
  }
}

export default MySalaryView;

export const ConfirmBtns = (props) => {
  return <div className="space">
    {
      props.showAck === "1" &&
      <Button type="primary" onClick={props.confirmSalaryBill}>{getLabel(111, "确认")}</Button>
    }
    {
      ((props.showFeedback === "1" && !isPhone) || (props.showFeedback === "1" && isEm)) &&
      <Button type="ghost" onClick={props.goFeedback}>{getLabel(111, "反馈")}</Button>
    }
  </div>;
};