| | |
| | | <a-input placeholder="请输入用户账号" v-decorator="[ 'username', {}]" :readOnly="true"/> |
| | | </a-form-item> |
| | | |
| | | <a-form-item label="登录密码" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback > |
| | | <a-input type="password" placeholder="请输入登录密码" v-decorator="[ 'password', validatorRules.password]" /> |
| | | <a-form-item label="登录密码" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback> |
| | | <a-input type="password" placeholder="请输入登录密码" v-decorator="[ 'password', validatorRules.password]"/> |
| | | </a-form-item> |
| | | |
| | | <a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback > |
| | | <a-input type="password" @blur="handleConfirmBlur" placeholder="请重新输入登录密码" v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"/> |
| | | <a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol" hasFeedback> |
| | | <a-input type="password" @blur="handleConfirmBlur" placeholder="请重新输入登录密码" |
| | | v-decorator="[ 'confirmpassword', validatorRules.confirmpassword]"/> |
| | | </a-form-item> |
| | | |
| | | </a-form> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import {changePassword} from '@/api/api' |
| | | import { changePassword } from '@/api/api' |
| | | |
| | | export default { |
| | | name: "PasswordModal", |
| | | data () { |
| | | return { |
| | | visible: false, |
| | | confirmLoading: false, |
| | | confirmDirty: false, |
| | | validatorRules:{ |
| | | password:{ |
| | | rules: [{ |
| | | export default { |
| | | name: 'PasswordModal', |
| | | data() { |
| | | return { |
| | | visible: false, |
| | | confirmLoading: false, |
| | | confirmDirty: false, |
| | | validatorRules: { |
| | | password: { |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | pattern:/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/, |
| | | message: '密码由8位数字、大小写字母和特殊符号组成!' |
| | | }, { |
| | | validator: this.validateToNextPassword, |
| | | }], |
| | | }, |
| | | confirmpassword:{ |
| | | rules: [{ |
| | | required: true, message: '请重新输入登录密码!', |
| | | }, { |
| | | validator: this.compareToFirstPassword, |
| | | }], |
| | | }, |
| | | // pattern:/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/, |
| | | message: '请输入登录密码!' |
| | | }, |
| | | { |
| | | validator: this.validateToNextPassword |
| | | }] |
| | | }, |
| | | confirmpassword: { |
| | | rules: [{ |
| | | required: true, message: '请重新输入登录密码!' |
| | | }, { |
| | | validator: this.compareToFirstPassword |
| | | }] |
| | | } |
| | | }, |
| | | |
| | | model: {}, |
| | | model: {}, |
| | | |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 5 }, |
| | | }, |
| | | wrapperCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 16 }, |
| | | }, |
| | | form:this.$form.createForm(this) |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 5 } |
| | | }, |
| | | wrapperCol: { |
| | | xs: { span: 24 }, |
| | | sm: { span: 16 } |
| | | }, |
| | | form: this.$form.createForm(this) |
| | | } |
| | | }, |
| | | created() { |
| | | console.log('created') |
| | | }, |
| | | |
| | | methods: { |
| | | show(username) { |
| | | this.form.resetFields() |
| | | this.visible = true |
| | | this.model.username = username |
| | | this.$nextTick(() => { |
| | | this.form.setFieldsValue({ username: username }) |
| | | }) |
| | | }, |
| | | close() { |
| | | this.$emit('close') |
| | | this.visible = false |
| | | this.disableSubmit = false |
| | | this.selectedRole = [] |
| | | }, |
| | | handleSubmit() { |
| | | // 触发表单验证 |
| | | this.form.validateFields((err, values) => { |
| | | if (!err) { |
| | | this.confirmLoading = true |
| | | let formData = Object.assign(this.model, values) |
| | | changePassword(formData).then((res) => { |
| | | if (res.success) { |
| | | this.$message.success(res.message) |
| | | this.$emit('ok') |
| | | } else { |
| | | this.$message.warning(res.message) |
| | | } |
| | | }).finally(() => { |
| | | this.confirmLoading = false |
| | | this.close() |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | handleCancel() { |
| | | this.close() |
| | | }, |
| | | validateToNextPassword(rule, value, callback) { |
| | | const form = this.form |
| | | const confirmpassword = form.getFieldValue('confirmpassword') |
| | | console.log('confirmpassword==>', confirmpassword) |
| | | if (value && confirmpassword && value !== confirmpassword) { |
| | | callback('两次输入的密码不一样!') |
| | | } |
| | | 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() |
| | | } |
| | | }, |
| | | created () { |
| | | console.log("created"); |
| | | }, |
| | | |
| | | methods: { |
| | | show (username) { |
| | | this.form.resetFields(); |
| | | this.visible = true; |
| | | this.model.username = username; |
| | | this.$nextTick(() => { |
| | | this.form.setFieldsValue({username:username}); |
| | | }); |
| | | }, |
| | | close () { |
| | | this.$emit('close'); |
| | | this.visible = false; |
| | | this.disableSubmit = false; |
| | | this.selectedRole = []; |
| | | }, |
| | | handleSubmit () { |
| | | // 触发表单验证 |
| | | this.form.validateFields((err, values) => { |
| | | if (!err) { |
| | | this.confirmLoading = true; |
| | | let formData = Object.assign(this.model, values); |
| | | changePassword(formData).then((res)=>{ |
| | | if(res.success){ |
| | | this.$message.success(res.message); |
| | | this.$emit('ok'); |
| | | }else{ |
| | | this.$message.warning(res.message); |
| | | } |
| | | }).finally(() => { |
| | | this.confirmLoading = false; |
| | | this.close(); |
| | | }); |
| | | } |
| | | }) |
| | | }, |
| | | handleCancel () { |
| | | this.close() |
| | | }, |
| | | validateToNextPassword (rule, value, callback) { |
| | | const form = this.form; |
| | | const confirmpassword=form.getFieldValue('confirmpassword'); |
| | | console.log("confirmpassword==>",confirmpassword); |
| | | if (value && confirmpassword && value !== confirmpassword) { |
| | | callback('两次输入的密码不一样!'); |
| | | } |
| | | 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 |
| | | } |
| | | handleConfirmBlur(e) { |
| | | const value = e.target.value |
| | | this.confirmDirty = this.confirmDirty || !!value |
| | | } |
| | | } |
| | | } |
| | | </script> |