wip: refactor layout

vben

2020-11-23 ba068ba1df797627e88dcf61af3ea13d0c2929ab

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
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';
import { useThrottle } from '/@/hooks/core/useThrottle';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
 
import {
  getChildrenMenus,
  getCurrentParentPath,
  getFlatChildrenMenus,
  getFlatMenus,
  getMenus,
  getShallowMenus,
} from '/@/router/menus';
import { permissionStore } from '/@/store/modules/permission';
 
export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
  // Menu array
  const menusRef = ref<Menu[]>([]);
  // flat menu array
  const flatMenusRef = ref<Menu[]>([]);
 
  const { currentRoute } = useRouter();
 
  const { setMenuSetting, getIsHorizontal, getSplit } = useMenuSetting();
 
  const [throttleHandleSplitLeftMenu] = useThrottle(handleSplitLeftMenu, 50);
 
  const splitNotLeft = computed(
    () => unref(splitType) !== MenuSplitTyeEnum.LEFT && !unref(getIsHorizontal)
  );
 
  const splitLeft = computed(() => !unref(getSplit) || unref(splitType) !== MenuSplitTyeEnum.LEFT);
 
  const spiltTop = computed(() => unref(splitType) === MenuSplitTyeEnum.TOP);
 
  const normalType = computed(() => {
    return unref(splitType) === MenuSplitTyeEnum.NONE || !unref(getSplit);
  });
 
  watch(
    [() => unref(currentRoute).path, () => unref(splitType)],
    async ([path]: [string, MenuSplitTyeEnum]) => {
      if (unref(splitNotLeft)) return;
 
      const parentPath = await getCurrentParentPath(path);
      parentPath && throttleHandleSplitLeftMenu(parentPath);
    },
    {
      immediate: true,
    }
  );
 
  // Menu changes
  watch(
    [() => permissionStore.getLastBuildMenuTimeState, () => permissionStore.getBackMenuListState],
    () => {
      genMenus();
    },
    {
      immediate: true,
    }
  );
 
  // split Menu changes
  watch([() => getSplit.value], () => {
    if (unref(splitNotLeft)) return;
    genMenus();
  });
 
  // Handle left menu split
  async function handleSplitLeftMenu(parentPath: string) {
    if (unref(splitLeft)) return;
 
    // spilt mode left
    const children = await getChildrenMenus(parentPath);
    if (!children) {
      setMenuSetting({ hidden: false });
      flatMenusRef.value = [];
      menusRef.value = [];
      return;
    }
 
    const flatChildren = await getFlatChildrenMenus(children);
    setMenuSetting({ hidden: true });
    flatMenusRef.value = flatChildren;
    menusRef.value = children;
  }
 
  // get menus
  async function genMenus() {
    // normal mode
    if (unref(normalType)) {
      flatMenusRef.value = await getFlatMenus();
      menusRef.value = await getMenus();
      return;
    }
 
    // split-top
    if (unref(spiltTop)) {
      const shallowMenus = await getShallowMenus();
 
      flatMenusRef.value = shallowMenus;
      menusRef.value = shallowMenus;
      return;
    }
  }
  return { flatMenusRef, menusRef };
}