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"-->