<template>
|
<div class="navbar">
|
<hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
<breadcrumb class="breadcrumb-container" />
|
<div class="right-menu">
|
<el-dropdown class="avatar-container" trigger="click">
|
<div class="avatar-wrapper">
|
<!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"> -->
|
{{$store.state.user.name + '(' + $store.state.user.roleName +')'}}
|
<i class="el-icon-caret-bottom" />
|
</div>
|
<el-dropdown-menu slot="dropdown" class="user-dropdown">
|
<!-- <router-link to="/">
|
<el-dropdown-item>
|
订单管理
|
</el-dropdown-item>
|
</router-link> -->
|
<el-dropdown-item divided @click.native="myInfo">
|
<span style="display:block;">修改密码</span>
|
</el-dropdown-item>
|
<el-dropdown-item divided @click.native="logout">
|
<span style="display:block;">退出</span>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
<el-dialog title="修改密码" :visible.sync="dialogVisible" width="400px" :before-close="handleClose">
|
<el-form ref="resetPasswForm" :model="resetPasswForm" :rules="resetPasswRules" class="login-form" auto-complete="on" label-position="left">
|
<div class="login-cont1">
|
<el-form-item prop="oldPwd">
|
<el-input placeholder="请输入旧密码" v-model.trim="resetPasswForm.oldPwd" show-password auto-complete="new-password"></el-input>
|
</el-form-item>
|
<el-form-item prop="newPwd">
|
<el-input placeholder="请输入6~16位新密码" v-model.trim="resetPasswForm.newPwd" show-password auto-complete="new-password"></el-input>
|
</el-form-item>
|
<el-form-item prop="confirmPwd">
|
<el-input placeholder="请再次输入新密码" v-model.trim="resetPasswForm.confirmPwd" show-password auto-complete="new-password"></el-input>
|
</el-form-item>
|
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="resetPwdBtn">重置密码</el-button>
|
</div>
|
</el-form>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
import Breadcrumb from '@/components/Breadcrumb'
|
import Hamburger from '@/components/Hamburger'
|
import { updatePwd } from '@/api/user'
|
|
import md5 from 'js-md5';
|
export default {
|
components: {
|
Breadcrumb,
|
Hamburger
|
},
|
computed: {
|
...mapGetters([
|
'sidebar',
|
'avatar',
|
'userId'
|
])
|
},
|
data() {
|
var validatePass = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请输入密码'));
|
} else {
|
if (this.resetPasswForm.newPwd !== '') {
|
this.$refs.resetPasswForm.validateField('confirmPwd');
|
}
|
callback();
|
}
|
};
|
var validatePass2 = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请再次输入密码'));
|
} else if (value !== this.resetPasswForm.newPwd) {
|
callback(new Error('两次输入密码不一致!'));
|
} else {
|
callback();
|
}
|
};
|
return {
|
dialogVisible: false,
|
resetPasswForm: {
|
confirmPwd: '',
|
newPwd: '',
|
oldPwd: ''
|
},
|
loading: false,
|
resetPasswRules: {
|
oldPwd: [
|
{ required: true, message: '请输入旧密码', trigger: 'blur' }
|
],
|
newPwd: [
|
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
{ min: 6, max: 20, message: '长度6至20个字符', trigger: 'blur' },
|
{ validator: validatePass, trigger: 'blur' }
|
],
|
confirmPwd: [
|
{ required: true, message: '请再次确认密码', trigger: 'blur' },
|
{ min: 6, max: 20, message: '长度6至20个字符', trigger: 'blur' },
|
{ validator: validatePass2, trigger: 'blur', required: true }
|
]
|
},
|
}
|
},
|
methods: {
|
toggleSideBar() {
|
this.$store.dispatch('app/toggleSideBar')
|
},
|
logout() {
|
this.$confirm('确认退出当前账号?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$store.dispatch('user/logout').then(() => {
|
this.$store.dispatch('tagsView/delAllViews',[])//清除tagViews
|
this.$router.push(`/login`)
|
})
|
})
|
|
},
|
myInfo() {
|
this.dialogVisible = true
|
},
|
handleClose() {
|
this.$refs.resetPasswForm.resetFields();
|
this.dialogVisible = false
|
},
|
resetPwdBtn() {
|
this.$refs.resetPasswForm.validate(valid => {
|
if (!valid) return this.$message.error('数据填写有误，请检查！');
|
var newPasData = {}
|
newPasData.newPwd = md5(this.avatar + this.resetPasswForm.newPwd)
|
newPasData.oldPwd = md5(this.avatar + this.resetPasswForm.oldPwd)
|
newPasData.confirmPwd = md5(this.avatar + this.resetPasswForm.confirmPwd)
|
newPasData.id = this.userId;
|
updatePwd(newPasData).then(res => {
|
this.$message.success('密码修改成功！');
|
this.$refs.resetPasswForm.resetFields();
|
this.dialogVisible = false
|
this.$store.dispatch('user/logout').then(() => {
|
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
|
})
|
})
|
})
|
},
|
changAttr(e, type) {
|
if (type === 'focus') {
|
if (e) {
|
e.stopPropagation();
|
e.preventDefault();
|
}
|
setTimeout(() => {
|
this.readonly = false;
|
}, 100);
|
} else {
|
if (e) {
|
e.stopPropagation();
|
}
|
this.readonly = true;
|
}
|
},
|
clickEvt() {
|
if (this.$refs.password) {
|
this.$refs.password.$refs.input.onmousedown = (evt) => {
|
if (evt) {
|
evt.preventDefault();
|
evt.stopPropagation();
|
}
|
if (this.ruleForm.password === '' || this.readonly) {
|
this.$refs.password.$refs.input.blur();
|
setTimeout(() => {
|
this.$refs.password.$refs.input.focus();
|
}, 0);
|
}
|
return false;
|
};
|
}
|
},
|
},
|
created() {
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
$bg: #2d3a4b;
|
$dark_gray: #889aa4;
|
$light_gray: #eee;
|
.navbar {
|
height: 50px;
|
overflow: hidden;
|
position: relative;
|
background: #fff;
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
|
.hamburger-container {
|
line-height: 46px;
|
height: 100%;
|
float: left;
|
cursor: pointer;
|
transition: background 0.3s;
|
-webkit-tap-highlight-color: transparent;
|
|
&:hover {
|
background: rgba(0, 0, 0, 0.025);
|
}
|
}
|
|
.breadcrumb-container {
|
float: left;
|
}
|
|
.right-menu {
|
float: right;
|
height: 100%;
|
line-height: 50px;
|
|
&:focus {
|
outline: none;
|
}
|
|
.right-menu-item {
|
display: inline-block;
|
padding: 0 8px;
|
height: 100%;
|
font-size: 18px;
|
color: #5a5e66;
|
vertical-align: text-bottom;
|
|
&.hover-effect {
|
cursor: pointer;
|
transition: background 0.3s;
|
|
&:hover {
|
background: rgba(0, 0, 0, 0.025);
|
}
|
}
|
}
|
|
.avatar-container {
|
margin-right: 16px;
|
cursor: pointer;
|
-webkit-user-select: none; /*WebKit内核私有属性*/
|
-moz-user-select: none; /*Firefox私有属性*/
|
-ms-user-select: none; /*IE私有属性(IE10及以后)*/
|
-khtml-user-select: none; /*KHTML内核私有属性*/
|
-o-user-select: none; /*Opera私有属性*/
|
user-select: none; /*CSS3属性*/
|
.avatar-wrapper {
|
position: relative;
|
.user-avatar {
|
width: 40px;
|
height: 40px;
|
border-radius: 10px;
|
}
|
|
.el-icon-caret-bottom {
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
}
|
/* reset element-ui css */
|
.login-container {
|
.el-input {
|
display: inline-block;
|
// height: 47px;
|
width: 85%;
|
input {
|
background: transparent;
|
border: 0px;
|
-webkit-appearance: none;
|
border-radius: 0px;
|
padding: 12px 5px 12px 15px;
|
// color: $light_gray;
|
height: 47px;
|
// &:-webkit-autofill {
|
// box-shadow: 0 0 0px 1000px $cursor inset !important;
|
// // -webkit-text-fill-color: $cursor !important;
|
// }
|
}
|
}
|
.el-form {
|
width: 20%;
|
height: 440px;
|
background: #ffffff;
|
box-shadow: 0px 26px 50px 0px rgba(68, 145, 251, 0.24);
|
border-radius: 8px;
|
}
|
.el-form-item {
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
border-radius: 5px;
|
color: #454545;
|
border: solid 1px #eee;
|
}
|
.login-cont {
|
width: 70%;
|
margin-top: 100px;
|
}
|
.login-cont1 {
|
width: 80%;
|
// margin-top: 100px;
|
}
|
}
|
</style>
|
