添加线下对比表格

src/layouts/config.js

@@ -17,6 +17,7 @@ module.exports = {
     "/payrollFilesTable.*": "blank",
     "/employeeDeclareTable.*": "blank",
     "/welfareArchiveTable.*": "blank",
+    "/OCTable.*": "blank",
     "/manage.*": "manage",
     "/portal.*": "template",
     "/passport/oauth-in": "blank",

src/pages/OCTable/index.tsx

@@ -0,0 +1,103 @@
+/*
+ * Author: 黎永顺
+ * name: 薪酬系统-线下对比
+ * Description:
+ * Date: 2023/11/28
+ */
+import React, { FC, useEffect, useState } from "react";
+import { Table } from "antd";
+import { exceptStr, paginationFun } from "@/utils/common";
+import styles from "@/pages/atdTable/components/index.less";
+import { defaultPage, IPage } from "@/common/types";
+import cs from "classnames";
+
+const OCTable: FC = (props) => {
+  const [columns, setColumns] = useState<Array<any>>([]);
+  const [pageInfo, setPageInfo] = useState<IPage>(defaultPage);
+  const [dataSource, setDataSource] = useState<Array<any>>([]);
+  const [i18n, setI18n] = useState<any>({});
+
+  useEffect(() => {
+    window.parent.postMessage({ type: "init" }, "*");
+    window.addEventListener("message", receiveMessageFromIndex, false);
+    return () => {
+      window.removeEventListener("message", receiveMessageFromIndex, false);
+    };
+  }, []);
+  const receiveMessageFromIndex = (event: any) => {
+    const data: any = exceptStr(event.data);
+    if (!_.isEmpty(data)) {
+      const { columns, dataSource, pageInfo, i18n: i18nRes = {} } = data;
+      const { current: pageNum, pageSize: size, total } = pageInfo;
+      setDataSource(dataSource);
+      setI18n(i18nRes);
+      setPageInfo({ pageNum, size, total });
+      setColumns(convertColumns(columns, i18nRes));
+    }
+  };
+  const convertColumns: any = (cols: any[], lanObj: any) => {
+    return _.map(cols, item => {
+      if (_.isNaN(parseInt(item.dataIndex))) {
+        return { ...item };
+      } else {
+        return {
+          ...item, children: convertColumns(item.children, lanObj),
+          render: (__: any, record: any) => {
+            const formulaDesc = record["customParameters"][`${item["dataIndex"]}`];
+            const showDifference = record[`${item["dataIndex"]}_type`] === "number";
+            const { acctResultValue, excelResultValue } = record[item["dataIndex"]] || {};
+            return <div className={styles["comparison-column-item-container"]}
+                        onClick={() => console.log(formulaDesc)}>
+              <div className={styles["comparison-single-row"]}>
+                <span>{lanObj["系统值"]}：</span>
+                <span>{acctResultValue}</span>
+              </div>
+              <div className={styles["comparison-single-row"]}>
+                <span>{lanObj["线下值"]}：</span>
+                <span>{excelResultValue}</span>
+              </div>
+              {
+                showDifference &&
+                <div className={cs(styles["danger"], styles["comparison-single-row"])}>
+                  <span>{lanObj["差值"]}：</span>
+                  <span>{calculateDifference(acctResultValue, excelResultValue)}</span>
+                </div>
+              }
+            </div>;
+          }
+        };
+      }
+    });
+  };
+  // 计算差值
+  const calculateDifference = (systemValue: string, excelValue: string) => {
+    if (_.isNil(systemValue) || _.isNil(excelValue)) return "";
+    const systemNum = Number(systemValue);
+    const excelNum = Number(excelValue);
+    return (systemNum - excelNum).toFixed(2);
+  };
+
+  const sizeChange = (pageobj: IPage) => {
+  };
+  const onChange = (pageobj: IPage) => {
+    setPageInfo({ ...pageInfo, ...pageobj });
+    window.parent.postMessage(
+      {
+        type: "turn",
+        payload: { id: "PAGEINFO", params: { ...pageInfo, ...pageobj } }
+      },
+      "*"
+    );
+  };
+  return <Table
+    rowKey="id" className={styles.tableWrapper}
+    columns={columns} dataSource={dataSource} bordered size="small"
+    scroll={{ x: 1200, y: `calc(100vh - 137px)` }}
+    pagination={{
+      ...paginationFun(pageInfo, sizeChange, onChange, i18n),
+      size: "default"
+    }}
+  />;
+};
+
+export default OCTable;

src/pages/atdTable/components/index.less

@@ -153,6 +153,18 @@
     }
   }
 
+  .comparison-column-item-container {
+    cursor: pointer;
+
+    .comparison-single-row {
+      margin: 4px 0;
+    }
+
+    .danger {
+      color: #ff4d4f;
+    }
+  }
+
   :global {
     .ant-btn-link {
       height: inherit !important;