From 4136e06802b016c8fc7ba5f832c989b65e73e517 Mon Sep 17 00:00:00 2001
From: ailanyin <cxc>
Date: Fri, 2 Jun 2023 14:55:28 +0800
Subject: [PATCH] save temp tenant

---
 .../{PagedSelect => InfiniteSelect}/index.vue | 70 ++++++++-----------
 src/store/modules/user.js                     | 15 +++-
 src/views/login.vue                           | 23 +++++-
 3 files changed, 65 insertions(+), 43 deletions(-)
 rename src/components/{PagedSelect => InfiniteSelect}/index.vue (86%)

diff --git a/src/components/PagedSelect/index.vue b/src/components/InfiniteSelect/index.vue
similarity index 86%
rename from src/components/PagedSelect/index.vue
rename to src/components/InfiniteSelect/index.vue
index e87dd82..f3028e8 100644
--- a/src/components/PagedSelect/index.vue
+++ b/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"-->
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 8eca2aa..1c38f2c 100644
--- a/src/store/modules/user.js
+++ b/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;
diff --git a/src/views/login.vue b/src/views/login.vue
index ee1903c..fa0834f 100644
--- a/src/views/login.vue
+++ b/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>