薪酬统计分析-员工明细列表开发

pc4mobx/hrmSalary/index.js

@@ -33,6 +33,7 @@ import RuleConfig from "./pages/ruleConfig";
 import Appconfig from "./pages/appConfig";
 import FieldManagement from "./pages/fieldManagement";
 import AnalysisOfSalaryStatistics from "./pages/analysisOfSalaryStatistics";
+import EmployeeList from "./pages/employeeView";
 import ReportView from "./pages/reportView";
 
 import stores from "./stores";
@@ -155,6 +156,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="analysisOfSalaryStatisticsId" path="analysisOfSalaryStatistics/:employeeId" component={EmployeeList}/>
     <Route key="reportView" path="reportView" component={ReportView}/>
   </Route>
 );

pc4mobx/hrmSalary/pages/analysisOfSalaryStatistics/components/dimensionTable.js

@@ -91,9 +91,15 @@ class DimensionTable extends Component {
         render: (_, record) => {
           return (
             <span className="space10">
-              <a href="javascript: void(0);" onClick={() => onEdit(record.id)}>{getLabel(111, "编辑")}</a>
-              <a href="javascript: void(0);"
-                 onClick={() => this.dimensionDelete([record.id])}>{getLabel(111, "删除")}</a>
+              {
+                record.canEdit &&
+                <a href="javascript: void(0);" onClick={() => onEdit(record.id)}>{getLabel(111, "编辑")}</a>
+              }
+              {
+                record.canDelete &&
+                <a href="javascript: void(0);"
+                   onClick={() => this.dimensionDelete([record.id])}>{getLabel(111, "删除")}</a>
+              }
             </span>
           );
         }

pc4mobx/hrmSalary/pages/analysisOfSalaryStatistics/components/employeeDetails.js

@@ -54,13 +54,15 @@ class EmployeeDetails extends Component {
             title: "",
             dataIndex: "operate",
             width: 80,
-            render: () => {
+            render: (_, record) => {
               return <div className="operates">
                 <Popover
                   placement="bottomRight" trigger="hover"
                   overlayClassName="operatePopover"
                   content={
-                    <Menu>
+                    <Menu onClick={() => {
+                      window.open(`${window.location.origin}/spa/hrmSalary/static/index.html#/main/hrmSalary/analysisOfSalaryStatistics/${record.id}?name=${record.name}&dept=${record.department || ""}`);
+                    }}>
                       <Menu.Item key="1">{getLabel(111, "查看")}</Menu.Item>
                     </Menu>
                   }

pc4mobx/hrmSalary/pages/employeeView/index.js

@@ -0,0 +1,120 @@
+/*
+ * Author: 黎永顺
+ * name: 员工明细查看
+ * Description:
+ * Date: 2023/5/24
+ */
+import React, { Component } from "react";
+import { WeaLocaleProvider, WeaSelect, WeaTop } from "ecCom";
+import { Spin } from "antd";
+import { inject, observer } from "mobx-react";
+import { MonthRangePicker } from "../reportView/components/statisticalMicroSettingsSlide";
+import { statisticsEmployeeDetailList } from "../../apis/statistics";
+import { optionAddWhole } from "../../util/options";
+import moment from "moment";
+import "./index.less";
+
+const { getLabel } = WeaLocaleProvider;
+
+@inject("taxAgentStore")
+@observer
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+      taxAgentId: "",
+      salaryMonth: [moment().startOf("year").format("YYYY-MM"), moment().format("YYYY-MM")],
+      dataSource: [],
+      columns: []
+    };
+  }
+
+  componentWillMount() {
+    const { taxAgentStore: { fetchTaxAgentOption } } = this.props;
+    fetchTaxAgentOption();
+  }
+
+  componentDidMount() {
+    this.statisticsEmployeeDetailList();
+    window.addEventListener("message", this.handleReceive, false);
+  }
+
+  handleReceive = ({ data }) => {
+    const { type } = data;
+    if (type === "init") {
+      const { columns, dataSource } = this.state;
+      this.postMessageToChild({
+        columns, dataSource,
+        showSum: false
+      });
+    } else if (type === "turn") {
+    }
+  };
+  postMessageToChild = (payload) => {
+    const childFrameObj = document.getElementById("atdTable");
+    const { dataSource, columns, showSum } = payload;
+    childFrameObj && childFrameObj.contentWindow.postMessage(JSON.stringify({
+      dataSource, columns, showSum
+    }), "*");
+  };
+
+  statisticsEmployeeDetailList = () => {
+    const { params: { employeeId } } = this.props;
+    const { taxAgentId, salaryMonth } = this.state;
+    const payload = { employeeId, taxAgentId, salaryMonth };
+    this.setState({ loading: true });
+    statisticsEmployeeDetailList(payload).then(({ status, data }) => {
+      this.setState({ loading: false });
+      if (status) {
+        const { columns, pageInfo: { list } } = data;
+        this.setState({
+          columns: _.map(columns, it => ({
+            ...it,
+            dataIndex: it.column, width: 150,
+            title: it.text, align: "left"
+          })),
+          dataSource: list || []
+        }, () => {
+          this.postMessageToChild({
+            columns: this.state.columns,
+            dataSource: this.state.dataSource,
+            showSum: false
+          });
+        });
+      }
+    }).catch(() => this.setState({ loading: false }));
+  };
+
+  render() {
+    const { location, taxAgentStore: { showOperateBtn, taxAgentOption } } = this.props;
+    const { salaryMonth, taxAgentId, loading } = this.state;
+    const { query: { dept, name } } = location;
+    const btns = [
+      <MonthRangePicker viewAttr={2} dateRange={salaryMonth}
+                        onChange={v => this.setState({ salaryMonth: v }, () => this.statisticsEmployeeDetailList())}/>,
+      <WeaSelect options={optionAddWhole(taxAgentOption)} value={taxAgentId} style={{ width: 200 }}
+                 onChange={v => this.setState({ taxAgentId: v }, () => this.statisticsEmployeeDetailList())}/>
+    ];
+    return (
+      <WeaTop
+        title={<span><span style={{ marginRight: 8 }}>{name}</span><span>{dept}</span></span>}
+        icon={<i className="icon-coms-fa"/>} buttons={showOperateBtn ? btns : []}
+        iconBgcolor="#F14A2D" showDropIcon={false}
+      >
+        <div className="employeeDetailWrapper">
+          <Spin spinning={loading}>
+            <iframe
+              style={{ border: 0, width: "100%", height: "100%" }}
+              src="http://localhost:7607/#/commonTable"
+              // src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/commonTable"
+              id="atdTable"
+            />
+          </Spin>
+        </div>
+      </WeaTop>
+    );
+  }
+}
+
+export default Index;

pc4mobx/hrmSalary/pages/employeeView/index.less

@@ -0,0 +1,9 @@
+.employeeDetailWrapper {
+  height: 100%;
+  padding: 10px 10px 0 10px;
+
+  .ant-spin-nested-loading,
+  .ant-spin-container {
+    height: 99%;
+  }
+}

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

@@ -323,7 +323,7 @@ const TitleDialog = (props) => {
     </div>
   </div>;
 };
-const MonthRangePicker = (props) => {
+export const MonthRangePicker = (props) => {
   const { dateRange, onChange, viewAttr } = props;
   const [startDate, endDate] = dateRange || [];
   return <div className="rangePickerBox">

pc4mobx/hrmSalary/util/options.js

@@ -1,19 +1,19 @@
 // 添加全部选项
 export const optionAddAll = (options) => {
-    let results = [...options];
-    results.unshift({
-        key: "All",
-        showname: "全部",
-        selected: false
-    })
-    return results;
-}
+  let results = [...options];
+  results.unshift({
+    key: "All",
+    showname: "全部",
+    selected: false
+  });
+  return results;
+};
 export const optionAddWhole = (options) => {
-    let results = [...options];
-    results.unshift({
-        key: "",
-        showname: "全部",
-        selected: false
-    })
-    return results;
-}
+  let results = [...options];
+  results.unshift({
+    key: "",
+    showname: "全部个税扣缴义务人",
+    selected: false
+  });
+  return results;
+};