¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <a-modal |
| | | title="éæ°è®¾å®å¯ç " |
| | | :width="800" |
| | | :visible="visible" |
| | | :confirmLoading="confirmLoading" |
| | | @ok="handleSubmit" |
| | | @cancel="handleCancel" |
| | | cancelText="å
³é" |
| | | style="top:20px;" |
| | | > |
| | | <a-spin :spinning="confirmLoading"> |
| | | <a-form :form="form"> |
| | | |
| | | <a-form-item label="ç¨æ·è´¦å·" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
| | | <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> |
| | | |
| | | <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> |
| | | </a-spin> |
| | | </a-modal> |
| | | </template> |
| | | |
| | | <script> |
| | | import {changePassword} from '@/api/api' |
| | | |
| | | 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, |
| | | }], |
| | | }, |
| | | }, |
| | | |
| | | model: {}, |
| | | |
| | | 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() |
| | | } |
| | | }, |
| | | handleConfirmBlur (e) { |
| | | const value = e.target.value |
| | | this.confirmDirty = this.confirmDirty || !!value |
| | | } |
| | | } |
| | | } |
| | | </script> |