<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: '请输入新密码!', }, { validator: this.validateToNextPassword, }], }, confirmpassword:{ rules: [{ required: true, message: '请确认新密码!', }, { validator: this.compareToFirstPassword, }], } }, 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>