|
@@ -7,31 +7,31 @@
|
|
|
<div class="head-menu menu-list">
|
|
|
<ul>
|
|
|
<li
|
|
|
- v-for="(nav, index) in navs"
|
|
|
+ v-for="(menu, index) in menus"
|
|
|
:key="index"
|
|
|
- @click="toPage(index, 0)"
|
|
|
- :class="{ 'menu-item-act': curMainIndex === index }"
|
|
|
+ :class="[
|
|
|
+ 'menu-item',
|
|
|
+ { 'menu-item-act': curMenu.name === menu.name }
|
|
|
+ ]"
|
|
|
+ @click="toMenu(menu)"
|
|
|
>
|
|
|
- <div class="menu-item">
|
|
|
- <i :class="['icon', `icon-${nav.router}`]"></i>
|
|
|
- <span>{{ nav.title }}</span>
|
|
|
- </div>
|
|
|
+ <i :class="['icon', `icon-${menu.name}`]"></i>
|
|
|
+ <span>{{ menu.title }}</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="head-user menu-list">
|
|
|
<ul>
|
|
|
- <li @click="$refs.ResetPwd.open()">
|
|
|
- <div class="menu-item menu-item-account">
|
|
|
- <i class="icon icon-account"></i>
|
|
|
- <span :title="username">{{ username }}</span>
|
|
|
- </div>
|
|
|
+ <li
|
|
|
+ class="menu-item menu-item-account"
|
|
|
+ @click="$refs.ResetPwd.open()"
|
|
|
+ >
|
|
|
+ <i class="icon icon-account"></i>
|
|
|
+ <span :title="username">{{ username }}</span>
|
|
|
</li>
|
|
|
- <li @click="toLogout">
|
|
|
- <div class="menu-item">
|
|
|
- <i class="icon icon-shut"></i>
|
|
|
- <span>退出登录</span>
|
|
|
- </div>
|
|
|
+ <li class="menu-item" @click="toLogout">
|
|
|
+ <i class="icon icon-shut"></i>
|
|
|
+ <span>退出登录</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
@@ -40,112 +40,35 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="home-navs" v-if="curNav">
|
|
|
- <div class="nav-head">
|
|
|
- <i :class="['icon', `icon-${curNav.router}-gray`]"></i>
|
|
|
- <span>{{ curNav.title }}</span>
|
|
|
- </div>
|
|
|
- <ul class="nav-list">
|
|
|
- <li
|
|
|
- class="nav-item"
|
|
|
- v-for="(nav, subNo) in curNav.children"
|
|
|
- :key="subNo"
|
|
|
- >
|
|
|
- <div
|
|
|
- :class="[
|
|
|
- 'nav-item-main',
|
|
|
- { 'nav-item-main-act': curSubIndex === subNo }
|
|
|
- ]"
|
|
|
- @click="switchNav(subNo)"
|
|
|
- >
|
|
|
- <p class="nav-item-cont">{{ nav.title }}</p>
|
|
|
- <span class="nav-item-icon nav-item-icon-right">
|
|
|
- <i
|
|
|
- :class="[
|
|
|
- 'icon',
|
|
|
- curSubIndex === subNo
|
|
|
- ? 'icon-arrow-right-act'
|
|
|
- : 'icon-arrow-right'
|
|
|
- ]"
|
|
|
- ></i>
|
|
|
- </span>
|
|
|
- <span
|
|
|
- class="nav-item-info"
|
|
|
- v-if="nav.router === 'WaitTask' && waitTaskCount"
|
|
|
- >{{ waitTaskCount }}</span
|
|
|
- >
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="home-body">
|
|
|
- <div class="home-main">
|
|
|
- <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>
|
|
|
- </el-breadcrumb-item>
|
|
|
- <el-breadcrumb-item
|
|
|
- v-for="(bread, index) in breadcrumbs"
|
|
|
- :key="index"
|
|
|
- >{{ bread.title }}</el-breadcrumb-item
|
|
|
- >
|
|
|
- </el-breadcrumb>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- home-view: page detail -->
|
|
|
- <div class="home-view">
|
|
|
- <!-- <router-view /> -->
|
|
|
- <keep-alive :include="keepAliveRoutes">
|
|
|
- <router-view />
|
|
|
- </keep-alive>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- popover menu-->
|
|
|
- <el-dialog
|
|
|
- class="menu-dialog"
|
|
|
- :visible.sync="menuDailogIsShow"
|
|
|
- title="导航菜单"
|
|
|
- top="60px"
|
|
|
- fullscreen
|
|
|
- :close-on-click-modal="false"
|
|
|
- :close-on-press-escape="false"
|
|
|
- append-to-body
|
|
|
- >
|
|
|
+ <div class="home-navs" v-if="curMenu.children">
|
|
|
<div
|
|
|
- class="home-navs home-navs-full"
|
|
|
- v-for="(mainNav, mainNo) in navs"
|
|
|
- :key="mainNo"
|
|
|
+ v-for="(submenu, sindex) in curMenu.children"
|
|
|
+ :key="sindex"
|
|
|
+ class="nav-part"
|
|
|
>
|
|
|
<div class="nav-head">
|
|
|
- <i :class="['icon', `icon-${mainNav.router}-gray`]"></i>
|
|
|
- <span>{{ mainNav.title }}</span>
|
|
|
+ <i :class="submenu.icon"></i>
|
|
|
+ <span>{{ submenu.title }}</span>
|
|
|
</div>
|
|
|
<ul class="nav-list">
|
|
|
<li
|
|
|
class="nav-item"
|
|
|
- v-for="(nav, subNo) in mainNav.children"
|
|
|
- :key="subNo"
|
|
|
+ v-for="(nav, navNo) in submenu.children"
|
|
|
+ :key="navNo"
|
|
|
>
|
|
|
<div
|
|
|
:class="[
|
|
|
'nav-item-main',
|
|
|
- {
|
|
|
- 'nav-item-main-act':
|
|
|
- curMainIndex === mainNo && curSubIndex === subNo
|
|
|
- }
|
|
|
+ { 'nav-item-main-act': curActNav === nav.router }
|
|
|
]"
|
|
|
- @click="switchNavDetail(mainNo, subNo)"
|
|
|
+ @click="toNav(nav)"
|
|
|
>
|
|
|
<p class="nav-item-cont">{{ nav.title }}</p>
|
|
|
<span class="nav-item-icon nav-item-icon-right">
|
|
|
<i
|
|
|
:class="[
|
|
|
'icon',
|
|
|
- curMainIndex === mainNo && curSubIndex === subNo
|
|
|
+ curActNav === nav.router
|
|
|
? 'icon-arrow-right-act'
|
|
|
: 'icon-arrow-right'
|
|
|
]"
|
|
@@ -160,20 +83,45 @@
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
- <div class="menu-logout" @click="toLogout">
|
|
|
- <i class="el-icon-switch-button"></i>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="home-body">
|
|
|
+ <div class="home-main">
|
|
|
+ <div class="home-breadcrumb" v-if="breadcrumbs.length">
|
|
|
+ <el-breadcrumb separator=">">
|
|
|
+ <el-breadcrumb-item>
|
|
|
+ <i class="icon icon-home" style="margin-top: -2px;"></i>
|
|
|
+ </el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item
|
|
|
+ v-for="(bread, index) in breadcrumbs"
|
|
|
+ :key="index"
|
|
|
+ >{{ bread.title }}</el-breadcrumb-item
|
|
|
+ >
|
|
|
+ </el-breadcrumb>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- home-view: page detail -->
|
|
|
+ <div class="home-view">
|
|
|
+ <!-- <router-view /> -->
|
|
|
+ <keep-alive :include="keepAliveRoutes">
|
|
|
+ <router-view />
|
|
|
+ </keep-alive>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </el-dialog>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- popover menu-->
|
|
|
+ <!-- TODO: -->
|
|
|
+
|
|
|
<!-- 修改密码 -->
|
|
|
<reset-pwd @modified="logoutAction" ref="ResetPwd"></reset-pwd>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapState, mapActions } from "vuex";
|
|
|
+// import { mapState, mapActions } from "vuex";
|
|
|
import localNavs from "@/constants/navs";
|
|
|
import { deepCopy } from "@/plugins/utils";
|
|
|
-import { MENU_ROUTER_DICT } from "@/constants/enumerate";
|
|
|
import { logout, sysMenu } from "../modules/login/api";
|
|
|
import ResetPwd from "../modules/base/components/ResetPwd";
|
|
|
|
|
@@ -182,47 +130,49 @@ export default {
|
|
|
components: { ResetPwd },
|
|
|
data() {
|
|
|
return {
|
|
|
- navs: [],
|
|
|
- validRoutes: [],
|
|
|
- curMainIndex: 0,
|
|
|
- curSubIndex: 0,
|
|
|
+ menus: [],
|
|
|
+ curMenu: { name: "" },
|
|
|
+ curActNav: "",
|
|
|
breadcrumbs: [],
|
|
|
+ validRoutes: [],
|
|
|
username: this.$ls.get("user", { name: "" }).name,
|
|
|
IS_SUPER_ADMIN: this.$ls
|
|
|
.get("user", { roleCode: "" })
|
|
|
.roleCode.includes("SUPER_ADMIN"),
|
|
|
- menuDailogIsShow: false
|
|
|
+ menuDailogIsShow: false,
|
|
|
+ waitTaskCount: 0
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
$route(val) {
|
|
|
+ if (val.name === "Home") return;
|
|
|
this.actCurNav();
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapState("examCenter", ["waitTaskCount"]),
|
|
|
- curNav() {
|
|
|
- return this.navs[this.curMainIndex];
|
|
|
- },
|
|
|
+ // ...mapState("examCenter", ["waitTaskCount"]),
|
|
|
keepAliveRoutes() {
|
|
|
return this.$store.state.keepAliveRoutes;
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.getMenus();
|
|
|
- // this.navs = localNavs;
|
|
|
+ // this.menus = localNavs;
|
|
|
// this.actCurNav();
|
|
|
},
|
|
|
methods: {
|
|
|
- ...mapActions("examCenter", ["updateWaitTaskCount"]),
|
|
|
+ // ...mapActions("examCenter", ["updateWaitTaskCount"]),
|
|
|
async getMenus() {
|
|
|
const data = await sysMenu();
|
|
|
- this.navs = this.menusToTree(data.records);
|
|
|
+ const { menus, firstRouter } = this.menusToTree(data.records);
|
|
|
+ console.log(menus, firstRouter);
|
|
|
+ this.menus = menus;
|
|
|
|
|
|
if (this.$route.name === "Home") {
|
|
|
this.$router.replace({
|
|
|
- name: this.navs[0].children[0].router
|
|
|
+ name: firstRouter
|
|
|
});
|
|
|
+ return;
|
|
|
} else {
|
|
|
if (!this.validRoutes.includes(this.$route.name)) {
|
|
|
this.$router.replace({
|
|
@@ -230,116 +180,95 @@ export default {
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- this.actCurNav();
|
|
|
- if (
|
|
|
- this.validRoutes.includes("WaitTask") &&
|
|
|
- this.navs[this.curMainIndex].router === "exam-center"
|
|
|
- ) {
|
|
|
- this.updateWaitTaskCount();
|
|
|
+ this.actCurNav();
|
|
|
}
|
|
|
},
|
|
|
menusToTree(menus) {
|
|
|
- if (this.IS_SUPER_ADMIN) {
|
|
|
- const names = {
|
|
|
- todoExam: "待办任务(考务)",
|
|
|
- todoTaskManager: "待办任务(命题)",
|
|
|
- doneTaskManager: "已办任务(命题)"
|
|
|
- };
|
|
|
- menus.forEach(item => {
|
|
|
- item.name = names[item.url] || item.name;
|
|
|
- });
|
|
|
- }
|
|
|
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;
|
|
|
- item.title = menu.name;
|
|
|
- validRoutes.push(item.router);
|
|
|
+ let validMenuDict = {};
|
|
|
+ let firstRouter = "";
|
|
|
+ menus.forEach(item => (validMenuDict[item.url] = item.name));
|
|
|
|
|
|
- if (menu.parentId !== null && item["children"]) {
|
|
|
- item.children.map(el => {
|
|
|
- el.fixed = true;
|
|
|
- validRoutes.push(el.router);
|
|
|
- });
|
|
|
- }
|
|
|
- return;
|
|
|
- } else {
|
|
|
- if (item["children"]) anchorNav(menu, item.children);
|
|
|
- }
|
|
|
- });
|
|
|
- };
|
|
|
- const clearNoFixed = navs => {
|
|
|
+ const anchorNav = menus => {
|
|
|
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);
|
|
|
+ menus.forEach(item => {
|
|
|
+ const routerOrName = item["router"] || item["name"];
|
|
|
+ if (!validMenuDict[routerOrName]) return;
|
|
|
+
|
|
|
+ if (!firstRouter && item["router"]) firstRouter = item["router"];
|
|
|
+ item.title = validMenuDict[routerOrName];
|
|
|
+ validRoutes.push(routerOrName);
|
|
|
+ let navItem = { ...item };
|
|
|
+ if (item["children"]) {
|
|
|
+ navItem.children = anchorNav(item.children);
|
|
|
}
|
|
|
+ list.push(navItem);
|
|
|
});
|
|
|
return list;
|
|
|
};
|
|
|
|
|
|
- menus.forEach(menu => {
|
|
|
- anchorNav(menu, navTree);
|
|
|
- });
|
|
|
this.validRoutes = validRoutes;
|
|
|
- return clearNoFixed(navTree);
|
|
|
+
|
|
|
+ return { menus: anchorNav(navTree), firstRouter };
|
|
|
+ },
|
|
|
+ toMenu(menu) {
|
|
|
+ this.curMenu = menu;
|
|
|
+ const firstRouter = menu.children[0].children[0];
|
|
|
+ this.toNav(firstRouter);
|
|
|
},
|
|
|
- switchNav(subNo) {
|
|
|
- const curSubItem = this.curNav.children[subNo];
|
|
|
- if (curSubItem.router === this.$route.name) return;
|
|
|
- this.$router.push({ name: curSubItem.router });
|
|
|
+ toNav(nav) {
|
|
|
+ if (nav.router === this.$route.name) return;
|
|
|
+ this.curActNav = nav.router;
|
|
|
+ this.$router.push({ name: nav.router });
|
|
|
},
|
|
|
actCurNav() {
|
|
|
- const relate = this.$route.meta && this.$route.meta.relate;
|
|
|
- const routerName = relate ? relate.split("/")[0] : this.$route.name;
|
|
|
-
|
|
|
- this.navs.forEach((item, index) => {
|
|
|
- item.children.forEach((elem, pindex) => {
|
|
|
- if (elem.router === routerName) {
|
|
|
- this.curSubIndex = pindex;
|
|
|
- this.curMainIndex = index;
|
|
|
- this.breadcrumbs = [
|
|
|
- { title: item.title, router: item.router },
|
|
|
- { title: elem.title, router: elem.router }
|
|
|
+ const routerName = this.$route.name;
|
|
|
+ let breadcrumbs = [];
|
|
|
+ const getRouterPath = (navs, pathList) => {
|
|
|
+ navs.forEach(nav => {
|
|
|
+ let navPathList = [...pathList];
|
|
|
+ if (breadcrumbs.length) return;
|
|
|
+ if (nav["router"] === routerName) {
|
|
|
+ breadcrumbs = [
|
|
|
+ ...navPathList,
|
|
|
+ { title: nav.title, router: nav.router, isRouter: true }
|
|
|
+ ];
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ const routerOrName = nav["router"] || nav["name"];
|
|
|
+ navPathList = [
|
|
|
+ ...navPathList,
|
|
|
+ {
|
|
|
+ title: nav.title,
|
|
|
+ router: routerOrName,
|
|
|
+ isRouter: !!nav["router"]
|
|
|
+ }
|
|
|
];
|
|
|
+ if (nav["children"]) {
|
|
|
+ getRouterPath(nav.children, navPathList);
|
|
|
+ }
|
|
|
}
|
|
|
});
|
|
|
- });
|
|
|
+ };
|
|
|
|
|
|
- if (relate) this.getMoreBreadcrumbs(relate);
|
|
|
- },
|
|
|
- getMoreBreadcrumbs(relate) {
|
|
|
- const curSubNav = this.navs[this.curMainIndex].children[this.curSubIndex];
|
|
|
- if (!curSubNav.children || !curSubNav.children.length) return;
|
|
|
+ getRouterPath(this.menus, []);
|
|
|
|
|
|
- relate
|
|
|
- .split("/")
|
|
|
- .slice(1)
|
|
|
- .map(routerName => {
|
|
|
- const matchRouter = curSubNav.children.find(
|
|
|
- elem => elem.router === routerName
|
|
|
- );
|
|
|
- if (matchRouter)
|
|
|
- this.breadcrumbs.push({
|
|
|
- title: matchRouter.title,
|
|
|
- router: matchRouter.router
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
- toPage(mainIndex, subIndex) {
|
|
|
- const elem = this.navs[mainIndex].children[subIndex];
|
|
|
- if (elem.router === this.$route.name) return;
|
|
|
- this.$router.push({
|
|
|
- name: elem.router
|
|
|
- });
|
|
|
+ const curRouter = breadcrumbs.find(item => item.isRouter);
|
|
|
+ this.curActNav = curRouter.router;
|
|
|
+ this.curMenu = this.menus.find(
|
|
|
+ menu => menu.name === breadcrumbs[0].router
|
|
|
+ );
|
|
|
+
|
|
|
+ this.breadcrumbs = breadcrumbs;
|
|
|
+
|
|
|
+ if (
|
|
|
+ this.validRoutes.includes("WaitTask") &&
|
|
|
+ this.curMenu.name === "exam"
|
|
|
+ ) {
|
|
|
+ // this.updateWaitTaskCount();
|
|
|
+ }
|
|
|
},
|
|
|
toLogout() {
|
|
|
this.$confirm("确定要退出登录吗?", "提示", {
|
|
@@ -361,9 +290,8 @@ export default {
|
|
|
showMenu() {
|
|
|
this.menuDailogIsShow = !this.menuDailogIsShow;
|
|
|
},
|
|
|
- switchNavDetail(mainNo, subNo) {
|
|
|
- this.curMainIndex = mainNo;
|
|
|
- this.switchNav(subNo);
|
|
|
+ toNavDetail(mainNo, subNo) {
|
|
|
+ this.toNav(subNo);
|
|
|
this.showMenu();
|
|
|
}
|
|
|
}
|