泛微薪资核算iframe表格

src/layouts/config.js

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

src/pages/atdTable/components/index.less

@@ -79,6 +79,7 @@
 
   :global {
     .ant-btn-link, .ant-dropdown-trigger {
+      padding: 0;
       font-size: 12px;
       color: #333;
     }

src/pages/employeeDeclareTable/index.tsx

@@ -0,0 +1,112 @@
+import React, { FC, useEffect, useState } from "react";
+import { Button, Space, Table, Tooltip, Typography } from "antd";
+import { ExclamationCircleFilled } from "@ant-design/icons";
+import { exceptStr, paginationFun } from "@/utils/common";
+import { defaultPage, IPage } from "@/common/types";
+import styles from "@/pages/atdTable/components/index.less";
+
+const { Text } = Typography;
+const CommonTable: FC = (props) => {
+  const [pageInfo, setPageInfo] = useState<IPage>(defaultPage);
+  const [columns, setColumns] = useState<Array<any>>([]);
+  const [dataSource, setDataSource] = useState<Array<any>>([]);
+  const [selected, setSelected] = useState<Array<string>>([]);
+  const [i18n, setI18n] = useState<Partial<{}>>({});
+
+  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, selectedRowKeys } = data;
+      const { current: pageNum, pageSize: size, total } = pageInfo;
+      setDataSource(dataSource);
+      setI18n(i18n);
+      setPageInfo({ pageNum, size, total });
+      setSelected(selectedRowKeys);
+      setColumns([
+        ...columns,
+        {
+          title: i18n["操作"],
+          dataIndex: "operate",
+          fixed: "right",
+          width: 120,
+          render: (_: any, record: any) => {
+            return (
+              <Space>
+                <Button type="link" onClick={() => handleEdit(record)}>{i18n["编辑"]}</Button>
+                <Button type="link" onClick={() => handleDelete(record)}>{i18n["删除"]}</Button>
+              </Space>
+            );
+          }
+        }
+      ]);
+    }
+  };
+  const handleEdit = (record: any) => {
+    window.parent.postMessage({ type: "turn", payload: { id: "EDIT", params: { ...record } } }, "*");
+  };
+  const handleDelete = (record: any) => {
+    window.parent.postMessage({ type: "turn", payload: { id: "DELETE", params: { ...record } } }, "*");
+  };
+  const sizeChange = (pageobj: IPage) => {
+  };
+  const onChange = (pageobj: IPage) => {
+    setPageInfo({ ...pageInfo, ...pageobj });
+    window.parent.postMessage(
+      {
+        type: "turn",
+        payload: { id: "PAGEINFO", params: { ...pageInfo, ...pageobj } }
+      },
+      "*"
+    );
+  };
+  const rowSelection = {
+    selectedRowKeys: selected,
+    columnWidth: 80,
+    onChange: (selectedRowKeys: Array<any>) => {
+      setSelected(selectedRowKeys);
+      window.parent.postMessage(
+        {
+          type: "turn",
+          payload: { id: "ROWSELECT", params: { selectedRowKeys } }
+        },
+        "*"
+      );
+    }
+  };
+  return <Table
+    rowKey="id"
+    rowSelection={rowSelection}
+    className={styles.tableWrapper}
+    columns={_.map(columns, it => {
+      if (it.dataIndex === "declareStatusDesc") {
+        return {
+          ...it,
+          render: (text: string, record: any) => (<Space>
+            <Button type="link" danger>{text}</Button>
+            <Tooltip placement="top" title={record?.declareErrorMsg}>
+              <ExclamationCircleFilled style={{ color: "orange", fontSize: 16 }}/>
+            </Tooltip>
+          </Space>)
+        };
+      }
+      return { ...it };
+    })}
+    dataSource={dataSource}
+    bordered
+    size="small"
+    scroll={{ x: 1200, y: `calc(100vh - 85px)` }}
+    pagination={{
+      ...paginationFun(pageInfo, sizeChange, onChange, i18n),
+      size: "default"
+    }}
+  />;
+};
+
+export default CommonTable;

src/utils/common.js

@@ -70,12 +70,12 @@ export const exceptStr = (str) => {
   }
 };
 
-export const paginationFun = (tableListPageObj, sizeChange, onChange) => {
+export const paginationFun = (tableListPageObj, sizeChange, onChange, i18n = {}) => {
   return {
     current: tableListPageObj.pageNum,
     pageSize: tableListPageObj.size,
     total: tableListPageObj.total,
-    showTotal: (total) => `共 ${total} 条`,
+    showTotal: total => `${i18n["共"] ? i18n["共"] : "共"} ${total} ${i18n["条"] ? i18n["条"] : "条"}`,
     showQuickJumper: true,
     showSizeChanger: true,
     pageSizeOptions: ["10", "20", "50", "100"],