sw-project-interior/src/pages/A5Section/index.tsx

import React, { useCallback, useEffect, useMemo } from "react";
import styles from "./index.module.scss";
import { Button, Popconfirm, Table } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { A5_APIgetList, A5_APIsort } from "@/store/action/A5Section";
import { RootState } from "@/store";
import { A5TableType } from "@/types";
import { MessageFu } from "@/utils/message";

function A5Section() {
  const dispatch = useDispatch();

  const getListFu = useCallback(() => {
    dispatch(A5_APIgetList());
  }, [dispatch]);

  useEffect(() => {
    getListFu();
  }, [getListFu]);

  // 获取表格数据
  const tableList = useSelector(
    (state: RootState) => state.A5Section.tableList
  );

  // 树型数组扁平化
  const arrAllArr = useMemo(() => {
    const arr: A5TableType[] = [...tableList];
    const arr1: A5TableType[] = [];
    arr.forEach((v) => {
      arr1.push(v);
      if (v.children && v.children.length) {
        v.children.forEach((v2) => {
          arr1.push(v2);
          if (v2.children && v2.children.length) {
            v2.children.forEach((v3) => {
              arr1.push(v3);
              if (v3.children && v3.children.length) {
                v3.children.forEach((v4) => {
                  arr1.push(v4);
                });
              }
            });
          }
        });
      }
    });
    return arr1;
  }, [tableList]);

  // 拿到当前点击 级别的 数组
  const sonArrFu = useCallback(
    (fId: string) => {
      const arr: A5TableType[] = arrAllArr.filter((v) => v.parentId === fId);
      return arr;
    },
    [arrAllArr]
  );

  // 点击删除
  const delById = useCallback((id: string) => {}, []);

  // 点击新增子部门
  const addTree = useCallback((item: A5TableType) => {
    console.log("----", item);
  }, []);

  // 点击 上移 和下移
  const sortMoveFu = useCallback(
    async (flag: 1 | -1, index: number, oldId: string, fId: string) => {
      const arr = sonArrFu(fId);
      const newId = arr[index + flag].id;

      const res = await A5_APIsort(oldId, newId);

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

  const columns = useMemo(() => {
    return [
      {
        title: <>&emsp;&nbsp;部门名称</>,
        dataIndex: "name",
      },
      {
        title: "说明",
        render: (item: A5TableType) =>
          item.description ? (
            item.description.length >= 30 ? (
              <span style={{ cursor: "pointer" }} title={item.description}>
                {item.description.substring(0, 30) + "..."}
              </span>
            ) : (
              item.description
            )
          ) : (
            "（空）"
          ),
      },
      {
        title: "同级排序",
        dataIndex: "sort",
      },
      {
        title: "操作",
        render: (item: A5TableType, _: any, index: number) => (
          <>
            <Button size="small" type="text" onClick={() => addTree(item)}>
              新增子部门
            </Button>
            <Button size="small" type="text">
              编辑
            </Button>
            {index === 0 ? null : (
              <Button
                size="small"
                type="text"
                onClick={() => sortMoveFu(-1, index, item.id, item.parentId)}
              >
                上移
              </Button>
            )}

            {sonArrFu(item.parentId).length - 1 === index ? null : (
              <Button
                size="small"
                type="text"
                onClick={() => sortMoveFu(1, index, item.id, item.parentId)}
              >
                下移
              </Button>
            )}

            <Popconfirm
              title="删除后无法恢复，是否删除?"
              okText="删除"
              cancelText="取消"
              onConfirm={() => delById(item.id)}
              okButtonProps={{ loading: false }}
            >
              <Button size="small" type="text" danger>
                删除
              </Button>
            </Popconfirm>
          </>
        ),
      },
    ];
  }, [addTree, delById, sonArrFu, sortMoveFu]);

  return (
    <div className={styles.A5Section}>
      <div className="pageTitle">部门管理</div>
      <div className="A5Main">
        <div className="A5Top">
          <Button type="primary">新增</Button>
        </div>

        {/* 表格主体 */}
        <div className="A5tableBox">
          <Table
            scroll={{ y: 575 }}
            dataSource={tableList}
            columns={columns}
            rowKey="id"
            pagination={false}
          />
        </div>
      </div>
    </div>
  );
}

const MemoA5Section = React.memo(A5Section);

export default MemoA5Section;