Merge branch 'feature/V2-数据透视' into develop

2023-06-08 14:56:10 +08:00 · 2023-06-08 14:56:10 +08:00 · 0aaa459ec7
parent 335e86d9c8 8bb1146ca5
commit 0aaa459ec7
8 changed files with 299 additions and 59 deletions
--- a/pc4mobx/hrmSalary/apis/statistics.js
+++ b/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);
+};
--- a/pc4mobx/hrmSalary/pages/reportView/components/index.less
+++ b/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%;
+  }
+}
--- a/pc4mobx/hrmSalary/pages/reportView/components/povitpivotChartModal.js
+++ b/pc4mobx/hrmSalary/pages/reportView/components/povitpivotChartModal.js
@ -0,0 +1,136 @@
+/*
+ * Author: 黎永顺
+ * name: 数据透视弹框
+ * Description:
+ * Date: 2023/6/8
+ */
+import React, { Component } from "react";
+import { WeaDialog, WeaLocaleProvider } from "ecCom";
+import { WeaTableNew } from "comsMobx";
+import { Spin } from "antd";
+import { toJS } from "mobx";
+import { inject, observer } from "mobx-react";
+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 } = nextProps;
+      this.getDataPerspective({ id, dimensionId, dimensionValue });
+    } 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 } = 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, 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
+    });
+  };
+
+  render() {
+    const { loading } = this.state;
+    const { payrollFilesStore: { pivotTableStore } } = this.props;
+    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>
+        <WeaTableComx
+          style={{ display: "none" }}
+          comsWeaTableStore={pivotTableStore}
+          needScroll={true}
+          columns={this.getColumns()}
+        />
+      </WeaDialog>
+    );
+  }
+}
+
+export default PovitpivotChartModal;
--- a/pc4mobx/hrmSalary/pages/reportView/components/reportContent.js
+++ b/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>
    );
  }
--- a/pc4mobx/hrmSalary/pages/salaryItem/index.js
+++ b/pc4mobx/hrmSalary/pages/salaryItem/index.js
@ -223,9 +223,8 @@ export default class SalaryItem extends React.Component {
    }

    const handleMenuClick = (e) => {
-      const { salaryItemStore: { getSysItemList, setEditSlideVisible, initRequest } } = this.props;
+      const { salaryItemStore: { setEditSlideVisible, initRequest } } = this.props;
      if (e.key === "1") {
-        getSysItemList({});
        setSystemItemVisible(true);
      } else if (e.key === "2") {
        this.setState({ editable: true, isAdd: true });
--- a/pc4mobx/hrmSalary/pages/salaryItem/index.less
+++ b/pc4mobx/hrmSalary/pages/salaryItem/index.less
@ -71,6 +71,11 @@
      justify-content: flex-end;
      align-items: center;
      padding: 16px 20px;
+
+      .wea-tab {
+        width: 100%;
+        border-bottom: none;
+      }
    }
  }
 }
--- a/pc4mobx/hrmSalary/pages/salaryItem/systemSalaryItemModal.js
+++ b/pc4mobx/hrmSalary/pages/salaryItem/systemSalaryItemModal.js
@ -1,81 +1,118 @@
 import React from "react";
-import { WeaDialog, WeaInputSearch } from "ecCom";
-import { Button } from "antd";
-import { inject, observer } from "mobx-react";
-import { WeaTableNew } from "comsMobx";
+import { WeaDialog, WeaLocaleProvider, WeaTab } from "ecCom";
+import { Button, message } from "antd";
+import { getSysItemList, saveSysItem } from "../../apis/item";
+import UnifiedTable from "../../components/UnifiedTable";
 import "./index.less";

-const WeaTable = WeaTableNew.WeaTable;
-
-@inject("salaryItemStore")
-@observer
+const { getLabel } = WeaLocaleProvider;
 export default class SystemSalaryItemModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
-      searchValue: ""
+      dataSource: [],
+      columns: [],
+      name: "",
+      loading: false,
+      saveLoading: false,
+      selectedRowKeys: [],
+      pageInfo: {
+        current: 1, pageSize: 10, total: 0
+      }
    };
  }

-  // 搜索改变事件
-  handleSearchChange(value) {
-    this.setState({ searchValue: value });
+  componentDidMount() {
+    this.getSysItemList();
  }

-  // 搜索
-  handleSearch(value) {
-    const { salaryItemStore } = this.props;
-    const { getSysItemList } = salaryItemStore;
-    getSysItemList({ name: value });
-  }
+  getSysItemList = () => {
+    this.setState({ loading: true });
+    const { pageInfo, name } = this.state;
+    getSysItemList({ ...pageInfo, name }).then(({ status, data }) => {
+      this.setState({ loading: false });
+      if (status) {
+        const { columns, list: dataSource, pageNum: current, pageSize, total } = data;
+        this.setState({
+          columns, dataSource,
+          pageInfo: { ...pageInfo, current, pageSize, total }
+        });
+      }
+    }).catch(() => this.setState({ loading: false }));
+  };
+  handleAdd = () => {
+    const { selectedRowKeys } = this.state;
+    if (_.isEmpty(selectedRowKeys)) {
+      message.info(getLabel(111, "未选择任何条目"));
+      return;
+    }
+    this.setState({ saveLoading: true });
+    saveSysItem(selectedRowKeys).then(({ status, errormsg }) => {
+      this.setState({ saveLoading: false });
+      if (status) {
+        message.success(getLabel(111, "添加成功"));
+        this.setState({ selectedRowKeys: [] }, () => {
+          this.getSysItemList();
+          this.props.onCancel();
+        });
+      } else {
+        message.error(errormsg);
+      }
+    }).catch(() => this.setState({ saveLoading: false }));
+  };

  render() {
-    const { salaryItemStore } = this.props;
-    const { sysListTableStore, saveLoading } = salaryItemStore;
-    const { searchValue } = this.state;
-
-    const handleAdd = () => {
-      const { salaryItemStore: { saveSysItem } } = this.props;
-      saveSysItem();
+    const { selectedRowKeys, pageInfo, loading, columns, dataSource, saveLoading } = this.state;
+    const pagination = {
+      current: pageInfo.current,
+      pageSize: pageInfo.pageSize,
+      total: pageInfo.total,
+      showTotal: total => `${getLabel(111, "共")} ${total} ${getLabel(111, "条")}`,
+      showQuickJumper: true,
+      showSizeChanger: true,
+      pageSizeOptions: ["10", "20", "50", "100"],
+      onShowSizeChange: (current, pageSize) => {
+        this.setState({ pageInfo: { ...pageInfo, current, pageSize } }, () => {
+          this.getSysItemList();
+        });
+      },
+      onChange: current => {
+        this.setState({ pageInfo: { ...pageInfo, current } }, () => {
+          this.getSysItemList();
+        });
+      }
+    };
+    const rowSelection = {
+      selectedRowKeys,
+      onChange: (selectedRowKeys) => this.setState({ selectedRowKeys })
    };
-
    return (
      <WeaDialog
        title="添加系统薪资项目"
-        initLoadCss
-        className="sys-salary-wrapper"
-        visible={this.props.visible}
-        onCancel={() => {
+        initLoadCss className="sys-salary-wrapper"
+        visible={this.props.visible} onCancel={() => {
+        this.setState({ selectedRowKeys: [] }, () => {
          this.props.onCancel();
-        }}
-        style={{ width: "60vw" }}
+        });
+      }} style={{ width: "60vw" }} scalable
        buttons={[
-          <Button
-            type="primary"
-            loading={saveLoading}
-            onClick={() => {
-              handleAdd();
-            }}
-          >添加</Button>
+          <Button type="primary" loading={saveLoading} onClick={this.handleAdd}>添加</Button>
        ]}
      >
        <div className="headerSearchWrapper">
-          <WeaInputSearch
-            value={searchValue}
-            placeholder="请输入名称"
-            onChange={(value) => {
-              this.handleSearchChange(value);
-            }}
-            onSearch={(value) => {
-              this.handleSearch(value);
-            }}/>
+          <WeaTab datas={[]} keyParam="viewcondition" //主键
+                  searchType={["base"]} onSearchChange={name => this.setState({ name })}
+                  onSearch={this.getSysItemList}
+          />
        </div>
-        <WeaTable // table内部做了loading加载处理，页面就不需要再加了
-          comsWeaTableStore={sysListTableStore} // table store
-          hasOrder={true} // 是否启用排序
-          needScroll={false} // 是否启用table内部列表滚动，将自适应到父级高度
-          // getColumns={this.getColumns}
-          // onOperatesClick={this.onOperatesClick.bind(this)}
+        <UnifiedTable
+          loading={loading}
+          rowKey="id"
+          columns={columns}
+          dataSource={dataSource}
+          pagination={pagination}
+          rowSelection={rowSelection}
+          xWidth={columns.length * 120}
        />
      </WeaDialog>
    );
--- a/pc4mobx/hrmSalary/stores/payrollFiles.js
+++ b/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();
+      });
+    });
+  };
 }