salary-management-front/pc4mobx/hrmSalary/pages/mySalaryBenefits/index.js

/*
 * Author: 黎永顺
 * name: 我的薪资福利
 * Description:
 * Date: 2023/11/13
 */
import React, { Component } from "react";
import { WeaLocaleProvider, WeaReqTop } from "ecCom";
import Payroll from "./components/payrollTable";
import SalaryAdjustmentRecords from "./components/SalaryAdjustmentRecords";
import { MonthRangePicker } from "../reportView/components/statisticalMicroSettingsSlide";
import PersonalSalaryReport from "../custom-pages/xbxt/personalSalaryReport";
import Authority from "../mySalary/authority";
import * as API from "../../apis/ruleconfig";
import LogDialog from "../../components/logViewModal";
import { payrollCheckType } from "../../apis/payroll";
import CaptchaModal from "../../components/captchaModal";
import moment from "moment";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedKey: "0", sysinfo: {}, tabs: [], store: { loading: false, hasRight: false },
      logDialogVisible: false, filterConditions: "[]", captchaVisible: false,
      salaryYearMonth: [
        moment(new Date()).subtract(11, "months").format("YYYY-MM"),
        moment(new Date()).format("YYYY-MM")
      ]
    };
  }

  async componentWillMount() {
    const { data, status } = await payrollCheckType();
    if (status && data === "PWD") {
      if (window.doCheckSecondaryVerify4ec) {
        window.doCheckSecondaryVerify4ec({ mouldCode: "HRM", itemCode: "SALARY" }, (data) => {
          const { status } = data;
          if (status === "1") {
            this.setState({ store: { loading: false, hasRight: true } });
          } else {
            this.setState({ store: { loading: false, hasRight: false } });
          }
        });
      } else {
        this.setState({ store: { loading: false, hasRight: false } });
      }
    } else {
      this.setState({ captchaVisible: true });
    }
  }

  async componentDidMount() {
    // this.setState({ store: { ...this.state.store, loading: true } });
    const { data: sysinfo } = await API.sysinfo();
    const { adjustShowStatus, salaryShowStatus } = sysinfo;
    let tabs = [
      { key: "1", title: getLabel(111, "工资单") },
      { key: "3", title: getLabel(111, "个人薪酬统计") },
      { key: "2", title: getLabel(543150, "调薪记录") }
    ];
    salaryShowStatus === "0" && (tabs = _.filter(tabs, o => o.key !== "1"));
    adjustShowStatus === "0" && (tabs = _.filter(tabs, o => o.key !== "2"));
    // , store: { ...this.state.store, loading: false }
    this.setState({ sysinfo, tabs }, () => {
      const { tabs, store } = this.state;
      this.setState({
        selectedKey: !_.isEmpty(tabs) ? _.head(tabs).key : "0"
        // store: { ...store, hasRight: !_.isEmpty(tabs) }
      });
    });
  }

  renderContent = () => {
    const { selectedKey, salaryYearMonth } = this.state;
    let Dom = null;
    switch (selectedKey) {
      case "1":
        Dom = <Payroll salaryYearMonth={salaryYearMonth}
                       onFilterLog={(type, targetid) => this.onDropMenuClick(type, targetid)}/>;
        break;
      case "2":
        Dom = <SalaryAdjustmentRecords/>;
        break;
      case "3":
        Dom = <PersonalSalaryReport isCom dateRange={salaryYearMonth}/>;
        break;
      default:
        break;
    }
    return Dom;
  };
  onDropMenuClick = (key, targetid = "") => {
    switch (key) {
      case "log":
        this.setState({
          logDialogVisible: true,
          filterConditions: targetid ? `[{\"connectCondition\":\"AND\",\"columIndex\":\"targetid\",\"type\":\"=\",\"value\":\"${targetid}\"}]` : "[]"
        });
        break;
      default:
        break;
    }
  };

  render() {
    const { selectedKey, salaryYearMonth, tabs, logDialogVisible, filterConditions, captchaVisible } = this.state;
    const btns = [
      <div className="flex-salary">
        <div className="mysalary-search-title">{getLabel(542604, "薪资所属月")}</div>
        <MonthRangePicker dateRange={salaryYearMonth} viewAttr={2} isOneYear
                          onChange={v => this.setState({ salaryYearMonth: v })}/>
      </div>
    ];
    const logFunction = selectedKey === "1" ? "mysalarybill" : "myadjustrecord";
    {/*发送验证码*/
    }
    if (captchaVisible) {
      return <CaptchaModal
        visible={captchaVisible}
        onCancel={() => this.setState({ captchaVisible: false, store: { loading: false, hasRight: false } })}
        onConfirm={() => {
          this.setState({ store: { loading: false, hasRight: true } });
        }}
      />;
    }
    return (
      <Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`}
                 store={{ ...this.state.store }}>
        <WeaReqTop
          title={getLabel(537998, "我的薪资福利")} icon={<i className="icon-coms-fa"/>}
          iconBgcolor="#F14A2D" tabDatas={tabs} className="mySalary_wrapper"
          buttons={(selectedKey === "1" || selectedKey === "3") ? btns : []} buttonSpace={10} selectedKey={selectedKey}
          onChange={selectedKey => this.setState({ selectedKey })}
          showDropIcon onDropMenuClick={this.onDropMenuClick}
          dropMenuDatas={[
            {
              key: "log", icon: <i className="iconfont icon-caozuorizhi32"/>,
              content: getLabel(545781, "操作日志")
            }
          ]}
        >
          {this.renderContent()}
          {/*操作日志*/}
          <LogDialog visible={logDialogVisible} logFunction={logFunction} filterConditions={filterConditions}
                     onCancel={() => this.setState({ logDialogVisible: false })}/>
        </WeaReqTop>
      </Authority>
    );
  }
}

export default Index;