JeecgBoot 2.4 微服务正式版本发布，基于SpringBoot的低代码平台

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

@@ -11,7 +11,7 @@
               size="large"
               v-decorator="['username',validatorRules.username,{ validator: this.handleUsernameOrEmail }]"
               type="text"
-              placeholder="请输入帐户名 / admin">
+              placeholder="请输入帐户名 / jeecg">
               <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
             </a-input>
           </a-form-item>
@@ -104,13 +104,6 @@
           :disabled="loginBtn">确定
         </a-button>
       </a-form-item>
-
-      <div class="user-login-other">
-        <span>其他登录方式</span>
-        <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
@@ -118,7 +111,8 @@
       :visible="stepCaptchaVisible"
       @success="stepCaptchaSuccess"
       @cancel="stepCaptchaCancel"></two-step-captcha>
-    <login-select-modal ref="loginSelect" @success="loginSelectOk"></login-select-modal>
+    <login-select-tenant ref="loginSelect" @success="loginSelectOk"></login-select-tenant>
+    <third-login ref="thirdLogin"></third-login>
   </div>
 </template>
 
@@ -134,12 +128,13 @@
   import { encryption , getEncryptedString } from '@/utils/encryption/aesEncrypt'
   import store from '@/store/'
   import { USER_INFO } from "@/store/mutation-types"
-  import LoginSelectModal from './LoginSelectModal.vue'
-
+  import ThirdLogin from './third/ThirdLogin'
+  import LoginSelectTenant from "./LoginSelectTenant";
   export default {
     components: {
+      LoginSelectTenant,
       TwoStepCaptcha,
-      LoginSelectModal
+      ThirdLogin
     },
     data () {
       return {
@@ -171,7 +166,7 @@
         currentUsername:"",
         currdatetime:'',
         randCodeImage:'',
-        requestCodeSuccess:false
+        requestCodeSuccess:false,
       }
     },
     created () {
@@ -184,34 +179,7 @@
       // update-end- --- author:scott ------ date:20190805 ---- for:密码加密逻辑暂时注释掉，有点问题
     },
     methods: {
-      ...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
-          //update-begin--Author:wangshuai  Date:20200729 for：接口在签名校验失败时返回失败的标识码 #1441--------------------
-          if (token === '登录失败') {
-            that.$message.warning(token);
-          }else{
-          //update-end--Author:wangshuai  Date:20200729 for：接口在签名校验失败时返回失败的标识码 #1441--------------------
-          console.log("event.data",token)
-          that.ThirdLogin(token).then(res=>{
-            if(res.success){
-              that.loginSuccess()
-            }else{
-              that.requestFailed(res);
-            }
-          })
-          }
-        }
-        window.addEventListener("message", receiveMessage, false);
-      },
+      ...mapActions(['Login', 'Logout', 'PhoneLogin']),
       // handler
       handleUsernameOrEmail (rule, value, callback) {
         const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
@@ -337,9 +305,6 @@
         })
       },
       loginSuccess () {
-        // update-begin- author:sunjianlei --- date:20190812 --- for: 登录成功后不解除禁用按钮，防止多次点击
-        // this.loginBtn = false
-        // update-end- author:sunjianlei --- date:20190812 --- for: 登录成功后不解除禁用按钮，防止多次点击
         this.$router.push({ path: "/dashboard/analysis" }).catch(()=>{
           console.log('登录跳转首页出错,这个错误从哪里来的')
         })

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

@@ -56,7 +56,7 @@
   import store from './Login'
 
   export default {
-    name: 'LoginSelectModal',
+    name: 'LoginSelectTenant',
     data(){
       return {
         visible: false,

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

@@ -29,7 +29,7 @@
         </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"/>
+          <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}">

ant-design-vue-jeecg/src/views/user/register/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'], validateFirst: true}">
+        :fieldDecoratorOptions="{rules: [{ required: false}, { validator: this.checkUsername }]}">
         <a-input size="large" type="text" autocomplete="false" placeholder="请输入用户名"></a-input>
       </a-form-item>
 
@@ -20,26 +20,25 @@
         </template>
         <a-form-item
           fieldDecoratorId="password"
-          :fieldDecoratorOptions="{rules: [{ required: false}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur'], validateFirst: true}">
+          :fieldDecoratorOptions="{rules: [{ required: false}, { validator: this.handlePasswordLevel }]}">
           <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'], validateFirst: true}">
+        :fieldDecoratorOptions="{rules: [{ required: false}, { validator: this.handlePasswordCheck }]}">
 
         <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'], validateFirst: true}">
-        <a-input size="large" type="text" placeholder="邮箱"></a-input>
-      </a-form-item>
+<!--      <a-form-item-->
+<!--        fieldDecoratorId="email">-->
+<!--        <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'], validateFirst: true}">
-        <a-input size="large" placeholder="11 位手机号">
+        :fieldDecoratorOptions="{rules: [{ required: false}, { validator: this.handlePhoneCheck }]}">
+        <a-input size="large" placeholder="11 位手机号"> 
           <a-select slot="addonBefore" size="large" defaultValue="+86">
             <a-select-option value="+86">+86</a-select-option>
             <a-select-option value="+87">+87</a-select-option>
@@ -58,7 +57,7 @@
         <a-col class="gutter-row" :span="16">
           <a-form-item
             fieldDecoratorId="captcha"
-            :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur', validateFirst: true}">
+            :fieldDecoratorOptions="{rules: [{ required: false}, { validator: this.handleCaptchaCheck }]}">
             <a-input size="large" type="text" placeholder="验证码">
               <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
             </a-input>
@@ -147,6 +146,9 @@
     },
     methods: {
       checkUsername(rule, value, callback) {
+        if(!value){
+          callback(new Error("请输入用户名"))
+        }else{
         var params = {
           username: value,
         };
@@ -157,7 +159,8 @@
             callback("用户名已存在!")
           }
         })
-      },
+      }
+    },
       handleEmailCheck(rule, value, callback) {
         var params = {
           email: value,
@@ -215,8 +218,18 @@
         }
         callback()
       },
-
+      handleCaptchaCheck(rule, value, callback){
+        if(!value){
+          callback(new Error("请输入验证码"))
+        }else{
+          callback();
+        }
+      },
       handlePhoneCheck(rule, value, callback) {
+        var reg=/^1[3456789]\d{9}$/
+        if(!reg.test(value)){
+          callback(new Error("请输入正确手机号"))
+        }else{
         var params = {
           phone: value,
         };
@@ -227,7 +240,8 @@
             callback("手机号已存在!")
           }
         })
-      },
+      }
+    },
 
       handlePasswordInputClick() {
         if (!this.isMobile()) {
@@ -243,7 +257,6 @@
             var register = {
               username: values.username,
               password: values.password,
-              email: values.email,
               phone: values.mobile,
               smscode: values.captcha
             };

ant-design-vue-jeecg/src/views/user/third/JeecgThirdLoginMixin.js

@@ -0,0 +1,211 @@
+/**
+ *第三方登录
+ */
+import { mapActions } from 'vuex'
+import { postAction } from '@api/manage'
+import { timeFix } from '@/utils/util'
+
+export const JeecgThirdLoginMixin = {
+  data() {
+    return {
+      //第三方登录相关信息
+      thirdLoginInfo: '',
+      thirdPasswordShow: false,
+      thirdLoginPassword: '',
+      thirdLoginUser: '',
+      thirdConfirmShow: false,
+      thirdCreateUserLoding: false,
+      thirdLoginState: false,
+      //绑定手机号弹窗
+      bindingPhoneModal: false,
+      thirdPhone: '',
+      thirdCaptcha: '',
+      //获取验证码按钮30s之内是否可点击
+      thirdState: {
+        time: 30,
+        smsSendBtn: false
+      },
+      //第三方用户UUID
+      thirdUserUuid: '',
+      thirdType: '',
+      url: {
+        bindingThirdPhone: '/sys/thirdLogin/bindingThirdPhone'
+      }
+    }
+  },
+  created() {
+  },
+  methods: {
+    ...mapActions(['ThirdLogin']),
+    //第三方登录
+    onThirdLogin(source) {
+      let url = window._CONFIG['domianURL'] + `/sys/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
+      that.thirdType = source
+      that.thirdLoginInfo = ''
+      that.thirdLoginState = false
+      let receiveMessage = function(event) {
+        let token = event.data
+        if (typeof token === 'string') {
+          //如果是字符串类型 说明是token信息
+          if (token === '登录失败') {
+            that.$message.warning(token)
+          } else if (token.includes('绑定手机号')) {
+            that.bindingPhoneModal = true
+            let strings = token.split(',')
+            that.thirdUserUuid = strings[1]
+          } else {
+            that.doThirdLogin(token)
+          }
+        } else if (typeof token === 'object') {
+          //对象类型 说明需要提示是否绑定现有账号
+          if (token['isObj'] === true) {
+            that.thirdConfirmShow = true
+            that.thirdLoginInfo = { ...token }
+          }
+        } else {
+          that.$message.warning('不识别的信息传递')
+        }
+      }
+      window.addEventListener('message', receiveMessage, false)
+    },
+    // 根据token执行登录
+    doThirdLogin(token) {
+      if (this.thirdLoginState === false) {
+        this.thirdLoginState = true
+        let param={};
+        param.thirdType=this.thirdType
+        param.token=token
+        this.ThirdLogin(param).then(res => {
+          if (res.success) {
+            this.loginSuccess()
+          } else {
+            this.requestFailed(res)
+          }
+        })
+      }
+    },
+    // 绑定已有账号 需要输入密码
+    thirdLoginUserBind() {
+      this.thirdLoginPassword = ''
+      this.thirdLoginUser = this.thirdLoginInfo.uuid
+      this.thirdConfirmShow = false
+      this.thirdPasswordShow = true
+    },
+    //创建新账号
+    thirdLoginUserCreate() {
+      this.thirdCreateUserLoding = true
+      // 账号名后面添加两位随机数
+      this.thirdLoginInfo['suffix'] = parseInt(Math.random() * 98 + 1)
+      //this.thirdLoginInfo.operateCode = 123 //测试校验失败
+      postAction('/sys/third/user/create', this.thirdLoginInfo).then(res => {
+        if (res.success) {
+          let token = res.result
+          console.log('thirdCreateNewAccount', token)
+          this.doThirdLogin(token)
+          this.thirdConfirmShow = false
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.thirdCreateUserLoding = false
+      })
+    },
+    // 核实密码
+    thirdLoginCheckPassword() {
+      //this.thirdLoginInfo.operateCode = 123 //测试校验失败
+      let param = Object.assign({}, this.thirdLoginInfo, { password: this.thirdLoginPassword })
+      postAction('/sys/third/user/checkPassword', param).then(res => {
+        if (res.success) {
+          this.thirdLoginNoPassword()
+          this.doThirdLogin(res.result)
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
+    },
+    // 没有密码 取消操作
+    thirdLoginNoPassword() {
+      this.thirdPasswordShow = false
+      this.thirdLoginPassword = ''
+      this.thirdLoginUser = ''
+    },
+    //获取第三方验证码
+    getThirdCaptcha() {
+      let that = this
+      if (!this.thirdPhone) {
+        that.cmsFailed('请输入手机号')
+      } else {
+        this.thirdState.smsSendBtn = true
+        let interval = window.setInterval(() => {
+          if (that.thirdState.time-- <= 0) {
+            that.thirdState.time = 30
+            that.thirdState.smsSendBtn = false
+            window.clearInterval(interval)
+          }
+        }, 1000)
+        const hide = this.$message.loading('验证码发送中..', 0)
+        let smsParams = {}
+        smsParams.mobile = this.thirdPhone
+        smsParams.smsmode = '1'
+        postAction('/sys/sms', smsParams).then(res => {
+          if (!res.success) {
+            setTimeout(hide, 0)
+            this.cmsFailed(res.message)
+          }
+          setTimeout(hide, 500)
+        }).catch(err => {
+          setTimeout(hide, 1)
+          clearInterval(interval)
+          that.thirdState.time = 30
+          that.thirdState.smsSendBtn = false
+          this.requestFailed(err)
+        })
+      }
+    },
+    //绑定手机号点击确定按钮
+    thirdHandleOk() {
+      let bingingParams = {}
+      bingingParams.mobile = this.thirdPhone
+      bingingParams.captcha = this.thirdCaptcha
+      bingingParams.thirdUserUuid = this.thirdUserUuid
+      postAction(this.url.bindingThirdPhone, bingingParams).then(res => {
+        if (res.success) {
+          this.bindingPhoneModal = false
+          this.doThirdLogin(res.result)
+        } else {
+          this.$message.$warning(res.message)
+        }
+      })
+    },
+    loginSuccess () {
+      // update-begin- author:sunjianlei --- date:20190812 --- for: 登录成功后不解除禁用按钮，防止多次点击
+      // this.loginBtn = false
+      // update-end- author:sunjianlei --- date:20190812 --- for: 登录成功后不解除禁用按钮，防止多次点击
+      this.$router.push({ path: "/dashboard/analysis" }).catch(()=>{
+        console.log('登录跳转首页出错,这个错误从哪里来的')
+      })
+      this.$notification.success({
+        message: '欢迎',
+        description: `${timeFix()}，欢迎回来`,
+      });
+    },
+    cmsFailed(err){
+      this.$notification[ 'error' ]({
+        message: "登录失败",
+        description:err,
+        duration: 4,
+      });
+    },
+    requestFailed (err) {
+      this.$notification[ 'error' ]({
+        message: '登录失败',
+        description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试",
+        duration: 4,
+      });
+      this.loginBtn = false;
+    },
+  }
+
+}

ant-design-vue-jeecg/src/views/user/third/ThirdLogin.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <div class="user-login-other">
+      <span>其他登录方式</span>
+      <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>
+      <a @click="onThirdLogin('wechat_open')" title="微信"><a-icon class="item-icon" type="wechat"></a-icon></a>
+    </div>
+    <!-- 第三方登录绑定账号密码输入弹框 -->
+    <a-modal title="请输入密码" :visible="thirdPasswordShow" @ok="thirdLoginCheckPassword" @cancel="thirdLoginNoPassword">
+      <a-input-password placeholder="请输入密码" v-model="thirdLoginPassword" />
+    </a-modal>
+
+    <!-- 第三方登录提示是否绑定账号弹框 -->
+    <a-modal :footer="null" :closable="false" :visible="thirdConfirmShow" :class="'ant-modal-confirm'">
+      <div class="ant-modal-confirm-body-wrapper">
+        <div class="ant-modal-confirm-body">
+          <a-icon type="question-circle" style="color:#faad14"/>
+          <span class="ant-modal-confirm-title">提示</span>
+          <div class="ant-modal-confirm-content">
+            已有同名账号存在,请确认是否绑定该账号？
+          </div>
+        </div>
+        <div class="ant-modal-confirm-btns">
+          <a-button @click="thirdLoginUserCreate" :loading="thirdCreateUserLoding">创建新账号</a-button>
+          <a-button @click="thirdLoginUserBind" type="primary">确认绑定</a-button>
+        </div>
+      </div>
+    </a-modal>
+
+    <!-- 第三方登录绑定手机号 -->
+    <a-modal :visible="bindingPhoneModal" :class="'ant-modal-confirm'">
+      <template slot="footer">
+        <a-button key="submit" type="primary" @click="thirdHandleOk">
+          确定
+        </a-button>
+      </template>
+      <div class="ant-modal-confirm-body-wrapper">
+        <a-form-item>
+          <span>绑定手机号</span>
+        </a-form-item>
+        <a-form-item>
+          <a-input
+              size="large"
+              type="text"
+              placeholder="手机号"
+              v-model="thirdPhone">
+            <a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+          </a-input>
+        </a-form-item>
+
+        <a-row :gutter="16">
+          <a-col class="gutter-row" :span="16">
+            <a-form-item>
+              <a-input
+                  size="large"
+                  type="text"
+                  placeholder="请输入验证码"
+                  v-model="thirdCaptcha">
+                <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col class="gutter-row" :span="8">
+            <a-button
+                class="getCaptcha"
+                tabindex="-1"
+                :disabled="thirdState.smsSendBtn"
+                @click.stop.prevent="getThirdCaptcha"
+                v-text="!thirdState.smsSendBtn && '获取验证码' || (thirdState.time+' s')"></a-button>
+          </a-col>
+        </a-row>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { JeecgThirdLoginMixin } from '@views/user/third/JeecgThirdLoginMixin'
+export default {
+  name: 'thirdLogin',
+  mixins: [JeecgThirdLoginMixin],
+}
+</script>
+
+<style lang="less" scoped>
+.user-login-other {
+  text-align: left;
+  margin-top: 24px;
+  line-height: 22px;
+
+.item-icon {
+  font-size: 24px;
+  color: rgba(0, 0, 0, .2);
+  margin-left: 16px;
+  vertical-align: middle;
+  cursor: pointer;
+  transition: color .3s;
+
+&  :hover {
+  color: #1890ff;
+}
+}
+.register {
+  float: right;
+}
+}
+</style>