admin-frontend/src/views/admin/menu/hook.tsx

import {
  deleteMenuList,
  getMenuList,
  getPermissionList,
  postMenuList,
  putMenuList
} from "@/api/system";
import { ListDate } from "@/utils/formateDate";
import {
  UseFormatDatePickerHook,
  UseValidTimeRangeHook
} from "@/utils/hooks/format";
import { type PaginationProps } from "@pureadmin/table";
import { number } from "echarts";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref, computed, onMounted } from "vue";

export function useUser() {
  const UpdateForm = ref({
    name: "", // 菜单名
    path: "", // 组件路径
    title: "",
    descs: "", // 描述
    icon: "", // 图标
    parentId: "", //父id
    permissionId: "", //权限id
    menuStatus: "1", // 按钮标识
    version: "1", // 是否按钮
    id: ""
  });
  const dialogType = ref(1);
  const dataList = ref([]);
  const menuList = ref([]);
  const permissionList = ref([]);
  const loading = ref(false);
  const dialogUpdateVisible = ref(false);
  const pagination = reactive<PaginationProps>({
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true
  });
  const columns: TableColumnList = [
    {
      type: "selection",
      width: 55,
      align: "left",
      hide: ({ checkList }) => !checkList.includes("勾选列")
    },
    {
      label: "序号",
      type: "index",
      width: 70,
      hide: ({ checkList }) => !checkList.includes("序号列")
    },
    {
      label: "ID",
      prop: "id",
      minWidth: 130
    },
    {
      label: "菜单名",
      prop: "name",
      minWidth: 130
    },
    {
      label: "组件路径",
      prop: "path",
      minWidth: 130
    },
    {
      label: "图标",
      prop: "icon",
      minWidth: 130
    },
    {
      label: "描述",
      prop: "descs",
      minWidth: 130
    },
    // {
    //   label: "状态",
    //   prop: "status",
    //   minWidth: 130
    // },
    {
      label: "操作",
      fixed: "right",
      width: 200,
      slot: "operation"
    }
  ];
  const buttonClass = computed(() => {
    return [
      "!h-[20px]",
      "reset-margin",
      "!text-gray-500",
      "dark:!text-white",
      "dark:hover:!text-primary"
    ];
  });

  // 获取权限列表
  async function permission() {
    const { data } = await getPermissionList({});
    const permission = data.map(item => {
      return {
        label: item.name,
        Id: item.id
      };
    });
    permissionList.value = permission;
    permissionList.value.unshift({
      label: "作为菜单",
      Id: ""
    });
  }
  permission();

  // 树形结构格式化
  function TreeFormatter(data, flag = false) {
    const result = data.map(item => {
      if (item.children.length != 0) {
        return {
          label: item.name,
          value: item.id,
          children: TreeFormatter(item.children, true)
        };
      } else if (item.version != 0) {
        return {
          disabled: true,
          label: item.name,
          value: item.id
        };
      } else {
        return {
          label: item.name,
          value: item.id
        };
      }
    });
    return result;
  }
  // 获取全部菜单列表
  async function Menu() {
    const { data } = await getMenuList({ id: "" });
    menuList.value = TreeFormatter(data);
    console.log(menuList.value);
    menuList.value.unshift({
      label: "作为顶级菜单",
      value: "null"
    });
  }
  Menu();
  async function UpdateFormSubmit() {
    if (dialogType.value == 1) {
      const { status, message } = await postMenuList({
        name: UpdateForm.value.name, // 菜单名
        path: UpdateForm.value.path, // 组件路径
        descs: UpdateForm.value.descs, // 描述
        title: UpdateForm.value.title, // 名称
        icon: UpdateForm.value.icon, // 图标
        parentId:
          UpdateForm.value.parentId === "null"
            ? null
            : UpdateForm.value.parentId, //父id
        permissionId: UpdateForm.value.permissionId, //权限id
        menuStatus: UpdateForm.value.permissionId === "" ? "0" : "1" // 按钮标识
      });
      if (status == 1) {
        ElMessage({
          message: "新增菜单成功",
          type: "success"
        });
        dialogUpdateVisible.value = false;
        onSearch();
        permission();
        Menu();
      } else {
        ElMessageBox.alert(message, "提示", {
          confirmButtonText: "关闭",
          type: "warning"
        });
      }
    } else {
      const { status, message } = await putMenuList({
        name: UpdateForm.value.name, // 菜单名
        path: UpdateForm.value.path, // 组件路径
        descs: UpdateForm.value.descs, // 描述
        title: UpdateForm.value.title, // 名称
        icon: UpdateForm.value.icon, // 图标
        parentId:
          UpdateForm.value.parentId === "null"
            ? null
            : UpdateForm.value.parentId, //父id
        permissionId: UpdateForm.value.permissionId, //权限id
        menuStatus: UpdateForm.value.permissionId === "" ? "0" : "1", // 按钮标识
        id: UpdateForm.value.id
      });
      if (status == 1) {
        ElMessage({
          message: "菜单修改成功",
          type: "success"
        });
        dialogUpdateVisible.value = false;
        onSearch();
        permission();
        Menu();
      } else {
        ElMessageBox.alert(message, "提示", {
          confirmButtonText: "关闭",
          type: "warning"
        });
      }
    }
  }
  function handleDelete(row) {
    ElMessageBox.confirm(`是否删除名称为:${row.name}的菜单? `, "提示", {
      confirmButtonText: "删除",
      cancelButtonText: "取消",
      type: "warning"
    }).then(async () => {
      const { status, message } = await deleteMenuList({ id: row.id });
      if (status == 1) {
        ElMessage({
          message: "删除成功",
          type: "success"
        });
        onSearch();
        permission();
        Menu();
      } else {
        ElMessageBox.alert(message, "提示", {
          confirmButtonText: "关闭",
          type: "warning"
        });
      }
    });
  }
  function AddUser(row) {
    UpdateForm.value = {
      name: "", // 菜单名
      path: "", // 组件路径
      descs: "", // 描述
      title: "", // 名称
      icon: "", // 图标
      parentId: "", //父id
      permissionId: "", //权限id
      menuStatus: "1", // 按钮标识
      version: "" // 是否按钮
    };
    dialogType.value = 1;
    dialogUpdateVisible.value = true;
  }
  function handleUpdate(row) {
    console.log(row);

    dialogType.value = 2;
    dialogUpdateVisible.value = true;
    UpdateForm.value = {
      name: row.name, // 菜单名
      path: row.path, // 组件路径
      title: row.title, // 菜单名称
      descs: row.descs, // 描述
      icon: row.icon, // 图标
      parentId: row.parentId ? row.parentId : "null", //父id
      permissionId: row.permissionId === null ? "" : row.permissionId, //权限id
      menuStatus: row.version === 0 ? "0" : "1", // 按钮标识
      version: row.version, // 是否按钮
      id: row.id // 是否按钮
    };
  }

  function handleSizeChange(val: number) {
    console.log(`${val} items per page`);
    onSearch();
  }

  function handleCurrentChange(val: number) {
    if (typeof val !== "number") return;
    console.log(`current page: ${val}`);
    onSearch();
  }

  function handleSelectionChange(val) {
    console.log("handleSelectionChange", val);
    onSearch();
  }

  // 搜索函数（请求表格数据列表）
  function submit(e: { keyCode: number }) {
    if (e.keyCode == 229) {
      return;
    } else {
      onSearch();
    }
  }
  async function onSearch() {
    loading.value = true;
    const { data, other } = await getMenuList({
      pageSize: pagination.pageSize,
      pageNum: pagination.currentPage
    });
    dataList.value = data;
    pagination.total = other;
    setTimeout(() => {
      loading.value = false;
    }, 500);
  }

  onMounted(() => {
    onSearch();
  });

  return {
    loading,
    columns,
    dataList,
    pagination,
    buttonClass,
    dialogUpdateVisible,
    UpdateFormSubmit,
    submit,
    UpdateForm,
    menuList,
    permissionList,
    dialogType,
    AddUser,
    onSearch,
    handleUpdate,
    handleDelete,
    handleSizeChange,
    handleCurrentChange,
    handleSelectionChange
  };
}