Lvtianfang
杜函宇 2 years ago
parent b17c4455b3
commit 8661a7e3de

@ -6,11 +6,11 @@ import "nprogress/nprogress.css";
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
// 踢出系统 // 踢出系统
// function kickOut() { function kickOut() {
// if (process.env.NODE_ENV === "production") { if (process.env.NODE_ENV === "production") {
// location.href = location.origin + "/login"; location.href = location.origin + "/login";
// } }
// } }
NProgress.configure({ showSpinner: false }); NProgress.configure({ showSpinner: false });
const whiteList = [ const whiteList = [
"/login", "/login",
@ -21,10 +21,16 @@ const whiteList = [
"/personalData", "/personalData",
"/changePassword", "/changePassword",
"/statistics", "/statistics",
"/administrative",
"/enterpriseMsg",
"/productsMsg",
"/logout",
]; ];
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
NProgress.start(); NProgress.start();
if (getToken()) { if (getToken()) {
console.log('有token');
to.meta.title && store.dispatch("settings/setTitle", to.meta.title); to.meta.title && store.dispatch("settings/setTitle", to.meta.title);
/* has token*/ /* has token*/
if (to.path === "/login") { if (to.path === "/login") {
@ -36,39 +42,39 @@ router.beforeEach((to, from, next) => {
} else { } else {
// 没有token // 没有token
if (whiteList.indexOf(to.path) !== -1) { if (whiteList.indexOf(to.path) !== -1) {
next()
// let token = localStorage.getItem("MSSM-LIAONING__TOKEN");
// if (token) {
// if (store.state.myselfPermission.routerList.length > 0) {
// let current = store.state.myselfPermission.routerList.filter(
// (item) => item.path == to.path || from.path == "/"
// );
// if (current.length > 0) {
// next(); // next();
let token = localStorage.getItem("MSSM-LIAONING__TOKEN"); // } else {
if (token) { // next();
if (store.state.myselfPermission.routerList.length > 0) { // // Message.error("无权限访问!");
let current = store.state.myselfPermission.routerList.filter( // }
(item) => item.path == to.path || from.path == "/" // } else {
); // store
if (current.length > 0) { // .dispatch("GetPermission")
next(); // .then((res) => {
} else { // console.log(res);
Message.error("无权限访问!"); // if (res.length > 0) {
} // next({ path: res });
} else { // } else {
store
.dispatch("GetPermission")
.then((res) => {
if (res.length > 0) {
next({ path: res });
} else {
// kickOut(); // kickOut();
} // }
}) // })
.catch((error) => { // .catch((error) => {
// kickOut(); // kickOut();
}); // });
} // }
} else { // } else {
// //没有token踢出去 // //没有token踢出去
// Message.error("获取令牌失败!"); // Message.error("获取令牌失败!");
// kickOut(); // kickOut();
next(); // }
}
} else { } else {
// kickOut(); // kickOut();
NProgress.done(); NProgress.done();

@ -2,8 +2,8 @@
<div class="container"> <div class="container">
<myHeader></myHeader> <myHeader></myHeader>
<div class="body-container"> <div class="body-container">
<!-- <div class="tree-menu"> <div class="tree-menu">
<router-link <!-- <router-link
tag="div" tag="div"
:to="{ path: item.path }" :to="{ path: item.path }"
v-for="(item, index) in myRouter" v-for="(item, index) in myRouter"
@ -14,55 +14,58 @@
<img :src="item.icon" alt="" class="router-icon" /> <img :src="item.icon" alt="" class="router-icon" />
{{ item.name }} {{ item.name }}
</div> </div>
</router-link> <div></div>
</div> --> </router-link> -->
<!-- 左边 -->
<div class="sidebar_content">
<div class="mycontent-left">
<el-menu <el-menu
:default-active="routerIndex" :default-active="routerIndex"
class="el-menu-vertical-demo" class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
:router="true" :router="true"
background-color="#465970"
text-color="#fff"
> >
<el-submenu <div
:index="indexOne - '0'" :index="item.path"
v-for="(item, indexOne) in myRouter" v-for="(item, index) in routerList"
:key="indexOne - '0'" :key="index"
> >
<div v-if="item.children && item.children.length > 0">
<el-submenu index="">
<template slot="title"> <template slot="title">
<img :src="item.icon" alt="" class="title_img" /> <img :src="item.icon" alt="" class="leftIcon" />
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</template> </template>
<el-menu-item-group> <el-menu-item-group v-if="item.children">
<el-menu-item <el-menu-item
:index="indexOne + '-' + index" :index="itemb.path + '66'"
v-for="(itemb, index) in item.children" v-for="(itemb, index) in item.children"
:key="index" :key="index + '3'"
:route="itemb.path" :route="itemb.path"
>{{ itemb.name }}</el-menu-item >{{ itemb.name }}</el-menu-item
> >
</el-menu-item-group> </el-menu-item-group>
</el-submenu> </el-submenu>
</el-menu>
</div> </div>
<!-- 右边 --> <div v-else>
<div class="mycontent-content"> <el-menu-item
<tags-view ref="tagsView" /> :index="item.path + '2'"
<div class="mycontent-content-title"> :key="index"
<!-- <i class="el-icon-location-outline title-icon" /> :route="item.path"
<span class="title-font">{{ routerTitle }}</span> --> >
<template slot="title">
<img :src="item.icon" alt="" class="leftIcon" />
<span>{{ item.name }}</span>
</template></el-menu-item
>
</div> </div>
<router-view></router-view>
</div> </div>
</el-menu>
</div> </div>
<!-- <div class="view-box"> <div class="view-box">
<tags-view ref="tagsView" /> <tags-view ref="tagsView" />
<div class="child-views"> <div class="child-views">
<router-view /> <router-view />
</div> </div>
</div> --> </div>
</div> </div>
</div> </div>
</template> </template>
@ -139,20 +142,17 @@ export default {
computed: { computed: {
// //
myRouter() { myRouter() {
console.log(this.$router.options.routes);
// let staticRouter = router.options.routes.filter( // let staticRouter = router.options.routes.filter(
// (item) => item.isDiy == true // (item) => item.isDiy == true
// )[0].children; // )[0].children;
// return staticRouter; // return staticRouter;
// return this.$store.state.myselfPermission.routerList; // return this.$store.state.myselfPermission.routerList;
console.log(this.$router.options.routes[6].children);
return this.$router.options.routes[6].children; return this.$router.options.routes[6].children;
}, },
}, get1(e) {
methods:{ console.log(e);
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}, },
}, },
created() {}, created() {},
@ -160,6 +160,28 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-submenu {
margin-right: -1px;
}
.leftIcon {
display: inline-block;
height: 14px;
width: 14px;
margin-right: 10px;
}
::v-deep .el-submenu__title {
padding: 0 8px !important;
}
::v-deep .el-menu-item {
padding: 0 8px !important;
margin-right: -1px;
}
::v-deep .el-menu-item-group .el-menu-item {
padding-left: 35px !important;
}
::v-deep .el-menu-item-group__title {
padding: 0 !important;
}
.container { .container {
height: 100%; height: 100%;
.body-container { .body-container {
@ -169,141 +191,41 @@ export default {
& > div { & > div {
height: 100%; height: 100%;
} }
// .tree-menu { .tree-menu {
// background: #465970;
// width: 220px;
// box-sizing: border-box;
// padding: 14px 10px;
// & > div {
// width: 200px;
// height: 40px;
// display: flex;
// align-items: center;
// font-size: 14px;
// font-weight: 400;
// color: #ffffff;
// padding: 0 10px;
// cursor: pointer;
// .router-icon {
// display: inline-block;
// height: 14px;
// width: 14px;
// margin-right: 10px;
// }
// }
// }
// .view-box {
// flex: 1;
// height: 100%;
// background: #f2f2f2;
// overflow: hidden;
// }
// .child-views {
// height: calc(100% - 40px);
// width: 100%;
// box-sizing: border-box;
// padding: 10px;
// }
//
.sidebar_content {
width: 100%;
height: 94.5%;
display: flex;
.mycontent-left {
width: 18%;
height: 100%;
background: #465970; background: #465970;
.el-menu-vertical-demo { width: 220px;
box-sizing: border-box; box-sizing: border-box;
padding: 14px 10px;
background: #465970; & > div {
color: #ffffff; width: 200px;
overflow: hidden; height: 40px;
height: 100%; display: flex;
.title_img { align-items: center;
width: vw(20); font-size: 14px;
margin-right: vw(10);
}
::v-deep .el-submenu__title {
font-size: vw(16);
font-family: Source Han Sans CN;
font-weight: 500;
color: #ffffff;
height: vh(80);
line-height: vh(80);
&:hover {
background: none;
}
}
::v-deep .el-menu-item-group__title {
padding: 0;
}
::v-deep .el-submenu .el-menu-item {
margin: vh(5) 0;
height: vh(60);
line-height: vh(60);
min-width: 100%;
font-size: vw(16);
font-family: Source Han Regular CN;
font-weight: 400; font-weight: 400;
color: #b6cbe4;
box-sizing: border-box;
&:hover {
background: #1e80eb;
border-radius: vw(5);
color: #ffffff; color: #ffffff;
padding: 0 10px;
cursor: pointer;
.router-icon {
display: inline-block;
height: 14px;
width: 14px;
margin-right: 10px;
} }
} }
::v-deep .el-menu-item.is-active {
box-sizing: border-box;
font-size: vw(16);
font-family: Source Han Sans CN;
font-weight: 500;
color: #ffffff;
background: #1e80eb;
border-radius: vw(5);
}
::v-deep .el-submenu__icon-arrow {
box-sizing: border-box;
font-size: vw(16);
font-family: Source Han Sans CN;
font-weight: 500;
color: #ffffff;
} }
::v-deep .el-menu { .view-box {
padding: 0 vw(20); flex: 1;
box-sizing: border-box;
background: #465970;
}
}
}
//
.mycontent-content {
width: 100%;
height: 100%; height: 100%;
padding: vw(0) vw(18) vh(18);
background: #f2f2f2; background: #f2f2f2;
.mycontent-content-title {
display: flex; overflow: hidden;
align-items: center;
margin: vh(13) vw(7);
.title-icon,
.title-font {
font-size: vw(14);
font-family: Source Han Sans CN;
font-weight: 500;
color: #292f38;
}
.title-icon {
margin: 0 vw(5) 0 0;
font-size: vw(18);
color: #1e80eb;
}
}
} }
.child-views {
height: calc(100% - 40px);
width: 100%;
box-sizing: border-box;
padding: 10px;
} }
} }
.routerActive { .routerActive {

Loading…
Cancel
Save