统一表格组件封装

src/layouts/config.js

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

src/pages/unitTable/index.less

@@ -0,0 +1,123 @@
+.multi_fun_table {
+  background: #fff;
+
+  :global {
+    .ant-btn-link {
+      height: inherit !important;
+    }
+
+    .ant-btn-link, .ant-dropdown-trigger {
+      padding: 0;
+      font-size: 12px;
+      color: #333;
+    }
+
+    .ant-btn-link:hover {
+      color: #00a9ff;
+
+      span {
+        text-decoration: underline;
+      }
+    }
+
+    .ant-table-tbody > tr.ant-table-row:hover > td {
+      background: #e9f7ff;
+    }
+
+    .anticon-more {
+      font-size: 16px;
+      cursor: pointer;
+    }
+
+    .ant-spin-container {
+      .ant-pagination {
+        font-size: 12px;
+        align-items: center;
+        margin-right: 8px;
+
+        .ant-pagination-item, .ant-pagination-prev, .ant-pagination-next {
+          min-width: 28px;
+          height: 28px;
+          line-height: 28px;
+          border-radius: 6px;
+
+          & > button {
+            border-radius: 6px;
+          }
+        }
+
+        .ant-pagination-item-active {
+          background: var(--ant-primary-color);
+          border: none;
+
+          & > a {
+            color: #FFF;
+          }
+        }
+
+        .ant-pagination-options {
+          .ant-select {
+            font-size: 12px;
+
+            .ant-select-selector {
+              height: 28px;
+              border-radius: 6px;
+
+              .ant-select-selection-search-input {
+                height: 26px;
+                line-height: 26px;
+              }
+
+              .ant-select-selection-item {
+                line-height: 26px;
+              }
+            }
+
+            .ant-select-item {
+              font-size: 12px;
+            }
+          }
+
+          .ant-pagination-options-quick-jumper {
+            height: 28px;
+            line-height: 28px;
+
+            & > input {
+              border-radius: 6px;
+              height: 28px;
+            }
+          }
+        }
+      }
+    }
+
+    .ant-table-thead > tr > th {
+      background-color: #f7fbfe;
+    }
+
+    th, td {
+      font-size: 12px;
+
+      .ant-form-item {
+        margin-bottom: 0;
+
+        .ant-input-number {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+:global {
+  .ant-dropdown-placement-bottomRight {
+    .ant-dropdown-menu {
+      max-height: inherit !important;
+    }
+  }
+
+  .ant-dropdown-menu-item {
+    font-size: 12px;
+    color: #333;
+  }
+}

src/pages/unitTable/index.tsx

@@ -0,0 +1,58 @@
+import React, { FC, useEffect, useState } from "react";
+import { Table } from "antd";
+import { PaginationData } from "rc-pagination";
+import { exceptStr, paginationAction } from "@/utils/common";
+import { renderCols } from "@/pages/unitTable/renderColsOpts";
+import styles from "./index.less";
+
+const UnitTable: FC = (props) => {
+  const [columns, setColumns] = useState<Array<any>>([]);
+  const [dataSource, setDataSource] = useState<Array<any>>([]);
+  const [pageInfo, setPageInfo] = useState<Partial<PaginationData>>({});
+  const [i18n, setI18n] = useState<any>({});
+  const [permission, setPermission] = useState<boolean>(false);
+  const [scrollHeight, setScrollHeight] = useState<number | undefined>(undefined);
+
+  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, scrollHeight, i18n, showOperateBtn } = data;
+      setI18n(i18n);
+      setScrollHeight(scrollHeight);
+      setColumns(columns);
+      setDataSource(dataSource);
+      setPageInfo(pageInfo);
+      setPermission(showOperateBtn);
+    }
+  };
+  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 };
+    });
+  };
+  return <Table rowKey="id" className={styles.multi_fun_table} dataSource={dataSource} size="middle"
+                columns={renderCols(columns, "welfareRecord", i18n, permission)}
+                scroll={{ x: 1200, y: `calc(100vh - ${scrollHeight || 109}px)` }}
+                pagination={!_.isNil(pageInfo) ? {
+                  ...paginationAction(pageInfo, i18n, onChange),
+                  size: "default"
+                } : false}
+  />;
+};
+
+export default UnitTable;

src/pages/unitTable/renderColsOpts.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { Button, Dropdown, MenuProps, Space, Typography } from "antd";
+import { MoreOutlined } from "@ant-design/icons";
+
+const { Text } = Typography;
+
+/*
+ * Author: 黎永顺
+ * Description:社保福利台账列表项
+ * Params:
+ * Date: 2024/1/23
+ */
+export function renderCols(initialState: any[], type: string, i18n?: AnyObject, permission?: boolean) {
+  return React.useMemo(() => {
+    if (type === "welfareRecord") {
+      return [..._.map(_.filter(initialState, o => o.dataIndex !== "id"), g => {
+        let col = { ...g, ellipsis: true, fixed: g.dataIndex === "billMonth", width: 180 };
+        switch (g.dataIndex) {
+          case "billMonth":
+            col = {
+              ...col,
+              width: 120,
+              render: (text: string, record: any) => {
+                const { billStatus } = record;
+                return (<Button type="link"
+                                onClick={() => postMessageToParent(billStatus === "0" ? "CALC" : "VIEW", record)}>{text}</Button>);
+              }
+            };
+            break;
+          case "billStatus":
+            col = {
+              ...col, width: 100, render: (text: string) => (
+                <Text style={{ maxWidth: "100%" }} ellipsis>
+                  {text === "1" ? i18n?.["已归档"] : i18n?.["未归档"]}
+                </Text>
+              )
+            };
+            break;
+          case "paymentOrganization":
+            col = { ...col, width: 200 };
+            break;
+          case "socialNum":
+          case "otherNum":
+          case "fundNum":
+            col = { ...col, width: 118 };
+            break;
+          case "remarks":
+            col = { ...col, width: 200 };
+            break;
+          default:
+            col = { ...col };
+            break;
+        }
+        return col;
+      }), {
+        dataIndex: "operate", title: i18n?.["操作"], width: 185, fixed: "right",
+        render: (__: string, record: any) => {
+          const { billStatus } = record;
+          const items: MenuProps["items"] = [
+            {
+              key: "DeleteList",
+              label: i18n?.["删除"],
+              onClick: () => postMessageToParent("DELRC", record)
+            }
+          ];
+          return (
+            <Space>
+              {
+                !permission ?
+                  <Button type="link" onClick={() => postMessageToParent("VIEW", record)}>{i18n?.["查看"]}</Button> :
+                  <>
+                    {
+                      billStatus === "0" &&
+                      <>
+                        <Button type="link"
+                                onClick={() => postMessageToParent("CALC", record)}>{i18n?.["核算"]}</Button>
+                        <Button type="link"
+                                onClick={() => postMessageToParent("FILE", record)}>{i18n?.["归档"]}</Button>
+                        <Dropdown menu={{ items }} placement="bottomRight">
+                          <Button type="link" icon={<MoreOutlined/>}/>
+                        </Dropdown>
+                      </>
+                    }
+                    {
+                      billStatus === "1" &&
+                      <>
+                        <Button type="link"
+                                onClick={() => postMessageToParent("VIEW", record)}>{i18n?.["查看"]}</Button>
+                        <Button type="link"
+                                onClick={() => postMessageToParent("RECALC", record)}>{i18n?.["重新核算"]}</Button>
+                      </>
+                    }
+                  </>
+              }
+            </Space>
+          );
+        }
+      }];
+    }
+    return [];
+  }, [initialState, type, i18n, permission]);
+}
+
+const postMessageToParent = (type: string, params: any) => {
+  window.parent.postMessage({ type: "turn", payload: { id: type, params } }, "*");
+};