|
@@ -4,11 +4,11 @@
|
|
<el-breadcrumb class="layout-navbars-breadcrumb-hide">
|
|
<el-breadcrumb class="layout-navbars-breadcrumb-hide">
|
|
<transition-group name="breadcrumb" mode="out-in">
|
|
<transition-group name="breadcrumb" mode="out-in">
|
|
<el-breadcrumb-item v-for="(v) in breadcrumbList" :key="v.meta?.title">
|
|
<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>
|
|
</span>
|
|
<a v-else @click.prevent="onBreadcrumbClick(v)">
|
|
<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>
|
|
</a>
|
|
</el-breadcrumb-item>
|
|
</el-breadcrumb-item>
|
|
</transition-group>
|
|
</transition-group>
|
|
@@ -17,7 +17,7 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
<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 { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
|
|
import { useStore } from '/@/store/index';
|
|
import { useStore } from '/@/store/index';
|
|
import { Local } from '/@/utils/storage';
|
|
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) => {
|
|
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(() => {
|
|
onMounted(() => {
|
|
@@ -115,35 +147,41 @@ export default defineComponent({
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
.layout-navbars-breadcrumb {
|
|
.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>
|
|
</style>
|