<template>
|
<div class="navbar">
|
<hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
|
<breadcrumb class="breadcrumb-container" />
|
|
<div class="right-menu">
|
|
<!-- <template v-if="device!=='mobile'">-->
|
<template>
|
<search id="header-search" class="right-menu-item" />
|
<!-- <error-log class="errLog-container right-menu-item hover-effect" />-->
|
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
<!-- <el-tooltip content="Global Size" effect="dark" placement="bottom">-->
|
<!-- <size-select id="size-select" class="right-menu-item hover-effect" />-->
|
<!-- </el-tooltip>-->
|
</template>
|
|
<el-dropdown class="avatar-container" trigger="click">
|
<div class="avatar-wrapper">
|
<!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
|
<div style="display: flex;align-items: center;margin-top: -5px">
|
|
<i class="el-icon-user" style="font-weight: bolder;font-size: 18px;margin-right: 5px;color:#A7A7A7" />
|
<div style=" font-size: 18px;font-family: 'Microsoft YaHei';color:#AAAAAA">{{ username }}</div>
|
</div>
|
|
<!-- <i class="el-icon-caret-bottom" />-->
|
</div>
|
<el-dropdown-menu slot="dropdown" class="user-dropdown" style="text-align: center">
|
<!-- <router-link to="/">-->
|
<!-- <el-dropdown-item>-->
|
<!-- Home-->
|
<!-- </el-dropdown-item>-->
|
<!-- </router-link>-->
|
<!-- <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">-->
|
<!-- <el-dropdown-item>Github</el-dropdown-item>-->
|
<!-- </a>-->
|
<!-- <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">-->
|
<!-- <el-dropdown-item>Docs</el-dropdown-item>-->
|
<!-- </a>-->
|
<el-dropdown-item @click.native="editPassword">
|
<span style="display:block;">修改密码</span>
|
</el-dropdown-item>
|
<el-dropdown-item divided @click.native="logout">
|
<span style="display:block;font-weight: bolder">退出</span>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
<el-dialog
|
title="修改密码"
|
:visible.sync="dialogVisible"
|
width="500px"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
@closed="handleClose"
|
>
|
<el-form ref="dialogForm" :rules="formRules" :model="form" label-width="100px">
|
<!-- <el-form-item label="用户编码：">-->
|
<!-- <div>{{ usercode }}</div>-->
|
<!-- </el-form-item>-->
|
<!-- <el-form-item label="用户名称：">-->
|
<!-- <div> {{ username }}</div>-->
|
<!-- </el-form-item>-->
|
<el-form-item label="原密码：" prop="password">
|
<el-input v-model="form.password" style="width: 220px;" />
|
</el-form-item>
|
<el-form-item label="新密码：" prop="newpassword">
|
<el-input v-model="form.newpassword" style="width: 220px;" />
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<div class="footerButton">
|
<el-button @click="dialogVisibleCancel">返回</el-button>
|
<el-button type="primary" @click="dialogVisibleConfirm">确 定</el-button>
|
</div>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
import Breadcrumb from '@/components/Breadcrumb'
|
import Hamburger from '@/components/Hamburger'
|
import { getCookie } from '@/utils/auth'
|
import { UpdateUserPassword } from '@/api/user'
|
import Search from '@/components/HeaderSearch'
|
import Screenfull from '@/components/Screenfull'
|
|
const SER_HZ = /^[\u4e00-\u9fa5]+$/
|
export default {
|
components: {
|
Breadcrumb,
|
Hamburger,
|
Search,
|
Screenfull
|
},
|
computed: {
|
...mapGetters([
|
'sidebar',
|
'avatar',
|
'device'
|
])
|
},
|
created() {
|
this.usercode = getCookie('navTabId')
|
this.username = getCookie('username')
|
},
|
data() {
|
const validatePassword1 = (rule, value, callback) => {
|
if (!value) {
|
return callback(new Error('请输入原密码！'))
|
} else {
|
if (SER_HZ.test(value)) {
|
return callback(new Error('密码不能为中文！'))
|
} else {
|
callback()
|
}
|
}
|
}
|
const validatePassword2 = (rule, value, callback) => {
|
if (!value) {
|
return callback(new Error('请输入新密码！'))
|
} else {
|
if (SER_HZ.test(value)) {
|
return callback(new Error('密码不能为中文！'))
|
} else {
|
callback()
|
}
|
}
|
}
|
return {
|
usercode: '',
|
username: '',
|
form: {
|
password: '',
|
newpassword: ''
|
},
|
dialogVisible: false,
|
formRules: {
|
password: [
|
{ required: true, validator: validatePassword1, trigger: ['blur', 'change'] }
|
],
|
newpassword: [
|
{ required: true, validator: validatePassword2, trigger: ['blur', 'change'] }
|
]
|
}
|
}
|
},
|
methods: {
|
toggleSideBar() {
|
this.$store.dispatch('app/toggleSideBar')
|
},
|
async logout() {
|
await this.$store.dispatch('user/logout')
|
this.$message.success('退出成功！')
|
this.$router.push(`/login`)
|
},
|
editPassword() {
|
this.dialogVisible = true
|
},
|
dialogVisibleCancel() {
|
this.dialogVisible = false
|
},
|
dialogVisibleConfirm() {
|
this.$refs.dialogForm.validate(valid => {
|
if (valid) {
|
const data = {
|
usercode: this.usercode,
|
username: this.username,
|
password: this.form.password,
|
newpassword: this.form.newpassword
|
}
|
console.log(data)
|
UpdateUserPassword(data).then(res => {
|
if (res.code === '200') {
|
this.$message.success('修改成功！')
|
this.dialogVisible = false
|
}
|
})
|
}
|
})
|
},
|
handleClose() {
|
this.form.password = ''
|
this.form.newpassword = ''
|
this.$refs.dialogForm.clearValidate()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
$main_color: #42b983;
|
|
.navbar {
|
height: 50px;
|
overflow: hidden;
|
position: relative;
|
background: #fff;
|
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
|
|
//background-color: #f8f8fa;
|
|
.hamburger-container {
|
line-height: 46px;
|
height: 100%;
|
float: left;
|
cursor: pointer;
|
transition: background .3s;
|
-webkit-tap-highlight-color: transparent;
|
|
&:hover {
|
background: rgba(0, 0, 0, .025)
|
}
|
}
|
|
.breadcrumb-container {
|
float: left;
|
}
|
|
.right-menu {
|
float: right;
|
height: 100%;
|
line-height: 50px;
|
display: flex;
|
|
&: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 .3s;
|
|
&:hover {
|
background: rgba(0, 0, 0, .025)
|
}
|
}
|
}
|
|
.avatar-container {
|
margin-right: 30px;
|
|
.avatar-wrapper {
|
margin-top: 5px;
|
position: relative;
|
cursor: pointer;
|
|
.user-avatar {
|
cursor: pointer;
|
width: 60px;
|
height: 40px;
|
border-radius: 10px;
|
}
|
|
.el-icon-caret-bottom {
|
cursor: pointer;
|
position: absolute;
|
right: -20px;
|
top: 25px;
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
|
//.footerButton {
|
// display: flex;
|
// justify-content: end;
|
//}
|
//
|
//::v-deep .el-button--primary {
|
// background-color: $main_color !important;
|
// height: 30px;
|
// display: flex;
|
// align-items: center;
|
// //border: 1px solid $main_color;
|
// border: none;
|
// padding: 0 20px;
|
//}
|
//
|
//::v-deep .el-button--default {
|
// background-color: #ffffff !important;
|
// height: 30px;
|
// display: flex;
|
// align-items: center;
|
// padding: 0 20px;
|
//}
|
//
|
//::v-deep .el-input__inner {
|
// height: 30px;
|
// line-height: 30px;
|
//}
|
}
|
</style>
|
