From fa64fc8a622832b87fdf672965d55d543b5929a2 Mon Sep 17 00:00:00 2001
From: Vben <anncwb@126.com>
Date: Thu, 24 Jun 2021 23:51:14 +0800
Subject: [PATCH] fix(api-select): ensure that the onchange function parameters
 are correct

---
 .../Form/src/components/ApiSelect.vue         | 10 ++++++++--
 src/hooks/component/useFormItem.ts            | 20 +++++++++++++++----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/Form/src/components/ApiSelect.vue b/src/components/Form/src/components/ApiSelect.vue
index 9fc5160d..1b224e82 100644
--- a/src/components/Form/src/components/ApiSelect.vue
+++ b/src/components/Form/src/components/ApiSelect.vue
@@ -2,6 +2,7 @@
   <Select
     @dropdownVisibleChange="handleFetch"
     v-bind="attrs"
+    @change="handleChange"
     :options="getOptions"
     v-model:value="state"
   >
@@ -67,11 +68,12 @@
       const options = ref<OptionsItem[]>([]);
       const loading = ref(false);
       const isFirstLoad = ref(true);
+      const emitData = ref<any[]>([]);
       const attrs = useAttrs();
       const { t } = useI18n();
 
       // Embedded in the form, just use the hook binding to perform form verification
-      const [state] = useRuleFormItem(props);
+      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
 
       const getOptions = computed(() => {
         const { labelField, valueField, numberToString } = props;
@@ -135,7 +137,11 @@
         emit('options-change', unref(options));
       }
 
-      return { state, attrs, getOptions, loading, t, handleFetch };
+      function handleChange(_, ...args) {
+        emitData.value = args;
+      }
+
+      return { state, attrs, getOptions, loading, t, handleFetch, handleChange };
     },
   });
 </script>
diff --git a/src/hooks/component/useFormItem.ts b/src/hooks/component/useFormItem.ts
index 140e3d0b..c059b0fb 100644
--- a/src/hooks/component/useFormItem.ts
+++ b/src/hooks/component/useFormItem.ts
@@ -1,12 +1,22 @@
-import type { UnwrapRef } from 'vue';
-import { reactive, readonly, computed, getCurrentInstance, watchEffect } from 'vue';
+import type { UnwrapRef, Ref } from 'vue';
+import {
+  reactive,
+  readonly,
+  computed,
+  getCurrentInstance,
+  watchEffect,
+  unref,
+  nextTick,
+  toRaw,
+} from 'vue';
 
 import { isEqual } from 'lodash-es';
 
 export function useRuleFormItem<T extends Recordable>(
   props: T,
   key: keyof T = 'value',
-  changeEvent = 'change'
+  changeEvent = 'change',
+  emitData?: Ref<any[]>
 ) {
   const instance = getCurrentInstance();
   const emit = instance?.emit;
@@ -33,7 +43,9 @@ export function useRuleFormItem<T extends Recordable>(
       if (isEqual(value, defaultState.value)) return;
 
       innerState.value = value as T[keyof T];
-      emit?.(changeEvent, value);
+      nextTick(() => {
+        emit?.(changeEvent, value, ...(toRaw(unref(emitData)) || []));
+      });
     },
   });
 
-- 
GitLab