<template>
|
<div class="nav-header">
|
<div class="logo-and-title">
|
<img
|
class="side-logo"
|
src="~@/assets/images/img.png"
|
alt="sidebar-logo"
|
/>
|
<span style="color: #607D8B; font-size: 26px;">{{
|
$store.state.projectName
|
}}</span>
|
</div>
|
<div class="right">
|
<div style="float: right; color: #262626; margin-right: 35px;">
|
<el-dropdown trigger="click" @command="handleCommand">
|
<span class="el-dropdown-link">
|
<i class="el-icon-user"></i>
|
{{ $store.state.name }}
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
</span>
|
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="changePassword">
|
<i class="el-icon-edit"></i>修改密码
|
</el-dropdown-item>
|
<el-dropdown-item divided command="logout">
|
<i class="el-icon-switch-button"></i>注销登录
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
|
<!-- 密码修改弹窗 -->
|
<el-dialog
|
title="修改密码"
|
:visible.sync="passwordDialogVisible"
|
width="30%"
|
:modal="false"
|
:lock-scroll="false"
|
:close-on-click-modal="false"
|
>
|
<el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm">
|
<el-form-item prop="old_password">
|
<el-input
|
v-model="passwordForm.old_password"
|
type="password"
|
placeholder="请输入旧密码"
|
show-password
|
></el-input>
|
</el-form-item>
|
<el-form-item prop="new_password">
|
<el-input
|
v-model="passwordForm.new_password"
|
type="password"
|
placeholder="请输入新密码（至少6位）"
|
show-password
|
></el-input>
|
</el-form-item>
|
<el-form-item prop="confirm_password">
|
<el-input
|
v-model="passwordForm.confirm_password"
|
type="password"
|
placeholder="请确认新密码"
|
show-password
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<span slot="footer">
|
<el-button @click="passwordDialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="submitPasswordChange">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { changePassword } from '@/api/user'
|
|
export default {
|
data() {
|
const validateConfirm = (rule, value, callback) => {
|
if (value !== this.passwordForm.new_password) {
|
callback(new Error('两次输入密码不一致!'));
|
} else {
|
callback();
|
}
|
};
|
|
return {
|
passwordDialogVisible: false,
|
passwordForm: {
|
old_password: '',
|
new_password: '',
|
confirm_password: ''
|
},
|
passwordRules: {
|
old_password: [
|
{ required: true, message: '请输入旧密码', trigger: 'blur' }
|
],
|
new_password: [
|
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
{ min: 6, message: '密码长度至少6位', trigger: 'blur' }
|
],
|
confirm_password: [
|
{ required: true, message: '请确认新密码', trigger: 'blur' },
|
{ validator: validateConfirm, trigger: 'blur' }
|
]
|
}
|
}
|
},
|
methods: {
|
handleCommand(command) {
|
if (command === 'changePassword') {
|
// 重置表单数据和验证状态
|
this.passwordForm = {
|
old_password: '',
|
new_password: '',
|
confirm_password: ''
|
}
|
this.$nextTick(() => {
|
if (this.$refs.passwordForm) {
|
this.$refs.passwordForm.clearValidate()
|
}
|
})
|
this.passwordDialogVisible = true
|
} else if (command === 'logout') {
|
this.$store.commit("isLogin", null);
|
this.setLocalValue("token", null);
|
this.setLocalValue("is_superuser", false);
|
this.setLocalValue("show_hosts", false);
|
this.$store.commit("setProjectName", "");
|
this.$router.push({ name: "Login" });
|
}
|
},
|
submitPasswordChange() {
|
this.$refs.passwordForm.validate(valid => {
|
if (valid) {
|
this.$loading({ text: '正在修改密码...' })
|
changePassword(this.passwordForm)
|
.then(res => {
|
this.$loading().close()
|
if (res.code === "0000") {
|
this.$message.success('密码修改成功，请重新登录')
|
this.passwordDialogVisible = false
|
// 重置表单数据
|
this.passwordForm = {
|
old_password: '',
|
new_password: '',
|
confirm_password: ''
|
}
|
localStorage.removeItem('token')
|
localStorage.removeItem('user')
|
// 添加100ms延迟确保状态清除完成
|
setTimeout(() => {
|
this.$router.push({ path: '/lunarlink/login' })
|
}, 100)
|
} else {
|
this.$message.error(res.msg || '密码修改失败')
|
}
|
})
|
.catch(error => {
|
this.$loading().close()
|
const errorMsg = (error.response && error.response.data && error.response.data.msg) || '请求失败，请稍后重试'
|
this.$message.error(errorMsg)
|
})
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.right {
|
position: fixed;
|
left: 300px;
|
right: 0;
|
top: 0;
|
}
|
|
.right div a:hover {
|
color: darkcyan;
|
}
|
|
.nav-header {
|
position: fixed;
|
left: 0;
|
right: 0;
|
z-index: 100;
|
background: #ffffff;
|
margin: 0 auto;
|
font-size: 14px;
|
width: 100%;
|
height: 49px;
|
line-height: 49px;
|
}
|
|
.side-logo {
|
width: 100px;
|
height: 36px;
|
padding-left: 10px;
|
vertical-align: top;
|
}
|
|
.logo-and-title {
|
display: flex;
|
align-items: center;
|
}
|
|
.a-text {
|
margin-right: 10px;
|
font-size: 15px;
|
color: #d9d9d9;
|
}
|
/* 确保下拉菜单样式 */
|
.el-dropdown-link {
|
cursor: pointer;
|
color: #409EFF;
|
padding: 0 15px;
|
}
|
</style>
|
