From 1519f47f7d7785a93be51ce9da0f9ef2e78705c9 Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Sun, 8 Oct 2023 15:25:49 +0800
Subject: [PATCH] =?UTF-8?q?fix(ApiSelect):=20=20=E7=A7=BB=E9=99=A4watchEff?=
 =?UTF-8?q?ect=E5=BC=95=E5=8F=91=E7=9A=84=E9=87=8D=E5=A4=8D=E8=AF=B7?=
 =?UTF-8?q?=E6=B1=82=20(#3107)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Form/src/components/ApiSelect.vue         | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/components/Form/src/components/ApiSelect.vue b/src/components/Form/src/components/ApiSelect.vue
index 5f4bdee7..a3812819 100644
--- a/src/components/Form/src/components/ApiSelect.vue
+++ b/src/components/Form/src/components/ApiSelect.vue
@@ -21,7 +21,7 @@
   </Select>
 </template>
 <script lang="ts">
-  import { defineComponent, PropType, ref, watchEffect, computed, unref, watch } from 'vue';
+  import { defineComponent, PropType, ref, computed, unref, watch } from 'vue';
   import { Select } from 'ant-design-vue';
   import { isFunction } from '/@/utils/is';
   import { useRuleFormItem } from '/@/hooks/component/useFormItem';
@@ -61,7 +61,8 @@
     setup(props, { emit }) {
       const options = ref<OptionsItem[]>([]);
       const loading = ref(false);
-      const isFirstLoad = ref(true);
+      // 首次是否加载过了
+      const isFirstLoaded = ref(false);
       const emitData = ref<any[]>([]);
       const attrs = useAttrs();
       const { t } = useI18n();
@@ -86,10 +87,6 @@
         return data.length > 0 ? data : props.options;
       });
 
-      watchEffect(() => {
-        props.immediate && !props.alwaysLoad && fetch();
-      });
-
       watch(
         () => state.value,
         (v) => {
@@ -100,18 +97,19 @@
       watch(
         () => props.params,
         () => {
-          !unref(isFirstLoad) && fetch();
+          !unref(isFirstLoaded) && fetch();
         },
-        { deep: true },
+        { deep: true, immediate: props.immediate },
       );
 
       async function fetch() {
         const api = props.api;
-        if (!api || !isFunction(api)) return;
+        if (!api || !isFunction(api) || loading.value) return;
         options.value = [];
         try {
           loading.value = true;
           const res = await api(props.params);
+          isFirstLoaded.value = true;
           if (Array.isArray(res)) {
             options.value = res;
             emitChange();
@@ -128,13 +126,12 @@
         }
       }
 
-      async function handleFetch(visible) {
+      async function handleFetch(visible: boolean) {
         if (visible) {
           if (props.alwaysLoad) {
             await fetch();
-          } else if (!props.immediate && unref(isFirstLoad)) {
+          } else if (!props.immediate && !unref(isFirstLoaded)) {
             await fetch();
-            isFirstLoad.value = false;
           }
         }
       }