290 lines
9.5 KiB
Vue
290 lines
9.5 KiB
Vue
<template>
|
|
<d2-container class="page">
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
<el-tab-pane label="用户设置" name="userInfo">
|
|
<el-row :gutter="20">
|
|
<el-col :span="10" :offset="6">
|
|
<el-form
|
|
ref="userInfoForm"
|
|
label-width="100px"
|
|
:model="userInfo"
|
|
required-asterisk
|
|
:rules="userInforules"
|
|
:label-position="position"
|
|
center
|
|
>
|
|
<el-form-item prop="avatar" label="头像">
|
|
<d2p-cropper-uploader :value="userInfo.avatar || '/image/avatar.png'" @input="handleAvatarSuccess"/>
|
|
</el-form-item>
|
|
<el-form-item prop="username" label="账号">
|
|
<el-input v-model="userInfo.username" disabled></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="name" required label="昵称">
|
|
<el-input v-model="userInfo.name" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="电话号码" required prop="mobile">
|
|
<el-input v-model="userInfo.mobile" clearable disabled></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="邮箱" prop="email">
|
|
<el-input v-model="userInfo.email" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="性別" prop="gender">
|
|
<el-radio-group v-model="userInfo.gender">
|
|
<el-radio :label="1">男</el-radio>
|
|
<el-radio :label="0">女</el-radio>
|
|
<el-radio :label="-1">未知</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="用户名" prop="dept">
|
|
<el-input :value="userInfo.username" clearable disabled></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="所属部门" prop="dept">
|
|
<el-input :value="userInfo.dept_info && userInfo.dept_info.dept_name" clearable disabled></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="当前角色" prop="role">
|
|
<el-select :value="userInfo.role" multiple placeholder="请选择" disabled size="mini" style="width: 100%;">
|
|
<el-option
|
|
v-for="item in userInfo.role_info"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button @click="updateInfo" type="primary">
|
|
<i class="fa fa-check"></i>
|
|
更新
|
|
</el-button>
|
|
<el-button @click="resetForm('info')" type="info">
|
|
<i class="fa fa-reply-all"></i>
|
|
重置
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-col>
|
|
</el-row>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="密码设置" name="passwrod">
|
|
<el-row :gutter="20">
|
|
<el-col :span="10" :offset="6">
|
|
<el-form
|
|
ref="userPasswordForm"
|
|
:model="userPasswordInfo"
|
|
required-asterisk
|
|
label-width="100px"
|
|
:label-position="position"
|
|
:rules="passwordRules"
|
|
center
|
|
>
|
|
<el-form-item label="原密码" required prop="oldPassword">
|
|
<el-input
|
|
v-model="userPasswordInfo.oldPassword"
|
|
placeholder="请输入原始密码"
|
|
clearable
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item required prop="newPassword" label="新密码">
|
|
<el-input
|
|
type="password"
|
|
v-model="userPasswordInfo.newPassword"
|
|
placeholder="请输入新密码"
|
|
clearable
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item required prop="newPassword2" label="确认密码">
|
|
<el-input
|
|
type="password"
|
|
v-model="userPasswordInfo.newPassword2"
|
|
placeholder="请再次输入新密码"
|
|
clearable
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="settingPassword">
|
|
<i class="fa fa-check"></i>提交
|
|
</el-button>
|
|
<el-button @click="resetForm('passwordForm')" type="info">
|
|
<i class="fa fa-reply-all"></i>重置
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-col>
|
|
</el-row>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</d2-container>
|
|
</template>
|
|
<script>
|
|
import util from '@/libs/util.js'
|
|
import { request } from '@/api/service'
|
|
import { mapActions } from 'vuex'
|
|
export default {
|
|
name: 'userInfo',
|
|
data () {
|
|
var validatePass = (rule, value, callback) => {
|
|
const pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}')
|
|
if (value === '') {
|
|
callback(new Error('请输入密码'))
|
|
} else if (value === this.userPasswordInfo.oldPassword) {
|
|
callback(new Error('原密码与新密码一致'))
|
|
} else if (!pwdRegex.test(value)) {
|
|
callback(new Error('您的密码复杂度太低(密码中必须包含字母、数字)'))
|
|
} else {
|
|
if (this.userPasswordInfo.newPassword2 !== '') {
|
|
this.$refs.userPasswordForm.validateField('newPassword2')
|
|
}
|
|
callback()
|
|
}
|
|
}
|
|
var validatePass2 = (rule, value, callback) => {
|
|
if (value === '') {
|
|
callback(new Error('请再次输入密码'))
|
|
} else if (value !== this.userPasswordInfo.newPassword) {
|
|
callback(new Error('两次输入密码不一致!'))
|
|
} else {
|
|
callback()
|
|
}
|
|
}
|
|
return {
|
|
position: 'left',
|
|
activeName: 'userInfo',
|
|
action: util.baseURL() + 'api/system/file/',
|
|
headers: {
|
|
Authorization: 'JWT ' + util.cookies.get('token')
|
|
},
|
|
fileList: [],
|
|
userInfo: {
|
|
name: '',
|
|
gender: '',
|
|
mobile: '',
|
|
avatar: '',
|
|
email: ''
|
|
},
|
|
userInforules: {
|
|
name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
|
|
mobile: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确手机号' }]
|
|
},
|
|
userPasswordInfo: {
|
|
oldPassword: '',
|
|
newPassword: '',
|
|
newPassword2: ''
|
|
},
|
|
passwordRules: {
|
|
oldPassword: [
|
|
{
|
|
required: true,
|
|
message: '请输入原密码',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
newPassword: [{ validator: validatePass, trigger: 'blur' }],
|
|
newPassword2: [{ validator: validatePass2, trigger: 'blur' }]
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
this.getCurrentUserInfo()
|
|
},
|
|
methods: {
|
|
...mapActions('d2admin/account', ['logout']),
|
|
/**
|
|
* 获取当前用户信息
|
|
*/
|
|
getCurrentUserInfo () {
|
|
const _self = this
|
|
return request({
|
|
url: '/api/system/user/user_info/',
|
|
method: 'get',
|
|
params: {}
|
|
}).then((res) => {
|
|
_self.userInfo = res.data
|
|
})
|
|
},
|
|
/**
|
|
* 更新用户信息
|
|
*/
|
|
updateInfo () {
|
|
const _self = this
|
|
|
|
_self.$refs.userInfoForm.validate((valid) => {
|
|
if (valid) {
|
|
const userInfo = _self.userInfo
|
|
delete userInfo.role
|
|
request({
|
|
url: '/api/system/user/update_user_info/',
|
|
method: 'put',
|
|
data: userInfo
|
|
}).then((res) => {
|
|
_self.$message.success('修改成功')
|
|
_self.getCurrentUserInfo()
|
|
})
|
|
} else {
|
|
// 校验失败
|
|
// 登录表单校验失败
|
|
this.$message.error('表单校验失败，请检查')
|
|
}
|
|
})
|
|
},
|
|
// 重置
|
|
resetForm (name) {
|
|
const _self = this
|
|
if (name === 'info') {
|
|
_self.getCurrentUserInfo()
|
|
} else {
|
|
_self.userPasswordForm = {}
|
|
}
|
|
},
|
|
// tab切换
|
|
handleClick (tab, event) {
|
|
const _self = this
|
|
if (tab.paneName === 'userInfo') {
|
|
_self.$refs.userPasswordForm.resetFields()
|
|
_self.getCurrentUserInfo()
|
|
} else {
|
|
_self.$refs.userInfoForm.resetFields()
|
|
}
|
|
},
|
|
/**
|
|
* 重新设置密码
|
|
*/
|
|
settingPassword () {
|
|
const _self = this
|
|
|
|
_self.$refs.userPasswordForm.validate((valid) => {
|
|
if (valid) {
|
|
const userId = util.cookies.get('uuid')
|
|
if (userId) {
|
|
const params = JSON.parse(JSON.stringify(_self.userPasswordInfo))
|
|
params.oldPassword = _self.$md5(params.oldPassword)
|
|
params.newPassword = _self.$md5(params.newPassword)
|
|
params.newPassword2 = _self.$md5(params.newPassword2)
|
|
request({
|
|
url: '/api/system/user/' + userId + '/change_password/',
|
|
method: 'put',
|
|
data: params
|
|
}).then((res) => {
|
|
_self.activeName = 'userInfo'
|
|
_self.$message.success('修改成功')
|
|
_self.logout({})
|
|
})
|
|
}
|
|
} else {
|
|
// 校验失败
|
|
// 登录表单校验失败
|
|
this.$message.error('表单校验失败，请检查')
|
|
}
|
|
})
|
|
},
|
|
/**
|
|
* 头像上传
|
|
* @param res
|
|
* @param file
|
|
*/
|
|
handleAvatarSuccess (res, file) {
|
|
this.userInfo.avatar = res
|
|
}
|
|
}
|
|
}
|
|
</script>
|