Commit dd6db7f3 authored by liwei's avatar liwei

liwei

parent 06e3b7e5
<template> <template>
<div id="app"> <div id="app">
<router-view/> <router-view />
</div> </div>
</template> </template>
<script> <script>
import menu from './util/menuList' import menu from "./util/menuList";
export default { export default {
name: 'App', name: "App",
data(){ data() {
return { return {};
}
}, },
mounted(){ mounted() {
// 权限验证 动态路由 // 权限验证 动态路由
if(window.location.href.indexOf('login') < 0){ if (window.location.href.indexOf("login") < 0) {
let permission = this.$store.state.progressList; let permission = this.$store.state.progressList;
console.log(this.$store.state) console.log(this.$store.state);
let menuList = []; let menuList = [];
this.$router.options.routes[0].children = []; this.$router.options.routes[0].children = [];
let routerUserDetail = { let routerUserDetail = {
path: '/userDetail/:id', path: "/userDetail/:id",
name:'userDetail', name: "userDetail",
component: e=>require(['@/components/userDetail'],e), component: e => require(["@/components/userDetail"], e)
}; };
let routerTeacherDetail ={ let routerTeacherDetail = {
path: '/teacher/:id', path: "/teacher/:id",
name:'teacherDetail', name: "teacherDetail",
component: e=>require(['@/components/teacherDetail'],e), component: e => require(["@/components/teacherDetail"], e)
}; };
menu.forEach(i=>{ menu.forEach(i => {
let p = false; let p = false;
let t = []; let t = [];
i.list.forEach(j=>{ i.list.forEach(j => {
let find = permission.find(x=>{return x.cover === j.cover}); let find = permission.find(x => {
if(find){ return x.cover === j.cover;
});
if (find) {
j.router.meta = {}; j.router.meta = {};
j.router.meta.readonly = !!find.readonly; j.router.meta.readonly = !!find.readonly;
j.router.meta.delete = !!find.delete; j.router.meta.delete = !!find.delete;
...@@ -47,13 +47,13 @@ export default { ...@@ -47,13 +47,13 @@ export default {
j.router.meta.classTakeUnlimited = !!find.classTakeUnlimited; j.router.meta.classTakeUnlimited = !!find.classTakeUnlimited;
j.router.meta.promoter = !!find.promoter; j.router.meta.promoter = !!find.promoter;
t.push(j); t.push(j);
if(find.cover === '3-1'){ if (find.cover === "3-1") {
routerTeacherDetail.meta = {}; routerTeacherDetail.meta = {};
routerTeacherDetail.meta.readonly = find.readonly; routerTeacherDetail.meta.readonly = find.readonly;
routerTeacherDetail.meta.delete = !!find.delete; routerTeacherDetail.meta.delete = !!find.delete;
this.$router.options.routes[0].children.push(routerTeacherDetail); this.$router.options.routes[0].children.push(routerTeacherDetail);
} }
if(find.cover === '3-2'){ if (find.cover === "3-2") {
routerUserDetail.meta = {}; routerUserDetail.meta = {};
routerUserDetail.meta.readonly = find.readonly; routerUserDetail.meta.readonly = find.readonly;
routerUserDetail.meta.delete = !!find.delete; routerUserDetail.meta.delete = !!find.delete;
...@@ -63,28 +63,32 @@ export default { ...@@ -63,28 +63,32 @@ export default {
p = true; p = true;
} }
}); });
if(p){ if (p) {
i.list = t; i.list = t;
menuList.push(i) menuList.push(i);
} }
}); });
this.$router.addRoutes([this.$router.options.routes[0]]);//调用add; this.$router.addRoutes([this.$router.options.routes[0]]); //调用add;
this.$store.dispatch('setMenu',menuList) this.$store.dispatch("setMenu", menuList);
} }
} }
} };
</script> </script>
<style> <style>
#app { #app {
height: 100%; height: 100%;
} }
html,body{ html,
height: 100%; body {
margin: 0; height: 100%;
padding: 0; margin: 0;
} padding: 0;
.el-collapse-item__arrow{margin-left: 0;} }
.fl{float: left;} .el-collapse-item__arrow {
margin-left: 0;
}
.fl {
float: left;
}
</style> </style>
This diff is collapsed.
This diff is collapsed.
...@@ -6,80 +6,87 @@ ...@@ -6,80 +6,87 @@
background-color="#333333" background-color="#333333"
active-text-color="#ffd04b" active-text-color="#ffd04b"
:collapse="menuType" :collapse="menuType"
class="el-menu-vertical-demo"> class="el-menu-vertical-demo"
>
<div class="menu-btn" @click="menuType = !menuType"> <div class="menu-btn" @click="menuType = !menuType">
<i v-if="!menuType" class="iconfont icon-shouqi"></i> <i v-if="!menuType" class="iconfont icon-shouqi"></i>
<i v-if="menuType" <i v-if="menuType" class="iconfont icon-zhankai"></i>
class="iconfont icon-zhankai"></i>
</div> </div>
<el-submenu v-for="(data,index) in menuList" :index="data.value" :key="index"> <el-submenu v-for="(data,index) in menuList" :index="data.value" :key="index">
<template slot="title"> <template slot="title">
<i :class="'iconfont menu-icon '+data.icon"></i> <i :class="'iconfont menu-icon '+data.icon"></i>
<span>{{data.value}}</span> <span>{{data.value}}</span>
</template> </template>
<el-menu-item v-for="(item,i) in data.list" :index="item.path" :key="i" class="item">{{item.value}}</el-menu-item> <el-menu-item
v-for="(item,i) in data.list"
:index="item.path"
:key="i"
class="item"
>{{item.value}}</el-menu-item>
</el-submenu> </el-submenu>
</el-menu> </el-menu>
</template> </template>
<script> <script>
export default {
export default { name: "leftMenu",
name: "leftMenu", data() {
data(){ return {
return { menuList: this.$store.state.menuList,
menuList:this.$store.state.menuList, menuType: false
menuType:false };
} },
mounted() {
console.log(this.menuList);
},
methods: {
changeMenuType: function() {
this.$store.state.menuType = !this.$store.state.menuType;
}, },
methods:{ toPath: function(data) {
changeMenuType:function(){ this.$router.push({ name: data.routerName });
this.$store.state.menuType = !this.$store.state.menuType if (this.$store.state.openedTab.indexOf(data) < 0) {
}, this.$store.state.openedTab.push(data);
toPath:function (data) {
this.$router.push({name:data.routerName})
if(this.$store.state.openedTab.indexOf(data) < 0){
this.$store.state.openedTab.push(data);
}
} }
}, }
} }
};
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
.el-menu-vertical-demo:not(.el-menu--collapse) { .el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px; width: 200px;
}
.el-menu {
background: @bg-b;
color: white;
overflow: auto;
height: 100%;
.menu-btn {
height: 35px;
background: @bg-b-s;
line-height: 35px;
/*text-align: center;*/
i {
font-size: 26px;
float: right;
padding: 0 15px;
}
} }
.el-menu{ .el-submenu {
background: @bg-b; .menu-icon {
color: white; color: white;
overflow: auto; font-size: 18px;
height: 100%; position: relative;
.menu-btn{ right: 5px;
height: 35px;
background: @bg-b-s;
line-height: 35px;
/*text-align: center;*/
i{
font-size: 26px;
float: right;
padding: 0 15px;
}
} }
.el-submenu{ .el-menu-item {
.menu-icon{ background: @main-font-color;
color: white; }
font-size: 18px; .template {
position: relative; color: black;
right: 5px;
}
.el-menu-item{
background: @main-font-color;
}
.template{
color: black;
}
} }
} }
}
</style> </style>
<template> <template>
<div class="login"> <div class="login">
<div class="wrap-main"> <div class="wrap-main">
<h1 class="title">唱唱启蒙——后台管理系统</h1> <h1 class="title">唱唱启蒙——后台管理系统</h1>
<el-form :model="login" :rules="loginRules" ref="loginForm"> <el-form :model="login" :rules="loginRules" ref="loginForm">
<el-form-item prop="username"> <el-form-item prop="username">
<el-input v-model="login.username" placeholder="用户名"></el-input> <el-input v-model="login.username" placeholder="用户名"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input type="password" v-model="login.password" placeholder="密码"></el-input> <el-input type="password" v-model="login.password" placeholder="密码"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button class="btn" size="medium" type="primary" @click="submitForm">登陆</el-button> <el-button class="btn" size="medium" type="primary" @click="submitForm">登陆</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { loginApi } from "../../service/api"; import { loginApi } from "../../service/api";
import md5 from 'js-md5'; import md5 from "js-md5";
export default { export default {
data(){ data() {
return{ return {
login:{ login: {
username:'', username: "",
password:'' password: ""
},
loginRules:{
username:[
{ required: true, message: '请输入您的用户名', trigger: 'blur' }
],
password:[
{ required: true, message: '请输入您的密码', trigger: 'blur' }
]
}
}
},
mounted(){
let that = this;
document.onkeydown=keyDownSearch;
function keyDownSearch(e) {
// 兼容FF和IE和Opera
let theEvent = e || window.event;
let code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code === 13 && that.$route.name === 'login') {
that.submitForm();//具体处理函数
return false;
}
return true;
}
}, },
methods:{ loginRules: {
// 提交 username: [
submitForm(){ { required: true, message: "请输入您的用户名", trigger: "blur" }
this.$refs["loginForm"].validate((valid) => { ],
if (valid) { password: [
let json = { { required: true, message: "请输入您的密码", trigger: "blur" }
username:this.login.username, ]
password:md5(this.login.password) }
}; };
// debugger },
loginApi(json).then(res=>{ mounted() {
if(res.teacher_info){ let that = this;
let data=JSON.stringify(res.teacher_info) document.onkeydown = keyDownSearch;
localStorage.setItem("phoneNum",data) function keyDownSearch(e) {
}else{ // 兼容FF和IE和Opera
localStorage.setItem("phoneNum","") let theEvent = e || window.event;
} let code = theEvent.keyCode || theEvent.which || theEvent.charCode;
this.$store.dispatch('setToken',res.token); if (code === 13 && that.$route.name === "login") {
this.$store.dispatch('setUserName',res.desc); that.submitForm(); //具体处理函数
this.$store.dispatch('setPermission',JSON.parse(res.roles.menu_ids)); return false;
// debugger }
window.location.href = '/'; return true;
}
}) },
methods: {
// 提交
submitForm() {
this.$refs["loginForm"].validate(valid => {
if (valid) {
let json = {
username: this.login.username,
password: md5(this.login.password)
};
// debugger
loginApi(json).then(res => {
debugger;
if (res.teacher_info) {
let data = JSON.stringify(res.teacher_info);
localStorage.setItem("phoneNum", data);
} else {
localStorage.setItem("phoneNum", "");
} }
}) this.$store.dispatch("setToken", res.token);
this.$store.dispatch("setUserName", res.desc);
this.$store.dispatch(
"setPermission",
JSON.parse(res.roles.menu_ids)
);
// debugger
window.location.href = "/";
});
} }
} });
} }
}
};
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import "../../util/public"; @import "../../util/public";
.login{ .login {
height: 100%; height: 100%;
background: linear-gradient(to bottom right, #ecec7c, #787af4); /* 标准的语法(必须放在最后) */ background: linear-gradient(
to bottom right,
#ecec7c,
#787af4
); /* 标准的语法(必须放在最后) */
}
.wrap-main {
width: 300px;
height: 180px;
padding: 50px 20px;
border-radius: 5px;
box-shadow: 8px 8px 15px rgba(49, 49, 49, 0.5);
position: fixed;
line-height: 50px;
background-color: rgba(255, 255, 255, 0.3);
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
.btn {
display: block;
width: 100%;
} }
.wrap-main{ .title {
width: 300px; position: absolute;
height: 180px; top: -100px;
padding:50px 20px; width: 100%;
border-radius: 5px; text-align: center;
box-shadow: 8px 8px 15px rgba(49, 49, 49, 0.5); left: 0;
position: fixed; color: white;
line-height: 50px; font-size: 26px;
background-color: rgba(255,255,255,0.3); text-shadow: 6px 6px 3px rgba(49, 49, 49, 0.5);
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
.btn{
display: block;
width: 100%;
}
.title{
position: absolute;
top: -100px;
width: 100%;
text-align: center;
left: 0;
color: white;
font-size: 26px;
text-shadow: 6px 6px 3px rgba(49, 49, 49, 0.5);
}
} }
}
</style> </style>
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment