<template>
|
<el-header class="app-header">
|
<span class="header-title">{{ title }}</span>
|
<div class="header-right">
|
<span class="header-user">
|
<i class="el-icon-user"></i> {{ username }}
|
</span>
|
<el-button type="text" class="header-link" @click="openChangePwd">
|
<i class="el-icon-key"></i> 修改密码
|
</el-button>
|
<el-button type="text" class="header-logout" @click="logout">
|
<i class="el-icon-switch-button"></i> 退出登录
|
</el-button>
|
</div>
|
|
<el-dialog title="修改密码" :visible.sync="pwdDialogVisible" width="420px" @closed="resetPwdForm">
|
<el-form ref="pwdForm" :model="pwdForm" :rules="pwdRules" label-width="90px">
|
<el-form-item label="原密码" prop="oldPassword">
|
<el-input v-model="pwdForm.oldPassword" type="password" show-password placeholder="请输入原密码"></el-input>
|
</el-form-item>
|
<el-form-item label="新密码" prop="newPassword">
|
<el-input v-model="pwdForm.newPassword" type="password" show-password placeholder="至少 6 位"></el-input>
|
</el-form-item>
|
<el-form-item label="确认新密码" prop="confirmPassword">
|
<el-input v-model="pwdForm.confirmPassword" type="password" show-password placeholder="再次输入新密码"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="pwdDialogVisible = false">取消</el-button>
|
<el-button type="primary" :loading="pwdSaving" @click="submitPwd">保存</el-button>
|
</div>
|
</el-dialog>
|
</el-header>
|
</template>
|
|
<script>
|
import api from '@/api'
|
|
export default {
|
name: 'AppHeader',
|
props: {
|
title: { type: String, required: true }
|
},
|
data() {
|
return {
|
pwdDialogVisible: false,
|
pwdSaving: false,
|
pwdForm: { oldPassword: '', newPassword: '', confirmPassword: '' },
|
pwdRules: {
|
oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
|
newPassword: [
|
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
{ min: 6, message: '新密码长度不能少于 6 位', trigger: 'blur' }
|
],
|
confirmPassword: [
|
{ required: true, message: '请再次输入新密码', trigger: 'blur' },
|
{
|
validator: (rule, value, cb) => (value === this.pwdForm.newPassword ? cb() : cb(new Error('两次输入的密码不一致'))),
|
trigger: 'blur'
|
}
|
]
|
}
|
}
|
},
|
computed: {
|
username() {
|
return sessionStorage.getItem('username') || 'admin'
|
}
|
},
|
methods: {
|
openChangePwd() {
|
this.pwdForm = { oldPassword: '', newPassword: '', confirmPassword: '' }
|
this.pwdDialogVisible = true
|
this.$nextTick(() => this.$refs.pwdForm && this.$refs.pwdForm.clearValidate())
|
},
|
resetPwdForm() {
|
this.$refs.pwdForm && this.$refs.pwdForm.clearValidate()
|
},
|
submitPwd() {
|
this.$refs.pwdForm.validate(valid => {
|
if (!valid) return
|
this.pwdSaving = true
|
api.post('/auth/change-password', {
|
oldPassword: this.pwdForm.oldPassword,
|
newPassword: this.pwdForm.newPassword
|
})
|
.then(() => {
|
this.$message.success('密码修改成功')
|
this.pwdDialogVisible = false
|
})
|
.catch(err => {
|
if (err && err._toast) return
|
const d = err && err.response && err.response.data
|
this.$message.error((d && d.message) || '密码修改失败')
|
})
|
.finally(() => { this.pwdSaving = false })
|
})
|
},
|
logout() {
|
this.$confirm('确定退出登录吗？', '提示', {
|
confirmButtonText: '退出',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
sessionStorage.removeItem('token')
|
sessionStorage.removeItem('username')
|
sessionStorage.removeItem('realName')
|
sessionStorage.removeItem('modules')
|
this.$message.success('已退出登录')
|
this.$router.push('/login')
|
}).catch(() => {})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.app-header {
|
background: #409EFF;
|
color: #fff;
|
line-height: 60px;
|
font-size: 18px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 20px;
|
flex-shrink: 0;
|
}
|
.header-right {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
font-size: 14px;
|
line-height: normal;
|
}
|
.header-user { opacity: 0.92; }
|
.header-link { color: #fff; font-size: 14px; padding: 0; }
|
.header-link:hover { color: #ffd04b; }
|
.header-logout { color: #fff; font-size: 14px; padding: 0; }
|
.header-logout:hover { color: #ffd04b; }
|
</style>
|
