salary-management-oneself/src/pages/taxDeclareTable/index.tsx

/*
 * Author: 黎永顺
 * name: 个税申报表-详情表格
 * Description:
 * Date: 2023/12/27
 */
import React, { FC, useEffect, useState } from "react";
import { FileSearchOutlined } from "@ant-design/icons";
import { Button, Space, Table } from "antd";
import { exceptStr, paginationAction } from "@/utils/common";
import styles from "@/pages/atdTable/components/index.less";
import { PaginationData } from "rc-pagination";

const TaxDeclareTable: FC = (props) => {
  const [pageInfo, setPageInfo] = useState<Partial<PaginationData>>({});
  const [columns, setColumns] = useState<Array<any>>([]);
  const [dataSource, setDataSource] = useState<Array<any>>([]);
  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, declareStatus, azOperate = true } = data;
      setDataSource(dataSource);
      setI18n(i18n);
      setPageInfo(pageInfo);
      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>
                        <FileSearchOutlined
                          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>
                      <FileSearchOutlined
                        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) => {
    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 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;
      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.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;