salary-management-front/pc4mobx/hrmSalary/pages/reportView/components/reportContent.js

/*
 * Author: 黎永顺
 * name: 报表内容区
 * Description:
 * Date: 2023/4/21
 */
import React, { Component } from "react";
import { Spin } from "antd";
import RightOptions from "./rightOptions";
import ChartsRangeSettingsModal from "./chartsRangeSettingsModal";
import { queryRangeSetting, reportStatisticsReportGetData } from "../../../apis/statistics";
import "../index.less";

class ReportContent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [],
      dataSource: [],
      countResult: {},
      loading: false,
      viewType: "dataView",
      chartsType: "0",
      rangSet: {
        visible: false, reportId: "",
        chartsType: "1", rangeVal: {}
      }
    };
  }

  componentDidMount() {
    window.addEventListener("message", this.handleReceive, false);
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.report !== this.props.report && nextProps.report.dimensionId) {
      this.reportStatisticsReportGetData(nextProps.report.id, nextProps.report.dimensionId);
      this.setState({ viewType: "dataView" });
    }
  }

  componentWillUnmount() {
    window.removeEventListener("message", this.handleReceive, false);
  }

  handleReceive = ({ data }) => {
    const { type } = data;
    if (type === "init") {
      const { columns, countResult, dataSource } = this.state;
      this.postMessageToChild({
        columns, countResult, dataSource,
        showSum: !_.isEmpty(countResult)
      });
    } else if (type === "turn") {
    }
  };
  postMessageToChild = (payload) => {
    const childFrameObj = document.getElementById("atdTable");
    const { dataSource, columns, showSum, countResult } = payload;
    childFrameObj.contentWindow.postMessage(JSON.stringify({
      dataSource, columns, showSum, countResult
    }), "*");
  };
  reportStatisticsReportGetData = (id, dimensionId) => {
    const payload = { id, dimensionId };
    this.setState({ loading: true });
    reportStatisticsReportGetData(payload).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        const { countResult, columns, pageInfo: { list } } = data;
        this.setState({
          countResult,
          columns: _.map(columns, it => ({
            ...it,
            dataIndex: it.column, width: 150,
            title: it.text, align: "center",
            children: !_.isNil(it.children) ? _.map(it.children, child => ({
              ...child,
              dataIndex: child.column, width: 150,
              title: child.text, align: "center"
            })) : []
          })),
          dataSource: list || []
        }, () => {
          this.postMessageToChild({
            columns: this.state.columns, countResult: this.state.countResult,
            dataSource: this.state.dataSource,
            showSum: !_.isEmpty(this.state.countResult)
          });
        });
      }
    }).catch(() => this.setState({ loading: false }));
  };
  queryRangeSetting = (payload) => {
    this.setState({ loading: true });
    queryRangeSetting(payload).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        const { rangSet } = this.state;
        this.setState({
          rangSet: {
            ...rangSet,
            rangeVal: data
          }
        });
      }
    }).catch(() => this.setState({ loading: false }));
  };
  handleChangeChartOpts = (chartsType, viewType) => {
    const { report: { id: reportId, dimensionId } } = this.props;
    const { rangSet } = this.state;
    viewType !== "setting" && this.setState({ chartsType, viewType }, () => {
      const { viewType, chartsType } = this.state;
      viewType !== "dataView" ?
        this.queryRangeSetting({ reportId, chartsType }) :
        this.reportStatisticsReportGetData(reportId, dimensionId);
    });
    viewType === "setting" && this.setState({ rangSet: { ...rangSet, visible: true, reportId, chartsType } }, () => {
      this.queryRangeSetting({ reportId, chartsType });
    });
  };
  handleCancel = () => {
    this.setState({
      rangSet: {
        visible: false, reportId: "",
        chartsType: "1", rangeVal: {}
      }
    });
  };

  render() {
    const { loading, viewType, rangSet, columns } = this.state;
    return (
      <div className="layoutContent">
        <div className="layoutBox">
          <Spin spinning={loading}>
            {
              viewType === "dataView" ?
                <iframe
                  style={{ border: 0, width: "100%", height: "100%" }}
                  // src="http://localhost:7607/#/reportTable"
                  src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/reportTable"
                  id="atdTable"
                /> : <ChartEmptyComp/>
            }
          </Spin>
        </div>
        {/*侧边栏*/}
        <RightOptions onChange={this.handleChangeChartOpts}/>
        {/* 图表范围数据设置框 */}
        <ChartsRangeSettingsModal
          {...rangSet}
          columns={columns}
          onCancel={this.handleCancel}
          onChange={this.queryRangeSetting}
        />
      </div>
    );
  }
}

export default ReportContent;

const ChartEmptyComp = () => {
  return <div className="chartsEmptyWrapper">
    <span>
      <img src={require("../../../common/Icon-empty-file.svg")} alt=""/>
    </span>
    <span>暂无数据</span>
    <span>您还没有设置报表统计项，请先设置一下哦~</span>
  </div>;
};