From 304b1b2efcfdc54d0a3dd85fa7a1b77ef582f5b9 Mon Sep 17 00:00:00 2001 From: Vben Date: Thu, 10 Oct 2024 22:48:25 +0800 Subject: [PATCH] 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 --- .../preferences/blocks/layout/copyright.vue | 4 -- .../preferences/blocks/layout/footer.vue | 4 -- .../preferences/blocks/layout/header.vue | 4 -- .../preferences/blocks/layout/sidebar.vue | 4 -- .../effects/plugins/src/vxe-table/extends.ts | 50 +++++++++++++++++++ .../plugins/src/vxe-table/use-vxe-grid.vue | 12 +++-- .../src/views/examples/vxe-table/basic.vue | 3 ++ .../src/views/examples/vxe-table/fixed.vue | 6 --- .../src/views/examples/vxe-table/form.vue | 23 ++------- 9 files changed, 67 insertions(+), 43 deletions(-) create mode 100644 packages/effects/plugins/src/vxe-table/extends.ts diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/layout/copyright.vue b/packages/effects/layouts/src/widgets/preferences/blocks/layout/copyright.vue index 8db2822e329..938902973bc 100644 --- a/packages/effects/layouts/src/widgets/preferences/blocks/layout/copyright.vue +++ b/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('copyrightEnable'); diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/layout/footer.vue b/packages/effects/layouts/src/widgets/preferences/blocks/layout/footer.vue index 17964db885e..8a77920e28e 100644 --- a/packages/effects/layouts/src/widgets/preferences/blocks/layout/footer.vue +++ b/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('footerEnable'); const footerFixed = defineModel('footerFixed'); diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/layout/header.vue b/packages/effects/layouts/src/widgets/preferences/blocks/layout/header.vue index ccfac0d441c..cdb236cf3d5 100644 --- a/packages/effects/layouts/src/widgets/preferences/blocks/layout/header.vue +++ b/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('headerEnable'); diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue b/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue index 5aeee7c4110..3c9efd69977 100644 --- a/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue +++ b/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('sidebarEnable'); diff --git a/packages/effects/plugins/src/vxe-table/extends.ts b/packages/effects/plugins/src/vxe-table/extends.ts new file mode 100644 index 00000000000..3055c1f0031 --- /dev/null +++ b/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, +) { + [ + 'query', + 'querySuccess', + 'queryError', + 'queryAll', + 'queryAllSuccess', + 'queryAllError', + ].forEach((key) => { + extendProxyOption(key, api, options, getFormValues); + }); +} + +function extendProxyOption( + key: string, + api: VxeGridApi, + options: VxeGridProps, + getFormValues: () => Record, +) { + 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, + }, + }, + }, + }); +} diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue index 2f869424452..239eb7bc0c2 100644 --- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue +++ b/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(), {}); +const FORM_SLOT_PREFIX = 'form-'; + const gridRef = useTemplateRef('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( diff --git a/playground/src/views/examples/vxe-table/basic.vue b/playground/src/views/examples/vxe-table/basic.vue index 75c034c1b48..ef8509bedc5 100644 --- a/playground/src/views/examples/vxe-table/basic.vue +++ b/playground/src/views/examples/vxe-table/basic.vue @@ -29,6 +29,9 @@ const gridOptions: VxeGridProps = { { field: 'address', showOverflow: true, title: 'Address' }, ], data: MOCK_TABLE_DATA, + pagerConfig: { + enabled: false, + }, sortConfig: { multiple: true, }, diff --git a/playground/src/views/examples/vxe-table/fixed.vue b/playground/src/views/examples/vxe-table/fixed.vue index dfeb01ee0e7..7c3b961022d 100644 --- a/playground/src/views/examples/vxe-table/fixed.vue +++ b/playground/src/views/examples/vxe-table/fixed.vue @@ -30,12 +30,6 @@ const gridOptions: VxeGridProps = { title: 'DateTime', width: 500, }, - { - field: 'releaseDate', - formatter: 'formatDate', - title: 'Date', - width: 300, - }, { field: 'action', fixed: 'right', diff --git a/playground/src/views/examples/vxe-table/form.vue b/playground/src/views/examples/vxe-table/form.vue index e753c803b4a..238523fc922 100644 --- a/playground/src/views/examples/vxe-table/form.vue +++ b/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 = { @@ -93,26 +95,11 @@ const gridOptions: VxeGridProps = { }, }; -const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions }); - -function toggleFormCollspae() { - gridApi.formApi.setState((prev) => { - return { - ...prev, - showCollapseButton: !prev.showCollapseButton, - }; - }); -} +const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });