master

src/layouts/config.js

@@ -18,6 +18,7 @@ module.exports = {
     "/employeeDeclareTable.*": "blank",
     "/taxDeclareTable.*": "blank",
     "/welfareArchiveTable.*": "blank",
+    "/salaryFileTable.*": "blank",
     "/OCTable.*": "blank",
     "/manage.*": "manage",
     "/portal.*": "template",

src/pages/salaryFileTable/index.tsx

@@ -0,0 +1,102 @@
+/*
+ * Author: 黎永顺
+ * name: 薪资档案重构-档案列表
+ * Description:
+ * Date: 2024/1/8
+ */
+import React, { FunctionComponent, useEffect, useMemo, useState } from "react";
+import { ColumnType } from "antd/lib/table";
+import { PaginationData } from "rc-pagination";
+import styles from "@/pages/atdTable/components/index.less";
+import { exceptStr, paginationAction } from "@/utils/common";
+import { Table } from "antd";
+
+interface OwnProps {
+}
+
+type Props = OwnProps;
+
+const Index: FunctionComponent<Props> = (props) => {
+  const [columns, setColumns] = useState<ColumnType<any>[]>([]);
+  const [dataSource, setDataSource] = useState<any[]>([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+  const [pageInfo, setPageInfo] = useState<Partial<PaginationData>>({});
+  const [i18n, setI18n] = useState<any>({});
+  const [runStatuses, setRunStatuses] = useState<string>("");
+  const [showOperateBtn, setShowOperateBtn] = useState<boolean>(false);
+
+  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, selectedRowKeys, i18n: i18nRes = {},
+        runStatuses, showOperateBtn
+      } = data;
+      setShowOperateBtn(showOperateBtn);
+      setRunStatuses(runStatuses);
+      setI18n(i18nRes);
+      setPageInfo(pageInfo);
+      setDataSource(dataSource);
+      setSelectedRowKeys(selectedRowKeys);
+      setColumns(columns);
+    }
+  };
+  const onChange = (current: number, pageSize: number) => {
+    setPageInfo((prevState) => {
+      const { pageSize: size } = prevState;
+      window.parent.postMessage(
+        {
+          type: "turn",
+          payload: { id: "PAGEINFO", params: { ...pageInfo, current: size === pageSize ? current : 1, pageSize } }
+        },
+        "*"
+      );
+      return { ...pageInfo, current: size === pageSize ? current : 1, pageSize };
+    });
+  };
+  const rowSelection = {
+    columnWidth: 60,
+    selectedRowKeys: selectedRowKeys,
+    onChange: (selectedRowKeys: React.Key[]) => {
+      setSelectedRowKeys(selectedRowKeys);
+      window.parent.postMessage(
+        {
+          type: "turn",
+          payload: { id: "CHECKBOX", params: { selectedRowKeys } }
+        },
+        "*"
+      );
+    }
+  };
+  const handleWelfareOperate = (type: string, record: any, interfaceParams?: any) => {
+    window.parent.postMessage(
+      {
+        type: "turn",
+        payload: { id: type, params: { record, interfaceParams } }
+      },
+      "*"
+    );
+  };
+  const cols: any = useMemo(() => {
+    return showOperateBtn ? [...columns] : [...columns];
+  }, [columns, runStatuses, i18n, showOperateBtn]);
+  return (<Table
+    rowKey="baseInfo" size="small" className={styles.tableWrapper}
+    columns={cols} dataSource={dataSource} rowSelection={rowSelection}
+    scroll={{ x: 1200, y: `calc(100vh - 103px)` }}
+    pagination={{
+      ...paginationAction(pageInfo, i18n, onChange),
+      size: "default"
+    }}
+  />);
+};
+
+export default Index;