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 Authority from "../mySalary/authority";
import * as API from "../../apis/ruleconfig";
import LogDialog from "../../components/logViewModal";
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: "[]",
      salaryYearMonth: [
        moment().subtract(1, "year").startOf("year").format("YYYY-MM"),
        moment().endOf("year").format("YYYY-MM")
      ]
    };
  }

  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: "2", title: getLabel(543150, "调薪记录") }
    ];
    salaryShowStatus === "0" && (tabs = _.filter(tabs, o => o.key !== "1"));
    adjustShowStatus === "0" && (tabs = _.filter(tabs, o => o.key !== "2"));
    this.setState({ sysinfo, tabs, store: { ...this.state.store, loading: false } }, () => {
      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;
      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 } = this.state;
    const btns = [
      <div className="flex-salary">
        <div className="mysalary-search-title">{getLabel(542604, "薪资所属月")}</div>
        <MonthRangePicker dateRange={salaryYearMonth} viewAttr={2}
                          onChange={v => this.setState({ salaryYearMonth: v })}/>
      </div>
    ];
    const logFunction = selectedKey === "1" ? "mysalarybill" : "myadjustrecord";
    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" ? 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;