sw-project-interior/src/pages/A2Dict/A2Tab1/A2Table1.tsx

import React, { useCallback, useMemo } from "react";
import styles from "./index.module.scss";
import { Button, Popconfirm, Table } from "antd";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import { A2Tab1_1 } from "@/types/api/A2Dict";
import { A2_APIdel, A2_APIsort } from "@/store/action/A2Dict";
import { MessageFu } from "@/utils/message";

type Props = {
  editFu: (item: A2Tab1_1) => void;
  upTaleFu: () => void;
  type: "job" | "status";
};

function A2Table1({ editFu, upTaleFu, type }: Props) {
  const tableArr = useSelector(
    (state: RootState) => state.A2Dict.A2Tab1_1Obj[type]
  );

  // 点击删除
  const delById = useCallback(
    async (id: number) => {
      const res = await A2_APIdel(id);
      if (res.code === 0) {
        MessageFu.success("删除成功!");
        upTaleFu();
      }
    },
    [upTaleFu]
  );

  // 点击排序
  const sortFu = useCallback(
    async (flag: 1 | -1, id: number, index: number) => {
      const arr = tableArr.filter((v) => v.name !== "其它");

      const newId = arr[index + flag].id;

      const res = await A2_APIsort(id, newId);

      if (res.code === 0) {
        MessageFu.success("排序修改成功!");
        upTaleFu();
      }
    },
    [tableArr, upTaleFu]
  );

  // 职能-项目经理-商务经理的 按钮过滤
  const jobBtnFlag = useCallback(
    (name: string, index: number) => {
      let flag = true; // true 为 显示按钮

      if (type === "job") {
        if (name === "项目经理" || name === "商务经理") flag = false;
        if (index === 2) flag = false;
      } else if (index === 0) flag = false;

      return flag;
    },
    [type]
  );

  const columns = useMemo(() => {
    return [
      {
        width: 100,
        title: "序号",
        render: (item: A2Tab1_1, __: any, index: number) =>
          item.name !== "其它" ? index + 1 : "-",
      },
      {
        title: "字典名称",
        dataIndex: "name",
      },
      {
        title: "说明",
        render: (item: A2Tab1_1) =>
          item.description ? (
            item.description.length >= 30 ? (
              <span style={{ cursor: "pointer" }} title={item.description}>
                {item.description.substring(0, 30) + "..."}
              </span>
            ) : (
              item.description
            )
          ) : (
            "（空）"
          ),
      },
      {
        title: "操作",
        render: (item: A2Tab1_1, _: any, index: number) => (
          <>
            {item.name !== "其它" && jobBtnFlag(item.name, index) ? (
              <Button
                size="small"
                type="text"
                onClick={() => sortFu(-1, item.id, index)}
              >
                上移
              </Button>
            ) : null}

            {index < tableArr.length - 2 &&
            item.name !== "其它" &&
            jobBtnFlag(item.name, -1) ? (
              <Button
                size="small"
                type="text"
                onClick={() => sortFu(1, item.id, index)}
              >
                下移
              </Button>
            ) : null}

            <Button size="small" type="text" onClick={() => editFu(item)}>
              编辑
            </Button>

            {item.name !== "其它" && jobBtnFlag(item.name, -1) ? (
              <Popconfirm
                title="删除后无法恢复，是否删除?"
                okText="删除"
                cancelText="取消"
                onConfirm={() => delById(item.id)}
                okButtonProps={{ loading: false }}
              >
                <Button size="small" type="text" danger>
                  删除
                </Button>
              </Popconfirm>
            ) : null}
          </>
        ),
      },
    ];
  }, [delById, editFu, jobBtnFlag, sortFu, tableArr.length]);

  return (
    <div className={styles.A2Table1}>
      <Table
        size="small"
        dataSource={tableArr}
        columns={columns}
        rowKey="id"
        pagination={false}
      />
    </div>
  );
}

const MemoA2Table1 = React.memo(A2Table1);

export default MemoA2Table1;