From 2dbd323b2a1355cf4c5d512ec6779751b18e8613 Mon Sep 17 00:00:00 2001 From: Vben Date: Tue, 8 Oct 2024 22:43:02 +0800 Subject: [PATCH] fix: fix the form-api reactive failure inside the form (#4590) * fix: fix the form-api reactive failure inside the form --- packages/effects/plugins/package.json | 1 + .../plugins/src/vxe-table/formatter.ts | 17 ++++ .../effects/plugins/src/vxe-table/init.ts | 3 + .../plugins/src/vxe-table/use-vxe-grid.vue | 80 ++++++++------- .../views/examples/vxe-table/custom-cell.vue | 5 +- .../views/examples/vxe-table/edit-cell.vue | 2 +- .../src/views/examples/vxe-table/edit-row.vue | 2 +- .../src/views/examples/vxe-table/fixed.vue | 13 ++- .../src/views/examples/vxe-table/form.vue | 15 ++- .../src/views/examples/vxe-table/remote.vue | 3 +- pnpm-lock.yaml | 97 ++++++++++++------- pnpm-workspace.yaml | 10 +- 12 files changed, 156 insertions(+), 92 deletions(-) create mode 100644 packages/effects/plugins/src/vxe-table/formatter.ts diff --git a/packages/effects/plugins/package.json b/packages/effects/plugins/package.json index dfaf1f9e281..b1004319b11 100644 --- a/packages/effects/plugins/package.json +++ b/packages/effects/plugins/package.json @@ -34,6 +34,7 @@ "@vben/types": "workspace:*", "@vben/utils": "workspace:*", "@vueuse/core": "catalog:", + "dayjs": "catalog:", "echarts": "catalog:", "vue": "catalog:", "vxe-pc-ui": "catalog:", diff --git a/packages/effects/plugins/src/vxe-table/formatter.ts b/packages/effects/plugins/src/vxe-table/formatter.ts new file mode 100644 index 00000000000..e2b3ae4cc3d --- /dev/null +++ b/packages/effects/plugins/src/vxe-table/formatter.ts @@ -0,0 +1,17 @@ +import type { VxeUIExport } from 'vxe-table'; + +import dayjs from 'dayjs'; + +export function initDefaultFormatter(vxeUI: VxeUIExport) { + vxeUI.formats.add('formatDate', { + tableCellFormatMethod({ cellValue }) { + return dayjs(cellValue).format('YYYY-MM-DD'); + }, + }); + + vxeUI.formats.add('formatDateTime', { + tableCellFormatMethod({ cellValue }) { + return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss'); + }, + }); +} diff --git a/packages/effects/plugins/src/vxe-table/init.ts b/packages/effects/plugins/src/vxe-table/init.ts index 09778b086ee..78d13d194a5 100644 --- a/packages/effects/plugins/src/vxe-table/init.ts +++ b/packages/effects/plugins/src/vxe-table/init.ts @@ -41,6 +41,8 @@ import { VxeToolbar, } from 'vxe-table'; +import { initDefaultFormatter } from './formatter'; + // 是否加载过 let isInit = false; @@ -118,5 +120,6 @@ export function setupVbenVxeTable(setupOptions: SetupVxeTable) { }, ); + initDefaultFormatter(VxeUI); configVxeTable(VxeUI); } 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 9a9fabf4de5..2f869424452 100644 --- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue +++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue @@ -14,6 +14,7 @@ import { toRaw, useSlots, useTemplateRef, + watch, } from 'vue'; import { usePriorityValues } from '@vben/hooks'; @@ -53,7 +54,27 @@ const { isMobile } = usePreferences(); const slots = useSlots(); -const [Form, formApi] = useTableForm({}); +const [Form, formApi] = useTableForm({ + handleSubmit: async () => { + const formValues = formApi.form.values; + props.api.reload(formValues); + }, + handleReset: async () => { + await formApi.resetForm(); + const formValues = formApi.form.values; + props.api.reload(formValues); + }, + commonConfig: { + componentProps: { + class: 'w-full', + }, + }, + showCollapseButton: true, + submitButtonOptions: { + content: $t('common.query'), + }, + wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3', +}); const showToolbar = computed(() => { return !!slots['toolbar-actions']?.() || !!slots['toolbar-tools']?.(); @@ -136,40 +157,6 @@ const events = computed(() => { }; }); -const vbenFormOptions = computed(() => { - const defaultFormProps: VbenFormProps = { - handleSubmit: async () => { - const formValues = formApi.form.values; - props.api.reload(formValues); - }, - handleReset: async () => { - await formApi.resetForm(); - const formValues = formApi.form.values; - props.api.reload(formValues); - }, - commonConfig: { - componentProps: { - class: 'w-full', - }, - }, - showCollapseButton: true, - submitButtonOptions: { - content: $t('common.query'), - }, - wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3', - }; - const finalFormOptions: VbenFormProps = mergeWithArrayOverride( - {}, - formOptions.value, - defaultFormProps, - ); - - return { - ...finalFormOptions, - collapseTriggerResize: !!finalFormOptions.showCollapseButton, - }; -}); - const delegatedSlots = computed(() => { const resultSlots: string[] = []; @@ -215,6 +202,27 @@ async function init() { ); } } + +watch( + formOptions, + () => { + formApi.setState((prev) => { + const finalFormOptions: VbenFormProps = mergeWithArrayOverride( + {}, + formOptions.value, + prev, + ); + return { + ...finalFormOptions, + collapseTriggerResize: !!finalFormOptions.showCollapseButton, + }; + }); + }, + { + immediate: true, + }, +); + onMounted(() => { props.api?.mount?.(gridRef.value, formApi); init(); @@ -247,7 +255,7 @@ onMounted(() => {