load captcha image only when tenant selected

src/views/login.vue

@@ -10,11 +10,11 @@
       <el-form-item prop="tenant">
         <paged-select
             v-model="loginForm.tenant"
+            :default-label="defaultTenantNamt"
             :prop="{
             label: 'companyName',
             value: 'tenantId',
           }"
-          :default-label="defaultTenantNamt"
             :query="{
             page: 'pageNum',
             size: 'pageSize',
@@ -48,7 +48,7 @@
             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>
@@ -62,11 +62,11 @@
             @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"
@@ -83,7 +83,7 @@
           </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
@@ -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: "请选择租户" }],
+  tenant: [{required: true, trigger: "change", message: "请选择租户"}],
-  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
+  username: [{required: true, trigger: "blur", message: "请输入您的账号"}],
-  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
+  password: [{required: true, trigger: "blur", message: "请输入您的密码"}],
-  code: [{ required: true, trigger: "change", 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("tenant", loginForm.value.tenant, {expires: 30});
-        Cookies.set("username", loginForm.value.username, { 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");
@@ -174,7 +175,7 @@ function handleLogin() {
       userStore
           .login(loginForm.value)
           .then(() => {
-          router.push({ path: redirect.value || "/" });
+            router.push({path: redirect.value || "/"});
           })
           .catch(() => {
             loading.value = false;
@@ -229,7 +230,11 @@ const handleTenantConfirm = (option) => {
   useUserStore().setTempTenant(option);
 };
 
-getCode();
+watchEffect(() => {
+  if (loginForm.value.tenant) {
+    getCode();
+  }
+})
 getCookie();
 defaultTenantNamt.value = useUserStore().tempTenantName;
 </script>