产品-薪酬统计分析模块

2023-04-20 15:36:51 +08:00 · 2023-04-20 15:36:51 +08:00 · 7c60a44e66
parent d09562355c
commit 7c60a44e66
6 changed files with 266 additions and 4 deletions
--- a/pc4mobx/hrmSalary/index.js
+++ b/pc4mobx/hrmSalary/index.js
@ -32,7 +32,8 @@ import SysConfig from "./pages/sysConfig";
 import RuleConfig from "./pages/ruleConfig";
 import Appconfig from "./pages/appConfig";
 import FieldManagement from "./pages/fieldManagement";
-import AnalysisOfSalaryStatistics from "./pages/analysisOfSalaryStatistics"
+import AnalysisOfSalaryStatistics from "./pages/analysisOfSalaryStatistics";
+import ReportView from "./pages/reportView";

 import stores from "./stores";
 import "./style/index";
@ -80,6 +81,7 @@ const DataAcquisition = (props) => props.children;
 // appconfig 应用配置
 // fieldManagement 字段管理
 // analysisOfSalaryStatistics 薪酬统计分析
+// reportView 薪酬报表查看

 const Routes = (
  <Route
@ -153,6 +155,7 @@ const Routes = (
    <Route key="appconfig" path="appconfig" component={Appconfig}/>
    <Route key="fieldManagement" path="fieldManagement" component={FieldManagement}/>
    <Route key="analysisOfSalaryStatistics" path="analysisOfSalaryStatistics" component={AnalysisOfSalaryStatistics}/>
+    <Route key="reportView" path="reportView" component={ReportView}/>
  </Route>
 );

--- a/pc4mobx/hrmSalary/pages/analysisOfSalaryStatistics/components/reportList.js
+++ b/pc4mobx/hrmSalary/pages/analysisOfSalaryStatistics/components/reportList.js
@ -27,7 +27,7 @@ class ReportList extends Component {

  handleOptsClick = ({ key }, id, dimensionId) => {
    if (key === "delete") {
-      this.reportStatisticsReportDelete({ ids: id.split(",") });
+      this.reportStatisticsReportDelete(id.split(","));
    } else if (key === "edit") {
      this.props.onEdit("addReport", id);
    }
@ -56,6 +56,15 @@ class ReportList extends Component {
      }
    });
  };
+  /*
+   * Author: 黎永顺
+   * Description: 报表查看
+   * Params:
+   * Date: 2023/4/20
+   */
+  handleGoReportView = (id) => {
+    window.open(`${window.location.origin}/spa/hrmSalary/static/index.html#/main/hrmSalary/reportView?id=${id}`);
+  };

  render() {
    const { dataSource } = this.state;
@ -65,7 +74,7 @@ class ReportList extends Component {
          _.isEmpty(dataSource) ? <div className="empty">{getLabel(111, "暂无数据")}</div> :
            _.map(dataSource, it => {
              const { reportName, dimension, id, dimensionId } = it;
-              return <Col className="gutter-row" span={6}>
+              return <Col className="gutter-row" span={6} onClick={() => this.handleGoReportView(id)}>
                <div className="card-item">
                  <div className="cardLeft"><i className="icon-coms-fa"/></div>
                  <div className="cardCenter">
--- a/pc4mobx/hrmSalary/pages/analysisOfSalaryStatistics/components/statisticsModal.js
+++ b/pc4mobx/hrmSalary/pages/analysisOfSalaryStatistics/components/statisticsModal.js
@ -55,7 +55,7 @@ class StatisticsModal extends Component {
    return (
      <WeaDialog
        {...this.props} hasScroll
-        style={typeKey === "addReport" ? { width: 640 } : { width: 640, height: 350 }}
+        style={typeKey === "addReport" ? { width: 600 } : { width: 640, height: 540 }}
        buttons={buttons}
        onCancel={onCancel}
        initLoadCss
--- a/pc4mobx/hrmSalary/pages/reportView/components/leftTab.js
+++ b/pc4mobx/hrmSalary/pages/reportView/components/leftTab.js
@ -0,0 +1,72 @@
+/*
+ * Author: 黎永顺
+ * name: 报表查看-左侧tab标题
+ * Description:
+ * Date: 2023/4/20
+ */
+import React, { Component } from "react";
+import { WeaInputSearch, WeaLocaleProvider } from "ecCom";
+import { reportStatisticsReportList } from "../../../apis/statistics";
+import { Menu } from "antd";
+import { getQueryString } from "../../../util/url";
+import "../index.less";
+
+
+const { getLabel } = WeaLocaleProvider;
+
+class LeftTab extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      reportName: "",
+      selectedKeys: getQueryString("id").split(","),
+      reportList: []
+    };
+  }
+
+  componentDidMount() {
+    this.reportStatisticsReportList();
+  }
+
+  reportStatisticsReportList = () => {
+    const { reportName, selectedKeys } = this.state;
+    const { onChangeTab } = this.props;
+    reportStatisticsReportList({ reportName }).then(({ status, data: reportList }) => {
+      if (status) this.setState({ reportList }, () => {
+        onChangeTab(_.find(this.state.reportList, it => it.id === selectedKeys[0]));
+      });
+    });
+  };
+
+  render() {
+    const { reportName, selectedKeys, reportList } = this.state;
+    const { onChangeTab } = this.props;
+    return (
+      <div className="leftTabWrapper">
+        <div className="searchArea">
+          <WeaInputSearch
+            value={reportName} onChange={reportName => this.setState({ reportName })}
+            placeholder={getLabel(111, "请输入报表名称")} onSearch={this.reportStatisticsReportList}
+          />
+        </div>
+        <Menu
+          mode="inline" selectedKeys={selectedKeys}
+          onClick={({ key }) => {
+            this.setState({ selectedKeys: key.split(",") }, () => {
+              onChangeTab(_.find(reportList, it => it.id === key));
+            });
+          }}
+        >
+          {
+            _.map(reportList, item => {
+              const { reportName, id } = item;
+              return <Menu.Item key={id}>{reportName}</Menu.Item>;
+            })
+          }
+        </Menu>
+      </div>
+    );
+  }
+}
+
+export default LeftTab;
--- a/pc4mobx/hrmSalary/pages/reportView/index.js
+++ b/pc4mobx/hrmSalary/pages/reportView/index.js
@ -0,0 +1,78 @@
+/*
+ * Author: 黎永顺
+ * name: 薪酬报表查看
+ * Description:
+ * Date: 2023/4/20
+ */
+import React, { Component } from "react";
+import { WeaLeftRightLayout, WeaLocaleProvider, WeaSelect, WeaTop } from "ecCom";
+import LeftTab from "./components/leftTab";
+import { reportGetForm } from "../../apis/ruleconfig";
+import "./index.less";
+
+
+const { getLabel } = WeaLocaleProvider;
+
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      report: {},
+      dimensionList: []
+    };
+  }
+
+  componentDidMount() {
+    this.reportGetForm();
+  }
+
+  reportGetForm = () => {
+    reportGetForm().then(({ status, data }) => {
+      if (status) {
+        const { statsDimOptions } = data;
+        this.setState({
+          dimensionList: _.map(statsDimOptions, it => ({ key: it.id, showname: it.content }))
+        });
+      }
+    });
+  };
+
+  render() {
+    const { report, dimensionList } = this.state;
+    return (
+      <WeaTop
+        title={getLabel(111, "报表查看")}
+        icon={<i className="icon-coms-fa"/>}
+        iconBgcolor="#F14A2D"
+        showDropIcon={false}
+        className="reportViewWrapper"
+      >
+        <WeaLeftRightLayout
+          leftWidth={210}
+          leftCom={<LeftTab onChangeTab={report => this.setState({ report })}/>}
+        >
+          <div className="rightLayout">
+            <div className="layoutHeader">
+              <div className="layoutRow">
+                <div className="layoutCol"><span className="leftColTitle">{report.reportName}</span></div>
+                <div className="layoutCol layoutColRight">
+                  <div className="rightColTitle">
+                    <div className="dimension">
+                      <span>{getLabel(111, "统计维度")}：</span>
+                      <WeaSelect value={report.dimensionId} options={dimensionList}/>
+                    </div>
+                    <div className="iconWrapper"><i className="icon-coms02-currency"/></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* 内容区 */}
+
+          </div>
+        </WeaLeftRightLayout>
+      </WeaTop>
+    );
+  }
+}
+
+export default Index;
--- a/pc4mobx/hrmSalary/pages/reportView/index.less
+++ b/pc4mobx/hrmSalary/pages/reportView/index.less
@ -0,0 +1,100 @@
+.reportViewWrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .wea-new-top-content {
+    flex: 1;
+
+    .leftTabWrapper {
+      background: #FFF;
+      height: 100%;
+      overflow-y: auto;
+
+      .searchArea {
+        width: 100%;
+        height: 49px;
+        line-height: 49px;
+        padding: 0 6px;
+
+        .wea-input-focus {
+          width: 100%;
+        }
+      }
+
+      .ant-menu {
+        border-right-color: transparent !important;
+
+        .ant-menu-item, .ant-menu-item {
+          border-left: 4px solid transparent;
+          border-right: none;
+        }
+
+        .ant-menu-item-selected, .ant-menu-selected {
+          border-left: 4px solid #2db7f5;
+          background: #f5f5f5;
+          border-right: none;
+        }
+
+        .ant-menu-item-active, .ant-menu-item:hover, .ant-menu-submenu-active, .ant-menu-submenu-title:hover {
+          background: #f5f5f5;
+        }
+      }
+    }
+
+    .rightLayout {
+      .layoutHeader {
+        height: 50px;
+
+        .layoutRow {
+          height: 100%;
+          display: flex;
+          align-content: center;
+          padding: 8px 16px;
+          background-color: #f9f9f9;
+          border-bottom: 1px solid #e5e5e5;
+
+          .layoutCol {
+            flex: 1;
+            height: 100%;
+            display: flex;
+            align-items: center;
+
+            .rightColTitle {
+              height: 100%;
+              display: flex;
+              align-items: center;
+              white-space: nowrap;
+
+              .icon-coms02-currency {
+                font-size: 16px;
+                color: #2db7f5;
+                margin: 0 10px;
+                cursor: pointer;
+              }
+
+              .dimension {
+                display: flex;
+                align-items: center;
+
+                .wea-select {
+                  width: 150px;
+                  margin-left: 10px;
+                }
+              }
+
+              .iconWrapper {
+                display: flex;
+                align-items: center;
+              }
+            }
+          }
+
+          .layoutColRight {
+            justify-content: flex-end;
+          }
+        }
+      }
+    }
+  }
+}