fix: table internal search collspaed configuration does not take effect

vbenjs · Oct 7, 2024 · f9c3a8d · f9c3a8d
1 parent f0edad8
commit f9c3a8d
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 31 deletions.
diff --git a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
@@ -78,7 +78,9 @@ watch(
 </script>
 <template>
   <div
-    :class="cn('col-span-full w-full text-right', rootProps.actionWrapperClass)"
+    :class="
+      cn('col-span-full w-full pb-6 text-right', rootProps.actionWrapperClass)
+    "
     :style="queryFormStyle"
   >
     <component

diff --git a/packages/@core/ui-kit/form-ui/src/use-vben-form.ts b/packages/@core/ui-kit/form-ui/src/use-vben-form.ts
@@ -26,6 +26,7 @@ export function useVbenForm<
       onBeforeUnmount(() => {
         api.unmount();
       });
+      api.setState({ ...props, ...attrs });
       return () =>
         h(VbenUseForm, { ...props, ...attrs, formApi: extendedApi }, slots);
     },
@@ -37,9 +38,9 @@ export function useVbenForm<
   // Add reactivity support
   if (IS_REACTIVE) {
     watch(
-      () => options.schema,
+      () => options,
       () => {
-        api.setState({ schema: options.schema });
+        api.setState(options);
       },
       { immediate: true },
     );

diff --git a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
@@ -34,23 +34,12 @@ props.formApi?.mount?.(form);
 const handleUpdateCollapsed = (value: boolean) => {
   props.formApi?.setState({ collapsed: !!value });
 };
-// if (isFunction(forward.value.handleValuesChange)) {
-//   watch(
-//     () => form.values,
-//     (val) => {
-//       forward.value.handleValuesChange?.(toRaw(val));
-//     },
-//     {
-//       deep: true,
-//       immediate: true,
-//     },
-//   );
-// }
 </script>
 
 <template>
   <Form
     v-bind="forward"
+    :collapsed="state.collapsed"
     :component-bind-event-map="COMPONENT_BIND_EVENT_MAP"
     :component-map="COMPONENT_MAP"
     :form="form"

diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts b/packages/effects/plugins/src/vxe-table/use-vxe-grid.ts
@@ -1,14 +1,14 @@
 import type { ExtendedVxeGridApi, VxeGridProps } from './types';
 
-import { defineComponent, h, onBeforeUnmount } from 'vue';
+import { defineComponent, h, isReactive, onBeforeUnmount, watch } from 'vue';
 
 import { useStore } from '@vben-core/shared/store';
 
 import { VxeGridApi } from './api';
 import VxeGrid from './use-vxe-grid.vue';
 
 export function useVbenVxeGrid(options: VxeGridProps) {
-  // const IS_REACTIVE = isReactive(options);
+  const IS_REACTIVE = isReactive(options);
   const api = new VxeGridApi(options);
   const extendedApi: ExtendedVxeGridApi = api as ExtendedVxeGridApi;
   extendedApi.useStore = (selector) => {
@@ -20,6 +20,7 @@ export function useVbenVxeGrid(options: VxeGridProps) {
       onBeforeUnmount(() => {
         api.unmount();
       });
+      api.setState({ ...props, ...attrs });
       return () => h(VxeGrid, { ...props, ...attrs, api: extendedApi }, slots);
     },
     {
@@ -28,15 +29,15 @@ export function useVbenVxeGrid(options: VxeGridProps) {
     },
   );
   // Add reactivity support
-  // if (IS_REACTIVE) {
-  //   watch(
-  //     () => options,
-  //     () => {
-  //       api.setState(options);
-  //     },
-  //     { immediate: true },
-  //   );
-  // }
+  if (IS_REACTIVE) {
+    watch(
+      () => options,
+      () => {
+        api.setState(options);
+      },
+      { immediate: true },
+    );
+  }
 
   return [Grid, extendedApi] as const;
 }
diff --git a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -215,7 +215,6 @@ async function init() {
     );
   }
 }
-
 onMounted(() => {
   props.api?.mount?.(gridRef.value, formApi);
   init();
@@ -246,7 +245,7 @@ onMounted(() => {
         <slot :name="slotName" v-bind="slotProps"></slot>
       </template>
       <template #form>
-        <div v-if="formOptions" class="relative rounded py-3 pb-6">
+        <div v-if="formOptions" class="relative rounded py-3 pb-4">
           <slot name="form">
             <Form v-bind="vbenFormOptions">
               <template

diff --git 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 { message } from 'ant-design-vue';
+import { Button, message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter';
 import { getExampleTableApi } from '#/api';
@@ -92,11 +92,28 @@ const gridOptions: VxeGridProps<RowType> = {
   },
 };
 
-const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
+const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
+
+function toggleFormCollspae() {
+  gridApi.formApi.resetForm();
+  gridApi.setState({
+    formOptions: {
+      showCollapseButton: !(
+        gridApi.state?.formOptions?.showCollapseButton ?? true
+      ),
+    },
+  });
+}
 </script>
 
 <template>
   <Page auto-content-height>
-    <Grid />
+    <Grid>
+      <template #toolbar-tools>
+        <Button type="primary" @click="toggleFormCollspae">
+          切换表单折叠按钮
+        </Button>
+      </template>
+    </Grid>
   </Page>
 </template>