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

/*
 * Author: 黎永顺
 * name: 数据透视弹框
 * Description:
 * Date: 2023/6/8
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaDialog, WeaLoadingGlobal, WeaLocaleProvider } from "ecCom";
import * as API from "../../../apis/payrollFiles";
import { WeaTableNew } from "comsMobx";
import { Button, Spin } from "antd";
import { toJS } from "mobx";
import "./index.less";

const WeaTableComx = WeaTableNew.WeaTable;
const { getLabel } = WeaLocaleProvider;

@inject("payrollFilesStore")
@observer
class PovitpivotChartModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      loading: false,
      pageInfo: {
        current: 1, pageSize: 10, total: 0
      }
    };
  }

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

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visible && nextProps.visible) {
      const { id, dimensionId, dimensionValue, isShare } = nextProps;
      this.getDataPerspective({ id, dimensionId, dimensionValue, isShare });
    } else {
      this.setState({
        dataSource: [],
        loading: false,
        pageInfo: {
          current: 1, pageSize: 10, total: 0
        }
      });
    }
  }

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

  handleReceive = ({ data }) => {
    const { type, payload: { id, params } = {} } = data;
    const { dataSource, pageInfo } = this.state;
    if (type === "init") {
      const { payrollFilesStore: { pivotTableStore } } = this.props;
      const columns = _.filter(toJS(pivotTableStore.columns), (item) => item.display === "true" && item.dataIndex !== "randomFieldId");
      this.postMessageToChild({
        dataSource, showSum: false, pageInfo, columns
      });
    } else if (type === "turn") {
      if (id === "PAGEINFO") {
        const { id, dimensionId, dimensionValue, isShare } = this.props;
        const { pageNum: current, size: pageSize } = params;
        this.setState({ pageInfo: { ...pageInfo, current, pageSize } }, () =>
          this.getDataPerspective({
            id, dimensionId, dimensionValue, isShare
          }));
      }
    }
  };
  postMessageToChild = (payload) => {
    const childFrameObj = document.getElementById("commonTable");
    const { dataSource, showSum = false, pageInfo, columns } = payload;
    childFrameObj && childFrameObj.contentWindow.postMessage(JSON.stringify({
      dataSource, columns, showSum, pageInfo
    }), "*");
  };
  getDataPerspective = (payload) => {
    const { pageInfo } = this.state;
    const { payrollFilesStore: { getDataPerspective } } = this.props;
    this.setState({ loading: true });
    getDataPerspective({ ...payload, ...pageInfo }).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        const { pageInfo: { list, pageNum: current, pageSize, total } } = data;
        this.setState({
          dataSource: list || [],
          pageInfo: { ...pageInfo, current, pageSize, total }
        });
      }
    }).catch(() => this.setState({ loading: false }));
  };
  getColumns = () => {
    const { dataSource, pageInfo } = this.state;
    const { payrollFilesStore: { pivotTableStore } } = this.props;
    const columns = _.filter(toJS(pivotTableStore.columns), (item) => item.display === "true" && item.dataIndex !== "randomFieldId");
    this.postMessageToChild({
      columns, dataSource,
      showSum: false, pageInfo
    });
  };
  exportDataPerspective = () => {
    WeaLoadingGlobal.start();
    const { id, dimensionId, dimensionValue, isShare } = this.props;
    const promise = API.exportDataPerspective({ id, dimensionId, dimensionValue, isShare });
    WeaLoadingGlobal.destroy();
  };

  render() {
    const { loading } = this.state;
    const { payrollFilesStore: { pivotTableStore } } = this.props;
    return (
      <WeaDialog
        title={<div className="header-custom">
          <span>{getLabel(111, "数据透视")}</span>
          <Button type="primary" onClick={this.exportDataPerspective}>{getLabel(17416, "导出")}</Button>
        </div>}
        scalable className="pivot-wrapper" initLoadCss
        visible={this.props.visible} style={{ width: "80vw", height: "80vh" }}
        buttons={[]} onCancel={this.props.onCancel}>
        <Spin spinning={loading}>
          <iframe
            style={{ border: 0, width: "100%", height: "100%" }}
            // src="http://localhost:7607/#/commonTable"
            src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/commonTable"
            id="commonTable"
          />
        </Spin>
        <WeaTableComx
          style={{ display: "none" }}
          comsWeaTableStore={pivotTableStore}
          needScroll={true}
          columns={this.getColumns()}
        />
      </WeaDialog>
    );
  }
}

export default PovitpivotChartModal;