Files
laws_weilai/jero-web/src/components/tools/UserPassword.vue
T
2021-12-31 11:35:09 +08:00

158 lines
4.4 KiB
Java
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<a-modal
:title="title"
:width="modalWidth"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭"
>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="旧密码">
<a-input type="password" placeholder="请输入旧密码" v-decorator="[ 'oldpassword', validatorRules.oldpassword]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="新密码">
<a-input type="password" placeholder="请输入新密码" v-decorator="[ 'password', validatorRules.password]" />
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="确认新密码">
<a-input type="password" @blur="handleConfirmBlur" placeholder="请确认新密码" v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"/>
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import { putAction } from '@/api/manage'
export default {
name: "UserPassword",
data () {
return {
title:"修改密码",
modalWidth:800,
visible: false,
confirmLoading: false,
validatorRules:{
oldpassword:{
rules: [{
required: true, message: '请输入旧密码!',
}],
},
password:{
rules: [
{ required: true, message: '请输入新密码!' },
{ pattern:/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/, message: '密码由8位数字、大小写字母和特殊符号组成!'},
{ validator: this.validateToNextPassword }
]
},
confirmpassword:{
rules: [
{ required: true, message: '请确认新密码!' },
{ pattern:/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/, message: '密码由8位数字大小写字母和特殊符号组成!'},
{ validator: this.validateToNextPassword }
]
}
},
confirmDirty:false,
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
form:this.$form.createForm(this),
url: "sys/user/updatePassword",
username:"",
}
},
methods: {
show(uname){
if(!uname){
this.$message.warning("当前系统无登录用户!");
return
}else{
this.username = uname
this.form.resetFields();
this.visible = true;
}
},
handleCancel () {
this.close()
},
close () {
this.$emit('close');
this.visible = false;
this.disableSubmit = false;
this.selectedRole = [];
},
handleOk () {
const that = this;
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
that.confirmLoading = true;
let params = Object.assign({username:this.username},values)
console.log("修改密码提交数据",params)
putAction(this.url,params).then((res)=>{
if(res.success){
console.log(res)
that.$message.success(res.message);
that.close();
}else{
that.$message.warning(res.message);
}
}).finally(() => {
that.confirmLoading = false;
})
}
})
},
validateToNextPassword (rule, value, callback) {
const form = this.form;
if (value && this.confirmDirty) {
form.validateFields(['confirm'], { force: true })
}
callback();
},
compareToFirstPassword (rule, value, callback) {
const form = this.form;
if (value && value !== form.getFieldValue('password')) {
callback('两次输入的密码不一样');
} else {
callback()
}
},
handleConfirmBlur (e) {
const value = e.target.value
this.confirmDirty = this.confirmDirty || !!value
}
}
}
</script>
<style scoped>
</style>