给登录界面增加验证码校验

jshERP-web/src/views/user/Login.vue

@@ -23,6 +23,25 @@
         </a-input>
       </a-form-item>
 
+      <a-row :gutter="0">
+        <a-col :span="14">
+          <a-form-item>
+            <a-input
+              v-decorator="['inputCode']"
+              size="large"
+              type="text"
+              default-value=""
+              placeholder="请输入验证码">
+              <a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :span="10" style="text-align: right">
+          <img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode"/>
+          <img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
+        </a-col>
+      </a-row>
+
       <a-form-item>
         <a-checkbox :checked="checked" @change="handleChange">记住密码</a-checkbox>
         <router-link v-if="registerFlag==='1'" :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px;" >
@@ -30,7 +49,7 @@
         </router-link>
       </a-form-item>
 
-      <a-form-item style="margin-top:30px">
+      <a-form-item style="margin-top:16px">
         <a-button
           size="large"
           type="primary"
@@ -103,6 +122,7 @@
         currentUsername:"",
         validate_status:"",
         currdatetime:'',
+        randCode:'',
         randCodeImage:'',
         registerFlag:'',
         requestCodeSuccess:false,
@@ -116,6 +136,7 @@
       Vue.ls.remove(ACCESS_TOKEN)
       this.getRouterData()
       this.getRegisterFlag()
+      this.handleChangeCheckCode()
     },
     methods: {
       ...mapActions([ "Login", "Logout" ]),
@@ -154,30 +175,54 @@
       handleChange(e) {
         this.checked = e.target.checked
       },
+      handleChangeCheckCode(){
+        this.currdatetime = new Date().getTime();
+        getAction(`/user/randomImage/${this.currdatetime}`).then(res=>{
+          if(res.code == 200){
+            this.randCode = res.data.codeNum;
+            this.randCodeImage = res.data.base64;
+            this.requestCodeSuccess=true
+          }else{
+            this.$message.error(res.data)
+            this.requestCodeSuccess=false
+          }
+        }).catch(()=>{
+          this.requestCodeSuccess=false
+        })
+      },
       handleSubmit () {
         let that = this
         let loginParams = {};
         that.loginBtn = true;
         // 使用账户密码登陆
         if (that.customActiveKey === 'tab1') {
-          that.form.validateFields([ 'loginName', 'password' ], { force: true }, (err, values) => {
+          that.form.validateFields([ 'loginName', 'password', 'inputCode' ], { force: true }, (err, values) => {
             if (!err) {
-              loginParams.loginName = values.loginName
-              loginParams.password = md5(values.password)
-              if(that.checked) {
-                //勾选的时候进行缓存
-                Vue.ls.set('cache_loginName', values.loginName)
-                Vue.ls.set('cache_password', values.password)
+              if(values.inputCode === this.randCode) {
+                loginParams.loginName = values.loginName
+                loginParams.password = md5(values.password)
+                if(that.checked) {
+                  //勾选的时候进行缓存
+                  Vue.ls.set('cache_loginName', values.loginName)
+                  Vue.ls.set('cache_password', values.password)
+                } else {
+                  //没勾选的时候清缓存
+                  Vue.ls.remove('cache_loginName')
+                  Vue.ls.remove('cache_password')
+                }
+                that.Login(loginParams).then((res) => {
+                  this.departConfirm(res, loginParams.loginName)
+                }).catch((err) => {
+                  that.requestFailed(err);
+                });
               } else {
-                //没勾选的时候清缓存
-                Vue.ls.remove('cache_loginName')
-                Vue.ls.remove('cache_password')
+                this.$notification['error']({
+                  message: "提示",
+                  description: "验证码错误",
+                  duration: 2
+                });
+                this.loginBtn = false
               }
-              that.Login(loginParams).then((res) => {
-                this.departConfirm(res, loginParams.loginName)
-              }).catch((err) => {
-                that.requestFailed(err);
-              });
             }else {
               that.loginBtn = false;
             }
@@ -374,7 +419,7 @@
     }
 
     .ant-form-item {
-      margin-bottom: 30px;
+      margin-bottom: 16px;
     }
 
     .getCaptcha {

jshERP-web/src/views/user/Register.vue

@@ -217,7 +217,7 @@
       handleSubmit() {
         this.form.validateFields((err, values) => {
           if (!err) {
-            if(values.inputCode == this.randCode) {
+            if(values.inputCode === this.randCode) {
               let register = {
                 loginName: values.username,
                 password: md5(values.password)
@@ -306,7 +306,7 @@
   .user-layout-register {
 
     .ant-form-item {
-      margin-bottom: 18px;
+      margin-bottom: 16px;
     }
 
     & > h3 {