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

/*
 * Author: 黎永顺
 * name: 社保福利档案列表
 * Description:
 * Date: 2023/11/1
 */
import React, { FunctionComponent, useEffect, useMemo, useState } from "react";
import { ColumnType } from "antd/lib/table";
import { PaginationData } from "rc-pagination";
import styles from "@/pages/atdTable/components/index.less";
import { exceptStr, paginationAction } from "@/utils/common";
import type { MenuProps } from "antd";
import { Button, Dropdown, Space, Table } from "antd";
import { MoreOutlined } from "@ant-design/icons";

interface OwnProps {
}

type Props = OwnProps;

const Index: FunctionComponent<Props> = (props) => {
  const [columns, setColumns] = useState<ColumnType<any>[]>([]);
  const [dataSource, setDataSource] = useState<any[]>([]);
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [pageInfo, setPageInfo] = useState<Partial<PaginationData>>({});
  const [i18n, setI18n] = useState<any>({});
  const [runStatuses, setRunStatuses] = useState<string>("");

  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, selectedRowKeys: rowKeys = [], i18n: i18nRes = {}, runStatuses } = data;
      setRunStatuses(runStatuses);
      setI18n(i18nRes);
      setPageInfo(pageInfo);
      setDataSource(dataSource);
      setSelectedRowKeys([...rowKeys, ...selectedRowKeys]);
      setColumns(columns);
    }
  };
  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 };
    });
  };

  const rowSelection = {
    columnWidth: 60, selectedRowKeys,
    preserveSelectedRowKeys: true,
    onChange: (rowKeys: React.Key[]) => {
      setSelectedRowKeys(rowKeys);
      window.parent.postMessage(
        { type: "turn", payload: { id: "CHECKBOX", params: { selectedRowKeys: rowKeys } } },
        "*"
      );
    }
  };
  const handleWelfareOperate = (type: string, record: any, interfaceParams?: any) => {
    window.parent.postMessage(
      {
        type: "turn",
        payload: { id: type, params: { record, interfaceParams } }
      },
      "*"
    );
  };
  const cols: any = useMemo(() => {
    let opts: any = { title: i18n["操作"], dataIndex: "operate", fixed: "right", width: 185 };
    const UnAuthOpts = (record: any) => (<Space>
      <Button type="link" onClick={() => handleWelfareOperate("VIEW", record)}>{i18n["查看"]}</Button>
      <Dropdown menu={{
        items: [{ key: "Log", label: i18n["操作日志"], onClick: () => handleWelfareOperate("log", record) }]
      }} placement="bottomRight">
        <Button type="link" icon={<MoreOutlined/>}/>
      </Dropdown>
    </Space>);
    switch (runStatuses) {
      case "1":
        opts = {
          ...opts,
          render: (__: any, record: any) => {
            const items: MenuProps["items"] = [
              {
                key: "DeleteFiles",
                label: i18n["删除档案"],
                onClick: () => handleWelfareOperate("DEL-ARCHIVE", record)
              },
              {
                key: "DeleteTodoList",
                label: i18n["删除待办"],
                onClick: () => handleWelfareOperate("DEL-TO-DO", record, { runStatus: "4" })
              },
              {
                key: "Log",
                label: i18n["操作日志"],
                onClick: () => handleWelfareOperate("log", record)
              }
            ];
            return (record?.opts.includes("admin") ? <Space>
              <Button type="link" onClick={() => handleWelfareOperate("EDIT", record)}>{i18n["编辑"]}</Button>
              <Button type="link" onClick={() => handleWelfareOperate("ADD-TO-PAY", record)}>{i18n["增员"]}</Button>
              <Dropdown menu={{ items }} placement="bottomRight">
                <Button type="link" icon={<MoreOutlined/>}/>
              </Dropdown>
            </Space> : UnAuthOpts(record));
          }
        };
        break;
      case "2,3":
      case "ext":
        opts = {
          ...opts,
          render: (__: any, record: any) => {
            const items: MenuProps["items"] = [
              {
                key: "Log",
                label: i18n["操作日志"],
                onClick: () => handleWelfareOperate("log", record)
              }
            ];
            return (record?.opts.includes("admin") ? <Space>
              <Button type="link" onClick={() => handleWelfareOperate("EDIT", record)}>{i18n["编辑"]}</Button>
              <Dropdown menu={{ items }} placement="bottomRight">
                <Button type="link" icon={<MoreOutlined/>}/>
              </Dropdown>
            </Space> : UnAuthOpts(record));
          }
        };
        break;
      case "3":
        opts = {
          ...opts,
          render: (__: any, record: any) => {
            const downsizingItems: MenuProps["items"] = [
              {
                key: "DeleteTodoList",
                label: i18n["删除待办"],
                onClick: () => handleWelfareOperate("DEL-TO-DO-STAY", record, { runStatus: "3" })
              },
              {
                key: "Log",
                label: i18n["操作日志"],
                onClick: () => handleWelfareOperate("log", record)
              }
            ];
            return (record?.opts.includes("admin") ? <Space>
              <Button type="link" onClick={() => handleWelfareOperate("EDIT", record)}>{i18n["编辑"]}</Button>
              <Button type="link"
                      onClick={() => handleWelfareOperate("STAY-DEL-TO-STOP", record)}>{i18n["减员"]}</Button>
              <Dropdown menu={{ items: downsizingItems }} placement="bottomRight">
                <Button type="link" icon={<MoreOutlined/>}/>
              </Dropdown>
            </Space> : UnAuthOpts(record));
          }
        };
        break;
      case "4,5":
        opts = {
          ...opts,
          render: (__: any, record: any) => {
            const stopItems: MenuProps["items"] = [
              {
                key: "CancelSuspension",
                label: i18n["取消停缴"],
                onClick: () => handleWelfareOperate("CANCEL-STOP", record)
              },
              {
                key: "Log",
                label: i18n["操作日志"],
                onClick: () => handleWelfareOperate("log", record)
              }
            ];
            return (record?.opts.includes("admin") ? <Space>
              <Button type="link" onClick={() => handleWelfareOperate("VIEW", record)}>{i18n["查看"]}</Button>
              <Button type="link"
                      onClick={() => handleWelfareOperate("DEL-ARCHIVE", record)}>{i18n["删除档案"]}</Button>
              <Dropdown menu={{ items: stopItems }} placement="bottomRight">
                <Button type="link" icon={<MoreOutlined/>}/>
              </Dropdown>
            </Space> : UnAuthOpts(record));
          }
        };
        break;
      default:
        break;
    }
    return [...columns, opts];
  }, [columns, runStatuses, i18n]);
  return (<Table
    rowKey="baseInfoId" size="small" className={styles.tableWrapper}
    columns={cols} dataSource={dataSource} rowSelection={rowSelection}
    scroll={{ x: 1200, y: `calc(100vh - 103px)` }}
    pagination={{ ...paginationAction(pageInfo, i18n, onChange), size: "default" }}
  />);
};

export default Index;