feature/2.9.42310.01-薪资项目拓扑图

src/pages/taxDeclareTable/index.tsx

@@ -5,6 +5,7 @@
  * Date: 2023/12/27
  */
 import React, { FC, useEffect, useState } from "react";
+import { FolderViewOutlined } from "@ant-design/icons";
 import { Button, Space, Table } from "antd";
 import { exceptStr, paginationAction } from "@/utils/common";
 import styles from "@/pages/atdTable/components/index.less";
@@ -26,25 +27,69 @@ const TaxDeclareTable: FC = (props) => {
   const receiveMessageFromIndex = (event: any) => {
     const data: any = exceptStr(event.data);
     if (!_.isEmpty(data)) {
-      const { columns, dataSource, pageInfo, i18n, declareStatus, azOperate=true } = data;
+      const { columns, dataSource, pageInfo, i18n, declareStatus, azOperate = true } = data;
       setDataSource(dataSource);
       setI18n(i18n);
       setPageInfo(pageInfo);
-      setColumns((["NOT_DECLARE", "DECLARE_FAIL"].includes(declareStatus) && azOperate) ? [
-        ...columns,
-        {
-          title: i18n["操作"],
-          dataIndex: "operate",
-          fixed: "right",
-          width: 120,
-          render: (_: any, record: any) => (
-            <Space>
-              <Button type="link" onClick={() => handleEdit(record)}>{i18n["编辑"]}</Button>
-              <Button type="link" onClick={() => handleDelete(record)}>{i18n["删除"]}</Button>
-            </Space>
-          )
-        }
-      ] : columns);
+      setColumns(
+        ["NOT_DECLARE", "DECLARE_FAIL"].includes(declareStatus) && azOperate
+          ? [
+              ..._.map(columns, (o) => {
+                // 查看附表字段
+                if (o.isAppendix) {
+                  return {
+                    ...o,
+                    render: (text: string, record: any) => (
+                      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                        <span>{text}</span>
+                        <FolderViewOutlined
+                          title={i18n["查看附表"]}
+                          style={{ color: "#2db7f5", fontSize: 16, cursor: "pointer" }}
+                          onClick={() => handleViewAppendix({ ...record, dataIndex: o.dataIndex, title: o.title })}
+                        />
+                      </div>
+                    )
+                  };
+                }
+                return { ...o };
+              }),
+              {
+                title: i18n["操作"],
+                dataIndex: "operate",
+                fixed: "right",
+                width: 120,
+                render: (_: any, record: any) => (
+                  <Space>
+                    <Button type="link" onClick={() => handleEdit(record)}>
+                      {i18n["编辑"]}
+                    </Button>
+                    <Button type="link" onClick={() => handleDelete(record)}>
+                      {i18n["删除"]}
+                    </Button>
+                  </Space>
+                )
+              }
+            ]
+          : _.map(columns, (o) => {
+              // 查看附表字段
+              if (o.isAppendix) {
+                return {
+                  ...o,
+                  render: (text: string, record: any) => (
+                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                      <span>{text}</span>
+                      <FolderViewOutlined
+                        title={i18n["查看附表"]}
+                        style={{ color: "#2db7f5", fontSize: 16, cursor: "pointer" }}
+                        onClick={() => handleViewAppendix({ ...record, dataIndex: o.dataIndex, title: o.title })}
+                      />
+                    </div>
+                  )
+                };
+              }
+              return { ...o };
+            })
+      );
     }
   };
   const handleEdit = (record: any) => {
@@ -53,6 +98,9 @@ const TaxDeclareTable: FC = (props) => {
   const handleDelete = (record: any) => {
     window.parent.postMessage({ type: "turn", payload: { id: "DELETE", params: { ...record } } }, "*");
   };
+  const handleViewAppendix = (record: any) => {
+    window.parent.postMessage({ type: "turn", payload: { id: "APPENDIX", params: { ...record } } }, "*");
+  };
   const onChange = (current: number, pageSize: number) => {
     setPageInfo((prevState) => {
       const { pageSize: size } = prevState;
@@ -66,15 +114,21 @@ const TaxDeclareTable: FC = (props) => {
       return { ...pageInfo, current: size === pageSize ? current : 1, pageSize };
     });
   };
-  return <Table
-    rowKey="id" className={styles.tableWrapper} size="small"
-    columns={columns} dataSource={dataSource} bordered
-    scroll={{ x: 1200, y: `calc(100vh - 100px)` }}
-    pagination={{
-      ...paginationAction(pageInfo, i18n, onChange),
-      size: "default"
-    }}
-  />;
+  return (
+    <Table
+      rowKey="id"
+      className={styles.tableWrapper}
+      size="small"
+      columns={columns}
+      dataSource={dataSource}
+      bordered
+      scroll={{ x: 1200, y: `calc(100vh - 100px)` }}
+      pagination={{
+        ...paginationAction(pageInfo, i18n, onChange),
+        size: "default"
+      }}
+    />
+  );
 };
 
 export default TaxDeclareTable;