save temp tenant

src/components/InfiniteSelect/index.vue

@@ -1,8 +1,17 @@
 <script setup>
-import { onMounted, ref, toRefs, watch, watchEffect } from "vue";
+import {
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref,
+  toRefs,
+  watch,
+  watchEffect,
+} from "vue";
 import InfiniteLoading from "v3-infinite-loading";
 import "v3-infinite-loading/lib/style.css";
 import { debounce } from "lodash-es"; //required if you're not going to override default slots
+import { ElInput, ElPopover, ElScrollbar } from "element-plus";
 
 const props = defineProps({
   modelValue: {},
@@ -36,17 +45,16 @@ const props = defineProps({
 
 const { modelValue } = toRefs(props);
 const loadKey = ref(0);
-const emit = defineEmits(["update:modelValue", "change"]);
+const emit = defineEmits(["update:modelValue", "change", "confirm"]);
 
 const showPopOver = ref(false);
 
+const inputRefWhenShowPop = ref();
 const placeholderWhenShowPop = ref("");
 const placeholderWhenNotShowPop = ref("");
 const optionLabelWhenShowPop = ref("");
 const optionLabelWhenNotShowPop = ref("");
 const echoLabel = ref("");
-const label = ref("");
-const inputRef = ref();
 const options = ref([]);
 const page = ref(0);
 
@@ -63,14 +71,13 @@ const initOptions = (keyword) => {
 };
 
 const loadMore = async ($state) => {
-  console.log("loadmore");
   page.value++;
   props
     .remoteMethod({
       [props.query.page]: page.value,
       [props.query.size]: 10,
       [props.query.searchKey]: showPopOver.value
-        ? optionLabelWhenShowPop.value
+        ? optionLabelWhenShowPop.value ?? null
         : null,
     })
     .then((rows) => {
@@ -86,45 +93,29 @@ const loadMore = async ($state) => {
     });
 };
 
-const handleShow = () => {};
-
-const handleHide = () => {
-  console.log("hide");
-};
-
-const handleInputFocus = () => {
-  console.log("focus");
-};
 const handleInputClick = () => {
   showPopOver.value = true;
-  // if (label.value) {
-  //   page.value = 0;
-  //   options.value = []
-  //   loadKey.value++;
-  // }
   placeholderWhenShowPop.value = optionLabelWhenNotShowPop.value;
+  nextTick(() => {
+    if (inputRefWhenShowPop.value) {
+      inputRefWhenShowPop.value.focus();
+    }
+  });
 };
 
-const handleInputBlur = () => {
-  showPopOver.value = false;
-  if (label.value) {
-    setTimeout(() => {
-      page.value = 1;
-      initOptions();
-      loadKey.value++;
-    }, 1000);
-  }
-  // label.value = placeholder.value;
-  // placeholder.value = "";
+/**
+ * 清除选项
+ */
+const handleClearSeletion = () => {
+  emit("update:modelValue", null);
 };
-
 /**
  * 点击选项
  * @param option
  */
 const selectOption = (option) => {
   emit("update:modelValue", option[props.prop.value]);
-
+  emit("confirm", option);
   /*重新加载选项*/
   if (optionLabelWhenShowPop.value) {
     page.value = 0;
@@ -181,8 +172,6 @@ const handleBodyClick = (event) => {
     }
     showPopOver.value = false;
     optionLabelWhenShowPop.value = "";
-
-    // optionLabelWhenNotShowPop.value = props.placeholder;
   }
 };
 
@@ -191,6 +180,10 @@ onMounted(() => {
   initOptions();
   document.body.addEventListener("click", handleBodyClick);
 });
+
+onUnmounted(() => {
+  document.body.removeEventListener("click", handleBodyClick);
+});
 </script>
 
 <template>
@@ -201,15 +194,13 @@ onMounted(() => {
     :visible="showPopOver"
     :width="width ?? 240"
     placement="bottom"
-    @hide="handleHide"
-    @show="handleShow"
   >
     <template #reference>
       <div :style="`width: ${width ?? 240}px`">
         <!--选项显示时-->
         <el-input
           v-if="showPopOver"
-          ref="inputRef"
+          ref="inputRefWhenShowPop"
           v-model="optionLabelWhenShowPop"
           :placeholder="placeholderWhenShowPop"
           :prefix-icon="prefixIcon"
@@ -226,13 +217,14 @@ onMounted(() => {
         <!--选项隐藏时-->
         <el-input
           v-else
-          ref="inputRef"
           v-model="optionLabelWhenNotShowPop"
           :placeholder="placeholderWhenNotShowPop"
           :prefix-icon="prefixIcon"
           :size="size ?? 'default'"
           class="select-inner"
+          clearable
           suffix-icon="ArrowDown"
+          @clear="handleClearSeletion"
           @click.stop="handleInputClick"
         >
           <!--            @blur="handleInputBlur"-->

src/store/modules/user.js

@@ -9,7 +9,9 @@ const useUserStore = defineStore("user", {
     name: "",
     avatar: "",
     roles: [],
-    tenant: "",
+    tenant: "" /*登录后*/,
+    tempTenant: null /*临时的tenant*/,
+    tempTenantName: null,
     permissions: [],
     userInfoRes: null,
   }),
@@ -95,8 +97,17 @@ const useUserStore = defineStore("user", {
         resolve();
       });
     },
+    setTempTenant(tenant) {
+      this.tempTenant = tenant.tenantId;
+      this.tempTenantName = tenant.companyName;
+    },
   },
-  persist: [{ paths: ["tenant" /*"userInfoRes"*/], storage: localStorage }],
+  persist: [
+    {
+      paths: ["tenant" /*"userInfoRes"*/, "tempTenant", "tempTenantName"],
+      storage: localStorage,
+    },
+  ],
 });
 
 export default useUserStore;

src/views/login.vue

@@ -14,6 +14,7 @@
             label: 'companyName',
             value: 'tenantId',
           }"
+          :default-label="defaultTenantNamt"
           :query="{
             page: 'pageNum',
             size: 'pageSize',
@@ -23,6 +24,8 @@
           :width="350"
           prefix-icon="OfficeBuilding"
           size="large"
+          @change="handleTenantChange"
+          @confirm="handleTenantConfirm"
         />
         <!--        <el-input-->
         <!--            v-model="loginForm.tenant"-->
@@ -118,7 +121,7 @@ import { getCodeImg, getTenantNormalList } from "@/api/login";
 import Cookies from "js-cookie";
 import { decrypt, encrypt } from "@/utils/jsencrypt";
 import useUserStore from "@/store/modules/user";
-import PagedSelect from "@/components/PagedSelect";
+import PagedSelect from "@/components/InfiniteSelect";
 
 const userStore = useUserStore();
 const router = useRouter();
@@ -139,7 +142,7 @@ const loginRules = {
   password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
   code: [{ required: true, trigger: "change", message: "请输入验证码" }],
 };
-
+const defaultTenantNamt = ref("");
 const codeUrl = ref("");
 const loading = ref(false);
 // 验证码开关
@@ -205,14 +208,30 @@ function getCookie() {
     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);
 
+const handleTenantChange = (value) => {
+  console.log(value);
+  if (!value) {
+    useUserStore().setTempTenant({
+      tenantId: null,
+      companyName: null,
+    });
+  }
+  // useUserStore().setTempTenant(value)
+};
+const handleTenantConfirm = (option) => {
+  useUserStore().setTempTenant(option);
+};
+
 getCode();
 getCookie();
+defaultTenantNamt.value = useUserStore().tempTenantName;
 </script>
 
 <style lang="scss" scoped>