产品-数据统计-数据透视

pc4mobx/hrmSalary/apis/statistics.js

@@ -74,3 +74,7 @@ export const statisticsEmployeeList = (params) => {
 export const statisticsEmployeeDetailList = (params) => {
   return postFetch("/api/bs/hrmsalary/report/statistics/employee/detailList", params);
 };
+//数据透视-列表查询
+export const getDataPerspective = (params) => {
+  return postFetch("/api/bs/hrmsalary/report/statistics/report/getDataPerspective", params);
+};

pc4mobx/hrmSalary/pages/reportView/components/index.less

@@ -48,3 +48,18 @@
     align-items: center;
   }
 }
+
+.pivot-wrapper {
+  .wea-dialog-body {
+    height: 80vh !important;
+    padding: 16px;
+
+    .wea-new-scroll {
+      height: 100% !important;
+    }
+  }
+
+  .ant-spin-nested-loading, .ant-spin-container {
+    height: 100%;
+  }
+}

pc4mobx/hrmSalary/pages/reportView/components/povitpivotChartModal.js

@@ -0,0 +1,115 @@
+/*
+ * 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;

pc4mobx/hrmSalary/pages/reportView/components/reportContent.js

@@ -11,6 +11,7 @@ import RightOptions from "./rightOptions";
 import ChartsRangeSettingsModal from "./chartsRangeSettingsModal";
 import { mapBarOptions, mapLineOptions, mapPieOptions } from "./condition";
 import { queryRangeSetting, reportStatisticsReportGetData } from "../../../apis/statistics";
+import PovitpivotChartModal from "./povitpivotChartModal";
 import "../index.less";
 
 class ReportContent extends Component {
@@ -24,6 +25,10 @@ class ReportContent extends Component {
       viewType: "dataView",
       chartsType: "0",
       chartsInfo: {},
+      povitView: {
+        visible: false, id: "",
+        dimensionId: "", dimensionValue: ""
+      },
       rangSet: {
         visible: false, reportId: "",
         rangeVal: {}
@@ -48,7 +53,7 @@ class ReportContent extends Component {
   }
 
   handleReceive = ({ data }) => {
-    const { type } = data;
+    const { type, payload: { id, params } = {} } = data;
     if (type === "init") {
       const { columns, countResult, dataSource } = this.state;
       this.postMessageToChild({
@@ -56,6 +61,17 @@ class ReportContent extends Component {
         showSum: !_.isEmpty(countResult)
       });
     } else if (type === "turn") {
+      //数据透视弹框
+      if (id === "PIVOTCHART") {
+        const { record } = params;
+        const { dimension: dimensionValue } = record;
+        const { id: pivotId, dimensionId } = this.props.report;
+        this.setState({
+          povitView: {
+            visible: true, id: pivotId, dimensionId, dimensionValue
+          }
+        });
+      }
     }
   };
   postMessageToChild = (payload) => {
@@ -212,7 +228,7 @@ class ReportContent extends Component {
   };
 
   render() {
-    const { loading, viewType, rangSet, columns } = this.state;
+    const { loading, viewType, rangSet, columns, povitView } = this.state;
     return (
       <div className="layoutContent">
         <div className="layoutBox">
@@ -238,6 +254,15 @@ class ReportContent extends Component {
           onChange={this.queryRangeSetting}
           onGetData={this.handleGetData}
         />
+        {/* 数据透视弹框*/}
+        <PovitpivotChartModal
+          {...povitView}
+          onCancel={() => this.setState({
+            povitView: {
+              visible: false, id: "", dimensionId: "", dimensionValue: ""
+            }
+          })}
+        />
       </div>
     );
   }

pc4mobx/hrmSalary/stores/payrollFiles.js

@@ -1,13 +1,15 @@
 import { action, observable } from "mobx";
 import { WeaTableNew } from "comsMobx";
 import * as API from "../apis/payrollFiles";
-import { statisticsEmployeeDetailList } from "../apis/statistics";
+import { statisticsEmployeeDetailList, getDataPerspective } from "../apis/statistics";
+
 
 const { TableStore } = WeaTableNew;
 
 export class PayrollFilesStore {
   @observable tableStore = new TableStore();
   @observable employeeTableStore = new TableStore();
+  @observable pivotTableStore = new TableStore();
 
   @action("薪资档案-列表查询")
   queryList = (payload = {}, searchItemsValue = {}, url = "") => {
@@ -48,4 +50,21 @@ export class PayrollFilesStore {
       });
     });
   };
+
+  @action("报表查看-数据透视")
+  getDataPerspective = (payload) => {
+    return new Promise((resolve, reject) => {
+      getDataPerspective(payload).then(res => {
+        const { data, status } = res;
+        if (status) {
+          const { dataKey } = data;
+          const { datas } = dataKey;
+          this.pivotTableStore.getDatas(datas); // table 请求数据
+        }
+        resolve(res);
+      }).catch(() => {
+        reject();
+      });
+    });
+  };
 }