fix(menu): top submenu disappeared problem #214

vben

2021-01-25 0ec1a62e596c363f3f017d6ac3b374a1b5caa7c5

 src/layouts/default/menu/useLayoutMenu.ts

@@ -8,27 +8,15 @@
import { useThrottle } from '/@/hooks/core/useThrottle';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';

import {
  getChildrenMenus,
  getCurrentParentPath,
  getFlatChildrenMenus,
  getFlatMenus,
  getMenus,
  getShallowMenus,
} from '/@/router/menus';
import { getChildrenMenus, getCurrentParentPath, getMenus, getShallowMenus } from '/@/router/menus';
import { permissionStore } from '/@/store/modules/permission';
import { useI18n } from '/@/hooks/web/useI18n';
import { cloneDeep } from 'lodash-es';
import { useAppInject } from '/@/hooks/web/useAppInject';

const { t } = useI18n();
export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
  // Menu array
  const menusRef = ref<Menu[]>([]);
  // flat menu array
  const flatMenusRef = ref<Menu[]>([]);

  const { currentRoute } = useRouter();

  const { getIsMobile } = useAppInject();
  const { setMenuSetting, getIsHorizontal, getSplit } = useMenuSetting();

  const [throttleHandleSplitLeftMenu] = useThrottle(handleSplitLeftMenu, 50);
@@ -37,28 +25,27 @@
    () => unref(splitType) !== MenuSplitTyeEnum.LEFT && !unref(getIsHorizontal)
  );

  const splitLeft = computed(() => !unref(getSplit) || unref(splitType) !== MenuSplitTyeEnum.LEFT);
  const getSplitLeft = computed(
    () => !unref(getSplit) || unref(splitType) !== MenuSplitTyeEnum.LEFT
  );

  const spiltTop = computed(() => unref(splitType) === MenuSplitTyeEnum.TOP);
  const getSpiltTop = computed(() => unref(splitType) === MenuSplitTyeEnum.TOP);

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

  const getI18nFlatMenus = computed(() => {
    return setI18nName(flatMenusRef.value, true, false);
  });

  const getI18nMenus = computed(() => {
    return setI18nName(menusRef.value, true, true);
  });

  watch(
    [() => unref(currentRoute).path, () => unref(splitType)],
    async ([path]: [string, MenuSplitTyeEnum]) => {
      if (unref(splitNotLeft)) return;
      if (unref(splitNotLeft) || unref(getIsMobile)) return;

      const parentPath = await getCurrentParentPath(path);
      const { meta } = unref(currentRoute);
      const currentActiveMenu = meta.currentActiveMenu;
      let parentPath = await getCurrentParentPath(path);
      if (!parentPath) {
        parentPath = await getCurrentParentPath(currentActiveMenu);
      }
      parentPath && throttleHandleSplitLeftMenu(parentPath);
    },
    {
@@ -83,55 +70,39 @@
    genMenus();
  });

  function setI18nName(list: Menu[], clone = false, deep = true) {
    const menus = clone ? cloneDeep(list) : list;
    menus.forEach((item) => {
      if (!item.name.includes('.')) return;
      item.name = t(item.name);
      if (item.children && deep) {
        setI18nName(item.children, false, deep);
      }
    });
    return menus;
  }

  // Handle left menu split
  async function handleSplitLeftMenu(parentPath: string) {
    if (unref(splitLeft)) return;
    if (unref(getSplitLeft) || unref(getIsMobile)) return;

    // spilt mode left
    const children = await getChildrenMenus(parentPath);
    if (!children) {
      setMenuSetting({ hidden: false });
      flatMenusRef.value = [];

    if (!children || !children.length) {
      setMenuSetting({ hidden: true });
      menusRef.value = [];
      return;
    }

    const flatChildren = await getFlatChildrenMenus(children);
    setMenuSetting({ hidden: true });
    flatMenusRef.value = flatChildren;
    setMenuSetting({ hidden: false });
    menusRef.value = children;
  }

  // get menus
  async function genMenus() {
    // normal mode
    if (unref(normalType)) {
      flatMenusRef.value = await getFlatMenus();
    if (unref(normalType) || unref(getIsMobile)) {
      menusRef.value = await getMenus();
      return;
    }

    // split-top
    if (unref(spiltTop)) {
    if (unref(getSpiltTop)) {
      const shallowMenus = await getShallowMenus();

      flatMenusRef.value = shallowMenus;
      menusRef.value = shallowMenus;
      return;
    }
  }

  return { flatMenusRef: getI18nFlatMenus, menusRef: getI18nMenus };
  return { menusRef };
}