|
@@ -13,7 +13,7 @@
|
|
|
:class="{ 'menu-item-act': curMainIndex === index }"
|
|
|
>
|
|
|
<div class="menu-item">
|
|
|
- <i :class="['icon', `icon-${nav.type}`]"></i>
|
|
|
+ <i :class="['icon', `icon-${nav.router}`]"></i>
|
|
|
<span>{{ nav.title }}</span>
|
|
|
</div>
|
|
|
</li>
|
|
@@ -37,9 +37,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="home-navs">
|
|
|
+ <div class="home-navs" v-if="curNav">
|
|
|
<div class="nav-head">
|
|
|
- <i :class="['icon', `icon-${curNav.type}-gray`]"></i>
|
|
|
+ <i :class="['icon', `icon-${curNav.router}-gray`]"></i>
|
|
|
<span>{{ curNav.title }}</span>
|
|
|
</div>
|
|
|
<ul class="nav-list">
|
|
@@ -71,9 +71,9 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
- <div class="home-body" :class="{ 'home-body-big': isCollapsed }">
|
|
|
+ <div class="home-body">
|
|
|
<div class="home-main">
|
|
|
- <div class="home-breadcrumb">
|
|
|
+ <div class="home-breadcrumb" v-if="breadcrumbs.length">
|
|
|
<el-breadcrumb separator=">">
|
|
|
<el-breadcrumb-item :to="{ name: 'Home' }">
|
|
|
<i class="icon icon-home" style="margin-top: -2px;"></i>
|
|
@@ -96,15 +96,17 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import navs from "@/constants/navs";
|
|
|
-import { logout } from "../modules/login/api";
|
|
|
+import localNavs from "@/constants/navs";
|
|
|
+import { deepCopy } from "@/plugins/utils";
|
|
|
+import { MENU_ROUTER_DICT } from "@/constants/enumerate";
|
|
|
+import { logout, sysMenu } from "../modules/login/api";
|
|
|
|
|
|
export default {
|
|
|
name: "home",
|
|
|
data() {
|
|
|
return {
|
|
|
- isCollapsed: false,
|
|
|
- navs,
|
|
|
+ navs: [],
|
|
|
+ validRoutes: [],
|
|
|
curMainIndex: 0,
|
|
|
curSubIndex: 0,
|
|
|
breadcrumbs: []
|
|
@@ -120,12 +122,71 @@ export default {
|
|
|
return this.navs[this.curMainIndex];
|
|
|
}
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.actCurNav();
|
|
|
+ created() {
|
|
|
+ this.getMenus();
|
|
|
},
|
|
|
methods: {
|
|
|
+ async getMenus() {
|
|
|
+ const data = await sysMenu();
|
|
|
+ this.navs = this.menusToTree(data.records);
|
|
|
+ console.log(this.$route.name);
|
|
|
+
|
|
|
+ if (this.$route.name === "Home") {
|
|
|
+ this.$router.replace({
|
|
|
+ name: this.navs[0].children[0].router
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ if (!this.validRoutes.includes(this.$route.name)) {
|
|
|
+ this.$router.replace({
|
|
|
+ name: "404"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.actCurNav();
|
|
|
+ },
|
|
|
+ menusToTree(menus) {
|
|
|
+ let navTree = deepCopy(localNavs);
|
|
|
+ let validRoutes = [];
|
|
|
+ const anchorNav = (menu, navs) => {
|
|
|
+ const name = MENU_ROUTER_DICT[menu.url];
|
|
|
+ navs.forEach(item => {
|
|
|
+ if (item.router === name) {
|
|
|
+ item.fixed = true;
|
|
|
+ validRoutes.push(item.router);
|
|
|
+
|
|
|
+ if (menu.parentId !== null && item["children"]) {
|
|
|
+ item.children.map(el => {
|
|
|
+ el.fixed = true;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ if (item["children"]) anchorNav(menu, item.children);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ const clearNoFixed = navs => {
|
|
|
+ let list = [];
|
|
|
+ navs.forEach(nav => {
|
|
|
+ if (nav["fixed"]) {
|
|
|
+ let navItem = { title: nav.title, router: nav.router };
|
|
|
+ if (nav["children"])
|
|
|
+ navItem.children = clearNoFixed(nav["children"]);
|
|
|
+ list.push(navItem);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return list;
|
|
|
+ };
|
|
|
+
|
|
|
+ menus.forEach(menu => {
|
|
|
+ anchorNav(menu, navTree);
|
|
|
+ });
|
|
|
+ this.validRoutes = validRoutes;
|
|
|
+ return clearNoFixed(navTree);
|
|
|
+ },
|
|
|
switchNav(subNo) {
|
|
|
const curSubItem = this.curNav.children[subNo];
|
|
|
+ if (curSubItem.router === this.$route.name) return;
|
|
|
this.$router.push({ name: curSubItem.router });
|
|
|
},
|
|
|
actCurNav() {
|
|
@@ -167,6 +228,7 @@ export default {
|
|
|
},
|
|
|
toPage(mainIndex, subIndex) {
|
|
|
const elem = this.navs[mainIndex].children[subIndex];
|
|
|
+ if (elem.router === this.$route.name) return;
|
|
|
this.$router.push({
|
|
|
name: elem.router
|
|
|
});
|