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

/*
 * Author: 黎永顺
 * name: 薪资档案重构-档案列表
 * Description:
 * Date: 2024/1/8
 */
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 { Button, Dropdown, MenuProps, 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>("");
  const [showOperateBtn, setShowOperateBtn] = useState<boolean>(false);
  const [showDelSalaryFileBtn, setShowDelSalaryFileBtn] = useState<boolean>(false);//待定薪、停薪员工 是否允许删除薪资档案

  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, i18n: i18nRes = {},
        selectedKey, showOperateBtn, showDelSalaryFileBtn
      } = data;
      setShowOperateBtn(showOperateBtn);
      setRunStatuses(selectedKey);
      setI18n(i18nRes);
      setPageInfo(pageInfo);
      setDataSource(dataSource);
      setSelectedRowKeys(selectedRowKeys);
      setColumns(columns);
      setShowDelSalaryFileBtn(showDelSalaryFileBtn);
    }
  };
  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: selectedRowKeys,
    onChange: (selectedRowKeys: React.Key[]) => {
      setSelectedRowKeys(selectedRowKeys);
      window.parent.postMessage(
        {
          type: "turn",
          payload: { id: "ROWSELECTION", params: { selectedRowKeys } }
        },
        "*"
      );
    }
  };
  const handleSalaryFileOperate = (type: string, record: any, interfaceParams?: any) => {
    window.parent.postMessage(
      {
        type: "turn",
        payload: { id: type, params: { record, interfaceParams } }
      },
      "*"
    );
  };
  const cols: any = useMemo(() => {
    if (!_.isEmpty(columns)) {
      let opts: any = _.find(columns, o => o.dataIndex === "operate");
      switch (runStatuses) {
        case "pending":
          opts = {
            ...opts,
            render: (__: any, record: any) => {
              let items: MenuProps["items"] = [
                {
                  key: "DeleteTodoList",
                  label: i18n["删除待办"],
                  onClick: () => handleSalaryFileOperate("DEL-PENDITNG-TO-DO", record, [record?.id])
                },
                {
                  key: "DeleteFiles",
                  label: i18n["删除档案"],
                  onClick: () => handleSalaryFileOperate("DEL-SALARY-FILES", record, [record?.id])
                }
              ];
              !showDelSalaryFileBtn && (items = _.dropRight(items));
              return (<Space>
                <Button type="link" onClick={() => handleSalaryFileOperate("EDIT", record)}>{i18n["编辑"]}</Button>
                <Button type="link"
                        onClick={() => handleSalaryFileOperate("ADD-TO-SALARYPAYMENT", record, [record?.id])}>{i18n["设为发薪人员"]}</Button>
                <Dropdown menu={{ items }} placement="bottomRight">
                  <Button type="link" icon={<MoreOutlined/>}/>
                </Dropdown>
              </Space>);
            }
          };
          break;
        case "fixed":
        case "ext":
          opts = {
            ...opts,
            render: (__: any, record: any) => (
              <Button type="link"
                      onClick={() => handleSalaryFileOperate("CHANGE-SALARY", record)}>{i18n["调薪"]}</Button>)
          };
          break;
        case "suspend":
          opts = {
            ...opts,
            render: (__: any, record: any) => {
              const downsizingItems: MenuProps["items"] = [
                {
                  key: "DeleteTodoList",
                  label: i18n["删除待办"],
                  onClick: () => handleSalaryFileOperate("DEL-SUSPEND-TO-DO", record, [record?.id])
                }
              ];
              return (<Space>
                <Button type="link" onClick={() => handleSalaryFileOperate("EDIT", record)}>{i18n["编辑"]}</Button>
                <Button type="link"
                        onClick={() => handleSalaryFileOperate("SALARY-SUSPENSION", record, [record?.id])}>{i18n["停薪"]}</Button>
                <Dropdown menu={{ items: downsizingItems }} placement="bottomRight">
                  <Button type="link" icon={<MoreOutlined/>}/>
                </Dropdown>
              </Space>);
            }
          };
          break;
        case "stop":
          opts = {
            ...opts,
            render: (__: any, record: any) => {
              let stopItems: MenuProps["items"] = [
                {
                  key: "CancelSuspension",
                  label: i18n["删除档案"],
                  onClick: () => handleSalaryFileOperate("DEL-SALARY-FILES", record, [record?.id])
                }
              ];
              !showDelSalaryFileBtn && (stopItems = _.dropRight(stopItems));
              return (<Space>
                <Button type="link" onClick={() => handleSalaryFileOperate("VIEW", record)}>{i18n["查看"]}</Button>
                <Button type="link"
                        onClick={() => handleSalaryFileOperate("CANCEL-SALARY-SUSPENSION", record, [record?.id])}>{i18n["取消停薪"]}</Button>
                {
                  !_.isEmpty(stopItems) &&
                  <Dropdown menu={{ items: stopItems }} placement="bottomRight">
                    <Button type="link" icon={<MoreOutlined/>}/>
                  </Dropdown>
                }
              </Space>);
            }
          };
          break;
        default:
          break;
      }
      return showOperateBtn ? [..._.filter(columns, o => o.dataIndex !== "operate"), opts] :
        [..._.filter(columns, o => o.dataIndex !== "operate"), {
          ...opts,
          render: (__: any, record: any) => (
            <Button type="link" onClick={() => handleSalaryFileOperate("VIEW", record)}>{i18n["查看"]}</Button>)
        }];
    } else {
      return [];
    }
  }, [columns, runStatuses, i18n, showOperateBtn, showDelSalaryFileBtn]);
  return (<Table
    rowKey="id" 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;