|
|
@@ -12,7 +12,7 @@
|
|
|
<el-breadcrumb-item
|
|
|
v-for="(bread, index) in breadcrumbs"
|
|
|
:key="index"
|
|
|
- >{{ bread.title }}</el-breadcrumb-item
|
|
|
+ >{{ bread.name }}</el-breadcrumb-item
|
|
|
>
|
|
|
</el-breadcrumb>
|
|
|
</div>
|
|
|
@@ -24,32 +24,41 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="home-navs">
|
|
|
- <ul>
|
|
|
- <li class="nav-item" v-for="(nav, index) in navs" :key="index">
|
|
|
- <div class="nav-item-main" @click="switchNav(nav, index)">
|
|
|
- <span class="nav-item-icon nav-item-icon-left">
|
|
|
- <i :class="['icon', `${nav.icon}`]"></i>
|
|
|
- </span>
|
|
|
- <p class="nav-item-cont">{{ nav.title }}</p>
|
|
|
- </div>
|
|
|
- <ul
|
|
|
- class="nav-item-sublist"
|
|
|
- v-if="nav.children && nav.children.length"
|
|
|
+ <el-menu
|
|
|
+ v-if="menus && menus.length"
|
|
|
+ class="el-menu-home"
|
|
|
+ active-text-color="#3a5ae5"
|
|
|
+ text-color="#434656"
|
|
|
+ router
|
|
|
+ :default-active="curRouteName"
|
|
|
+ :collapse="false"
|
|
|
+ >
|
|
|
+ <template v-for="submenu in menus">
|
|
|
+ <el-submenu
|
|
|
+ v-if="submenu.children && submenu.children.length"
|
|
|
+ :key="submenu.id"
|
|
|
+ :index="submenu.url"
|
|
|
>
|
|
|
- <li
|
|
|
- v-for="(subnav, sindex) in nav.children"
|
|
|
- :key="sindex"
|
|
|
- :class="[
|
|
|
- 'nav-item-sub',
|
|
|
- { 'nav-item-sub-act': curSub === index + '-' + sindex }
|
|
|
- ]"
|
|
|
- @click="toPage(index, sindex)"
|
|
|
+ <span slot="title">{{ submenu.name }}</span>
|
|
|
+ <el-menu-item
|
|
|
+ v-for="nav in submenu.children"
|
|
|
+ :key="nav.id"
|
|
|
+ :index="nav.url"
|
|
|
+ :route="{ name: nav.url }"
|
|
|
>
|
|
|
- {{ subnav.title }}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <span>{{ nav.name }}</span>
|
|
|
+ </el-menu-item>
|
|
|
+ </el-submenu>
|
|
|
+ <el-menu-item
|
|
|
+ v-else
|
|
|
+ :key="submenu.id"
|
|
|
+ :index="submenu.url"
|
|
|
+ :route="{ name: submenu.url }"
|
|
|
+ >
|
|
|
+ <span>{{ submenu.name }}</span>
|
|
|
+ </el-menu-item>
|
|
|
+ </template>
|
|
|
+ </el-menu>
|
|
|
</div>
|
|
|
|
|
|
<div class="home-body">
|
|
|
@@ -63,74 +72,120 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import navs from "@/constants/navs";
|
|
|
+import { navs, ROLE_NAV } from "@/constants/navs";
|
|
|
import { APP_TITLE } from "../constants/app";
|
|
|
|
|
|
export default {
|
|
|
name: "home",
|
|
|
data() {
|
|
|
+ const user = this.$ls.get("user", { id: "", name: "", role: [] });
|
|
|
+
|
|
|
return {
|
|
|
- isCollapsed: false,
|
|
|
APP_TITLE,
|
|
|
navs,
|
|
|
+ privileges: [],
|
|
|
+ menus: [],
|
|
|
+ curRouteName: "",
|
|
|
+ validRoutes: [],
|
|
|
+ username: user.name,
|
|
|
+ userRoles: user.role,
|
|
|
curMain: 0,
|
|
|
curSub: "",
|
|
|
- avatar: "",
|
|
|
breadcrumbs: []
|
|
|
};
|
|
|
},
|
|
|
- computed: {
|
|
|
- rotateIcon() {
|
|
|
- return [
|
|
|
- "menu-icon",
|
|
|
- this.isCollapsed ? "el-icon-s-unfold" : "el-icon-s-fold"
|
|
|
- ];
|
|
|
- }
|
|
|
- },
|
|
|
watch: {
|
|
|
$route(val) {
|
|
|
- this.actCurNav();
|
|
|
+ if (val.name === "Home") return;
|
|
|
+
|
|
|
+ this.updateBreadcrumbs();
|
|
|
}
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.actCurNav();
|
|
|
+ created() {
|
|
|
+ this.initData();
|
|
|
},
|
|
|
methods: {
|
|
|
- collapsedSider() {
|
|
|
- this.isCollapsed = !this.isCollapsed;
|
|
|
+ initData() {
|
|
|
+ this.privileges = this.getPrivileges(navs);
|
|
|
+ this.menus = this.getMenu();
|
|
|
+
|
|
|
+ if (this.$route.name === "Home") {
|
|
|
+ console.log(this.getMenuFirstRouter());
|
|
|
+ this.$router.replace({ name: this.getMenuFirstRouter() });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.validRoutes.includes(this.$route.name)) {
|
|
|
+ this.$router.replace({
|
|
|
+ name: "404"
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.updateBreadcrumbs();
|
|
|
},
|
|
|
- switchNav(item, mainIndex) {
|
|
|
- if (item.children) {
|
|
|
- item.showList = !item.showList;
|
|
|
- } else {
|
|
|
- this.breadcrumbs = [{ title: item.title, router: item.router }];
|
|
|
- this.curMain = mainIndex;
|
|
|
- this.curSub = "";
|
|
|
- this.$router.push({ name: item.router });
|
|
|
+ getPrivileges(navList) {
|
|
|
+ let privilegesUrls = [];
|
|
|
+ this.userRoles.forEach(role => {
|
|
|
+ const urls = ROLE_NAV[role] || [];
|
|
|
+ privilegesUrls.push(...urls);
|
|
|
+ });
|
|
|
+ return navList.filter(item => privilegesUrls.includes(item.url));
|
|
|
+ },
|
|
|
+ getMenuFirstRouter() {
|
|
|
+ let firstRouteName = "";
|
|
|
+ let menu = this.menus[0];
|
|
|
+ while (menu) {
|
|
|
+ firstRouteName = menu.url;
|
|
|
+ menu = menu.children && menu.children[0];
|
|
|
}
|
|
|
+
|
|
|
+ return firstRouteName;
|
|
|
},
|
|
|
- actCurNav() {
|
|
|
- let router = this.$route.name;
|
|
|
- this.navs.forEach((item, index) => {
|
|
|
- if (item.children && item.children.length) {
|
|
|
- item.children.forEach((elem, pindex) => {
|
|
|
- if (elem.router === router) {
|
|
|
- this.curSub = index + "-" + pindex;
|
|
|
- this.curMain = index;
|
|
|
- this.breadcrumbs = [
|
|
|
- { title: item.title, router: item.router },
|
|
|
- { title: elem.title, router: elem.router }
|
|
|
- ];
|
|
|
- }
|
|
|
+ getMenu() {
|
|
|
+ const getChildren = id => {
|
|
|
+ return this.privileges
|
|
|
+ .filter(item => item.parentId === id)
|
|
|
+ .map(item => {
|
|
|
+ return { ...item };
|
|
|
});
|
|
|
- } else {
|
|
|
- if (item.router === router) {
|
|
|
- this.curMain = index;
|
|
|
- this.breadcrumbs = [{ title: item.title, router: item.router }];
|
|
|
+ };
|
|
|
+
|
|
|
+ let menus = getChildren("-1");
|
|
|
+ let validRoutes = [];
|
|
|
+ const toTree = menus => {
|
|
|
+ menus.forEach(menu => {
|
|
|
+ const children = getChildren(menu.id);
|
|
|
+ if (children.length) {
|
|
|
+ menu.children = children;
|
|
|
+ toTree(menu.children);
|
|
|
+ } else {
|
|
|
+ validRoutes.push(menu.url);
|
|
|
}
|
|
|
- }
|
|
|
- });
|
|
|
- this.navs[this.curMain].showList = true;
|
|
|
+ });
|
|
|
+ };
|
|
|
+ toTree(menus);
|
|
|
+
|
|
|
+ this.validRoutes = validRoutes;
|
|
|
+ // console.log(JSON.stringify(menus));
|
|
|
+ return menus;
|
|
|
+ },
|
|
|
+ updateBreadcrumbs() {
|
|
|
+ this.curRouteName = this.$route.name;
|
|
|
+ let breadcrumbs = [];
|
|
|
+ let curBreadcrumb = this.privileges.find(
|
|
|
+ item => item.url === this.curRouteName
|
|
|
+ );
|
|
|
+ breadcrumbs.push({ ...curBreadcrumb });
|
|
|
+
|
|
|
+ while (curBreadcrumb && curBreadcrumb.parentId !== "-1") {
|
|
|
+ curBreadcrumb = this.privileges.find(
|
|
|
+ item => item.id === curBreadcrumb.parentId
|
|
|
+ );
|
|
|
+ if (curBreadcrumb) breadcrumbs.unshift({ ...curBreadcrumb });
|
|
|
+ }
|
|
|
+
|
|
|
+ this.breadcrumbs = breadcrumbs;
|
|
|
},
|
|
|
toPage(mainIndex, subIndex) {
|
|
|
const item = this.navs[mainIndex];
|
zhangjie