Blame view

src/layouts/default/menu/useLayoutMenu.ts 3.01 KB
vben authored
1
2
3
4
5
import type { Menu } from '/@/router/types';
import type { Ref } from 'vue';
import { watch, unref, ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { MenuSplitTyeEnum } from '/@/enums/menuEnum';
Vben authored
6
import { useThrottleFn } from '@vueuse/core';
vben authored
7
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
vben authored
8
import { getChildrenMenus, getCurrentParentPath, getMenus, getShallowMenus } from '/@/router/menus';
Vben authored
9
import { usePermissionStore } from '/@/store/modules/permission';
10
import { useAppInject } from '/@/hooks/web/useAppInject';
vben authored
11
12
13
14
15

export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
  // Menu array
  const menusRef = ref<Menu[]>([]);
  const { currentRoute } = useRouter();
16
  const { getIsMobile } = useAppInject();
Vben authored
17
  const permissionStore = usePermissionStore();
vben authored
18
19
  const { setMenuSetting, getIsHorizontal, getSplit } = useMenuSetting();
Vben authored
20
  const throttleHandleSplitLeftMenu = useThrottleFn(handleSplitLeftMenu, 50);
vben authored
21
22
23
24
25

  const splitNotLeft = computed(
    () => unref(splitType) !== MenuSplitTyeEnum.LEFT && !unref(getIsHorizontal)
  );
vben authored
26
27
28
  const getSplitLeft = computed(
    () => !unref(getSplit) || unref(splitType) !== MenuSplitTyeEnum.LEFT
  );
vben authored
29
vben authored
30
  const getSpiltTop = computed(() => unref(splitType) === MenuSplitTyeEnum.TOP);
vben authored
31
32
33
34
35
36
37
38

  const normalType = computed(() => {
    return unref(splitType) === MenuSplitTyeEnum.NONE || !unref(getSplit);
  });

  watch(
    [() => unref(currentRoute).path, () => unref(splitType)],
    async ([path]: [string, MenuSplitTyeEnum]) => {
39
      if (unref(splitNotLeft) || unref(getIsMobile)) return;
vben authored
40
41
      const { meta } = unref(currentRoute);
42
      const currentActiveMenu = meta.currentActiveMenu as string;
43
44
45
46
      let parentPath = await getCurrentParentPath(path);
      if (!parentPath) {
        parentPath = await getCurrentParentPath(currentActiveMenu);
      }
vben authored
47
48
49
50
51
52
53
54
55
      parentPath && throttleHandleSplitLeftMenu(parentPath);
    },
    {
      immediate: true,
    }
  );

  // Menu changes
  watch(
Vben authored
56
    [() => permissionStore.getLastBuildMenuTime, () => permissionStore.getBackMenuList],
vben authored
57
58
59
60
61
62
63
64
65
    () => {
      genMenus();
    },
    {
      immediate: true,
    }
  );

  // split Menu changes
66
67
68
69
70
71
72
  watch(
    () => getSplit.value,
    () => {
      if (unref(splitNotLeft)) return;
      genMenus();
    }
  );
vben authored
73
74
75

  // Handle left menu split
  async function handleSplitLeftMenu(parentPath: string) {
76
    if (unref(getSplitLeft) || unref(getIsMobile)) return;
vben authored
77
78
79

    // spilt mode left
    const children = await getChildrenMenus(parentPath);
80
81

    if (!children || !children.length) {
82
      setMenuSetting({ hidden: true });
vben authored
83
84
85
86
      menusRef.value = [];
      return;
    }
87
    setMenuSetting({ hidden: false });
vben authored
88
89
90
91
92
93
    menusRef.value = children;
  }

  // get menus
  async function genMenus() {
    // normal mode
94
    if (unref(normalType) || unref(getIsMobile)) {
vben authored
95
96
97
98
99
      menusRef.value = await getMenus();
      return;
    }

    // split-top
vben authored
100
    if (unref(getSpiltTop)) {
vben authored
101
102
103
104
105
106
      const shallowMenus = await getShallowMenus();

      menusRef.value = shallowMenus;
      return;
    }
  }
vben authored
107
vben authored
108
  return { menusRef };
vben authored
109
}