<template>
|
<b-navbar
|
toggleable="lg"
|
:variant="getLayoutNavbarBg()"
|
class="layout-navbar align-items-lg-center container-x"
|
>
|
<!-- Brand demo (see demo.css) -->
|
<b-navbar-brand to="/" class="app-brand demo d-lg-none py-0 mr-4">
|
<!-- <span class="app-brand-logo demo">
|
<img src="/static/img/logo.png" width="100%" alt="">
|
</span>-->
|
<!-- <span class="app-brand-text demo font-weight-normal ml-2">{{$store.state.projectTitle}}</span> -->
|
<h4 class="app-brand-text ml-2 my-0 font-weight-bold">{{$store.state.projectTitle}}</h4>
|
</b-navbar-brand>
|
|
<!-- Sidenav toggle (see demo.css) -->
|
<b-navbar-nav
|
class="layout-sidenav-toggle d-lg-none align-items-lg-center mr-auto"
|
v-if="sidenavToggle"
|
>
|
<a class="nav-item nav-link px-0 mr-lg-4" href="javascript:void(0)" @click="toggleSidenav">
|
<i class="ion ion-md-menu text-large align-middle"/>
|
</a>
|
</b-navbar-nav>
|
|
<b-navbar-toggle target="app-layout-navbar"></b-navbar-toggle>
|
|
<b-collapse is-nav id="app-layout-navbar">
|
<!-- Divider -->
|
<hr class="d-lg-none w-100 my-2">
|
|
<b-navbar-nav class="align-items-lg-center ml-auto">
|
<!-- end -->
|
<quick-menu-button/>
|
<!-- -->
|
<b-nav-item-dropdown :right="!isRTL" class="demo-navbar-user">
|
<template slot="button-content">
|
<span class="d-inline-flex flex-lg-row-reverse align-items-center align-middle">
|
<div class="headImgUrl flex-center bg-white">
|
<httpImg
|
:propNoneImg="require('@/assets/img/user.png')"
|
:src="userInfo.headImgUrl"
|
width="100%"
|
alt
|
/>
|
</div>
|
<span class="px-1 mr-lg-2 ml-2 ml-lg-0">{{userInfo.username}}</span>
|
</span>
|
</template>
|
|
<b-dd-item @click="$refs.myModalRef.show()">
|
<i class="fas fa-user-edit text-danger"></i> 修改密码
|
</b-dd-item>
|
<b-dd-item @click="toLogout">
|
<i class="ion ion-ios-log-out text-danger"></i> 退 出
|
</b-dd-item>
|
</b-nav-item-dropdown>
|
</b-navbar-nav>
|
</b-collapse>
|
<!-- 密码修改 -->
|
<b-modal
|
title="修改密码"
|
ref="myModalRef"
|
ok-title="保存"
|
@ok="submitForm"
|
@cancel="resetForm"
|
cancel-title="取消"
|
size="sm"
|
:no-close-on-backdrop="true"
|
>
|
<el-form :model="ruleForm" status-icon :rules="rules2" ref="ruleForm" label-width="100px">
|
<el-form-item label="旧密码" prop="oldPass">
|
<el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="新密码" prop="newPass">
|
<el-input type="password" v-model="ruleForm.newPass" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="确认新密码" prop="checkPass">
|
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-form>
|
</b-modal>
|
</b-navbar>
|
</template>
|
|
<script>
|
import { logout, editPassword } from '@/server/login.js'
|
import quickMenu from '@/components/quickMenu'
|
import quickMenuButton from '@/components/quickMenuButton'
|
import { Form, FormItem, Input } from 'element-ui'
|
export default {
|
name: 'app-layout-navbar',
|
props: {
|
sidenavToggle: {
|
type: Boolean,
|
default: true
|
}
|
},
|
|
data() {
|
var validatePass = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请输入密码'))
|
} else {
|
if (this.ruleForm.checkPass !== '') {
|
this.$refs.ruleForm.validateField('checkPass')
|
}
|
callback()
|
}
|
}
|
var validatePass2 = (rule, value, callback) => {
|
if (value === '') {
|
callback(new Error('请再次输入密码'))
|
} else if (value !== this.ruleForm.newPass) {
|
callback(new Error('两次输入密码不一致!'))
|
} else {
|
callback()
|
}
|
}
|
return {
|
userInfo: {
|
username: 'admin',
|
headImgUrl: ''
|
},
|
ruleForm: {
|
oldPass: '',
|
newPass: '',
|
checkPass: ''
|
},
|
rules2: {
|
oldPass: [
|
{ required: true, message: '请输入旧密码', trigger: 'blur' }
|
// { min: 6, message: '密码长度不得小于6个字符', trigger: 'blur' }
|
],
|
newPass: [
|
{ required: true, validator: validatePass, trigger: 'blur' }
|
// { min: 6, message: '密码长度不得小于6个字符', trigger: 'blur' }
|
],
|
checkPass: [
|
{ required: true, validator: validatePass2, trigger: 'blur' }
|
// { min: 6, message: '密码长度不得小于6个字符', trigger: 'blur' }
|
]
|
}
|
}
|
},
|
computed: {
|
orgId() {
|
return this.$store.getters.basicUserInfo.orgId
|
},
|
userId() {
|
return this.$store.getters.basicUserInfo.id
|
}
|
},
|
methods: {
|
toggleSidenav() {
|
this.layoutHelpers.toggleCollapsed()
|
},
|
|
getLayoutNavbarBg() {
|
return this.layoutNavbarBg
|
},
|
|
toLogout() {
|
this.$swal(
|
{
|
title: '确定退出吗？',
|
text: '你将要离开当前页面！',
|
type: 'warning',
|
showCancelButton: true,
|
allowOutsideClick: true,
|
// confirmButtonColor: '#d9534f',
|
confirmButtonText: '确定离开！',
|
cancelButtonText: '取消',
|
closeOnConfirm: true
|
},
|
() => {
|
logout()
|
}
|
)
|
},
|
submitForm(e) {
|
e.preventDefault()
|
this.$refs.ruleForm.validate(valid => {
|
if (valid) {
|
this.editPassword({
|
id: this.userId,
|
orgId: this.orgId,
|
oldPassword: this.ruleForm.oldPass,
|
newPassword: this.ruleForm.newPass
|
})
|
} else {
|
console.log('error submit!!')
|
return false
|
}
|
})
|
},
|
resetForm(formName) {
|
this.$refs.ruleForm.resetFields()
|
},
|
async editPassword(json) {
|
let res = await editPassword(json)
|
|
if (res && res.success) {
|
this.$refs.myModalRef.hide()
|
this.$toast({
|
type: 'success',
|
message: '修改成功将会为您退出系统，请重新登陆'
|
})
|
setTimeout(() => {
|
logout()
|
}, 1000)
|
} else {
|
this.$toast({
|
type: res && res.success ? 'success' : 'error',
|
message: res && res.msg ? res.msg : '修改失败'
|
})
|
}
|
}
|
},
|
|
created() {
|
if (
|
sessionStorage.getItem('userInfo') &&
|
sessionStorage.getItem('userInfo') !== ''
|
) {
|
this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
|
}
|
},
|
components: {
|
quickMenu,
|
quickMenuButton,
|
elForm: Form,
|
elFormItem: FormItem,
|
elInput: Input
|
}
|
}
|
</script>
|
<style>
|
.headImgUrl {
|
height: 24px;
|
width: 24px;
|
overflow: hidden;
|
border-radius: 25px;
|
}
|
</style>
|
