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

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

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<{}>>({});
  const [showSumrow, setShowSumrow] = useState<boolean>(false);

  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,
        sumpayload, selectedKey
      } = 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);
      const confCode: any = await API.CalculateService.getSysconfcode({ code: "OPEN_ACCT_RESULT_SUM" });
      setShowSumrow(confCode.data.status && confCode.data.data === "1");
      if (confCode.data.status && confCode.data.data === "1") {
        const sumRowlist: any = selectedKey === "1" ? await API.CalculateService.siaccountDetailCommonListSum(sumpayload) :
          selectedKey === "3" ? await API.CalculateService.siaccountDetailSupplementaryListSum(sumpayload) :
            selectedKey === "regression" ? await API.CalculateService.siaccountDetailRecessionListSum(sumpayload) :
              selectedKey === "difference" ? await API.CalculateService.siaccountDetailBalanceListSum(sumpayload) : {
                data: {
                  status: false,
                  data: { sumRow: {} }
                }
              };
        if (sumRowlist.data.status) {
          if (!_.isEmpty(sumRowlist.data.data.sumRow)) {
            setSumRow(sumRowlist.data.data.sumRow);
          } else {
            setSumRow({ [new Date().getTime()]: new Date().getTime() });
          }
        }
        if (sumRowlist.data.status && _.isNil(sumRowlist.data.data.sumRow)) {
          setSumRow({ [new Date().getTime()]: new Date().getTime() });
        }
      }
    }
  };
  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: 80,
    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(columns) || !showSumrow) return;
      return (
        <Table.Summary fixed>
          <Table.Summary.Row>
            {
              _.isEmpty(sumRow) ? <Spin tip="加载中"/> :
                _.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;