优化密码修改界面

jshERP-web/src/components/tools/UserPassword.vue

@@ -7,41 +7,27 @@
     @ok="handleOk"
     @cancel="handleCancel"
     cancelText="关闭"
-  >
+    wrapClassName="ant-modal-cust-warp"
+    style="top:25%;height: 50%;overflow-y: hidden">
     <a-spin :spinning="confirmLoading">
       <a-form :form="form">
-
+        <a-form-item label="旧密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="旧密码">
           <a-input type="password" placeholder="请输入旧密码" v-decorator="[ 'oldpassword', validatorRules.oldpassword]" />
         </a-form-item>
-
+        <a-form-item label="新密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
-        <a-form-item
+          <a-input type="password" placeholder="新密码至少6位，区分大小写" v-decorator="[ 'password', validatorRules.password]" />
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="新密码">
-          <a-input type="password" placeholder="请输入新密码" v-decorator="[ 'password', validatorRules.password]" />
         </a-form-item>
-
+        <a-form-item label="确认新密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
-        <a-form-item
+          <a-input type="password"  placeholder="请确认新密码" v-decorator="[ 'confirmPassword', validatorRules.confirmPassword]"/>
-          :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'
   import md5 from 'md5'
-
   export default {
     name: "UserPassword",
     data () {
@@ -57,18 +43,20 @@
             }],
           },
           password:{
-            rules: [{
+            rules: [
-              required: true, message: '请输入新密码!',
+              { required: true, message: '请输入新密码!'},
-            }, {
+              { validator: this.handlePassword }
-              validator: this.validateToNextPassword,
+            ],
-            }],
+            validateTrigger: ['change', 'blur'],
+            validateFirst: true
           },
-          confirmpassword:{
+          confirmPassword:{
-            rules: [{
+            rules: [
-              required: true, message: '请确认新密码!',
+              { required: true, message: '请确认新密码!' },
-            }, {
+              { validator: this.handleConfirmPassword }
-              validator: this.compareToFirstPassword,
+            ],
-            }],
+            validateTrigger: ['change', 'blur'],
+            validateFirst: true
           }
         },
         confirmDirty:false,
@@ -80,7 +68,6 @@
           xs: { span: 24 },
           sm: { span: 16 },
         },
-
         form:this.$form.createForm(this),
         url: "/user/updatePwd",
         userId:"",
@@ -90,7 +77,6 @@
       show(userId){
         if(!userId){
           this.$message.warning("当前系统无登陆用户!");
-          return
         }else{
           this.userId = userId
           this.form.resetFields();
@@ -104,14 +90,13 @@
         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;
+            that.confirmLoading = true
             values.oldpassword = md5(values.oldpassword)
             values.password = md5(values.password)
             let params = Object.assign({userId:this.userId},values)
@@ -119,40 +104,41 @@
             putAction(this.url,params).then((res)=>{
               if(res.code === 200){
                 if(res.data.status === 2 || res.data.status === 3) {
-                  that.$message.warning(res.data.message);
+                  that.$message.warning(res.data.message)
                 } else {
-                  that.$message.success(res.data.message);
+                  that.$message.success(res.data.message)
+                  that.close()
                 }
-                that.close();
               }else{
-                that.$message.warning(res.data.message);
+                that.$message.warning(res.data.message)
               }
             }).finally(() => {
-              that.confirmLoading = false;
+              that.confirmLoading = false
             })
           }
         })
       },
-      validateToNextPassword  (rule, value, callback) {
+      handlePassword(rule, value, callback) {
-        const form = this.form;
+        let oldpassword = this.form.getFieldValue('oldpassword')
-        if (value && this.confirmDirty) {
+        if(oldpassword === value) {
-          form.validateFields(['confirm'], { force: true })
+          callback(new Error('新密码和旧密码不能相同!'))
         }
-        callback();
+        let reg = /^(?=.*[a-z])(?=.*\d).{6,}$/;
-      },
+        if (!reg.test(value)) {
-      compareToFirstPassword  (rule, value, callback) {
+          callback(new Error('密码由6位数字、小写字母组成!'))
-        const form = this.form;
-        if (value && value !== form.getFieldValue('password')) {
-          callback('两次输入的密码不一样！');
-        } else {
-          callback()
         }
+        callback()
       },
-      handleConfirmBlur  (e) {
+      handleConfirmPassword(rule, value, callback) {
-        const value = e.target.value
+        let password = this.form.getFieldValue('password')
-        this.confirmDirty = this.confirmDirty || !!value
+        if (value === undefined) {
+          callback(new Error('请输入密码!'))
+        }
+        if (value && password && value.trim() !== password.trim()) {
+          callback(new Error('两次密码不一致!'))
+        }
+        callback()
       }
-
     }
   }
 </script>