chenrui il y a 4 ans
Parent
commit
fab3d93f19
1 fichiers modifiés avec 67 ajouts et 98 suppressions
  1. 67 98
      src/views/user/ResetPwd.vue

+ 67 - 98
src/views/user/ResetPwd.vue

@@ -1,114 +1,76 @@
 <template>
   <div class="change-pwd">
-    <a-form @submit="handleSubmit" :form="form">
-      <!-- 原始密码 -->
-      <a-form-item
-        label="原始密码"
-        prop="oldPwd"
-        :label-col="formLayout.labelCol"
-        :wrapper-col="formLayout.wrapperCol">
+    <a-form-model
+      id="change-pwd-form"
+      ref="ruleForm"
+      :model="form"
+      :rules="rules"
+      :label-col="formLayout.labelCol"
+      :wrapper-col="formLayout.wrapperCol">
+      <a-form-model-item label="原始密码" prop="oldPwd">
         <a-input
           type="password"
+          v-model.trim="form.oldPwd"
+          id="change-pwd-oldPwd"
           :maxLength="12"
-          placeholder="请输入原始密码(6~12位)"
-          v-decorator="[
-            'formCustom.oldPwd',
-            { initialValue: formCustom.oldPwd,
-              rules: [
-                { required: true, message: '请输入原始密码' },
-              ]
-            },
-          ]">
-        </a-input>
-      </a-form-item>
-      <!-- 新密码 -->
-      <a-form-item
-        label="新密码"
-        prop="passwd"
-        :label-col="formLayout.labelCol"
-        :wrapper-col="formLayout.wrapperCol">
+          allowClear
+          placeholder="请输入原始密码(6~12位)" />
+      </a-form-model-item>
+      <a-form-model-item label="新密码" prop="passwd">
         <a-input
           type="password"
+          v-model.trim="form.passwd"
+          @change="filterEmpty"
+          id="change-pwd-passwd"
           :maxLength="12"
-          placeholder="请输入新密码(6~12位)"
-          v-decorator="[
-            'formCustom.passwd',
-            { initialValue: formCustom.passwd,
-              rules: [
-                { required: true, message: '请输入新密码' },
-                { validator: passwordValid }
-              ]
-            },
-          ]">
-        </a-input>
-      </a-form-item>
-      <!-- 再次确认 -->
-      <a-form-item
-        label="再次确认"
-        prop="passwdCheck"
-        :label-col="formLayout.labelCol"
-        :wrapper-col="formLayout.wrapperCol">
+          allowClear
+          placeholder="请输入新密码(6~12位)" />
+      </a-form-model-item>
+      <a-form-model-item label="再次确认" prop="passwdCheck">
         <a-input
           type="password"
+          v-model.trim="form.passwdCheck"
+          id="change-pwd-passwdCheck"
           :maxLength="12"
-          placeholder="请再次输入新密码(6~12位)"
-          v-decorator="[
-            'formCustom.passwdCheck',
-            { initialValue: formCustom.passwdCheck,
-              rules: [
-                { required: true, message: '请再次输入密码' },
-                { validator: compareToFirstPassword }
-              ]
-            },
-          ]">
-        </a-input>
-      </a-form-item>
-      <!-- <a-col span="16" offset="8"> -->
-      <a-form-item>
+          allowClear
+          placeholder="请再次输入新密码(6~12位)" />
+      </a-form-model-item>
+      <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }">
         <div style="text-align: center;">
-          <a-button type="primary" htmlType="submit" :loading="loading">保存</a-button>
-          <a-button @click="handleReset('formCustom')" style="margin-left: 8px">重置</a-button>
+          <a-button type="primary" @click="handleSubmit">保存</a-button>
+          <a-button @click="handleReset" style="margin-left: 8px">重置</a-button>
         </div>
-      </a-form-item>
-      <!-- </a-col> -->
-    </a-form>
+      </a-form-model-item>
+    </a-form-model>
   </div>
-  <!-- <a-row :gutter="24" class="change-pwd">
-    <a-col span="16" offset="8">
-
-    </a-col>
-  </a-row> -->
 </template>
 
 <script>
-import { changePwd } from '@/api/login.js'
+import { changePwd } from '@/api/login'
 import { mapActions } from 'vuex'
 export default {
   name: 'ResetPwd',
   data () {
     return {
-      // formLayout: {
-      //   labelCol: {
-      //     xs: { span: 24 },
-      //     sm: { span: 6 },
-      //     md: { span: 4 }
-      //   },
-      //   wrapperCol: {
-      //     xs: { span: 24 },
-      //     sm: { span: 18 },
-      //     md: { span: 20 }
-      //   }
-      // },
       formLayout: {
         labelCol: { span: 4 },
         wrapperCol: { span: 20 }
       },
-      form: this.$form.createForm(this),
-      loading: false,
-      formCustom: {
+      form: {
+        oldPwd: '',
         passwd: '',
-        passwdCheck: '',
-        oldPwd: ''
+        passwdCheck: ''
+      },
+      rules: {
+        oldPwd: [{ required: true, message: '请输入原始密码', trigger: 'blur' }],
+        passwd: [
+          { required: true, message: '请输入新密码', trigger: 'blur' },
+          { validator: this.passwordValid }
+        ],
+        passwdCheck: [
+          { required: true, message: '请再次输入密码', trigger: 'blur' },
+          { validator: this.compareToFirstPassword }
+        ]
       }
     }
   },
@@ -124,27 +86,37 @@ export default {
     },
     // 密码校验
     compareToFirstPassword (rule, value, callback) {
-      const form = this.form
-      if (value && value !== form.getFieldValue('formCustom.passwd')) {
+      if (value && (value !== this.form.passwd)) {
         callback('两次输入的密码不一致, 请重新输入!')
       } else {
         callback()
       }
     },
-    handleSubmit (e) {
-      e.preventDefault()
+    // 过滤空格
+    filterEmpty () {
+      let str = this.form.passwd
+      str = str.replace(/\ +/g, '')
+      str = str.replace(/[ ]/g, '')
+      str = str.replace(/[\r\n]/g, '')
+      this.form.passwd = str
+    },
+    handleSubmit () {
       const _this = this
-      this.form.validateFields((err, values) => {
-        if (!err) {
-          changePwd({
-            oldPassword: values.formCustom.oldPwd,
-            password: values.formCustom.passwd
-          }).then(res => {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const form = {
+            oldPassword: _this.form.oldPwd,
+            password: _this.form.passwd
+          }
+          changePwd(form).then(res => {
             if (res.status == 200) {
               _this.$message.success('修改成功, 请重新登录')
               _this.logout()
             }
           })
+        } else {
+          console.log('error submit!!')
+          return false
         }
       })
     },
@@ -156,11 +128,8 @@ export default {
       })
     },
     handleReset () {
-      this.form.resetFields()
+      this.$refs.ruleForm.resetFields()
     }
   }
 }
 </script>
-
-<style>
-</style>