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(

playground/src/views/examples/vxe-table/basic.vue

@@ -29,6 +29,9 @@ const gridOptions: VxeGridProps<RowType> = {
     { field: 'address', showOverflow: true, title: 'Address' },
   ],
   data: MOCK_TABLE_DATA,
+  pagerConfig: {
+    enabled: false,
+  },
   sortConfig: {
     multiple: true,
   },

playground/src/views/examples/vxe-table/fixed.vue

@@ -30,12 +30,6 @@ const gridOptions: VxeGridProps<RowType> = {
       title: 'DateTime',
       width: 500,
     },
-    {
-      field: 'releaseDate',
-      formatter: 'formatDate',
-      title: 'Date',
-      width: 300,
-    },
     {
       field: 'action',
       fixed: 'right',

playground/src/views/examples/vxe-table/form.vue

@@ -3,7 +3,7 @@ import type { VbenFormProps, VxeGridProps } from '#/adapter';
 
 import { Page } from '@vben/common-ui';
 
-import { Button, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter';
 import { getExampleTableApi } from '#/api';
@@ -60,6 +60,8 @@ const formOptions: VbenFormProps = {
       label: 'Date',
     },
   ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
 };
 
 const gridOptions: VxeGridProps<RowType> = {
@@ -93,26 +95,11 @@ const gridOptions: VxeGridProps<RowType> = {
   },
 };
 
-const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
-
-function toggleFormCollspae() {
-  gridApi.formApi.setState((prev) => {
-    return {
-      ...prev,
-      showCollapseButton: !prev.showCollapseButton,
-    };
-  });
-}
+const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
 </script>
 
 <template>
   <Page auto-content-height>
-    <Grid>
-      <template #toolbar-tools>
-        <Button type="primary" @click="toggleFormCollspae">
-          切换表单折叠按钮
-        </Button>
-      </template>
-    </Grid>
+    <Grid />
   </Page>
 </template>