fix(api-select): ensure that the onchange function parameters are correct

Vben
1 parent a2a75a09
Showing 2 changed files with 24 additions and 6 deletions
src/components/Form/src/components/ApiSelect.vue
src/hooks/component/useFormItem.ts
@@ -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>
-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&lt;T extends Recordable&gt;(
       if (isEqual(value, defaultState.value)) return;
  
       innerState.value = value as T[keyof T];
-      emit?.(changeEvent, value);
+      nextTick(() => {
+        emit?.(changeEvent, value, ...(toRaw(unref(emitData)) || []));
+      });
     },
   });