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

/*
 * Author: 黎永顺
 * name: 薪酬报表查看
 * Description:
 * Date: 2023/4/20
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaLeftRightLayout, WeaLoadingGlobal, WeaLocaleProvider, WeaSelect, WeaTop } from "ecCom";
import { message, Modal } from "antd";
import LeftTab from "./components/leftTab";
import ReportContent from "./components/reportContent";
import StatisticalMicroSettingsSlide, { getSalaryMonthValue } from "./components/statisticalMicroSettingsSlide";
import { exportDataReport, reportGetForm, reportStatisticsReportSave } from "../../apis/ruleconfig";
import TopBtns from "./components/topBtns";
import "./index.less";


const { getLabel } = WeaLocaleProvider;

@inject("taxAgentStore", "attendanceStore")
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      report: {},
      dimensionList: [],
      statisticalPayload: {
        visible: false, id: "", dimension: ""
      }
    };
  }

  componentDidMount() {
    this.reportGetForm();
  }

  reportGetForm = () => {
    reportGetForm().then(({ status, data }) => {
      if (status) {
        const { statsDimOptions } = data;
        this.setState({
          dimensionList: _.map(statsDimOptions, it => ({ key: it.id, showname: it.content }))
        });
      }
    });
  };
  /*
   * Author: 黎永顺
   * Description: 统计维度切换
   * Params:
   * Date: 2023/4/20
   */
  handleChangeDimension = (dimensionId, dimension) => {
    const { report } = this.state;
    Modal.confirm({
      title: getLabel(111, "信息确认"),
      content: getLabel(111, "确认要更改统计维度吗？"),
      onOk: () => {
        const payload = {
          id: report.id,
          reportName: report.reportName,
          dimensionIds: dimensionId.split(",")
        };
        reportStatisticsReportSave(payload).then(({ status, errormsg }) => {
          this.setState({ loading: false });
          if (status) {
            message.success(getLabel(111, "切换成功"));
            this.setState({
              report: {
                ...report, dimensionId,
                dimension
              }
            }, () => this.leftTabRef.updateReportList(this.state.report));
          } else {
            message.error(errormsg || getLabel(111, "切换失败"));
            this.setState({ report: { ...report } });
          }
        });
      },
      onCancel: () => {
        this.setState({ report: { ...report } });
      }
    });
  };
  /*
   * Author: 黎永顺
   * Description: 导出报表数据
   * Params:
   * Date: 2023/4/24
   */
  exportData = () => {
    if (this.reportRef.state.loading) {
      message.info(getLabel(111, "列表正在加载中，请稍后"));
      return;
    }
    const { report } = this.state;
    const { id, dimensionId, isShare, timeType, salaryEndMonth: end, salaryStartMonth: start } = report;
    const [salaryStartMonth, salaryEndMonth] = getSalaryMonthValue(timeType);
    const payload = {
      id, dimensionId, isShare,
      salaryStartMonth: (salaryStartMonth || start) + "-01", salaryEndMonth: (salaryEndMonth || end) + "-01"
    };
    WeaLoadingGlobal.start();
    const promise = exportDataReport(payload);
  };

  render() {
    const { report, dimensionList, statisticalPayload } = this.state;
    const { isShare } = report;
    const { attendanceStore: { settingForm }, taxAgentStore: { taxAgentOption, showOperateBtn } } = this.props;
    return (
      <WeaTop
        title={getLabel(111, "报表查看")} icon={<i className="icon-coms-fa"/>}
        iconBgcolor="#F14A2D" className="reportViewWrapper"
        buttons={(showOperateBtn && !isShare) ? [<TopBtns/>] : []}
      >
        <WeaLeftRightLayout
          leftWidth={210}
          leftCom={
            <LeftTab
              ref={dom => this.leftTabRef = dom}
              onChangeTab={report =>
                this.setState({
                  report: !_.isNil(report) ? report : this.state.report,
                  statisticalPayload: { visible: false, id: "", dimension: "" }
                })}
            />
          }
        >
          <div className="rightLayout">
            <div className="layoutHeader">
              <div className="layoutRow">
                <div className="layoutCol"><span className="leftColTitle">{report.reportName}</span></div>
                <div className="layoutCol layoutColRight">
                  <div className="rightColTitle">
                    <div className="dimension">
                      <span>{getLabel(111, "统计维度")}：</span>
                      <WeaSelect value={report.dimensionId} options={dimensionList} disabled={isShare}
                                 onChange={(key, showname) => this.handleChangeDimension(key, showname)}/>
                    </div>
                    <div className="iconWrapper">
                      <i
                        className="icon-coms02-currency"
                        title={getLabel(111, "统计数据范围及规则设置")}
                        onClick={() => {
                          if (this.reportRef.state.loading) {
                            message.info(getLabel(111, "列表正在加载中，请稍后"));
                          } else {
                            this.setState({
                              statisticalPayload: { visible: true, id: report.id, dimension: report.dimensionId }
                            });
                          }
                        }}
                      />
                      <i className="icon-coms-export" onClick={this.exportData} title={getLabel(111, "导出")}/>
                    </div>
                    {/*统计数据范围及规则设置弹框*/}
                    <StatisticalMicroSettingsSlide
                      {...statisticalPayload} form={settingForm}
                      taxAgentAdminOption={taxAgentOption} isShare={isShare}
                      onClose={(isRefresh) => this.setState({
                        statisticalPayload: { visible: false, id: "", dimension: "" }
                      }, () => isRefresh && this.leftTabRef.reportStatisticsReportList())}
                    />
                  </div>
                </div>
              </div>
            </div>
            {/* 内容区 */}
            <ReportContent ref={dom => this.reportRef = dom} report={report}/>
          </div>
        </WeaLeftRightLayout>
      </WeaTop>
    );
  }
}

export default Index;