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

* fix: fix the form-api reactive failure inside the form

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,
     },

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',

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: {

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',

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>

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,