salary-management-front/pc4mobx/hrmSalary/pages/calculate/calculate.js

/*
 * Author: 黎永顺
 * name: 薪资核算-重构页面
 * Description:
 * Date: 2023/10/9
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaLocaleProvider, WeaTop } from "ecCom";
import { Button } from "antd";
import moment from "moment";
import CalculateQuery from "./components/calculateQuery";
import CalculateTablelist from "./components/calculateTablelist";
import CalculateDialog from "./components/calculateDialog";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

@inject("calculateStore", "taxAgentStore")
@observer
class Calculate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      queryParams: {
        name: "",
        dateRange: [
          moment(new Date()).startOf("year").format("YYYY-MM"),
          moment(new Date()).startOf("month").format("YYYY-MM")
        ]
      },
      isRefresh: false,
      calcDaialog: { visible: false, title: "" }
    };
  }

  renderCalculateOpts = () => {
    const { taxAgentStore: { showOperateBtn } } = this.props;
    const { queryParams, isRefresh } = this.state;
    let calculateOpts = [
      <Button type="primary" onClick={() => this.setState({
        calcDaialog: {
          visible: true,
          title: getLabel(538780, "核算")
        }
      })}>{getLabel(538780, "核算")}</Button>,
      <CalculateQuery queryParams={queryParams} onChange={v => this.setState({
        isRefresh: _.keys(v)[0] === "name" ? isRefresh : !isRefresh,
        queryParams: { ...queryParams, ...v }
      })} onSearch={() => this.setState({ isRefresh: !isRefresh })}/>
    ];
    return !showOperateBtn ? calculateOpts.slice(1) : calculateOpts;
  };

  render() {
    const { queryParams, isRefresh, calcDaialog } = this.state;
    return (
      <WeaTop title={getLabel(538011, "薪资核算")} icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D"
              buttons={this.renderCalculateOpts()} className="calculate-main-layout"
      >
        <div className="calculate-body">
          <CalculateTablelist queryParams={queryParams} isRefresh={isRefresh}/>
          <CalculateDialog {...calcDaialog}
                           onCancel={(bool, id) => this.setState({
                             calcDaialog: { ...calcDaialog, visible: false },
                             isRefresh: bool === "refresh" ? !isRefresh : isRefresh
                           }, () => bool === "refresh" && window.open(`/spa/hrmSalary/static/index.html#/main/hrmSalary/calculate/${id}`))}
          />
        </div>
      </WeaTop>
    );
  }
}

export default Calculate;