fix: when a table switches paging, no form parameters will be carried (#4607)

* fix: when a table switches paging, no form parameters will be carried

* chore: typo

packages/effects/layouts/src/widgets/preferences/blocks/layout/copyright.vue

@@ -6,10 +6,6 @@ import { $t } from '@vben/locales';
 import InputItem from '../input-item.vue';
 import SwitchItem from '../switch-item.vue';
 
-defineOptions({
-  name: 'PreferenceCopyrightConfig',
-});
-
 const props = defineProps<{ disabled: boolean }>();
 
 const copyrightEnable = defineModel<boolean>('copyrightEnable');

packages/effects/layouts/src/widgets/preferences/blocks/layout/footer.vue

@@ -3,10 +3,6 @@ import { $t } from '@vben/locales';
 
 import SwitchItem from '../switch-item.vue';
 
-defineOptions({
-  name: 'PreferenceFooterConfig',
-});
-
 const footerEnable = defineModel<boolean>('footerEnable');
 const footerFixed = defineModel<boolean>('footerFixed');
 </script>

packages/effects/layouts/src/widgets/preferences/blocks/layout/header.vue

@@ -6,10 +6,6 @@ import { $t } from '@vben/locales';
 import SelectItem from '../select-item.vue';
 import SwitchItem from '../switch-item.vue';
 
-defineOptions({
-  name: 'PreferenceHeaderConfig',
-});
-
 defineProps<{ disabled: boolean }>();
 
 const headerEnable = defineModel<boolean>('headerEnable');

packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue

@@ -4,10 +4,6 @@ import { $t } from '@vben/locales';
 import NumberFieldItem from '../number-field-item.vue';
 import SwitchItem from '../switch-item.vue';
 
-defineOptions({
-  name: 'PreferenceSidebarConfig',
-});
-
 defineProps<{ disabled: boolean }>();
 
 const sidebarEnable = defineModel<boolean>('sidebarEnable');

packages/effects/plugins/src/vxe-table/extends.ts

@@ -0,0 +1,50 @@
+import type { VxeGridProps } from 'vxe-table';
+
+import type { VxeGridApi } from './api';
+
+import { isFunction } from '@vben/utils';
+
+export function extendProxyOptions(
+  api: VxeGridApi,
+  options: VxeGridProps,
+  getFormValues: () => Record<string, any>,
+) {
+  [
+    'query',
+    'querySuccess',
+    'queryError',
+    'queryAll',
+    'queryAllSuccess',
+    'queryAllError',
+  ].forEach((key) => {
+    extendProxyOption(key, api, options, getFormValues);
+  });
+}
+
+function extendProxyOption(
+  key: string,
+  api: VxeGridApi,
+  options: VxeGridProps,
+  getFormValues: () => Record<string, any>,
+) {
+  const { proxyConfig } = options;
+  const configFn = (proxyConfig?.ajax as any)?.[key];
+  if (!isFunction(configFn)) {
+    return options;
+  }
+
+  const wrapperFn = async (params: any, _formValues: any, ...args: any[]) => {
+    const formValues = getFormValues();
+    const data = await configFn(params, formValues, ...args);
+    return data;
+  };
+  api.setState({
+    gridOptions: {
+      proxyConfig: {
+        ajax: {
+          [key]: wrapperFn,
+        },
+      },
+    },
+  });
+}

packages/effects/plugins/src/vxe-table/use-vxe-grid.vue

@@ -26,6 +26,7 @@ import { VbenLoading } from '@vben-core/shadcn-ui';
 
 import { VxeGrid, VxeUI } from 'vxe-table';
 
+import { extendProxyOptions } from './extends';
 import { useTableForm } from './init';
 
 import 'vxe-table/styles/cssvar.scss';
@@ -38,6 +39,8 @@ interface Props extends VxeGridProps {
 
 const props = withDefaults(defineProps<Props>(), {});
 
+const FORM_SLOT_PREFIX = 'form-';
+
 const gridRef = useTemplateRef<VxeGridInstance>('gridRef');
 
 const state = props.api?.useStore?.();
@@ -172,11 +175,11 @@ const delegatedFormSlots = computed(() => {
   const resultSlots: string[] = [];
 
   for (const key of Object.keys(slots)) {
-    if (key.startsWith('form-')) {
+    if (key.startsWith(FORM_SLOT_PREFIX)) {
       resultSlots.push(key);
     }
   }
-  return resultSlots;
+  return resultSlots.map((key) => key.replace(FORM_SLOT_PREFIX, ''));
 });
 
 async function init() {
@@ -191,7 +194,7 @@ async function init() {
   const autoLoad = defaultGridOptions.proxyConfig?.autoLoad;
   const enableProxyConfig = options.value.proxyConfig?.enabled;
   if (enableProxyConfig && autoLoad) {
-    props.api.reload(formApi.form.values);
+    props.api.reload(formApi.form?.values ?? {});
   }
 
   // form 由 vben-form代替，所以不适配formConfig，这里给出警告
@@ -201,6 +204,9 @@ async function init() {
       '[Vben Vxe Table]: The formConfig in the grid is not supported, please use the `formOptions` props',
     );
   }
+
+  // form 由 vben-form 代替，所以需要保证query相关事件可以拿到参数
+  extendProxyOptions(props.api, defaultGridOptions, () => formApi.form.values);
 }
 
 watch(