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" && extraParams?.permission ? "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, customOptAuth } = record;
            const items: MenuProps["items"] = [
              {
                key: "DeleteList",
                label: i18n?.["删除"],
                onClick: () => postMessageToParent("DELRC", 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: [
                          {
                            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>
                        {(_.isEmpty(customOptAuth) || customOptAuth.FILE) && (
                          <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>
                        {(_.isEmpty(customOptAuth) || customOptAuth.RECALC) && (
                          <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("EDIT", record)}>
                  {i18n?.["编辑"]}
                </Button>
                <Button type="link" onClick={() => postMessageToParent("DEL", record)}>
                  {i18n?.["删除"]}
                </Button>
              </Space>
            );
          }
        }
      ];
    } else if (type === "dataAcquisition") {
      const { isSpecial } = extraParams as { isSpecial: boolean };
      return [
        ..._.map(initialState, (g) => {
          let col = { ...g, ellipsis: true, width: 110 };
          switch (g.dataIndex) {
            case "username":
            case "departmentName":
              col = { ...col, fixed: true };
              break;
            case "taxAgentName":
              col = { ...col, fixed: true, width: 180 };
              break;
            case "mobile":
              col = { ...col, width: 125 };
              break;
            case "operate":
              col = {
                ...col,
                width: 176,
                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)
                    }
                  ];
                  isSpecial && items.shift();
                  return (
                    <Space>
                      <Button type="link" onClick={() => postMessageToParent("EDIT", record)}>
                        {i18n?.["编辑"]}
                      </Button>
                      {isSpecial ? (
                        <Button type="link" onClick={() => postMessageToParent("DEL", record)}>
                          {i18n?.["删除"]}
                        </Button>
                      ) : (
                        <Button type="link" onClick={() => postMessageToParent("VIEW", record)}>
                          {i18n?.["查看明细"]}
                        </Button>
                      )}
                      <Dropdown menu={{ items }} placement="bottomRight">
                        <Button type="link" icon={<MoreOutlined />} />
                      </Dropdown>
                    </Space>
                  );
                }
              };
              break;
            default:
              col = { ...col };
              break;
          }
          return col;
        })
      ];
    } else if (type === "attendanceView") {
      return [
        ..._.map(initialState, (g) => {
          let col = { ...g, ellipsis: true };
          switch (g.dataIndex) {
            case "operate":
              col = {
                ...col,
                ellipsis: false,
                width: 120,
                render: (__: string, record: any) => {
                  return (
                    <Space>
                      {_.map(col?.operateType, (o) => (
                        <Button key={o.key} type="link" onClick={() => postMessageToParent(o.key, record)}>
                          {o.label}
                        </Button>
                      ))}
                    </Space>
                  );
                }
              };
              break;
            default:
              col = { ...col };
              break;
          }
          return col;
        })
      ];
    } else if (type === "declare") {
      return [
        ..._.map(initialState, (g) => {
          let col = { ...g, ellipsis: true };
          switch (g.dataIndex) {
            case "operate":
              col = {
                ...col,
                ellipsis: false,
                width: 120,
                render: (__: string, record: any) => {
                  return (
                    <Space>
                      {_.map(col?.operateType, (o) => (
                        <Button key={o.key} type="link" onClick={() => postMessageToParent(o.key, record)}>
                          {o.label}
                        </Button>
                      ))}
                    </Space>
                  );
                }
              };
              break;
            default:
              col = { ...col };
              break;
          }
          return col;
        })
      ];
    }
    return initialState;
  }, [initialState, type, i18n, extraParams]);
}

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