From 7ea9f56bf1e88c828b564483463da794ab1c6149 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=A8=E5=AD=90=E6=9D=8E=C2=B7De?= <lide1202@hotmail.com>
Date: Wed, 7 Jul 2021 16:47:53 +0800
Subject: [PATCH] Update login.vue

---
 report-ui/src/views/login.vue | 212 +++++++++++++---------------------
 1 file changed, 81 insertions(+), 131 deletions(-)

diff --git a/report-ui/src/views/login.vue b/report-ui/src/views/login.vue
index 7ee7f7a9..7fb54639 100644
--- a/report-ui/src/views/login.vue
+++ b/report-ui/src/views/login.vue
@@ -12,15 +12,7 @@
     </div>
     <div class="login_contant">
       <img src="@/assets/images/login.png" alt="image" class="login_img" />
-      <el-form
-        ref="loginForm"
-        :model="loginForm"
-        :rules="loginRules"
-        class="login_form"
-        autocomplete="on"
-        label-position="left"
-        @keyup.enter.native="handleLogin"
-      >
+      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login_form" autocomplete="on" label-position="left" @keyup.enter.native="handleLogin">
         <div class="title_container">
           <h3 class="title">
             HELLO,
@@ -36,47 +28,15 @@
           <div>
             <p>用户名</p>
             <el-form-item prop="username">
-              <el-input
-                ref="username"
-                v-model="loginForm.username"
-                placeholder="用户名"
-                name="username"
-                type="text"
-                tabindex="1"
-                autocomplete="on"
-                @focus="setTop('0')"
-                @change="getPsw"
-              />
+              <el-input ref="username" v-model="loginForm.username" placeholder="用户名" name="username" type="text" tabindex="1" autocomplete="on" @focus="setTop('0')" @change="getPsw" />
             </el-form-item>
           </div>
           <div>
             <p>密码</p>
-            <input
-              name="password"
-              type="password"
-              autocomplete="off"
-              class="take"
-            />
-            <el-tooltip
-              v-model="capsTooltip"
-              content="Caps lock is On"
-              placement="right"
-              manual
-            >
+            <input name="password" type="password" autocomplete="off" class="take" />
+            <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
               <el-form-item prop="password">
-                <el-input
-                  :key="passwordType"
-                  ref="password"
-                  v-model="loginForm.password"
-                  :type="passwordType"
-                  placeholder="用户密码"
-                  name="password"
-                  tabindex="2"
-                  autocomplete="on"
-                  @blur="capsTooltip = false"
-                  @focus="setTop('50')"
-                  @keyup.native="checkCapslock"
-                />
+                <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="用户密码" name="password" tabindex="2" autocomplete="on" @blur="capsTooltip = false" @focus="setTop('50')" @keyup.native="checkCapslock" />
                 <span class="show_pwd" @click="showPwd">
                   <i class="el-icon-view" />
                 </span>
@@ -90,178 +50,168 @@
             <p>记住密码</p>
           </div>
         </div>
-        <el-button
-          :loading="loading"
-          type="primary"
-          class="login_btn"
-          @click.native.prevent="handleLogin"
-          >登录</el-button
-        >
+        <el-button :loading="loading" type="primary" class="login_btn" @click.native.prevent="handleLogin">登录</el-button>
       </el-form>
     </div>
     <!--  验证码  -->
-    <Verify
-      v-if="needCaptcha"
-      ref="verify"
-      :captcha-type="'blockPuzzle'"
-      :img-size="{ width: '400px', height: '200px' }"
-      @success="verifylogin"
-    />
+    <Verify v-if="needCaptcha" ref="verify" :captcha-type="'blockPuzzle'" :img-size="{ width: '400px', height: '200px' }" @success="verifylogin" />
   </div>
 </template>
 
 <script>
-import Verify from "@/components/verifition/Verify";
-import cookies from "js-cookie";
-import { Decrypt, Encrypt } from "@/utils/index";
-import { login } from "@/api/login";
-import { transPsw } from "@/utils/encrypted";
-import { setItem, getItem } from "@/utils/storage";
+import Verify from '@/components/verifition/Verify'
+import cookies from 'js-cookie'
+import { Decrypt, Encrypt } from '@/utils/index'
+import { login } from '@/api/login'
+import { transPsw } from '@/utils/encrypted'
+import { setItem, getItem } from '@/utils/storage'
 export default {
-  name: "Login",
+  name: 'Login',
   components: {
-    Verify
+    Verify,
   },
   data() {
     return {
-      activeTop: "-50%", // 色条滑块控制
+      activeTop: '-50%', // 色条滑块控制
       rememberPsw: false, // 记住密码选择框
       loginForm: {
-        username: "admin",
-        password: "123456",
-        verifyCode: ""
+        username: 'admin',
+        password: '123456',
+        verifyCode: '',
       }, // 登录表单
       loginRules: {
-        username: [{ required: true, message: "用户名必填", trigger: "blur" }],
-        password: [{ required: true, message: "用户密码必填", trigger: "blur" }]
+        username: [{ required: true, message: '用户名必填', trigger: 'blur' }],
+        password: [
+          { required: true, message: '用户密码必填', trigger: 'blur' },
+        ],
       }, // 登录表单验证
-      passwordType: "password", // 用来控制查看密码操作时的输入框类型
+      passwordType: 'password', // 用来控制查看密码操作时的输入框类型
       capsTooltip: false, // 键盘大写是否打开
       loading: false, // 登录loding
       redirect: undefined, // 记录重定向地址
       otherQuery: {}, // 记录重定向地址中的参数
-      needCaptcha: false
-    };
+      needCaptcha: false,
+    }
   },
   watch: {
     $route: {
       // 监听路由获取上个路由（from）的地址和参数
-      handler: function(route) {
-        const query = route.query;
+      handler: function (route) {
+        const query = route.query
         if (query) {
-          this.redirect = query.redirect;
-          this.otherQuery = this.getOtherQuery(query);
+          this.redirect = query.redirect
+          this.otherQuery = this.getOtherQuery(query)
         }
       },
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   mounted() {
     // 获取焦点
-    if (this.loginForm.username === "") {
-      this.$refs.username.focus();
-    } else if (this.loginForm.password === "") {
-      this.$refs.password.focus();
+    if (this.loginForm.username === '') {
+      this.$refs.username.focus()
+    } else if (this.loginForm.password === '') {
+      this.$refs.password.focus()
     }
   },
   methods: {
     // 获取存储的密码并解密
     getPsw() {
-      const cookVal = cookies.get(`u_${this.loginForm.username}`);
-      this.loginForm.password = cookVal && Decrypt(cookVal);
+      const cookVal = cookies.get(`u_${this.loginForm.username}`)
+      this.loginForm.password = cookVal && Decrypt(cookVal)
     },
     // 滑动条块的top控制
     setTop(val) {
-      this.activeTop = val;
+      this.activeTop = val
     },
     // 检测大写锁定键是否开启
     checkCapslock(e) {
-      const { key } = e;
-      this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
+      const { key } = e
+      this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
     },
     // 查看密码
     showPwd() {
-      if (this.passwordType === "password") {
-        this.passwordType = "";
+      if (this.passwordType === 'password') {
+        this.passwordType = ''
       } else {
-        this.passwordType = "password";
+        this.passwordType = 'password'
       }
       this.$nextTick(() => {
-        this.$refs.password.focus();
-      });
+        this.$refs.password.focus()
+      })
     },
     // 滑动验证码
     useVerify() {
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
-          this.$refs.verify.show();
+          this.$refs.verify.show()
         } else {
-          return false;
+          return false
         }
-      });
+      })
     },
     // 验证成功的回调
     verifylogin(params) {
-      this.loginForm.verifyCode = params.captchaVerification;
+      this.loginForm.verifyCode = params.captchaVerification
       if (this.loginForm.verifyCode) {
-        this.loginApi();
+        this.loginApi()
       }
     },
     // 登录操作
     handleLogin() {
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
-          this.loading = true;
+          this.loading = true
           // 登录失败次数过多需要展示滑动验证码
           if (this.needCaptcha) {
-            this.useVerify();
-            return;
+            this.useVerify()
+            return
           }
-          this.loginApi();
+          this.loginApi()
         } else {
-          return false;
+          return false
         }
-      });
+      })
     },
     async loginApi() {
       let obj = {
         username: this.loginForm.username,
         password: transPsw(this.loginForm.password),
-        verifyCode: ""
-      };
-      const { code, data } = await login(obj);
-      console.log(data);
-      this.loading = false;
-      if (code != "200") return;
-      setItem("token", data.token);
-      setItem("username", data.username);
+        verifyCode: '',
+      }
+      const { code, data } = await login(obj)
+      console.log(data)
+      this.loading = false
+      if (code != '200') return
+      setItem('token', data.token)
+      setItem('username', data.username)
       // 选中记住密码时 把密码存到cookie里,时效15天
       this.rememberPsw &&
         cookies.set(
           `u_${this.loginForm.username}`,
           Encrypt(this.loginForm.password),
           { expires: 15 }
-        );
+        )
       if (data && data.captcha) {
-        this.needCaptcha = true;
+        this.needCaptcha = true
       } else {
-        this.needCaptcha = false;
+        this.needCaptcha = false
         this.$router.push({
-          path: this.redirect || "/index",
-          query: this.otherQuery
-        });
+          path: this.redirect || '/index',
+          query: this.otherQuery,
+        })
       }
     },
     getOtherQuery(query) {
       return Object.keys(query).reduce((acc, cur) => {
-        if (cur !== "redirect") {
-          acc[cur] = query[cur];
+        if (cur !== 'redirect') {
+          acc[cur] = query[cur]
         }
-        return acc;
-      }, {});
-    }
-  }
-};
+        return acc
+      }, {})
+    },
+  },
+}
 </script>
 
 <style lang="scss">
@@ -431,7 +381,7 @@ export default {
             height: 14px;
           }
           & > input:checked::before {
-            content: "\2713";
+            content: '\2713';
             background-color: #f5ab1b;
             position: absolute;
             top: 0;