修改密码功能
This commit is contained in:
hyt
parent
57d2c04cee
commit
e99bb385b6
|
|
@ -1,197 +1,198 @@
|
|||
<template>
|
||||
<div class="box" v-loading="loading">
|
||||
<el-row :gutter="12" style="height: 100%;">
|
||||
<el-col :span="8" :xs="24">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>个人信息</span>
|
||||
<img src="/images/头像/20230614060011blob" alt="">
|
||||
</div>
|
||||
<div class="box-card-center">
|
||||
<!-- 头像👤 -->
|
||||
<div class="text-center">
|
||||
<userAvatar :user="user" />
|
||||
</div>
|
||||
<ul class="list-group list-group-striped">
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="user" style="margin-right:10px;" />用户名称
|
||||
<div class="pull-right">{{ user.p_PersonName }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="tree" style="margin-right:10px;" />工号
|
||||
<div class="pull-right">{{ user.p_IDCard }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="build" style="margin-right:10px;" />所属部门
|
||||
<div class="pull-right">{{ user.orgainName }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="date" style="margin-right:10px;" />入职日期
|
||||
<div class="pull-right">{{ user.p_EntryTime | timeSplit }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<div class="right">
|
||||
<svg-icon icon-class="date" style="margin-right:10px;width: 5%;" />
|
||||
<span style="width: 96%;">生日</span>
|
||||
<!-- <div class="pull-right">{{ user.p_BirthDay| timeSplit }}</div> -->
|
||||
<el-date-picker class="date-picker" size="mini" v-model="user.p_BirthDay" type="date"
|
||||
:clearable='false' placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="box" v-loading="loading">
|
||||
<el-row :gutter="12" style="height: 100%;">
|
||||
<!-- <el-col :span="8" :xs="24">-->
|
||||
<!-- <el-card class="box-card">-->
|
||||
<!-- <div slot="header" class="clearfix">-->
|
||||
<!-- <span>个人信息</span>-->
|
||||
<!-- <img src="/images/头像/20230614060011blob" alt="">-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="box-card-center">-->
|
||||
<!-- <!– 头像👤 –>-->
|
||||
<!-- <div class="text-center">-->
|
||||
<!-- <userAvatar :user="user" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <ul class="list-group list-group-striped">-->
|
||||
<!-- <li class="list-group-item">-->
|
||||
<!-- <svg-icon icon-class="user" style="margin-right:10px;" />用户名称-->
|
||||
<!-- <div class="pull-right">{{ user.p_PersonName }}</div>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li class="list-group-item">-->
|
||||
<!-- <svg-icon icon-class="tree" style="margin-right:10px;" />工号-->
|
||||
<!-- <div class="pull-right">{{ user.p_IDCard }}</div>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li class="list-group-item">-->
|
||||
<!-- <svg-icon icon-class="build" style="margin-right:10px;" />所属部门-->
|
||||
<!-- <div class="pull-right">{{ user.orgainName }}</div>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li class="list-group-item">-->
|
||||
<!-- <svg-icon icon-class="date" style="margin-right:10px;" />入职日期-->
|
||||
<!-- <div class="pull-right">{{ user.p_EntryTime | timeSplit }}</div>-->
|
||||
<!-- </li>-->
|
||||
<!-- <li class="list-group-item">-->
|
||||
<!-- <div class="right">-->
|
||||
<!-- <svg-icon icon-class="date" style="margin-right:10px;width: 5%;" />-->
|
||||
<!-- <span style="width: 96%;">生日</span>-->
|
||||
<!-- <!– <div class="pull-right">{{ user.p_BirthDay| timeSplit }}</div> –>-->
|
||||
<!-- <el-date-picker class="date-picker" size="mini" v-model="user.p_BirthDay" type="date"-->
|
||||
<!-- :clearable='false' placeholder="选择日期">-->
|
||||
<!-- </el-date-picker>-->
|
||||
<!-- </div>-->
|
||||
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<div class="right">
|
||||
<svg-icon icon-class="phone" style="margin-right:10px;width: 5%;" />
|
||||
<span style="width:96%;">联系电话</span>
|
||||
<el-input class="input" maxlength='11' v-model="user.p_Telphone" size="mini"
|
||||
oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- </li>-->
|
||||
<!-- <li class="list-group-item">-->
|
||||
<!-- <div class="right">-->
|
||||
<!-- <svg-icon icon-class="phone" style="margin-right:10px;width: 5%;" />-->
|
||||
<!-- <span style="width:96%;">联系电话</span>-->
|
||||
<!-- <el-input class="input" maxlength='11' v-model="user.p_Telphone" size="mini"-->
|
||||
<!-- oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>-->
|
||||
<!-- </div>-->
|
||||
<!-- </li>-->
|
||||
<!-- </ul>-->
|
||||
|
||||
<el-button type="primary" size="mini" @click="updateData"
|
||||
style="margin-top: 30px ;position: absolute;right: 0;">更新个人信息</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8" :xs="24">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>修改密码</span>
|
||||
</div>
|
||||
<div class="box-card-pwd">
|
||||
<resetPwd />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!-- <el-button type="primary" size="mini" @click="updateData"-->
|
||||
<!-- style="margin-top: 30px ;position: absolute;right: 0;">更新个人信息</el-button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-card>-->
|
||||
<!-- </el-col>-->
|
||||
<el-col :span="8" :xs="24">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>修改密码</span>
|
||||
</div>
|
||||
<div class="box-card-pwd">
|
||||
<resetPwd/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userAvatar from "./userAvatar";
|
||||
import userInfo from "./userInfo";
|
||||
import resetPwd from "./resetPwd";
|
||||
import userAvatar from './userAvatar'
|
||||
import userInfo from './userInfo'
|
||||
import resetPwd from './resetPwd'
|
||||
import {
|
||||
PersonDetail,
|
||||
PersonSaveData
|
||||
PersonDetail,
|
||||
PersonSaveData
|
||||
} from '@/api/apis/personnelSettings'
|
||||
import {
|
||||
getUserProfile
|
||||
} from "@/api/system/user";
|
||||
getUserProfile
|
||||
} from '@/api/system/user'
|
||||
import {
|
||||
getInfo
|
||||
getInfo
|
||||
} from '@/utils/auth.js'
|
||||
|
||||
export default {
|
||||
name: "Profile",
|
||||
components: {
|
||||
userAvatar,
|
||||
userInfo,
|
||||
resetPwd
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
user: {},
|
||||
roleGroup: {},
|
||||
postGroup: {},
|
||||
activeTab: "resetPwd",
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// this.getUser();
|
||||
this.getPersonData()
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 1500)
|
||||
},
|
||||
filters: {
|
||||
timeSplit(val) {
|
||||
if (!val) {
|
||||
return
|
||||
} else {
|
||||
let time = val.split("T")[0]
|
||||
return time
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUser() {
|
||||
this.user = this.$store.state.user.info.personName ? this.$store.state.user.info : JSON.parse(getInfo())
|
||||
// getUserProfile().then(response => {
|
||||
// this.user = response.data;
|
||||
// this.roleGroup = response.roleGroup;
|
||||
// this.postGroup = response.postGroup;
|
||||
// });
|
||||
},
|
||||
async getPersonData() {
|
||||
let obj = JSON.parse(getInfo())
|
||||
let res = await PersonDetail({
|
||||
id: obj.personID
|
||||
})
|
||||
this.user = res.data[0]
|
||||
},
|
||||
async updateData() {
|
||||
let dataMain = this.user
|
||||
let res = await PersonSaveData({ dataMain })
|
||||
if (res.code == 1) {
|
||||
this.$vmNews('更新资料成功', "success")
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
name: 'Profile',
|
||||
components: {
|
||||
userAvatar,
|
||||
userInfo,
|
||||
resetPwd
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
user: {},
|
||||
roleGroup: {},
|
||||
postGroup: {},
|
||||
activeTab: 'resetPwd',
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.getUser();
|
||||
this.getPersonData()
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 1500)
|
||||
},
|
||||
filters: {
|
||||
timeSplit(val) {
|
||||
if (!val) {
|
||||
return
|
||||
} else {
|
||||
let time = val.split('T')[0]
|
||||
return time
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUser() {
|
||||
this.user = this.$store.state.user.info.personName ? this.$store.state.user.info : JSON.parse(getInfo())
|
||||
// getUserProfile().then(response => {
|
||||
// this.user = response.data;
|
||||
// this.roleGroup = response.roleGroup;
|
||||
// this.postGroup = response.postGroup;
|
||||
// });
|
||||
},
|
||||
async getPersonData() {
|
||||
let obj = JSON.parse(getInfo())
|
||||
let res = await PersonDetail({
|
||||
id: obj.personID
|
||||
})
|
||||
this.user = res.data[0]
|
||||
},
|
||||
async updateData() {
|
||||
let dataMain = this.user
|
||||
let res = await PersonSaveData({ dataMain })
|
||||
if (res.code == 1) {
|
||||
this.$vmNews('更新资料成功', 'success')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
// display: flex;
|
||||
// display: flex;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
.box-card-center {
|
||||
position: relative;
|
||||
height: 415px;
|
||||
}
|
||||
.box-card-center {
|
||||
position: relative;
|
||||
height: 415px;
|
||||
}
|
||||
|
||||
.box-card-pwd {
|
||||
height: 415px;
|
||||
}
|
||||
.box-card-pwd {
|
||||
height: 415px;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.text-center {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC";
|
||||
.list-group-item {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC";
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.right {
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
::v-deep .el-input--mini .el-input__icon {
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
top: -14px;
|
||||
}
|
||||
::v-deep .el-input--mini .el-input__icon {
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
top: -14px;
|
||||
}
|
||||
|
||||
::v-deep .el-input--mini .el-input__inner {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -14px;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
color: #303133
|
||||
}
|
||||
}
|
||||
::v-deep .el-input--mini .el-input__inner {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -14px;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
color: #303133
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,100 +1,124 @@
|
|||
<template>
|
||||
<el-form ref="form" :model="user" :rules="rules" label-width="80px" style="height: 435px;position: relative;">
|
||||
<div>
|
||||
<el-form-item label="旧密码" prop="oldPassword">
|
||||
<el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPassword">
|
||||
<el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPassword">
|
||||
<el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item label="提示:">
|
||||
<span style="color: red;">密码长度大于8位，最好包含字母数字和符号，不要使用纯数字的密码</span>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="position: absolute;right:0;bottom:10px;">
|
||||
<el-button type="primary" size="mini" @click="submit">更新密码</el-button>
|
||||
<el-button type="danger" size="mini" @click="resetForm('form')">清空</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
<el-form ref="form" :model="user" :rules="rules" label-width="80px" style="height: 435px;position: relative;">
|
||||
<div>
|
||||
<el-form-item label="旧密码" prop="oldPassword">
|
||||
<el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPassword">
|
||||
<el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password/>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPassword">
|
||||
<el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
|
||||
</el-form-item>
|
||||
<el-form-item label="提示:">
|
||||
<span style="color: red;">密码长度大于8位，最好包含字母数字和符号，不要使用纯数字的密码</span>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div style="position: absolute;right:0;bottom:10px;">
|
||||
<el-button type="primary" size="mini" @click="submit">更新密码</el-button>
|
||||
<el-button type="danger" size="mini" @click="resetForm('form')">清空</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
userChangePwd
|
||||
} from "@/api/apis/userInformation";
|
||||
userChangePwd
|
||||
} from '@/api/apis/userInformation'
|
||||
import { authApi } from '@/api/apis/auth'
|
||||
import store from '@/store'
|
||||
import route from '@/router'
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const equalToPassword = (rule, value, callback) => {
|
||||
if (this.user.newPassword !== value) {
|
||||
callback(new Error("两次输入的密码不一致"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
user: {
|
||||
oldPassword: undefined,
|
||||
newPassword: undefined,
|
||||
confirmPassword: undefined
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
oldPassword: [{
|
||||
required: true,
|
||||
message: "旧密码不能为空",
|
||||
trigger: "blur"
|
||||
}],
|
||||
newPassword: [{
|
||||
required: true,
|
||||
message: "新密码不能为空",
|
||||
trigger: "blur"
|
||||
},
|
||||
{ min: 8, max: 20, message: "长度在 8 到 20 个字符", trigger: "blur" }
|
||||
],
|
||||
confirmPassword: [{
|
||||
required: true,
|
||||
message: "确认密码不能为空",
|
||||
trigger: "blur"
|
||||
},
|
||||
{
|
||||
required: true,
|
||||
validator: equalToPassword,
|
||||
trigger: "blur"
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
let that = this
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
let params = {
|
||||
id: that.$store.state.user.info.userID,
|
||||
oldpwd: that.user.oldPassword,
|
||||
newpwd: that.user.newPassword
|
||||
}
|
||||
userChangePwd(params).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
for (let i in this.user) {
|
||||
this.user[i] = ""
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.$tab.closePage();
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
}
|
||||
data() {
|
||||
const equalToPassword = (rule, value, callback) => {
|
||||
if (this.user.newPassword !== value) {
|
||||
callback(new Error('两次输入的密码不一致'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
user: {
|
||||
oldPassword: undefined,
|
||||
newPassword: undefined,
|
||||
confirmPassword: undefined
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
oldPassword: [{
|
||||
required: true,
|
||||
message: '旧密码不能为空',
|
||||
trigger: 'blur'
|
||||
}],
|
||||
newPassword: [{
|
||||
required: true,
|
||||
message: '新密码不能为空',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{ min: 8, max: 20, message: '长度在 8 到 20 个字符', trigger: 'blur' }
|
||||
],
|
||||
confirmPassword: [{
|
||||
required: true,
|
||||
message: '确认密码不能为空',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
required: true,
|
||||
validator: equalToPassword,
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
let that = this
|
||||
this.$refs['form'].validate(async(valid) => {
|
||||
if (valid) {
|
||||
//老方法
|
||||
// let params = {
|
||||
// id: that.$store.state.user.info.userID,
|
||||
// oldpwd: that.user.oldPassword,
|
||||
// newpwd: that.user.newPassword
|
||||
// }
|
||||
const res = await authApi('sysUserService', '', 'userResetPassword', '', {
|
||||
OldPassword: that.user.oldPassword,
|
||||
password: that.user.newPassword
|
||||
})
|
||||
if(res.status==='200'){
|
||||
this.$vmNews('修改成功！即将退出登录', 'success')
|
||||
setTimeout(() => {
|
||||
//一键全清当前登录人所有信息 2024 06 06
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
Cookies.remove('automaticLogin')
|
||||
this.$store.commit('REMOVE_ROUTER')
|
||||
this.$store.dispatch('tagsView/delAllViews')
|
||||
this.$router.replace({ path: '/login' })
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
//老方法
|
||||
// userChangePwd(params).then(response => {
|
||||
// this.$modal.msgSuccess("修改成功");
|
||||
// for (let i in this.user) {
|
||||
// this.user[i] = ""
|
||||
// }
|
||||
// });
|
||||
}
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.$tab.closePage()
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue