Jeecg-Boot 2.2.0 版本发布 | 重磅升级

ant-design-vue-jeecg/src/views/user/Login.vue

@@ -9,7 +9,7 @@
           <a-form-item>
             <a-input
               size="large"
-              v-decorator="['username',validatorRules.username,{ validator: this.handleUsernameOrEmail }]"
+              v-decorator="['username',{initialValue:'admin', rules: validatorRules.username.rules}]"
               type="text"
               placeholder="请输入帐户名 / admin">
               <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
@@ -18,7 +18,7 @@
 
           <a-form-item>
             <a-input
-              v-decorator="['password',validatorRules.password]"
+              v-decorator="['password',{initialValue:'123456', rules: validatorRules.password.rules}]"
               size="large"
               type="password"
               autocomplete="false"
@@ -43,7 +43,6 @@
             <a-col :span="8" 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"/>
-              <!--<j-graphic-code @success="generateCode" ref="jgraphicCodeRef" style="float: right" remote></j-graphic-code>-->
             </a-col>
           </a-row>
 
@@ -106,15 +105,12 @@
         </a-button>
       </a-form-item>
 
-      <!-- <div class="user-login-other">
+      <div class="user-login-other">
         <span>其他登陆方式</span>
-        <a><a-icon class="item-icon" type="alipay-circle"></a-icon></a>
-        <a><a-icon class="item-icon" type="taobao-circle"></a-icon></a>
-        <a><a-icon class="item-icon" type="weibo-circle"></a-icon></a>
-        <router-link class="register" :to="{ name: 'register' }">
-          注册账户
-        </router-link>
-      </div>-->
+        <a @click="onThirdLogin('github')" title="github"><a-icon class="item-icon" type="github"></a-icon></a>
+        <a @click="onThirdLogin('wechat_enterprise')" title="企业微信"><a-icon class="item-icon" type="wechat"></a-icon></a>
+        <a @click="onThirdLogin('dingtalk')" title="钉钉"><a-icon class="item-icon" type="dingding"></a-icon></a>
+      </div>
     </a-form>
 
     <two-step-captcha
@@ -173,7 +169,6 @@
   import { timeFix } from "@/utils/util"
   import Vue from 'vue'
   import { ACCESS_TOKEN ,ENCRYPTED_STRING} from "@/store/mutation-types"
-  import JGraphicCode from '@/components/jeecg/JGraphicCode'
   import { putAction,postAction,getAction } from '@/api/manage'
   import { encryption , getEncryptedString } from '@/utils/encryption/aesEncrypt'
   import store from '@/store/'
@@ -181,8 +176,7 @@
 
   export default {
     components: {
-      TwoStepCaptcha,
-      JGraphicCode
+      TwoStepCaptcha
     },
     data () {
       return {
@@ -232,7 +226,28 @@
       // update-end- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
     },
     methods: {
-      ...mapActions([ "Login", "Logout","PhoneLogin" ]),
+      ...mapActions([ "Login", "Logout","PhoneLogin","ThirdLogin" ]),
+      //第三方登录
+      onThirdLogin(source){
+        let url = window._CONFIG['domianURL']+`/thirdLogin/render/${source}`
+        window.open(url, `login ${source}`, 'height=500, width=500, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')
+        let that = this;
+        let receiveMessage = function(event){
+          var origin = event.origin
+          console.log("origin",origin);
+
+          let token = event.data
+          console.log("event.data",token)
+          that.ThirdLogin(token).then(res=>{
+            if(res.success){
+              that.loginSuccess()
+            }else{
+              that.requestFailed(res);
+            }
+          })
+        }
+        window.addEventListener("message", receiveMessage, false);
+      },
       // handler
       handleUsernameOrEmail (rule, value, callback) {
         const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
@@ -361,7 +376,7 @@
         // update-begin- author:sunjianlei --- date:20190812 --- for: 登录成功后不解除禁用按钮，防止多次点击
         // this.loginBtn = false
         // update-end- author:sunjianlei --- date:20190812 --- for: 登录成功后不解除禁用按钮，防止多次点击
-        this.$router.push({ name: "dashboard" })
+        this.$router.push({ path: "/dashboard/analysis" })
         this.$notification.success({
           message: '欢迎',
           description: `${timeFix()}，欢迎回来`,

ant-design-vue-jeecg/src/views/user/Register.vue

@@ -4,7 +4,7 @@
     <a-form ref="formRegister" :autoFormCreate="(form)=>{this.form = form}" id="formRegister">
       <a-form-item
         fieldDecoratorId="username"
-        :fieldDecoratorOptions="{rules: [{ required: true, message: '用户名不能为空'}, { validator: this.checkUsername }], validateTrigger: ['change', 'blur']}">
+        :fieldDecoratorOptions="{rules: [{ required: true, message: '用户名不能为空'}, { validator: this.checkUsername }], validateTrigger: ['change', 'blur'], validateFirst: true}">
         <a-input size="large" type="text" autocomplete="false" placeholder="请输入用户名"></a-input>
       </a-form-item>
 
@@ -20,25 +20,25 @@
         </template>
         <a-form-item
           fieldDecoratorId="password"
-          :fieldDecoratorOptions="{rules: [{ required: false}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}">
+          :fieldDecoratorOptions="{rules: [{ required: false}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur'], validateFirst: true}">
           <a-input size="large" type="password" @click="handlePasswordInputClick" autocomplete="false" placeholder="至少8位密码，区分大小写"></a-input>
         </a-form-item>
       </a-popover>
 
       <a-form-item
         fieldDecoratorId="password2"
-        :fieldDecoratorOptions="{rules: [{ required: true, message: '至少8位密码，区分大小写' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}">
+        :fieldDecoratorOptions="{rules: [{ required: true, message: '至少8位密码，区分大小写' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur'], validateFirst: true}">
 
         <a-input size="large" type="password" autocomplete="false" placeholder="确认密码"></a-input>
       </a-form-item>
       <a-form-item
         fieldDecoratorId="email"
-        :fieldDecoratorOptions="{rules: [{ required: true, type: 'email', message: '请输入正确的邮箱地址' }, { validator: this.handleEmailCheck }], validateTrigger: ['change', 'blur']}">
+        :fieldDecoratorOptions="{rules: [{ required: true, type: 'email', message: '请输入正确的邮箱地址' }, { validator: this.handleEmailCheck }], validateTrigger: ['change', 'blur'], validateFirst: true}">
         <a-input size="large" type="text" placeholder="邮箱"></a-input>
       </a-form-item>
       <a-form-item
         fieldDecoratorId="mobile"
-        :fieldDecoratorOptions="{rules: [{ required: true, pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号' }, { validator: this.handlePhoneCheck } ], validateTrigger: ['change', 'blur'] }">
+        :fieldDecoratorOptions="{rules: [{ required: true, pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号' }, { validator: this.handlePhoneCheck } ], validateTrigger: ['change', 'blur'], validateFirst: true}">
         <a-input size="large" placeholder="11 位手机号">
           <a-select slot="addonBefore" size="large" defaultValue="+86">
             <a-select-option value="+86">+86</a-select-option>
@@ -58,7 +58,7 @@
         <a-col class="gutter-row" :span="16">
           <a-form-item
             fieldDecoratorId="captcha"
-            :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}">
+            :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur', validateFirst: true}">
             <a-input size="large" type="text" placeholder="验证码">
               <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
             </a-input>

ant-design-vue-jeecg/src/views/user/Step1.vue

@@ -27,8 +27,9 @@
             </a-input>
           </a-form-item>
         </a-col>
-        <a-col :span="10">
-          <j-graphic-code @success="generateCode" style="float: right"></j-graphic-code>
+        <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 :wrapperCol="{span: 19, offset: 5}">
@@ -40,15 +41,11 @@
 </template>
 
 <script>
-  import JGraphicCode from '@/components/jeecg/JGraphicCode'
-  import {getAction} from '@/api/manage'
-  import {checkOnlyUser} from '@/api/api'
+  import { getAction,postAction } from '@/api/manage'
+  import { checkOnlyUser } from '@/api/api'
 
   export default {
     name: "Step1",
-    components: {
-      JGraphicCode
-    },
     data() {
       return {
         form: this.$form.createForm(this),
@@ -57,12 +54,32 @@
         verifiedCode: "",
         validatorRules: {
           username: {rules: [{required: false}, {validator: this.validateInputUsername}]},
-          inputCode: {rules: [{required: true, message: '请输入验证码!'}, {validator: this.validateInputCode}]},
+          inputCode: {rules: [{required: true, message: '请输入验证码!'}]},
         },
+        randCodeImage:'',
+        requestCodeSuccess:true,
+        currdatetime:''
 
       }
     },
+    created(){
+      this.handleChangeCheckCode();
+    },
     methods: {
+      handleChangeCheckCode(){
+        this.currdatetime = new Date().getTime();
+        getAction(`/sys/randomImage/${this.currdatetime}`).then(res=>{
+          if(res.success){
+            this.randCodeImage = res.result
+            this.requestCodeSuccess=true
+          }else{
+            this.$message.error(res.message)
+            this.requestCodeSuccess=false
+          }
+        }).catch(()=>{
+          this.requestCodeSuccess=false
+        })
+      },
       nextStep() {
         let that = this
         this.form.validateFields((err, values) => {
@@ -77,28 +94,38 @@
             } else {
               params.username = username;
             }
-            getAction("/sys/user/querySysUser", params).then((res) => {
-              if (res.success) {
-                var userList = {
-                  username: res.result.username,
-                  phone: res.result.phone,
-                  isPhone: isPhone
-                };
-                setTimeout(function () {
-                  that.$emit('nextStep', userList)
-                })
-              }
-            });
+            that.validateInputCode().then(()=>{
+              getAction("/sys/user/querySysUser", params).then((res) => {
+                if (res.success) {
+                  var userList = {
+                    username: res.result.username,
+                    phone: res.result.phone,
+                    isPhone: isPhone
+                  };
+                  setTimeout(function () {
+                    that.$emit('nextStep', userList)
+                  })
+                }
+              });
+            })
           }
         })
 
       },
-      validateInputCode(rule, value, callback) {
-        if (!value || this.verifiedCode == this.inputCodeContent) {
-          callback();
-        } else {
-          callback(new Error("您输入的验证码不正确!"));
-        }
+      validateInputCode() {
+        return new Promise((resolve,reject)=>{
+          postAction("/sys/checkCaptcha",{
+            captcha:this.inputCodeContent,
+            checkKey:this.currdatetime
+          }).then(res=>{
+            if(res.success){
+              resolve();
+            }else{
+              this.$message.error(res.message)
+              reject();
+            }
+          });
+        })
       },
       inputCodeChange(e) {
         this.inputCodeContent = e.target.value;