fix: fix the form-api reactive failure inside the form (#4590)

* fix: fix the form-api reactive failure inside the form
vbenjs · Oct 8, 2024 · 2dbd323 · 2dbd323
1 parent 8ad2b86
commit 2dbd323
Show file tree

Hide file tree

Showing 12 changed files with 156 additions and 92 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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(() => {
       <template #form>
         <div v-if="formOptions" class="relative rounded py-3 pb-4">
           <slot name="form">
-            <Form v-bind="vbenFormOptions">
+            <Form>
               <template
                 v-for="slotName in delegatedFormSlots"
                 :key="slotName"

diff --git a/playground/src/views/examples/vxe-table/custom-cell.vue b/playground/src/views/examples/vxe-table/custom-cell.vue
@@ -4,7 +4,6 @@ import type { VxeGridProps } from '#/adapter';
 import { Page } from '@vben/common-ui';
 
 import { Button, Image, Switch, Tag } from 'ant-design-vue';
-import dayjs from 'dayjs';
 
 import { useVbenVxeGrid } from '#/adapter';
 import { getExampleTableApi } from '#/api';
@@ -58,9 +57,7 @@ const gridOptions: VxeGridProps<RowType> = {
     { field: 'price', title: 'Price', width: 100 },
     {
       field: 'releaseDate',
-      formatter: ({ cellValue }) => {
-        return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss');
-      },
+      formatter: 'formatDateTime',
       title: 'Date',
       width: 200,
     },

diff --git a/playground/src/views/examples/vxe-table/edit-cell.vue b/playground/src/views/examples/vxe-table/edit-cell.vue
@@ -26,7 +26,7 @@ const gridOptions: VxeGridProps<RowType> = {
       title: 'Product Name',
     },
     { field: 'price', title: 'Price' },
-    { field: 'releaseDate', title: 'Date' },
+    { field: 'releaseDate', formatter: 'formatDateTime', title: 'Date' },
   ],
   editConfig: {
     mode: 'cell',

diff --git a/playground/src/views/examples/vxe-table/edit-row.vue b/playground/src/views/examples/vxe-table/edit-row.vue
@@ -28,7 +28,7 @@ const gridOptions: VxeGridProps<RowType> = {
       title: 'Product Name',
     },
     { field: 'price', title: 'Price' },
-    { field: 'releaseDate', title: 'Date' },
+    { field: 'releaseDate', formatter: 'formatDateTime', title: 'Date' },
     { slots: { default: 'action' }, title: '操作' },
   ],
   editConfig: {

diff --git a/playground/src/views/examples/vxe-table/fixed.vue b/playground/src/views/examples/vxe-table/fixed.vue
@@ -24,7 +24,18 @@ const gridOptions: VxeGridProps<RowType> = {
     { field: 'color', title: 'Color', width: 300 },
     { field: 'productName', title: 'Product Name', width: 300 },
     { field: 'price', title: 'Price', width: 300 },
-    { field: 'releaseDate', title: 'Date', width: 500 },
+    {
+      field: 'releaseDate',
+      formatter: 'formatDateTime',
+      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
@@ -18,6 +18,7 @@ interface RowType {
 }
 
 const formOptions: VbenFormProps = {
+  collapsed: true,
   schema: [
     {
       component: 'Input',
@@ -73,7 +74,7 @@ const gridOptions: VxeGridProps<RowType> = {
     { field: 'color', title: 'Color' },
     { field: 'productName', title: 'Product Name' },
     { field: 'price', title: 'Price' },
-    { field: 'releaseDate', title: 'Date' },
+    { field: 'releaseDate', formatter: 'formatDateTime', title: 'Date' },
   ],
   height: 'auto',
   keepSource: true,
@@ -95,13 +96,11 @@ const gridOptions: VxeGridProps<RowType> = {
 const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
 
 function toggleFormCollspae() {
-  gridApi.formApi.resetForm();
-  gridApi.setState({
-    formOptions: {
-      showCollapseButton: !(
-        gridApi.state?.formOptions?.showCollapseButton ?? true
-      ),
-    },
+  gridApi.formApi.setState((prev) => {
+    return {
+      ...prev,
+      showCollapseButton: !prev.showCollapseButton,
+    };
   });
 }
 </script>

diff --git a/playground/src/views/examples/vxe-table/remote.vue b/playground/src/views/examples/vxe-table/remote.vue
@@ -29,7 +29,8 @@ const gridOptions: VxeGridProps<RowType> = {
     { field: 'color', title: 'Color' },
     { field: 'productName', title: 'Product Name' },
     { field: 'price', title: 'Price' },
-    { field: 'releaseDate', title: 'Date' },
+    { field: 'releaseDate', formatter: 'formatDateTime', title: 'DateTime' },
+    { field: 'releaseDate', formatter: 'formatDate', title: 'Date' },
   ],
   height: 'auto',
   keepSource: true,