salary-management-oneself/src/pages/unitTable/renderColsOpts.tsx

import React from "react";
import { Button, Dropdown, MenuProps, Space, Tooltip, Typography } from "antd";
import { MoreOutlined, QuestionCircleFilled } from "@ant-design/icons";
import { extraType } from "@/pages/unitTable/index";

const { Text } = Typography;

/*
 * Author: 黎永顺
 * Description:社保福利台账列表项
 * Params:
 * Date: 2024/1/23
 */
export function renderCols(initialState: any[], type: string, i18n?: AnyObject, extraParams?: Partial<extraType>) {
  return React.useMemo(() => {
    if (type === "welfareRecord") {
      return [..._.map(_.filter(initialState, o => o.dataIndex !== "id"), g => {
        let col = { ...g, ellipsis: true, fixed: g.dataIndex === "billMonth", width: 180 };
        switch (g.dataIndex) {
          case "billMonth":
            col = {
              ...col,
              width: 120,
              render: (text: string, record: any) => {
                const { billStatus } = record;
                return (<Button type="link"
                                onClick={() => postMessageToParent((billStatus === "0" && record?.opts.includes("admin")) ? "CALC" : "VIEW", record)}>{text}</Button>);
              }
            };
            break;
          case "billStatus":
            col = {
              ...col, width: 100, render: (text: string) => (
                <Text style={{ maxWidth: "100%" }} ellipsis>
                  {text === "1" ? i18n?.["已归档"] : i18n?.["未归档"]}
                </Text>
              )
            };
            break;
          case "paymentOrganization":
            col = { ...col, width: 200 };
            break;
          case "socialNum":
          case "otherNum":
          case "fundNum":
            col = { ...col, width: 118 };
            break;
          case "remarks":
            col = { ...col, width: 200 };
            break;
          default:
            col = { ...col };
            break;
        }
        return col;
      }), {
        dataIndex: "operate", title: i18n?.["操作"], width: 185, fixed: "right",
        render: (__: string, record: any) => {
          const { billStatus } = record;
          const items: MenuProps["items"] = [
            {
              key: "DeleteList",
              label: i18n?.["删除"],
              onClick: () => postMessageToParent("DELRC", record)
            },
            {
              key: "Log",
              label: i18n?.["操作日志"],
              onClick: () => postMessageToParent("log", record)
            }
          ];
          return (
            <Space>
              {
                !record?.opts.includes("admin") ?
                  <Space>
                    <Button type="link" onClick={() => postMessageToParent("VIEW", record)}>{i18n?.["查看"]}</Button>
                    <Dropdown menu={{
                      items: [
                        { key: "Log", label: i18n?.["操作日志"], onClick: () => postMessageToParent("log", record) }
                      ]
                    }} placement="bottomRight">
                      <Button type="link" icon={<MoreOutlined/>}/>
                    </Dropdown>
                  </Space> :
                  <>
                    {
                      billStatus === "0" &&
                      <>
                        <Button type="link"
                                onClick={() => postMessageToParent("CALC", record)}>{i18n?.["核算"]}</Button>
                        <Button type="link"
                                onClick={() => postMessageToParent("FILE", record)}>{i18n?.["归档"]}</Button>
                        <Dropdown menu={{ items }} placement="bottomRight">
                          <Button type="link" icon={<MoreOutlined/>}/>
                        </Dropdown>
                      </>
                    }
                    {
                      billStatus === "1" &&
                      <>
                        <Button type="link"
                                onClick={() => postMessageToParent("VIEW", record)}>{i18n?.["查看"]}</Button>
                        <Button type="link"
                                onClick={() => postMessageToParent("RECALC", record)}>{i18n?.["重新核算"]}</Button>
                        <Dropdown menu={{
                          items: [
                            {
                              key: "Log",
                              label: i18n?.["操作日志"],
                              onClick: () => postMessageToParent("log", record)
                            }
                          ]
                        }} placement="bottomRight">
                          <Button type="link" icon={<MoreOutlined/>}/>
                        </Dropdown>
                      </>
                    }
                  </>
              }
            </Space>
          );
        }
      }];
    } else if (type === "bonusplan") {
      return [..._.map(initialState, g => {
        let col = { ...g, ellipsis: true, fixed: false, width: 150 };
        switch (g.dataIndex) {
          case "taxYear":
          case "fileStatusDesc":
            col = { ...col, width: 80 };
            break;
          case "billStatus":
            col = {
              ...col, width: 100, render: (text: string) => (
                <Text style={{ maxWidth: "100%" }} ellipsis>
                  {text === "1" ? i18n?.["已归档"] : i18n?.["未归档"]}
                </Text>
              )
            };
            break;
          case "optimizedBonusSum":
            col = { ...col, width: 220 };
            break;
          case "employeeCount":
            col = {
              ...col, title: <Space>
                <Text>{g.title}</Text>
                <Tooltip placement="top"
                         title={i18n?.["若同一个人 在两个个税扣缴义务人下 同一纳税年度 同时发年终奖，统计为两个人"]}>
                  <QuestionCircleFilled/>
                </Tooltip>
              </Space>
            };
            break;
          default:
            col = { ...col };
            break;
        }
        return col;
      }), {
        dataIndex: "operate", title: i18n?.["操作"], width: 185, fixed: "right",
        render: (__: string, record: any) => {
          const { fileStatus } = record;
          const items: MenuProps["items"] = [
            {
              key: "FileList",
              label: fileStatus === 0 ? i18n?.["归档"] : i18n?.["取消归档"],
              onClick: () => postMessageToParent("FILE", record)
            },
            {
              key: "DeleteList",
              label: i18n?.["删除"],
              onClick: () => postMessageToParent("DEL", record)
            },
            {
              key: "Log",
              label: i18n?.["操作日志"],
              onClick: () => postMessageToParent("log", record)
            }
          ];
          return (
            <Space>
              {
                !extraParams?.permission ?
                  <Space>
                    <Button type="link"
                            onClick={() => postMessageToParent("VIEW", record)}>{i18n?.["查看详情"]}</Button>
                    <Dropdown menu={{ items: items.slice(-1) }} placement="bottomRight">
                      <Button type="link" icon={<MoreOutlined/>}/>
                    </Dropdown>
                  </Space> :
                  <>
                    <Button type="link"
                            onClick={() => postMessageToParent("VIEW", record)}>{i18n?.["查看详情"]}</Button>
                    <Button type="link"
                            onClick={() => postMessageToParent("EDIT", record)}>{i18n?.["编辑"]}</Button>
                    <Dropdown menu={{ items }} placement="bottomRight">
                      <Button type="link" icon={<MoreOutlined/>}/>
                    </Dropdown>
                  </>
              }
            </Space>
          );
        }
      }];
    } else if (type === "bonusStrategy") {
      const { selectedKey } = extraParams as { selectedKey: string };
      return [..._.map(initialState, g => {
        let col = { ...g, ellipsis: true, fixed: false, width: 120 };
        switch (g.dataIndex) {
          case "username":
            col = { ...col, fixed: "left" };
            break;
          case "taxAgentName":
            col = { ...col, width: 200, fixed: "left" };
            break;
          case "idNo":
            col = { ...col, width: 150 };
            break;
          case "originalTaxTypeDesc":
          case "originalBonus":
          case "originalTax":
          case "originalIncome":
            col = {
              ...col,
              render: (text: string) => (<div style={{ color: "rgb(93, 156, 236)" }}>{text}</div>)
            };
            break;
          case "optimizedTaxTypeDesc":
          case "optimizedBonus":
          case "optimizedTax":
          case "optimizedIncome":
            col = { ...col, render: (text: string) => (<Text type="success">{text}</Text>) };
            break;
          case "companySave":
          case "employeeGain":
            col = { ...col, render: (text: string) => (<Text type="warning">{text}</Text>) };
            break;
          default:
            col = { ...col };
            break;
        }
        return col;
      }), {
        dataIndex: "operate", title: i18n?.["操作"], width: 185, fixed: "right",
        render: (__: string, record: any) => {
          let items: MenuProps["items"] = [
            {
              key: "DeleteList",
              label: i18n?.["删除"],
              onClick: () => postMessageToParent("DEL", record)
            },
            {
              key: "Log",
              label: i18n?.["操作日志"],
              onClick: () => postMessageToParent("log", record)
            }
          ];
          selectedKey === "getAnnualbonusaddupList" && items.shift();
          return (
            <Space>
              {
                !extraParams?.permission ?
                  <Space>
                    {
                      selectedKey === "getAnnualbonusstrategyList" &&
                      <Button type="link"
                              onClick={() => postMessageToParent("VIEW", record)}>{i18n?.["查看详情"]}</Button>
                    }
                    <Button type="link"
                            onClick={() => postMessageToParent("log", record)}>{i18n?.["操作日志"]}</Button>
                  </Space> :
                  <>
                    <Button type="link"
                            onClick={() => postMessageToParent("EDIT", record)}>{i18n?.["编辑"]}</Button>
                    {
                      selectedKey === "getAnnualbonusstrategyList" &&
                      <Button type="link"
                              onClick={() => postMessageToParent("VIEW", record)}>{i18n?.["查看详情"]}</Button>
                    }
                    {
                      selectedKey === "getAnnualbonusaddupList" &&
                      <Button type="link"
                              onClick={() => postMessageToParent("DEL", record)}>{i18n?.["删除"]}</Button>
                    }
                    <Dropdown menu={{ items }} placement="bottomRight">
                      <Button type="link" icon={<MoreOutlined/>}/>
                    </Dropdown>
                  </>
              }
            </Space>
          );
        }
      }];
    } else if (type === "variableSalary") {
      return [..._.map(initialState, g => {
        return { ...g, ellipsis: true, fixed: false, width: 150 };
      }), {
        dataIndex: "operate", title: i18n?.["操作"], width: 185, fixed: "right",
        render: (__: string, record: any) => {
          return (
            <Space>
              <Button type="link"
                      onClick={() => postMessageToParent("VIEW", record)}>{i18n?.["查看详情"]}</Button>
              <Button type="link"
                      onClick={() => postMessageToParent("DEL", record)}>{i18n?.["删除"]}</Button>
            </Space>
          );
        }
      }];
    }
    return initialState;
  }, [initialState, type, i18n, extraParams]);
}

const postMessageToParent = (type: string, params: any) => {
  window.parent.postMessage({ type: "turn", payload: { id: type, params } }, "*");
};