|
|
<template>
|
|
|
<el-container>
|
|
|
<el-aside style="width:250px;background-color: rgb(238, 241, 246)" id="l-menu">
|
|
|
<NavMenu :collapsed="collapsed"></NavMenu>
|
|
|
</el-aside>
|
|
|
|
|
|
<el-container>
|
|
|
<el-header style="text-align: right; font-size: 12px">
|
|
|
<div class="tools" @click.prevent="collapse" style="width: 15px;z-index:9999;position:absolute;">
|
|
|
<!-- ;margin-top: 80px;z-index:9999;margin-left: 170px-->
|
|
|
<i style="color:#a6b6c6;vertical-align: middle;line-height: 60px;" :class="[collapsed?'el-icon-s-unfold':'el-icon-s-fold']"></i>
|
|
|
</div>
|
|
|
<el-dropdown trigger="hover" style="margin-top:10px">
|
|
|
<i class="el-icon-question" style="vertical-align: middle;"></i>
|
|
|
<i class="el-icon-message-solid" style="vertical-align: middle;"></i>
|
|
|
<span class="el-dropdown-link userinfo-inner">
|
|
|
<img width="40" height="40" style="border-radius:50%;" src="~img/faceDefault.jpg"/></span>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<el-dropdown-item>{{sysUserName}}</el-dropdown-item>
|
|
|
<el-dropdown-item>我的消息</el-dropdown-item>
|
|
|
<el-dropdown-item @click.native="editPass">修改密码</el-dropdown-item>
|
|
|
<el-dropdown-item @click.native="updateCache">更新缓存</el-dropdown-item>
|
|
|
<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
</el-header>
|
|
|
|
|
|
<el-main style="background-color:#f5f7fd;padding:10px">
|
|
|
<TabMenu></TabMenu>
|
|
|
</el-main>
|
|
|
</el-container>
|
|
|
</el-container>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import rt from '../routes'
|
|
|
import { editPass,resetToken} from '../api/user';
|
|
|
import ElFormItem from "element-ui/packages/form/src/form-item";
|
|
|
import TabMenu from "@/components/TabMenu"
|
|
|
import NavMenu from "@/components/NavMenu"
|
|
|
|
|
|
export default {
|
|
|
|
|
|
provide() {
|
|
|
return {
|
|
|
reload: this.reload
|
|
|
}
|
|
|
},
|
|
|
components: {ElFormItem,TabMenu,NavMenu},
|
|
|
data() {
|
|
|
return {
|
|
|
rotate:false,
|
|
|
sysName:'',
|
|
|
collapsed:false,
|
|
|
// sysUserName: '',
|
|
|
sysUserId:'',
|
|
|
// sysUserAvatar: '',
|
|
|
isRouterAlive: true,
|
|
|
form: {
|
|
|
name: '',
|
|
|
region: '',
|
|
|
date1: '',
|
|
|
date2: '',
|
|
|
delivery: false,
|
|
|
type: [],
|
|
|
resource: '',
|
|
|
desc: ''
|
|
|
},
|
|
|
editForm: {
|
|
|
userId: '',
|
|
|
password: '',
|
|
|
},
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
reload() {
|
|
|
this.$nextTick(function () {
|
|
|
this.$router.push({
|
|
|
path: this.$router.path,
|
|
|
query:{
|
|
|
t: new Date().getTime()
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
onSubmit() {
|
|
|
console.log('submit!');
|
|
|
},
|
|
|
handleopen() {
|
|
|
console.log('handleopen');
|
|
|
},
|
|
|
handleclose() {
|
|
|
console.log('handleclose');
|
|
|
},
|
|
|
handleselect: function (a, b) {
|
|
|
this.reload()
|
|
|
},
|
|
|
// 退出登录
|
|
|
logout: function () {
|
|
|
var _this = this;
|
|
|
this.$confirm('确认退出吗?', '提示', {
|
|
|
//type: 'warning'
|
|
|
}).then(() => {
|
|
|
sessionStorage.removeItem('user');
|
|
|
sessionStorage.removeItem('menu');
|
|
|
//退出后初始化原来的路由
|
|
|
let sysRoutes = JSON.parse(sessionStorage.getItem('sysMenu'));
|
|
|
console.log(sysRoutes);
|
|
|
_this.$router.options.routes = sysRoutes;
|
|
|
|
|
|
_this.$router.push('/login');
|
|
|
}).catch(() => {
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
},
|
|
|
//折叠导航栏
|
|
|
collapse:function(){
|
|
|
this.collapsed=!this.collapsed;
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
var _this = this;
|
|
|
var user = sessionStorage.getItem('user');
|
|
|
if (user) {
|
|
|
user = JSON.parse(user);
|
|
|
this.sysUserName = user.username || '';
|
|
|
this.sysUserId=user.userId||'';
|
|
|
|
|
|
this.sysUserAvatar = user.userface || '~img/faceDefault.jpg';
|
|
|
}
|
|
|
//操作路由,判断本地存储的用户栏目列表是否存在,如果存在则加载路由
|
|
|
var userRouters = sessionStorage.getItem('menu');
|
|
|
if (userRouters) {
|
|
|
userRouters = JSON.parse(userRouters);
|
|
|
_this.$router.options.routes = userRouters;
|
|
|
console.log("home:");
|
|
|
console.log(_this.$router.options.routes);
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
collapsed(value) {
|
|
|
let menuDom = document.getElementById("l-menu");
|
|
|
//折叠
|
|
|
if (value){
|
|
|
this.$nextTick(function () {
|
|
|
menuDom.setAttribute("style","width:90px");
|
|
|
})
|
|
|
}else {
|
|
|
//不折叠
|
|
|
this.$nextTick(function () {
|
|
|
menuDom.setAttribute("style","width:250px");
|
|
|
})
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
<style>
|
|
|
</style>
|
|
|
<style scoped lang="scss">
|
|
|
@import '~scss_vars';
|
|
|
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
header{
|
|
|
line-height: 60px;
|
|
|
box-shadow: 0px 10px 10px #eaeff3;
|
|
|
z-index: 2;
|
|
|
i{
|
|
|
font-size: 24px;
|
|
|
margin-right: 20px;
|
|
|
text-align: center;
|
|
|
vertical-align: middle;
|
|
|
height: 60px;
|
|
|
margin-top: 0px;
|
|
|
color: rgb(166, 182, 198);
|
|
|
width: 30px;
|
|
|
}
|
|
|
}
|
|
|
main{
|
|
|
|
|
|
}
|
|
|
|
|
|
</style> |
...
|
...
|
|