fix: pageLoading not working

vben

2020-11-12 3f78b5aa0cd3e7a6f17d58512ca93ee2905d5e2f

fix: pageLoading not working

 src/design/var/index.less

@@ -15,7 +15,5 @@
@side-drag-z-index: 200;
@page-loading-z-index: 10000;

// app menu

// left-menu
@app-menu-item-height: 42px;
@app-menu-item-height: 46px;

 src/layouts/default/LayoutContent.tsx

@@ -16,7 +16,6 @@
    return () => {
      const { contentMode, openPageLoading } = unref(getProjectConfigRef);
      const { getPageLoading } = appStore;

      const wrapClass = contentMode === ContentEnum.FULL ? 'full' : 'fixed';
      return (
        <div class={[`default-layout__main`]}>

 src/layouts/page/index.tsx

@@ -12,9 +12,16 @@
export default defineComponent({
  name: 'PageLayout',
  setup() {
    const getProjectConfigRef = computed(() => {
      return appStore.getProjectConfig;
    const getProjectConfigRef = computed(() => appStore.getProjectConfig);
    const openCacheRef = computed(() => {
      const {
        openKeepAlive,
        multiTabsSetting: { show },
      } = unref(getProjectConfigRef);
      return openKeepAlive && show;
    });
    const getCacheTabsRef = computed(() => toRaw(tabStore.getKeepAliveTabsState) as string[]);

    const { openPageLoading } = unref(getProjectConfigRef);

    let on = {};
@@ -27,21 +34,20 @@
      const {
        routerTransition,
        openRouterTransition,
        openKeepAlive,
        multiTabsSetting: { show, max },
        multiTabsSetting: { max },
      } = unref(getProjectConfigRef);

      const openCache = openKeepAlive && show;
      const cacheTabs = toRaw(tabStore.getKeepAliveTabsState) as string[];
      return (
        <div>
          <RouterView>
            {{
              default: ({ Component, route }: { Component: any; route: RouteLocation }) => {
                // No longer show animations that are already in the tab
                const name = route.meta.inTab ? 'fade' : null;
                const cacheTabs = unref(getCacheTabsRef);
                const isInCache = cacheTabs.includes(route.name as string);
                const name = isInCache && route.meta.inTab ? 'fade' : null;

                const Content = openCache ? (
                const Content = unref(openCacheRef) ? (
                  <KeepAlive max={max} include={cacheTabs}>
                    <Component key={route.fullPath} />
                  </KeepAlive>

 src/layouts/page/useTransition.ts

@@ -3,6 +3,7 @@
export function useTransition() {
  function handleAfterEnter() {
    const { openRouterTransition, openPageLoading } = appStore.getProjectConfig;

    if (!openRouterTransition || !openPageLoading) return;
    // Close loading after the route switching animation ends
    appStore.setPageLoadingAction(false);

 src/router/guard/index.ts

@@ -21,6 +21,8 @@
  if (removeAllHttpPending) {
    axiosCanceler = new AxiosCanceler();
  }

  createPageLoadingGuard(router);
  router.beforeEach(async (to) => {
    // Determine whether the tab has been opened
    const isOpen = getIsOpenTab(to.fullPath);
@@ -59,5 +61,4 @@

  openNProgress && createProgressGuard(router);
  createPermissionGuard(router);
  createPageLoadingGuard(router);
}

 src/router/guard/pageLoadingGuard.ts

@@ -20,6 +20,7 @@
      appStore.commitPageLoadingState(true);
      return true;
    }

    if (show && openKeepAlive && !isFirstLoad) {
      const tabList = tabStore.getTabsState;