feat:优化登陆页面的校验"

src/views/common/login.vue

@@ -23,7 +23,12 @@
             <el-form-item prop="captcha">
               <el-row :gutter="20">
                 <el-col :span="14">
-                  <el-input clearable v-model="dataForm.captcha" placeholder="验证码"></el-input>
+                  <el-input
+                    @key.enter.native="handleLogin"
+                    clearable
+                    v-model="dataForm.captcha"
+                    placeholder="验证码"
+                  ></el-input>
                 </el-col>
                 <el-col :span="10" class="login-captcha">
                   <img :src="captchaPath" @click="handleGetImgCaptcha" />
@@ -31,7 +36,12 @@
               </el-row>
             </el-form-item>
             <el-form-item>
-              <el-button class="login-btn-submit" type="primary" @click="handleLogin()">登录</el-button>
+              <el-button
+                class="login-btn-submit"
+                type="primary"
+                :loading="isloading"
+                @click="handleLogin"
+              >登录</el-button>
             </el-form-item>
           </el-form>
         </div>
@@ -47,6 +57,7 @@ import { apiLogin } from '@/api/api_sys'
 export default {
   data () {
     return {
+      isloading: false,
       dataForm: {
         username: '',
         password: '',
@@ -73,13 +84,21 @@ export default {
     // 登录提交表单
     handleLogin () {
       let param = Object.assign(this.dataForm, { 'uuid': this.dataForm.uuid })
-      apiLogin(param).then(res => {
-        if (res && res.code === 0) {
-          this.$cookie.set('token', res.token)
-          this.$router.replace({ name: 'home' })
+      this.$refs.dataForm.validate((valid) => {
+        if (valid) {
+          this.isloading = true
+          apiLogin(param).then(res => {
+            this.isloading = false
+            if (res && res.code === 0) {
+              this.$cookie.set('token', res.token)
+              this.$router.replace({ name: 'home' })
+            } else {
+              this.$message.error(res.msg)
+              this.handleGetImgCaptcha()
+            }
+          })
         } else {
-          this.$message.error(res.msg)
-          this.handleGetImgCaptcha()
+          return false
         }
       })
     }