<template>
<el-container>
<el-aside style="width:250px;background-color: rgb(38, 56, 76);" 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>
<i class="el-icon-question" style="vertical-align: middle;"></i>
<i class="el-icon-message-solid" style="vertical-align: middle;"></i>
<el-dropdown trigger="hover" style="margin-top:10px">
<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="changePass">修改密码</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>
<TabMenu></TabMenu>
</el-main>
</el-container>
<el-dialog title="修改密码" :visible.sync="dialogFormVisible">
<el-form :model="resetForm" status-icon :rules="resetFormRules" ref="resetForm" label-width="100px">
<el-form-item label="用户名" prop="name">
<span>{{sysUserName}}</span>
</el-form-item>
<el-row :gutter="1">
<el-col :span="11">
<el-form-item label=" " prop="newpwd">
<el-input type="password" v-model="resetForm.newpwd" autocomplete="off" show-password placeholder="8-20位字符在数字、小写、大写字母以及特殊字符中四选三">
<template slot="prepend">新密码</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label=" " prop="renewpwd">
<el-input type="password" v-model="resetForm.renewpwd" show-password auto-complete="off" placeholder="8-20位字符在数字、小写、大写字母以及特殊字符中四选三">
<template slot="prepend">确认密码</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary" @click="submitEdit('resetForm')" style="float:right">提 交</el-button>
</el-form-item>
</el-form>
</el-dialog>
</el-container>
</template>
<script>
import rt from '../routes'
import { editPass,resetToken,loginedUserInfo} from '../api/user';
import ElFormItem from "element-ui/packages/form/src/form-item";
import TabMenu from "@/components/TabMenu"
import NavMenu from "@/components/NavMenu"
import loginuserInfo from "@/api/base";
import axios from "axios";
import {mapActions, mapGetters} from 'vuex'
import jsutil from "@/common/js/util";
export default {
provide() {
return {
reload: this.reload
}
},
components: {ElFormItem,TabMenu,NavMenu},
data() {
var validatePass = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入新密码'));
}else {
var ls=0;
if(value.match(/([a-z])+/)){
ls++;
} if(value.match(/([0-9])+/)){
ls++;
} if(value.match(/([A-Z])+/)){
ls++;
} if((/([\W])+/) && !value.match(/(![\u4E00-\u9FA5])+/)){
ls++;
} if (value.toString().length < 8 || value.toString().length > 20) {
callback(new Error('密码长度为8 - 20个字符'));
ls=0;
} if(value.match(/([\u4E00-\u9FA5])+/)){
callback(new Error('不能包含中文字符'));
ls=0;
}
switch (ls) {
case 0: this.passwordPercent = 0;callback(new Error('数字、小写字母、大写字母以及特殊字符中四选三'));break;
case 1: this.passwordPercent = 33;callback(new Error('数字、小写字母、大写字母以及特殊字符中四选三'));break;
case 2: this.passwordPercent = 66;callback(new Error('数字、小写字母 、大写字母以及特殊字符中四选三'));break;
case 3:
case 4: this.passwordPercent = 100;break;
default: this.passwordPercent = 0;break;
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.resetForm.newpwd) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
rotate:false,
sysName:'',
collapsed:false,
sysUserName: '',
sysUserId:'',
// sysUserAvatar: '',
isRouterAlive: true,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
editForm: {
userId: '',
password: '',
},
dialogFormVisible:false,
resetForm: {
newpwd: '',
renewpwd: '',
},
resetFormRules: {
newpwd: [
{ required: true, validator: validatePass, trigger: 'blur' }
],
renewpwd: [
{ required: true, validator: validatePass2, trigger: 'blur' }
]
},
}
},
methods: {
...mapActions( // 语法糖
['setUserInfoStore','setUserMenuStore'] // 相当于this.$store.dispatch('modifyName'),提交这个方法
),
initUserInfo:function() {
this.setUserInfoStore(loginedUserInfo());
this.sysUserName = this.getUserInfoStore.username || '';
this.sysUserId=this.getUserInfoStore.userId||'';
this.sysUserAvatar = this.getUserInfoStore.userface || '~img/faceDefault.jpg';
},
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(() => {
this.$axios.defaults.headers.common['Authorization'] = undefined;
sessionStorage.removeItem('user');
sessionStorage.removeItem('menu');
//清空菜单
this.setUserMenuStore([]);
this.setUserInfoStore({
userId: 0,
username: '',
companyId: 0,
companyName: '',
realname: '',
userface: ''
});
//退出后初始化原来的路由
let sysRoutes = JSON.parse(sessionStorage.getItem('sysMenu'));
_this.$router.options.routes = sysRoutes;
_this.$router.push('/login');
}).catch(() => {
});
},
//折叠导航栏
collapse:function(){
this.collapsed=!this.collapsed;
},
checkUpdate() {
axios.get('/static/nmmsVer.json').then(function(response) {
// 判断版本号是否与本地一致
if (response.data.nmmsVer != localStorage.getItem('nmmsVer')) {
localStorage.setItem('nmmsVer', response.data.nmmsVer)
location.reload()
} else {
}
}).catch(function(error) {
})
},
submitEdit(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
this.editForm.userId=this.sysUserId;
this.editForm.password=this.resetForm.renewpwd;
editPass(this.editForm).then(res=>{
let response=res.data;
if(response.code=='200'){
this.$notify({
title: '密码修改成功',
message: '密码修改成功，退出请重新登录',
type: 'success'
});
this.dialogFormVisible=false;
}else{
this.$notify.error({
title: '密码修改失败',
message: '密码修改失败！！！'
});
}
});
} else {
console.log('error submit!!');
return false;
}
});
},
changePass:function(){
this.dialogFormVisible=true;
},
updateCache:function(){
resetToken().then( res =>{
let response = res.data;
if (response.code === '200'){
this.$notify({
title: '成功',
message: '缓存更新成功',
type: 'success'
});
}else{
this.$notify.error({
title: '失败',
message: '缓存更新失败'
});
}
})
},
},
computed: {
...mapGetters(['getUserInfoStore','getUserMenuStore']) // 动态计算属性，相当于this.$store.getters.resturantName
},
mounted() {
this.checkUpdate();
var _this = this;
//操作路由,判断本地存储的用户栏目列表是否存在，如果存在则加载路由
var userRouters = sessionStorage.getItem('menu');
if (userRouters) {
userRouters = JSON.parse(userRouters);
_this.$router.options.routes = userRouters;
}
// 定时获取版本号
setInterval(() => {
this.checkUpdate();
}, 30000);
this.$nextTick(function(){
this.initUserInfo();
})
},
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.el-main{
background-color:#f5f7fd;
padding:0 10px 10px 10px;
}
.el-dialog__header {
padding: 20px 20px 10px;
padding-top: 10px;
/*border-left: 5px solid rgb(111, 130, 148);*/
border-radius: 0px 5px 0 0;
/*font-weight: 700;*/
font-size: 12px;
/*border-bottom: 1px solid rgb(111, 130, 148);*/
background: #f5f7fd;
color: #778ca2;
}
.el-dialog__title {
line-height: 24px;
font-size: 14px;
color: #778ca2;
}
.el-dialog__body {
padding: 5px 20px;
}
</style>