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

116 lines
3.6 KiB
JavaScript

/*
* Author: 黎永顺
* name: 数据透视弹框
* Description:
* Date: 2023/6/8
*/
import React, { Component } from "react";
import { WeaDialog, WeaLocaleProvider } from "ecCom";
import { Spin } from "antd";
import { toJS } from "mobx";
import { inject, observer } from "mobx-react";
import "./index.less";
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 } = nextProps;
this.getDataPerspective({ id, dimensionId, dimensionValue });
}
}
componentWillUnmount() {
window.removeEventListener("message", this.handleReceive, false);
}
handleReceive = ({ data }) => {
const { type, payload: { id, params } = {} } = data;
const { dataSource, pageInfo } = this.state;
if (type === "init") {
this.postMessageToChild({
dataSource, showSum: false, pageInfo
});
} else if (type === "turn") {
if (id === "PAGEINFO") {
const { id, dimensionId, dimensionValue } = this.props;
const { pageNum: current, size: pageSize } = params;
this.setState({ pageInfo: { ...pageInfo, current, pageSize } }, () =>
this.getDataPerspective({
id,
dimensionId,
dimensionValue
}));
}
}
};
postMessageToChild = (payload) => {
const childFrameObj = document.getElementById("commonTable");
const { dataSource, showSum = false, pageInfo } = payload;
const { payrollFilesStore: { pivotTableStore } } = this.props;
const columns = toJS(pivotTableStore.columns);
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 }
}, () => {
this.postMessageToChild({
dataSource: this.state.dataSource,
showSum: false, pageInfo: this.state.pageInfo
});
});
}
}).catch(() => this.setState({ loading: false }));
};
render() {
const { loading } = this.state;
return (
<WeaDialog
title={getLabel(111, "数据透视")} 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>
</WeaDialog>
);
}
}
export default PovitpivotChartModal;