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(); next()
let token = localStorage.getItem("MSSM-LIAONING__TOKEN"); // let token = localStorage.getItem("MSSM-LIAONING__TOKEN");
if (token) { // if (token) {
if (store.state.myselfPermission.routerList.length > 0) { // if (store.state.myselfPermission.routerList.length > 0) {
let current = store.state.myselfPermission.routerList.filter( // let current = store.state.myselfPermission.routerList.filter(
(item) => item.path == to.path || from.path == "/" // (item) => item.path == to.path || from.path == "/"
); // );
if (current.length > 0) { // if (current.length > 0) {
next(); // next();
} else { // } else {
Message.error("无权限访问!"); // next();
} // // Message.error("无权限访问!");
} else { // }
store // } else {
.dispatch("GetPermission") // store
.then((res) => { // .dispatch("GetPermission")
if (res.length > 0) { // .then((res) => {
next({ path: res }); // console.log(res);
} else { // if (res.length > 0) {
// kickOut(); // next({ path: res });
} // } else {
}) // kickOut();
.catch((error) => { // }
// kickOut(); // })
}); // .catch((error) => {
} // kickOut();
} else { // });
// //没有token踢出去 // }
// Message.error("获取令牌失败!"); // } else {
// kickOut(); // //没有token踢出去
next(); // Message.error("获取令牌失败!");
// kickOut();
} // }
} 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"
@ -11,58 +11,61 @@
active-class="routerActive" active-class="routerActive"
> >
<div class="view-child"> <div class="view-child">
<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> -->
<!-- 左边 --> <el-menu
<div class="sidebar_content"> :default-active="routerIndex"
<div class="mycontent-left"> class="el-menu-vertical-demo"
<el-menu :router="true"
:default-active="routerIndex" background-color="#465970"
class="el-menu-vertical-demo" text-color="#fff"
@open="handleOpen" >
@close="handleClose" <div
:router="true" :index="item.path"
v-for="(item, index) in routerList"
:key="index"
> >
<el-submenu <div v-if="item.children && item.children.length > 0">
:index="indexOne - '0'" <el-submenu index="">
v-for="(item, indexOne) in myRouter" <template slot="title">
:key="indexOne - '0'" <img :src="item.icon" alt="" class="leftIcon" />
> <span>{{ item.name }}</span>
<template slot="title"> </template>
<img :src="item.icon" alt="" class="title_img" /> <el-menu-item-group v-if="item.children">
<span>{{ item.name }}</span> <el-menu-item
</template> :index="itemb.path + '66'"
<el-menu-item-group> v-for="(itemb, index) in item.children"
<el-menu-item :key="index + '3'"
:index="indexOne + '-' + index" :route="itemb.path"
v-for="(itemb, index) in item.children" >{{ itemb.name }}</el-menu-item
:key="index" >
:route="itemb.path" </el-menu-item-group>
>{{ itemb.name }}</el-menu-item </el-submenu>
> </div>
</el-menu-item-group> <div v-else>
</el-submenu> <el-menu-item
</el-menu> :index="item.path + '2'"
</div> :key="index"
<!-- 右边 --> :route="item.path"
<div class="mycontent-content"> >
<tags-view ref="tagsView" /> <template slot="title">
<div class="mycontent-content-title"> <img :src="item.icon" alt="" class="leftIcon" />
<!-- <i class="el-icon-location-outline title-icon" /> <span>{{ item.name }}</span>
<span class="title-font">{{ routerTitle }}</span> --> </template></el-menu-item
>
</div>
</div> </div>
<router-view></router-view> </el-menu>
</div>
</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,142 +191,42 @@ 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;
.el-menu-vertical-demo {
box-sizing: border-box;
background: #465970; background: #465970;
color: #ffffff; width: 220px;
overflow: hidden; box-sizing: border-box;
height: 100%; padding: 14px 10px;
.title_img { & > div {
width: vw(20); width: 200px;
margin-right: vw(10); height: 40px;
} display: flex;
::v-deep .el-submenu__title { align-items: center;
font-size: vw(16); font-size: 14px;
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;
}
}
::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; color: #ffffff;
} padding: 0 10px;
::v-deep .el-menu { cursor: pointer;
padding: 0 vw(20); .router-icon {
box-sizing: border-box; display: inline-block;
background: #465970; height: 14px;
width: 14px;
margin-right: 10px;
}
} }
} }
} .view-box {
flex: 1;
//
.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); .child-views {
.title-icon, height: calc(100% - 40px);
.title-font { width: 100%;
font-size: vw(14); box-sizing: border-box;
font-family: Source Han Sans CN; padding: 10px;
font-weight: 500;
color: #292f38;
}
.title-icon {
margin: 0 vw(5) 0 0;
font-size: vw(18);
color: #1e80eb;
}
}
} }
}
} }
.routerActive { .routerActive {
background: #1e80eb; background: #1e80eb;

Loading…
Cancel
Save