load captcha image only when tenant selected

src/views/login.vue

@@ -1,31 +1,31 @@
 <template>
   <div class="login">
     <el-form
-      ref="loginRef"
-      :model="loginForm"
-      :rules="loginRules"
-      class="login-form"
+        ref="loginRef"
+        :model="loginForm"
+        :rules="loginRules"
+        class="login-form"
     >
       <h3 class="title">若依后台管理系统</h3>
       <el-form-item prop="tenant">
         <paged-select
-          v-model="loginForm.tenant"
-          :prop="{
+            v-model="loginForm.tenant"
+            :default-label="defaultTenantNamt"
+            :prop="{
             label: 'companyName',
             value: 'tenantId',
           }"
-          :default-label="defaultTenantNamt"
-          :query="{
+            :query="{
             page: 'pageNum',
             size: 'pageSize',
             searchKey: 'companyName',
           }"
-          :remote-method="loadTenantOptions"
-          :width="350"
-          prefix-icon="OfficeBuilding"
-          size="large"
-          @change="handleTenantChange"
-          @confirm="handleTenantConfirm"
+            :remote-method="loadTenantOptions"
+            :width="350"
+            prefix-icon="OfficeBuilding"
+            size="large"
+            @change="handleTenantChange"
+            @confirm="handleTenantConfirm"
         />
         <!--        <el-input-->
         <!--            v-model="loginForm.tenant"-->
@@ -41,70 +41,70 @@
       </el-form-item>
       <el-form-item prop="username">
         <el-input
-          v-model="loginForm.username"
-          auto-complete="off"
-          placeholder="账号"
-          size="large"
-          type="text"
+            v-model="loginForm.username"
+            auto-complete="off"
+            placeholder="账号"
+            size="large"
+            type="text"
         >
           <template #prefix>
-            <svg-icon class="el-input__icon input-icon" icon-class="user" />
+            <svg-icon class="el-input__icon input-icon" icon-class="user"/>
           </template>
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
         <el-input
-          v-model="loginForm.password"
-          auto-complete="off"
-          placeholder="密码"
-          size="large"
-          type="password"
-          @keyup.enter="handleLogin"
+            v-model="loginForm.password"
+            auto-complete="off"
+            placeholder="密码"
+            size="large"
+            type="password"
+            @keyup.enter="handleLogin"
         >
           <template #prefix>
-            <svg-icon class="el-input__icon input-icon" icon-class="password" />
+            <svg-icon class="el-input__icon input-icon" icon-class="password"/>
           </template>
         </el-input>
       </el-form-item>
-      <el-form-item v-if="captchaEnabled" prop="code">
+      <el-form-item v-if="captchaEnabled && loginForm.tenant" prop="code">
         <el-input
-          v-model="loginForm.code"
-          auto-complete="off"
-          placeholder="验证码"
-          size="large"
-          style="width: 63%"
-          @keyup.enter="handleLogin"
+            v-model="loginForm.code"
+            auto-complete="off"
+            placeholder="验证码"
+            size="large"
+            style="width: 63%"
+            @keyup.enter="handleLogin"
         >
           <template #prefix>
             <svg-icon
-              class="el-input__icon input-icon"
-              icon-class="validCode"
+                class="el-input__icon input-icon"
+                icon-class="validCode"
             />
           </template>
         </el-input>
         <div class="login-code">
-          <img :src="codeUrl" class="login-code-img" @click="getCode" />
+          <img :src="codeUrl" class="login-code-img" @click="getCode"/>
         </div>
       </el-form-item>
       <el-checkbox
-        v-model="loginForm.rememberMe"
-        style="margin: 0px 0px 25px 0px"
-        >记住密码
+          v-model="loginForm.rememberMe"
+          style="margin: 0px 0px 25px 0px"
+      >记住密码
       </el-checkbox>
       <el-form-item style="width: 100%">
         <el-button
-          :loading="loading"
-          size="large"
-          style="width: 100%"
-          type="primary"
-          @click.prevent="handleLogin"
+            :loading="loading"
+            size="large"
+            style="width: 100%"
+            type="primary"
+            @click.prevent="handleLogin"
         >
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
         <div v-if="register" style="float: right">
           <router-link :to="'/register'" class="link-type"
-            >立即注册
+          >立即注册
           </router-link>
         </div>
       </el-form-item>
@@ -117,15 +117,16 @@
 </template>
 
 <script setup>
-import { getCodeImg, getTenantNormalList } from "@/api/login";
+import {getCodeImg, getTenantNormalList} from "@/api/login";
 import Cookies from "js-cookie";
-import { decrypt, encrypt } from "@/utils/jsencrypt";
+import {decrypt, encrypt} from "@/utils/jsencrypt";
 import useUserStore from "@/store/modules/user";
 import PagedSelect from "@/components/InfiniteSelect";
+import {getCurrentInstance, ref, watchEffect} from "vue";
 
 const userStore = useUserStore();
 const router = useRouter();
-const { proxy } = getCurrentInstance();
+const {proxy} = getCurrentInstance();
 
 const loginForm = ref({
   tenant: "",
@@ -137,10 +138,10 @@ const loginForm = ref({
 });
 
 const loginRules = {
-  tenant: [{ required: true, trigger: "change", message: "请选择租户" }],
-  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
-  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
-  code: [{ required: true, trigger: "change", message: "请输入验证码" }],
+  tenant: [{required: true, trigger: "change", message: "请选择租户"}],
+  username: [{required: true, trigger: "blur", message: "请输入您的账号"}],
+  password: [{required: true, trigger: "blur", message: "请输入您的密码"}],
+  code: [{required: true, trigger: "change", message: "请输入验证码"}],
 };
 const defaultTenantNamt = ref("");
 const codeUrl = ref("");
@@ -157,12 +158,12 @@ function handleLogin() {
       loading.value = true;
       // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
       if (loginForm.value.rememberMe) {
-        Cookies.set("tenant", loginForm.value.tenant, { expires: 30 });
-        Cookies.set("username", loginForm.value.username, { expires: 30 });
+        Cookies.set("tenant", loginForm.value.tenant, {expires: 30});
+        Cookies.set("username", loginForm.value.username, {expires: 30});
         Cookies.set("password", encrypt(loginForm.value.password), {
           expires: 30,
         });
-        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
+        Cookies.set("rememberMe", loginForm.value.rememberMe, {expires: 30});
       } else {
         // 否则移除
         Cookies.remove("tenant");
@@ -172,17 +173,17 @@ function handleLogin() {
       }
       // 调用action的登录方法
       userStore
-        .login(loginForm.value)
-        .then(() => {
-          router.push({ path: redirect.value || "/" });
-        })
-        .catch(() => {
-          loading.value = false;
-          // 重新获取验证码
-          if (captchaEnabled.value) {
-            getCode();
-          }
-        });
+          .login(loginForm.value)
+          .then(() => {
+            router.push({path: redirect.value || "/"});
+          })
+          .catch(() => {
+            loading.value = false;
+            // 重新获取验证码
+            if (captchaEnabled.value) {
+              getCode();
+            }
+          });
     }
   });
 }
@@ -190,7 +191,7 @@ function handleLogin() {
 function getCode() {
   getCodeImg().then((res) => {
     captchaEnabled.value =
-      res.captchaEnabled === undefined ? true : res.captchaEnabled;
+        res.captchaEnabled === undefined ? true : res.captchaEnabled;
     register.value = res.register === undefined ? true : res.register;
     if (captchaEnabled.value) {
       codeUrl.value = "data:image/gif;base64," + res.img;
@@ -206,14 +207,14 @@ function getCookie() {
   loginForm.value = {
     username: username === undefined ? loginForm.value.username : username,
     password:
-      password === undefined ? loginForm.value.password : decrypt(password),
+        password === undefined ? loginForm.value.password : decrypt(password),
     rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
     tenant: useUserStore().tempTenant ?? "",
   };
 }
 
 const loadTenantOptions = (query) =>
-  getTenantNormalList(query).then((resp) => resp.rows);
+    getTenantNormalList(query).then((resp) => resp.rows);
 
 const handleTenantChange = (value) => {
   console.log(value);
@@ -229,7 +230,11 @@ const handleTenantConfirm = (option) => {
   useUserStore().setTempTenant(option);
 };
 
-getCode();
+watchEffect(() => {
+  if (loginForm.value.tenant) {
+    getCode();
+  }
+})
 getCookie();
 defaultTenantNamt.value = useUserStore().tempTenantName;
 </script>