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

import React, { FC, useEffect, useState } from "react";
import { Button, Table, Typography } from "antd";
import { exceptStr, paginationAction } from "@/utils/common";
import styles from "@/pages/atdTable/components/index.less";
import { PaginationData } from "rc-pagination";

const { Text, Paragraph } = Typography;
const ReportTable: FC = (props) => {
  const [columns, setColumns] = useState<Array<any>>([]);
  const [sumRow, setSumRow] = useState<Partial<{}>>({});
  const [dataSource, setDataSource] = useState<Array<any>>([]);
  const [showSumrow, setShowSumrow] = useState<boolean>(false);
  const [SSHeaderInfo, setSSHeaderInfo] = useState<string>("");
  const [pageInfo, setPageInfo] = useState<Partial<PaginationData>>({});
  const [i18n, setI18n] = useState<any>({});

  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 { i18n, columns, dataSource, countResult, showSum, SSHeaderInfo = "", pageInfo } = data;
      setI18n(i18n);
      setDataSource(dataSource);
      setShowSumrow(showSum);
      setSumRow(countResult);
      setSSHeaderInfo(SSHeaderInfo);
      setPageInfo(pageInfo);
      setColumns(_.map(columns, (item, index: number) => {
        if (index === 0) {
          return { ...item, fixed: "left", ellipsis: true };
        }
        return {
          ...item,
          children: _.map(item.children, child => {
            return {
              ...child, ellipsis: true,
              render: (text: string, record: any) => {
                if (child.dataIndex?.endsWith("increase")) {
                  let lowerLimitIndex = child.dataIndex.replace("increase", "lowerLimit");
                  let upperLimitIndex = child.dataIndex.replace("increase", "upperLimit");
                  let rowData = !_.isEmpty(record[child.dataIndex]) ? record[child.dataIndex].split(",").join("") : "";
                  if (isNaN(parseFloat(rowData))) {
                    return record[child.dataIndex];
                  }
                  if (!isNaN(parseFloat(record[lowerLimitIndex])) && parseFloat(rowData) < parseFloat(record[lowerLimitIndex])) {
                    return <Button type="link" block onClick={() => {
                      window.parent.postMessage(
                        {
                          type: "turn",
                          payload: { id: "PIVOTCHART", params: { record } }
                        },
                        "*"
                      );
                    }}>
                      <Text type="success">{rowData}</Text>
                    </Button>;
                  }
                  if (!isNaN(parseFloat(record[upperLimitIndex])) && parseFloat(rowData) > parseFloat(record[upperLimitIndex])) {
                    return <Button type="link" block onClick={() => {
                      window.parent.postMessage(
                        {
                          type: "turn",
                          payload: { id: "PIVOTCHART", params: { record } }
                        },
                        "*"
                      );
                    }}>
                      <Text type="danger">{rowData}</Text>
                    </Button>;
                  } else {
                    return `${rowData}`;
                  }
                }
                return <Button type="link" block onClick={() => {
                  window.parent.postMessage(
                    {
                      type: "turn",
                      payload: { id: "PIVOTCHART", params: { record } }
                    },
                    "*"
                  );
                }}>{text}</Button>;
              }
            };
          })
        };
      }));
    }
  };
  const onChange = (current: number, pageSize: number) => {
    setPageInfo((prevState) => {
      const { pageSize: size } = prevState;
      window.parent.postMessage(
        {
          type: "turn",
          payload: { id: "PAGEINFO_REPORT", params: { ...pageInfo, current: size === pageSize ? current : 1, pageSize } }
        },
        "*"
      );
      return { ...pageInfo, current: size === pageSize ? current : 1, pageSize };
    });
  };

  return <Table
    rowKey="id"
    className={styles.tableWrapper}
    columns={columns}
    dataSource={dataSource}
    bordered
    size="small"
    scroll={{ x: 1200, y: `calc(100vh - 174px)` }}
    title={() => <Paragraph ellipsis={true}>{SSHeaderInfo}</Paragraph>}
    pagination={!_.isNil(pageInfo) ? {
      ...paginationAction(pageInfo, i18n, onChange),
      size: "default"
    } : false}
    summary={() => {
      if (!showSumrow) return;
      let totalColumns: any[] = [];
      _.forEach(columns, it => {
        if (_.isEmpty(it.children)) {
          totalColumns.push(it);
        } else {
          totalColumns = [...totalColumns, ...it.children];
        }
      });
      return (
        <Table.Summary fixed>
          <Table.Summary.Row>
            {
              _.map(totalColumns, (item, index) => {
                return <Table.Summary.Cell index={index} key={index} align="center">
                  <Text>{!_.isNil(sumRow[item.dataIndex]) ? sumRow[item.dataIndex] : "-"}</Text>
                </Table.Summary.Cell>;
              })
            }
          </Table.Summary.Row>
        </Table.Summary>
      );
    }}
  />;
};

export default ReportTable;