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, WeaLocaleProvider, WeaSelect, WeaTop } from "ecCom";
import { message, Modal } from "antd";
import LeftTab from "./components/leftTab";
import ReportContent from "./components/reportContent";
import StatisticalMicroSettingsSlide from "./components/statisticalMicroSettingsSlide";
import { reportGetForm, reportStatisticsReportSave } from "../../apis/ruleconfig";
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() {
    const { taxAgentStore: { fetchTaxAgentOption } } = this.props;
    this.reportGetForm();
    fetchTaxAgentOption();
  }

  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 = () => {
    const { report } = this.state;
    const { id, dimensionId } = report;
    window.open(`${window.location.origin}/api/bs/hrmsalary/report/statistics/report/exportData?id=${id}&dimensionId=${dimensionId}`, "_self");
  };

  render() {
    const { report, dimensionList, statisticalPayload } = this.state;
    const { attendanceStore: { settingForm }, taxAgentStore: { taxAgentOption } } = this.props;
    return (
      <WeaTop
        title={getLabel(111, "报表查看")}
        icon={<i className="icon-coms-fa"/>}
        iconBgcolor="#F14A2D"
        showDropIcon={false}
        className="reportViewWrapper"
      >
        <WeaLeftRightLayout
          leftWidth={210}
          leftCom={
            <LeftTab
              ref={dom => this.leftTabRef = dom}
              onChangeTab={report =>
                this.setState({
                  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}
                                 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}
                      onClose={(isRefresh) => this.setState({
                        statisticalPayload: { visible: false, id: "", dimension: "" }
                      }, () => isRefresh && this.reportRef.reportStatisticsReportGetData(report.id, report.dimensionId))}
                    />
                  </div>
                </div>
              </div>
            </div>
            {/* 内容区 */}
            <ReportContent ref={dom => this.reportRef = dom} report={report}/>
          </div>
        </WeaLeftRightLayout>
      </WeaTop>
    );
  }
}

export default Index;