Преглед изворни кода

feat: 优化面包屑导航的名称获取,从之前的路由斜杠匹配改为parent 层级匹配,避免路由命名不规则的情况下取不到面包屑的错误

yanglzh пре 10 месеци
родитељ
комит
72c8b41b0c
1 измењених фајлова са 81 додато и 43 уклоњено
  1. 81 43
      src/layout/navBars/breadcrumb/breadcrumb.vue

+ 81 - 43
src/layout/navBars/breadcrumb/breadcrumb.vue

@@ -4,11 +4,11 @@
     <el-breadcrumb class="layout-navbars-breadcrumb-hide">
       <transition-group name="breadcrumb" mode="out-in">
         <el-breadcrumb-item v-for="(v) in breadcrumbList" :key="v.meta?.title">
-          <span v-if="(v.menuType=== 0)" class="layout-navbars-breadcrumb-span">
-            <SvgIcon :name="v.meta?.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon" />{{ v.meta?.title.indexOf('.')>0?$t(v.meta?.title):v.meta?.title }}
+          <span v-if="(v.menuType === 0)" class="layout-navbars-breadcrumb-span">
+            <SvgIcon :name="v.meta?.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon" />{{ v.meta?.title.indexOf('.') > 0 ? $t(v.meta?.title) : v.meta?.title }}
           </span>
           <a v-else @click.prevent="onBreadcrumbClick(v)">
-            <SvgIcon :name="v.meta?.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon" />{{ v.meta?.title.indexOf('.')>0?$t(v.meta?.title):v.meta?.title }}
+            <SvgIcon :name="v.meta?.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon" />{{ v.meta?.title.indexOf('.') > 0 ? $t(v.meta?.title) : v.meta?.title }}
           </a>
         </el-breadcrumb-item>
       </transition-group>
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, computed, onMounted, defineComponent } from 'vue';
+import { toRefs, reactive, computed, onMounted, defineComponent, toRaw } from 'vue';
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
 import { useStore } from '/@/store/index';
 import { Local } from '/@/utils/storage';
@@ -82,17 +82,49 @@ export default defineComponent({
         });
       });
     };
+
+    function filterRoutesFun(tree: any[], arr: number[]) {
+      for (let item of tree) {
+        arr.push(item);
+        if (item.children?.length) filterRoutesFun(item.children, arr);
+      }
+      return arr;
+    }
     // 当前路由字符串切割成数组,并删除第一项空内容
     const initRouteSplit = (path: string) => {
-      if (!store.state.themeConfig.themeConfig.isBreadcrumb) return false;
-      state.breadcrumbList = [];
-      // state.breadcrumbList = [store.state.routesList.routesList[0]];
-      state.routeSplit = path.split('/');
-      state.routeSplit.shift();
-      state.routeSplitFirst = `/${state.routeSplit[0]}`;
-      state.routeSplitIndex = 1;
-      getBreadcrumbList(store.state.routesList.routesList);
-      // console.log(state.breadcrumbList)
+      const cpath = route.meta.isDynamicPath || route.path
+
+      const menuList = store.state.routesList.routesList
+      // 将 menuList 的多级别树形结构展开成一维数组
+
+      let menuListAll: any[] = []
+      filterRoutesFun(menuList, menuListAll)
+
+
+      let curRoute = menuListAll.find((item: any) => item.path === cpath);
+
+      // 根据 curRoute 的 parentId 找到他的上级菜单,
+      const menuList2 = []
+      while (curRoute) {
+        menuList2.push(curRoute);
+        if (curRoute.parentId) {
+          curRoute = menuListAll.find((item: any) => item.id === curRoute.parentId);
+        } else {
+          curRoute = null
+        }
+      }
+      menuList2.reverse()
+
+      state.breadcrumbList = menuList2
+
+      // if (!store.state.themeConfig.themeConfig.isBreadcrumb) return false;
+      // state.breadcrumbList = [];
+      // // state.breadcrumbList = [store.state.routesList.routesList[0]];
+      // state.routeSplit = path.split('/');
+      // state.routeSplit.shift();
+      // state.routeSplitFirst = `/${state.routeSplit[0]}`;
+      // state.routeSplitIndex = 1;
+      // getBreadcrumbList(store.state.routesList.routesList);
     };
     // 页面加载时
     onMounted(() => {
@@ -115,35 +147,41 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .layout-navbars-breadcrumb {
-	flex: 1;
-	height: inherit;
-	display: flex;
-	align-items: center;
-	padding-left: 15px;
-	.layout-navbars-breadcrumb-icon {
-		cursor: pointer;
-		font-size: 18px;
-		margin-right: 15px;
-		color: var(--next-bg-topBarColor);
-	}
-	.layout-navbars-breadcrumb-span {
-		opacity: 0.7;
-		color: var(--next-bg-topBarColor);
-	}
-	.layout-navbars-breadcrumb-iconfont {
-		font-size: 14px;
-		margin-right: 5px;
-	}
-	:deep(.el-breadcrumb__separator) {
-		opacity: 0.7;
-		color: var(--next-bg-topBarColor);
-	}
-	:deep(.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link) {
-		font-weight: unset !important;
-		color: var(--next-bg-topBarColor);
-		&:hover {
-			color: var(--el-color-primary) !important;
-		}
-	}
+  flex: 1;
+  height: inherit;
+  display: flex;
+  align-items: center;
+  padding-left: 15px;
+
+  .layout-navbars-breadcrumb-icon {
+    cursor: pointer;
+    font-size: 18px;
+    margin-right: 15px;
+    color: var(--next-bg-topBarColor);
+  }
+
+  .layout-navbars-breadcrumb-span {
+    opacity: 0.7;
+    color: var(--next-bg-topBarColor);
+  }
+
+  .layout-navbars-breadcrumb-iconfont {
+    font-size: 14px;
+    margin-right: 5px;
+  }
+
+  :deep(.el-breadcrumb__separator) {
+    opacity: 0.7;
+    color: var(--next-bg-topBarColor);
+  }
+
+  :deep(.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link) {
+    font-weight: unset !important;
+    color: var(--next-bg-topBarColor);
+
+    &:hover {
+      color: var(--el-color-primary) !important;
+    }
+  }
 }
 </style>