hzya
/
middleground_code_v2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改密码功能

This commit is contained in:
hyt 2024-06-05 09:47:30 +08:00
parent 57d2c04cee
commit e99bb385b6
2 changed files with 285 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

339
src/views/systemSettings/userSettings/PersonnelSettings/personalCenter/index.vue
View File

@ -1,197 +1,198 @@
<template> <template>
<div class="box" v-loading="loading"> <div class="box" v-loading="loading">
<el-row :gutter="12" style="height: 100%;"> <el-row :gutter="12" style="height: 100%;">
<el-col :span="8" :xs="24"> <!-- <el-col :span="8" :xs="24">-->
<el-card class="box-card"> <!-- <el-card class="box-card">-->
<div slot="header" class="clearfix"> <!-- <div slot="header" class="clearfix">-->
<span>个人信息</span> <!-- <span>个人信息</span>-->
<img src="/images/头像/20230614060011blob" alt=""> <!-- <img src="/images/头像/20230614060011blob" alt="">-->
</div> <!-- </div>-->
<div class="box-card-center"> <!-- <div class="box-card-center">-->
<!-- 头像👤 --> <!-- &lt;!&ndash; 头像👤 &ndash;&gt;-->
<div class="text-center"> <!-- <div class="text-center">-->
<userAvatar :user="user" /> <!-- <userAvatar :user="user" />-->
</div> <!-- </div>-->
<ul class="list-group list-group-striped"> <!-- <ul class="list-group list-group-striped">-->
<li class="list-group-item"> <!-- <li class="list-group-item">-->
<svg-icon icon-class="user" style="margin-right:10px;" />用户名称 <!-- <svg-icon icon-class="user" style="margin-right:10px;" />用户名称-->
<div class="pull-right">{{ user.p_PersonName }}</div> <!-- <div class="pull-right">{{ user.p_PersonName }}</div>-->
</li> <!-- </li>-->
<li class="list-group-item"> <!-- <li class="list-group-item">-->
<svg-icon icon-class="tree" style="margin-right:10px;" />工号 <!-- <svg-icon icon-class="tree" style="margin-right:10px;" />工号-->
<div class="pull-right">{{ user.p_IDCard }}</div> <!-- <div class="pull-right">{{ user.p_IDCard }}</div>-->
</li> <!-- </li>-->
<li class="list-group-item"> <!-- <li class="list-group-item">-->
<svg-icon icon-class="build" style="margin-right:10px;" />所属部门 <!-- <svg-icon icon-class="build" style="margin-right:10px;" />所属部门-->
<div class="pull-right">{{ user.orgainName }}</div> <!-- <div class="pull-right">{{ user.orgainName }}</div>-->
</li> <!-- </li>-->
<li class="list-group-item"> <!-- <li class="list-group-item">-->
<svg-icon icon-class="date" style="margin-right:10px;" />入职日期 <!-- <svg-icon icon-class="date" style="margin-right:10px;" />入职日期-->
<div class="pull-right">{{ user.p_EntryTime | timeSplit }}</div> <!-- <div class="pull-right">{{ user.p_EntryTime | timeSplit }}</div>-->
</li> <!-- </li>-->
<li class="list-group-item"> <!-- <li class="list-group-item">-->
<div class="right"> <!-- <div class="right">-->
<svg-icon icon-class="date" style="margin-right:10px;width: 5%;" /> <!-- <svg-icon icon-class="date" style="margin-right:10px;width: 5%;" />-->
<span style="width: 96%;">生日</span> <!-- <span style="width: 96%;">生日</span>-->
<!-- <div class="pull-right">{{ user.p_BirthDay| timeSplit }}</div> --> <!-- &lt;!&ndash; <div class="pull-right">{{ user.p_BirthDay| timeSplit }}</div> &ndash;&gt;-->
<el-date-picker class="date-picker" size="mini" v-model="user.p_BirthDay" type="date" <!-- <el-date-picker class="date-picker" size="mini" v-model="user.p_BirthDay" type="date"-->
:clearable='false' placeholder="选择日期"> <!-- :clearable='false' placeholder="选择日期">-->
</el-date-picker> <!-- </el-date-picker>-->
</div> <!-- </div>-->
</li> <!-- </li>-->
<li class="list-group-item"> <!-- <li class="list-group-item">-->
<div class="right"> <!-- <div class="right">-->
<svg-icon icon-class="phone" style="margin-right:10px;width: 5%;" /> <!-- <svg-icon icon-class="phone" style="margin-right:10px;width: 5%;" />-->
<span style="width:96%;">联系电话</span> <!-- <span style="width:96%;">联系电话</span>-->
<el-input class="input" maxlength='11' v-model="user.p_Telphone" size="mini" <!-- <el-input class="input" maxlength='11' v-model="user.p_Telphone" size="mini"-->
oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input> <!-- oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>-->
</div> <!-- </div>-->
</li> <!-- </li>-->
</ul> <!-- </ul>-->
<el-button type="primary" size="mini" @click="updateData" <!-- <el-button type="primary" size="mini" @click="updateData"-->
style="margin-top: 30px ;position: absolute;right: 0;">更新个人信息</el-button> <!-- style="margin-top: 30px ;position: absolute;right: 0;">更新个人信息</el-button>-->
</div> <!-- </div>-->
</el-card> <!-- </el-card>-->
</el-col> <!-- </el-col>-->
<el-col :span="8" :xs="24"> <el-col :span="8" :xs="24">
<el-card class="box-card"> <el-card class="box-card">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>修改密码</span> <span>修改密码</span>
</div> </div>
<div class="box-card-pwd"> <div class="box-card-pwd">
<resetPwd /> <resetPwd/>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import userAvatar from "./userAvatar"; import userAvatar from './userAvatar'
import userInfo from "./userInfo"; import userInfo from './userInfo'
import resetPwd from "./resetPwd"; import resetPwd from './resetPwd'
import { import {
PersonDetail, PersonDetail,
PersonSaveData PersonSaveData
} from '@/api/apis/personnelSettings' } from '@/api/apis/personnelSettings'
import { import {
getUserProfile getUserProfile
} from "@/api/system/user"; } from '@/api/system/user'
import { import {
getInfo getInfo
} from '@/utils/auth.js' } from '@/utils/auth.js'
export default { export default {
name: "Profile", name: 'Profile',
components: { components: {
userAvatar, userAvatar,
userInfo, userInfo,
resetPwd resetPwd
}, },
data() { data() {
return { return {
user: {}, user: {},
roleGroup: {}, roleGroup: {},
postGroup: {}, postGroup: {},
activeTab: "resetPwd", activeTab: 'resetPwd',
loading: false loading: false
}; }
}, },
mounted() { mounted() {
// this.getUser(); // this.getUser();
this.getPersonData() this.getPersonData()
this.loading = true this.loading = true
setTimeout(() => { setTimeout(() => {
this.loading = false this.loading = false
}, 1500) }, 1500)
}, },
filters: { filters: {
timeSplit(val) { timeSplit(val) {
if (!val) { if (!val) {
return return
} else { } else {
let time = val.split("T")[0] let time = val.split('T')[0]
return time return time
} }
} }
}, },
methods: { methods: {
getUser() { getUser() {
this.user = this.$store.state.user.info.personName ? this.$store.state.user.info : JSON.parse(getInfo()) this.user = this.$store.state.user.info.personName ? this.$store.state.user.info : JSON.parse(getInfo())
// getUserProfile().then(response => { // getUserProfile().then(response => {
// this.user = response.data; // this.user = response.data;
// this.roleGroup = response.roleGroup; // this.roleGroup = response.roleGroup;
// this.postGroup = response.postGroup; // this.postGroup = response.postGroup;
// }); // });
}, },
async getPersonData() { async getPersonData() {
let obj = JSON.parse(getInfo()) let obj = JSON.parse(getInfo())
let res = await PersonDetail({ let res = await PersonDetail({
id: obj.personID id: obj.personID
}) })
this.user = res.data[0] this.user = res.data[0]
}, },
async updateData() { async updateData() {
let dataMain = this.user let dataMain = this.user
let res = await PersonSaveData({ dataMain }) let res = await PersonSaveData({ dataMain })
if (res.code == 1) { if (res.code == 1) {
this.$vmNews('更新资料成功', "success") this.$vmNews('更新资料成功', 'success')
} }
} }
} }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.box { .box {
// display: flex; // display: flex;
} }
.box-card { .box-card {
.box-card-center { .box-card-center {
position: relative; position: relative;
height: 415px; height: 415px;
} }
.box-card-pwd { .box-card-pwd {
height: 415px; height: 415px;
} }
.text-center { .text-center {
margin-bottom: 20px; margin-bottom: 20px;
} }
.list-group-item { .list-group-item {
font-size: 14px; font-size: 14px;
color: #606266; color: #606266;
font-family: "Helvetica Neue", Helvetica, "PingFang SC"; font-family: "Helvetica Neue", Helvetica, "PingFang SC";
} }
.right { .right {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
position: relative; position: relative;
::v-deep .el-input--mini .el-input__icon { ::v-deep .el-input--mini .el-input__icon {
position: absolute; position: absolute;
text-align: right; text-align: right;
top: -14px; top: -14px;
} }
::v-deep .el-input--mini .el-input__inner { ::v-deep .el-input--mini .el-input__inner {
position: absolute; position: absolute;
right: 0; right: 0;
top: -14px; top: -14px;
width: 100%; width: 100%;
text-align: right; text-align: right;
padding: 0; padding: 0;
font-size: 13px; font-size: 13px;
color: #303133 color: #303133
} }
} }
} }
</style> </style>

206
src/views/systemSettings/userSettings/PersonnelSettings/personalCenter/resetPwd.vue
View File

@ -1,100 +1,124 @@
<template> <template>
<el-form ref="form" :model="user" :rules="rules" label-width="80px" style="height: 435px;position: relative;"> <el-form ref="form" :model="user" :rules="rules" label-width="80px" style="height: 435px;position: relative;">
<div> <div>
<el-form-item label="旧密码" prop="oldPassword"> <el-form-item label="旧密码" prop="oldPassword">
<el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password /> <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
</el-form-item> </el-form-item>
<el-form-item label="新密码" prop="newPassword"> <el-form-item label="新密码" prop="newPassword">
<el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password /> <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password/>
</el-form-item> </el-form-item>
<el-form-item label="确认密码" prop="confirmPassword"> <el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password /> <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
</el-form-item> </el-form-item>
<el-form-item label="提示:"> <el-form-item label="提示:">
<span style="color: red;">密码长度大于8位，最好包含字母数字和符号，不要使用纯数字的密码</span> <span style="color: red;">密码长度大于8位，最好包含字母数字和符号，不要使用纯数字的密码</span>
</el-form-item> </el-form-item>
</div> </div>
<div style="position: absolute;right:0;bottom:10px;"> <div style="position: absolute;right:0;bottom:10px;">
<el-button type="primary" size="mini" @click="submit">更新密码</el-button> <el-button type="primary" size="mini" @click="submit">更新密码</el-button>
<el-button type="danger" size="mini" @click="resetForm('form')">清空</el-button> <el-button type="danger" size="mini" @click="resetForm('form')">清空</el-button>
</div> </div>
</el-form> </el-form>
</template> </template>
<script> <script>
import { import {
userChangePwd userChangePwd
} from "@/api/apis/userInformation"; } 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 { export default {
data() { data() {
const equalToPassword = (rule, value, callback) => { const equalToPassword = (rule, value, callback) => {
if (this.user.newPassword !== value) { if (this.user.newPassword !== value) {
callback(new Error("两次输入的密码不一致")); callback(new Error('两次输入的密码不一致'))
} else { } else {
callback(); callback()
} }
}; }
return { return {
user: { user: {
oldPassword: undefined, oldPassword: undefined,
newPassword: undefined, newPassword: undefined,
confirmPassword: undefined confirmPassword: undefined
}, },
// 表单校验 // 表单校验
rules: { rules: {
oldPassword: [{ oldPassword: [{
required: true, required: true,
message: "旧密码不能为空", message: '旧密码不能为空',
trigger: "blur" trigger: 'blur'
}], }],
newPassword: [{ newPassword: [{
required: true, required: true,
message: "新密码不能为空", message: '新密码不能为空',
trigger: "blur" trigger: 'blur'
}, },
{ min: 8, max: 20, message: "长度在 8 到 20 个字符", trigger: "blur" } { min: 8, max: 20, message: '长度在 8 到 20 个字符', trigger: 'blur' }
], ],
confirmPassword: [{ confirmPassword: [{
required: true, required: true,
message: "确认密码不能为空", message: '确认密码不能为空',
trigger: "blur" trigger: 'blur'
}, },
{ {
required: true, required: true,
validator: equalToPassword, validator: equalToPassword,
trigger: "blur" trigger: 'blur'
} }
] ]
} }
}; }
}, },
methods: { methods: {
submit() { submit() {
let that = this let that = this
this.$refs["form"].validate(valid => { this.$refs['form'].validate(async(valid) => {
if (valid) { if (valid) {
let params = { //老方法
id: that.$store.state.user.info.userID, // let params = {
oldpwd: that.user.oldPassword, // id: that.$store.state.user.info.userID,
newpwd: that.user.newPassword // oldpwd: that.user.oldPassword,
} // newpwd: that.user.newPassword
userChangePwd(params).then(response => { // }
this.$modal.msgSuccess("修改成功"); const res = await authApi('sysUserService', '', 'userResetPassword', '', {
for (let i in this.user) { OldPassword: that.user.oldPassword,
this.user[i] = "" password: that.user.newPassword
} })
}); if(res.status==='200'){
} this.$vmNews('修改成功！即将退出登录', 'success')
}); setTimeout(() => {
}, //一键全清当前登录人所有信息 2024 06 06
close() { this.$store.dispatch('LogOut').then(() => {
this.$tab.closePage(); Cookies.remove('automaticLogin')
}, this.$store.commit('REMOVE_ROUTER')
resetForm(formName) { this.$store.dispatch('tagsView/delAllViews')
this.$refs[formName].resetFields(); 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> </script>