Jeecg Boot 2.2.1 版本发布，低代码平台

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

@@ -1,16 +1,14 @@
 <template>
   <a-card :bordered="false" style="width: 130%;text-align: center;margin-left:-10%">
     <a-steps class="steps" :current="currentTab">
-      <a-step title="用户账户"/>
       <a-step title="手机验证"/>
       <a-step title="密码"/>
       <a-step title="完成"/>
     </a-steps>
     <div class="content">
-      <step1 v-if="currentTab === 0" @nextStep="nextStep"/>
-      <step2 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep" :userList="userList"/>
-      <step3 v-if="currentTab === 2" @nextStep="nextStep" @prevStep="prevStep" :userList="userList"/>
-      <step4 v-if="currentTab === 3" @prevStep="prevStep" @finish="finish" :userList="userList"/>
+      <step2 v-if="currentTab === 0" @nextStep="nextStep"/>
+      <step3 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep" :userList="userList"/>
+      <step4 v-if="currentTab === 2" @prevStep="prevStep" @finish="finish" :userList="userList"/>
     </div>
   </a-card>
 </template>

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

@@ -9,16 +9,16 @@
           <a-form-item>
             <a-input
               size="large"
-              v-decorator="['username',{initialValue:'admin', rules: validatorRules.username.rules}]"
+              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>
 
           <a-form-item>
             <a-input
-              v-decorator="['password',{initialValue:'123456', rules: validatorRules.password.rules}]"
+              v-decorator="['password',validatorRules.password]"
               size="large"
               type="password"
               autocomplete="false"
@@ -118,46 +118,7 @@
       :visible="stepCaptchaVisible"
       @success="stepCaptchaSuccess"
       @cancel="stepCaptchaCancel"></two-step-captcha>
-
-    <a-modal
-      title="登录部门选择"
-      :width="450"
-      :visible="departVisible"
-      :closable="false"
-      :maskClosable="false">
-
-      <template slot="footer">
-        <a-button type="primary" @click="departOk">确认</a-button>
-      </template>
-
-      <a-form>
-        <a-form-item
-          :labelCol="{span:4}"
-          :wrapperCol="{span:20}"
-          style="margin-bottom:10px"
-          :validate-status="validate_status">
-          <a-tooltip placement="topLeft" >
-            <template slot="title">
-              <span>您隶属于多部门，请选择登录部门</span>
-            </template>
-            <a-avatar style="backgroundColor:#87d068" icon="gold" />
-          </a-tooltip>
-          <a-select @change="departChange" :class="{'valid-error':validate_status=='error'}" placeholder="请选择登录部门" style="margin-left:10px;width: 80%">
-            <a-icon slot="suffixIcon" type="gold" />
-            <a-select-option
-              v-for="d in departList"
-              :key="d.id"
-              :value="d.orgCode">
-              {{ d.departName }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-      </a-form>
-
-
-
-    </a-modal>
-
+    <login-select-modal ref="loginSelect" @success="loginSelectOk"></login-select-modal>
   </div>
 </template>
 
@@ -173,10 +134,12 @@
   import { encryption , getEncryptedString } from '@/utils/encryption/aesEncrypt'
   import store from '@/store/'
   import { USER_INFO } from "@/store/mutation-types"
+  import LoginSelectModal from './LoginSelectModal.vue'
 
   export default {
     components: {
-      TwoStepCaptcha
+      TwoStepCaptcha,
+      LoginSelectModal
     },
     data () {
       return {
@@ -205,12 +168,7 @@
         verifiedCode:"",
         inputCodeContent:"",
         inputCodeNull:true,
-
-        departList:[],
-        departVisible:false,
-        departSelected:"",
         currentUsername:"",
-        validate_status:"",
         currdatetime:'',
         randCodeImage:'',
         requestCodeSuccess:false
@@ -281,7 +239,7 @@
               loginParams.checkKey = that.currdatetime
               console.log("登录参数",loginParams)
               that.Login(loginParams).then((res) => {
-                this.departConfirm(res)
+                this.$refs.loginSelect.show(res.result)
               }).catch((err) => {
                 that.requestFailed(err);
               });
@@ -300,7 +258,7 @@
               loginParams.remember_me = values.rememberMe
               that.PhoneLogin(loginParams).then((res) => {
                 console.log(res.result);
-                this.departConfirm(res)
+                this.$refs.loginSelect.show(res.result)
               }).catch((err) => {
                 that.requestFailed(err);
               })
@@ -376,7 +334,9 @@
         // update-begin- author:sunjianlei --- date:20190812 --- for: 登录成功后不解除禁用按钮，防止多次点击
         // this.loginBtn = false
         // update-end- author:sunjianlei --- date:20190812 --- for: 登录成功后不解除禁用按钮，防止多次点击
-        this.$router.push({ path: "/dashboard/analysis" })
+        this.$router.push({ path: "/dashboard/analysis" }).catch(()=>{
+          console.log('登录跳转首页出错,这个错误从哪里来的')
+        })
         this.$notification.success({
           message: '欢迎',
           description: `${timeFix()}，欢迎回来`,
@@ -418,64 +378,8 @@
       inputCodeChange(e){
         this.inputCodeContent = e.target.value
       },
-      departConfirm(res){
-        if(res.success){
-          let multi_depart = res.result.multi_depart
-          //0:无部门 1:一个部门 2:多个部门
-          if(multi_depart==0){
-            this.loginSuccess()
-            this.$notification.warn({
-              message: '提示',
-              description: `您尚未归属部门,请确认账号信息`,
-              duration:3
-            });
-          }else if(multi_depart==2){
-            this.departVisible=true
-            this.currentUsername=this.form.getFieldValue("username")
-            this.departList = res.result.departs
-          }else {
-            this.loginSuccess()
-          }
-        }else{
-          this.requestFailed(res)
-          this.Logout();
-        }
-      },
-      departOk(){
-        if(!this.departSelected){
-          this.validate_status='error'
-          return false
-        }
-       let obj = {
-          orgCode:this.departSelected,
-          username:this.form.getFieldValue("username")
-        }
-        putAction("/sys/selectDepart",obj).then(res=>{
-          if(res.success){
-            const userInfo = res.result.userInfo;
-            Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000);
-            store.commit('SET_INFO', userInfo);
-            //console.log("---切换组织机构---userInfo-------",store.getters.userInfo.orgCode);
-            this.departClear()
-            this.loginSuccess()
-          }else{
-            this.requestFailed(res)
-            this.Logout().then(()=>{
-              this.departClear()
-            });
-          }
-        })
-      },
-      departClear(){
-        this.departList=[]
-        this.departSelected=""
-        this.currentUsername=""
-        this.departVisible=false
-        this.validate_status=''
-      },
-      departChange(value){
-        this.validate_status='success'
-        this.departSelected = value
+      loginSelectOk(){
+        this.loginSuccess()
       },
     getRouterData(){
       this.$nextTick(() => {

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

@@ -0,0 +1,210 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="450"
+    :visible="visible"
+    :closable="false"
+    :maskClosable="false">
+
+    <template slot="footer">
+      <a-button type="primary" @click="selectOk">确认</a-button>
+    </template>
+
+    <a-form>
+      <a-form-item v-if="isMultiTenant" :labelCol="{span:4}" :wrapperCol="{span:20}" style="margin-bottom:10px" :validate-status="validate_status1">
+        <a-tooltip placement="topLeft" >
+          <template slot="title">
+            <span>您有多个租户，请选择登录租户</span>
+          </template>
+          <a-avatar style="backgroundColor:#87d068" icon="gold" />
+        </a-tooltip>
+
+        <a-select @change="handleTenantChange" :class="{'valid-error':validate_status1=='error'}" placeholder="请选择登录租户" style="margin-left:10px;width: 80%">
+          <a-icon slot="suffixIcon" type="gold" />
+          <a-select-option v-for="d in tenantList" :key="d.id" :value="d.id">
+            {{ d.name }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+
+
+      <a-form-item v-if="isMultiDepart" :labelCol="{span:4}" :wrapperCol="{span:20}" style="margin-bottom:10px" :validate-status="validate_status2">
+        <a-tooltip placement="topLeft" >
+          <template slot="title">
+            <span>您有多个部门，请选择登录部门</span>
+          </template>
+          <a-avatar style="backgroundColor:rgb(104, 208, 203);" icon="gold" />
+        </a-tooltip>
+
+        <a-select @change="handleDepartChange" :class="{'valid-error':validate_status2=='error'}" placeholder="请选择登录部门" style="margin-left:10px;width: 80%">
+          <a-icon slot="suffixIcon" type="gold" />
+          <a-select-option v-for="d in departList" :key="d.id" :value="d.orgCode">
+            {{ d.departName }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+
+    </a-form>
+  </a-modal>
+</template>
+
+<script>
+
+  import Vue from 'vue'
+  import { getAction,putAction } from '@/api/manage'
+  import { USER_INFO } from "@/store/mutation-types"
+  import store from './Login'
+
+  export default {
+    name: 'LoginSelectModal',
+    data(){
+      return {
+        visible: false,
+        isMultiDepart:false,
+        departList:[],
+
+        isMultiTenant:false,
+        tenantList:[],
+
+        username:'',
+        orgCode:'',
+        tenant_id:'',
+
+        validate_status1: "",
+        validate_status2: "",
+      }
+    },
+    computed:{
+      title(){
+        if(this.isMultiDepart && this.isMultiTenant){
+          return '请选择租户和部门'
+        }else if(this.isMultiDepart && !this.isMultiTenant){
+          return '请选择部门'
+        }else if(!this.isMultiDepart && this.isMultiTenant){
+          return '请选择租户'
+        }
+      }
+    },
+    methods:{
+      clear(){
+        this.departList = []
+        this.tenantList = []
+        this.visible=false
+        this.validate_status1=''
+        this.validate_status2=''
+      },
+      bizDepart(loginResult){
+        let multi_depart = loginResult.multi_depart
+        //0:无部门 1:一个部门 2:多个部门
+        if(multi_depart==0){
+          this.$notification.warn({
+            message: '提示',
+            description: `您尚未归属部门,请确认账号信息`,
+            duration:3
+          });
+          this.isMultiDepart = false
+        }else if(multi_depart==2){
+          this.visible=true
+          this.isMultiDepart = true
+          this.departList = loginResult.departs
+        }else {
+          this.isMultiDepart = false
+        }
+      },
+      bizTenant(ids){
+        if(!ids || ids.length==0){
+          this.isMultiTenant = false
+        } else if(ids.indexOf(',')<0){
+          this.tenant_id = ids;
+          this.isMultiTenant = false
+        }else{
+          this.visible = true
+          this.isMultiTenant = true
+          getAction('/sys/tenant/queryList', {ids: ids}).then(res=>{
+            this.tenantList = res.result
+          })
+        }
+      },
+      show(loginResult){
+        this.clear();
+        this.bizDepart(loginResult);
+
+        let user = Vue.ls.get(USER_INFO)
+        this.username = user.username
+        let ids = user.relTenantIds
+        this.bizTenant(ids);
+
+        if(this.visible===false){
+          this.$store.dispatch('saveTenant', this.tenant_id);
+          this.$emit('success')
+        }
+
+      },
+      requestFailed (err) {
+        this.$notification[ 'error' ]({
+          message: '登录失败',
+          description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试",
+          duration: 4,
+        });
+        this.loginBtn = false;
+      },
+      departResolve(){
+        return new Promise((resolve, reject)=>{
+          if(this.isMultiDepart===false){
+            resolve();
+          }else{
+            let obj = {
+              orgCode:this.orgCode,
+              username:this.username
+            }
+            putAction("/sys/selectDepart",obj).then(res=>{
+              if(res.success){
+                const userInfo = res.result.userInfo;
+                Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000);
+                this.$store.commit('SET_INFO', userInfo);
+                //console.log("---切换组织机构---userInfo-------",store.getters.userInfo.orgCode);
+                resolve();
+              }else{
+                this.requestFailed(res)
+                this.$store.dispatch('Logout');
+                reject();
+              }
+            })
+          }
+        })
+      },
+      selectOk(){
+        if(this.isMultiTenant && !this.tenant_id){
+          this.validate_status1='error'
+          return false
+        }
+        if(this.isMultiDepart && !this.orgCode){
+          this.validate_status2='error'
+          return false
+        }
+        this.departResolve().then(()=>{
+          if(this.isMultiTenant){
+            this.$store.dispatch('saveTenant', this.tenant_id);
+            this.$emit('success')
+          }else{
+            this.$emit('success')
+          }
+        }).catch(()=>{
+          console.log('登录选择出问题')
+        })
+      },
+      handleTenantChange(e){
+        this.validate_status1 = ''
+        this.tenant_id = e
+      },
+      handleDepartChange(e){
+        this.validate_status2 = ''
+        this.orgCode = e
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

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

@@ -1,19 +1,6 @@
 <template>
   <div>
     <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;" @keyup.enter.native="nextStep">
-      <a-form-item
-        label="账号名"
-        :labelCol="{span: 5}"
-        :wrapperCol="{span: 19}"
-      >
-        <a-input
-          type="text"
-          autocomplete="false"
-          :style="{width:'310px'}"
-          :value="accountName"
-          disabled>
-        </a-input>
-      </a-form-item>
       <a-form-item
         label="手机"
         :labelCol="{span: 5}"
@@ -22,8 +9,8 @@
         <a-input
           type="text"
           autocomplete="false"
-          :style="{width:'310px'}"
-          v-decorator="['phone',{initialValue: defaultPhone, rules: validatorRules.phone.rule}]"
+          style="width:310px;margin-left:-10px"
+          v-decorator="['phone',{ rules: validatorRules.phone.rule}]"
           placeholder="请输入手机号">
           <a-icon slot="prefix" type="phone" :style="{ color: 'rgba(0,0,0,.25)'}"/>
         </a-input>
@@ -52,10 +39,9 @@
         </a-row>
       </a-form-item>
       <a-form-item :wrapperCol="{span: 19, offset: 5}">
-        <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
+        <router-link style="float: left;line-height: 40px;" :to="{ name: 'login' }">使用已有账户登录</router-link>
         <a-button type="primary" @click="nextStep" style="margin-left: 20px">下一步</a-button>
       </a-form-item>
-
     </a-form>
   </div>
 </template>
@@ -70,7 +56,7 @@
       return {
         form: this.$form.createForm(this),
         loading: false,
-        accountName: this.userList.username,
+        // accountName: this.userList.username,
         dropList: "0",
         captcha: "",
         show: true,
@@ -84,17 +70,11 @@
         },
         validatorRules: {
           captcha: {rule: [{required: true, message: '请输入短信验证码!'}, {validator: this.validateCaptcha}]},
-          phone: {rule: [{required: true, message: '请输入手机号码!'}]},
+          phone: {rule: [{required: true, message: '请输入手机号码!'}, {validator: this.validatePhone}]},
         },
       }
     },
     computed: {
-      defaultPhone: function(){
-        if(this.userList.isPhone){
-          return this.userList.phone
-        }
-        return null;
-      }
     },
     methods: {
       nextStep() {
@@ -108,15 +88,15 @@
                 this.cmsFailed("请输入短信验证码!");
               } else {
                 var params = {}
-                params.phone = this.userList.phone;
+                params.phone = values.phone;
                 params.smscode = values.captcha;
                 postAction("/sys/user/phoneVerification", params).then((res) => {
                   if (res.success) {
                     console.log(res);
                     var userList = {
-                      username: this.userList.username,
-                      phone: this.userList.phone,
-                      smscode: res.result
+                      username: res.result.username,
+                      phone: values.phone,
+                      smscode: res.result.smscode
                     };
                     setTimeout(function () {
                       that.$emit('nextStep', userList)
@@ -133,12 +113,14 @@
           }
         })
       },
-      prevStep() {
-        this.$emit('prevStep', this.userList);
-      },
       getCaptcha(e) {
         e.preventDefault();
         let that = this;
+        let phone=that.form.getFieldValue("phone")
+        if(!phone){
+          this.cmsFailed("手机号不能为空!");
+          return;
+        }
         this.state.smsSendBtn = true;
         let interval = window.setInterval(() => {
           if (that.state.time-- <= 0) {
@@ -150,7 +132,7 @@
 
         const hide = this.$message.loading('验证码发送中..', 0);
         let smsParams = {
-          mobile: this.userList.phone,
+          mobile: phone,
           smsmode: "2"
         };
         postAction("/sys/sms", smsParams).then(res => {
@@ -179,6 +161,18 @@
           that.show = false;
         }
       },
+      validatePhone(rule,value,callback){
+          if(value){
+            var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
+            if(!myreg.test(value)){
+              callback("请输入正确的手机号")
+            }else{
+              callback();
+            }
+          }else{
+            callback()
+          }
+      }
     }
 
   }