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

import React, { FC, useEffect, useState } from "react";
import { Button, Table, Typography } from "antd";
import { exceptStr, paginationFun } from "@/utils/common";
import { defaultPage, IPage } from "@/common/types";
import styles from "@/pages/atdTable/components/index.less";

const { Text } = Typography;
const StandingbookTable: FC = (props) => {
  const [selected, setSelected] = useState<Array<string>>([]);
  const [columns, setColumns] = useState<Array<any>>([]);
  const [dataSource, setDataSource] = useState<Array<any>>([]);
  const [pageInfo, setPageInfo] = useState<IPage>(defaultPage);
  const [sumRow, setSumRow] = useState<Partial<{}>>({});

  useEffect(() => {
    window.parent.postMessage({ type: "init" }, "*");
    window.addEventListener("message", receiveMessageFromIndex, false);
    return () => {
      window.removeEventListener("message", receiveMessageFromIndex, false);
    };
  }, []);
  const receiveMessageFromIndex = async (event: any) => {
    const data: any = exceptStr(event.data);
    if (!_.isEmpty(data)) {
      const { columns, dataSource, pageInfo, showOperates, selectedRowKeys, sumRow } = data;
      const { current: pageNum, pageSize: size, total } = pageInfo;
      const conventColumns = _.map(
        _.filter(columns, (it) => it.dataIndex !== "id"),
        (item) => {
          const { dataIndex } = item;
          if (dataIndex === "employeeId") {
            return {
              title: "姓名",
              dataIndex,
              fixed: "left",
              width: 150,
              render: (_: any, record: Partial<any>) => <span>{record?.userName}</span>
            };
          }
          return {
            dataIndex,
            width: 150,
            title: <span dangerouslySetInnerHTML={{ __html: item.title }} />
          };
        }
      );
      setDataSource(dataSource);
      setColumns(
        !showOperates
          ? conventColumns
          : [
              ...conventColumns,
              {
                title: "操作",
                dataIndex: "operate",
                fixed: "right",
                width: 120,
                render: (_: any, record: any) => {
                  return (
                    <Button type="link" onClick={() => handleEdit(record)}>
                      编辑
                    </Button>
                  );
                }
              }
            ]
      );
      setPageInfo({ pageNum, size, total });
      setSelected(selectedRowKeys);
      setSumRow(sumRow);
    }
  };
  const handleEdit = (record: any) => {
    window.parent.postMessage({ type: "turn", payload: { id: "EDIT", params: { ...record } } }, "*");
  };
  const sizeChange = (pageobj: IPage) => {};
  const onChange = (pageobj: IPage) => {
    setPageInfo({ ...pageInfo, ...pageobj });
    window.parent.postMessage({ type: "turn", payload: { id: "PAGEINFO", params: { ...pageInfo, ...pageobj } } }, "*");
  };
  const rowSelection = {
    selectedRowKeys: selected,
    columnWidth: 60,
    onChange: (selectedRowKeys: Array<any>) => {
      setSelected(selectedRowKeys);
      window.parent.postMessage({ type: "turn", payload: { id: "ROWSELECT", params: { selectedRowKeys } } }, "*");
    }
  };
  return (
    <Table
      rowKey="id"
      className={styles.tableWrapper}
      columns={columns}
      dataSource={dataSource}
      size="small"
      rowSelection={rowSelection}
      pagination={{
        ...paginationFun(pageInfo, sizeChange, onChange),
        size: "default"
      }}
      scroll={{ x: 1200, y: `calc(100vh - 172px)` }}
      summary={() => {
        if (_.isEmpty(sumRow)) return;
        return (
          <Table.Summary fixed>
            <Table.Summary.Row>
              {_.map([{}, ...columns], (item, index) => {
                if (index === 0) {
                  return (
                    <Table.Summary.Cell index={0} key={index} align="center">
                      <Text type="danger">总计</Text>
                    </Table.Summary.Cell>
                  );
                }
                return (
                  <Table.Summary.Cell index={index} key={index}>
                    <Text type="danger">{!_.isNil(sumRow[item.dataIndex]) ? sumRow[item.dataIndex] : "-"}</Text>
                  </Table.Summary.Cell>
                );
              })}
            </Table.Summary.Row>
          </Table.Summary>
        );
      }}
    />
  );
};

export default StandingbookTable;