From 2f0c3c4c05d8d45f1551766682d09c3b684bb9ac Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Thu, 12 Dec 2024 21:37:30 +0800
Subject: [PATCH 1/3] feat: table search form visible control

---
 .../components/common-ui/vben-vxe-table.md    | 18 ++++---
 packages/effects/plugins/src/vxe-table/api.ts | 18 +++++++
 .../effects/plugins/src/vxe-table/index.ts    |  3 +-
 .../effects/plugins/src/vxe-table/types.ts    | 16 +++++-
 .../plugins/src/vxe-table/use-vxe-grid.vue    | 53 +++++++++++++++----
 packages/locales/src/langs/en-US/common.json  |  3 +-
 packages/locales/src/langs/zh-CN/common.json  |  3 +-
 .../src/views/examples/vxe-table/form.vue     | 17 ++++--
 8 files changed, 105 insertions(+), 26 deletions(-)

diff --git a/docs/src/components/common-ui/vben-vxe-table.md b/docs/src/components/common-ui/vben-vxe-table.md
index 29f679f6aaf..75af4bdff5b 100644
--- a/docs/src/components/common-ui/vben-vxe-table.md
+++ b/docs/src/components/common-ui/vben-vxe-table.md
@@ -215,14 +215,15 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 useVbenVxeGrid 返回的第二个参数，是一个对象，包含了一些表单的方法。
 
-| 方法名 | 描述 | 类型 |
-| --- | --- | --- |
-| setLoading | 设置loading状态 | `(loading)=>void` |
-| setGridOptions | 设置vxe-table grid组件参数 | `(options: Partial<VxeGridProps['gridOptions'])=>void` |
-| reload | 重载表格，会进行初始化 | `(params:any)=>void` |
-| query | 重载表格，会保留当前分页 | `(params:any)=>void` |
-| grid | vxe-table grid实例 | `VxeGridInstance` |
-| formApi | vbenForm api实例 | `FormApi` |
+| 方法名 | 描述 | 类型 | 说明 |
+| --- | --- | --- | --- |
+| setLoading | 设置loading状态 | `(loading)=>void` | - |
+| setGridOptions | 设置vxe-table grid组件参数 | `(options: Partial<VxeGridProps['gridOptions'])=>void` | - |
+| reload | 重载表格，会进行初始化 | `(params:any)=>void` | - |
+| query | 重载表格，会保留当前分页 | `(params:any)=>void` | - |
+| grid | vxe-table grid实例 | `VxeGridInstance` | - |
+| formApi | vbenForm api实例 | `FormApi` | - |
+| toggleSearchForm | 设置搜索表单显示状态 | `(show?: boolean)=>boolean` | 当省略参数时，则将表单在显示和隐藏两种状态之间切换 |
 
 ## Props
 
@@ -236,3 +237,4 @@ useVbenVxeGrid 返回的第二个参数，是一个对象，包含了一些表
 | gridOptions    | grid组件的参数     | `VxeTableGridProps` |
 | gridEvents     | grid组件的触发的⌚️ | `VxeGridListeners`  |
 | formOptions    | 表单参数           | `VbenFormProps`     |
+| isFormShow     | 是否显示搜索表单   | `boolean`           |
diff --git a/packages/effects/plugins/src/vxe-table/api.ts b/packages/effects/plugins/src/vxe-table/api.ts
index 365c90b7eb8..0f3ea65d9db 100644
--- a/packages/effects/plugins/src/vxe-table/api.ts
+++ b/packages/effects/plugins/src/vxe-table/api.ts
@@ -8,6 +8,7 @@ import { toRaw } from 'vue';
 import { Store } from '@vben-core/shared/store';
 import {
   bindMethods,
+  isBoolean,
   isFunction,
   mergeWithArrayOverride,
   StateHandler,
@@ -20,6 +21,7 @@ function getDefaultState(): VxeGridProps {
     gridOptions: {},
     gridEvents: {},
     formOptions: undefined,
+    isFormShow: true,
   };
 }
 
@@ -80,6 +82,12 @@ export class VxeGridApi {
     }
   }
 
+  setFormVisible(isVisible: boolean) {
+    this.setState({
+      isFormShow: isVisible,
+    });
+  }
+
   setGridOptions(options: Partial<VxeGridProps['gridOptions']>) {
     this.setState({
       gridOptions: options,
@@ -108,6 +116,16 @@ export class VxeGridApi {
     }
   }
 
+  toggleSearchForm(show?: boolean) {
+    this.setState({
+      isFormShow: isBoolean(show) ? show : !this.state?.isFormShow,
+    });
+    // nextTick(() => {
+    //   this.grid.recalculate();
+    // });
+    return this.state?.isFormShow;
+  }
+
   unmount() {
     this.isMounted = false;
     this.stateHandler.reset();
diff --git a/packages/effects/plugins/src/vxe-table/index.ts b/packages/effects/plugins/src/vxe-table/index.ts
index 4ae1c2ef5fd..38fe5880666 100644
--- a/packages/effects/plugins/src/vxe-table/index.ts
+++ b/packages/effects/plugins/src/vxe-table/index.ts
@@ -1,5 +1,6 @@
 export { setupVbenVxeTable } from './init';
+export type { VxeTableGridOptions } from './types';
 export * from './use-vxe-grid';
-export { default as VbenVxeGrid } from './use-vxe-grid.vue';
 
+export { default as VbenVxeGrid } from './use-vxe-grid.vue';
 export type { VxeGridListeners, VxeGridProps } from 'vxe-table';
diff --git a/packages/effects/plugins/src/vxe-table/types.ts b/packages/effects/plugins/src/vxe-table/types.ts
index e6559a283b6..aac88a70544 100644
--- a/packages/effects/plugins/src/vxe-table/types.ts
+++ b/packages/effects/plugins/src/vxe-table/types.ts
@@ -2,6 +2,7 @@ import type { ClassType, DeepPartial } from '@vben/types';
 import type { VbenFormProps } from '@vben-core/form-ui';
 import type {
   VxeGridListeners,
+  VxeGridPropTypes,
   VxeGridProps as VxeTableGridProps,
   VxeUIExport,
 } from 'vxe-table';
@@ -18,6 +19,15 @@ export interface VxePaginationInfo {
   total: number;
 }
 
+interface ToolbarConfigOptions extends VxeGridPropTypes.ToolbarConfig {
+  /** 是否显示切换搜索表单的按钮 */
+  search?: boolean;
+}
+
+export interface VxeTableGridOptions<T = any> extends VxeTableGridProps<T> {
+  toolbarConfig: ToolbarConfigOptions;
+}
+
 export interface VxeGridProps {
   /**
    * 标题
@@ -38,7 +48,7 @@ export interface VxeGridProps {
   /**
    * vxe-grid 配置
    */
-  gridOptions?: DeepPartial<VxeTableGridProps>;
+  gridOptions?: DeepPartial<VxeTableGridOptions>;
   /**
    * vxe-grid 事件
    */
@@ -47,6 +57,10 @@ export interface VxeGridProps {
    * 表单配置
    */
   formOptions?: VbenFormProps;
+  /**
+   * 显示搜索表单
+   */
+  isFormShow?: boolean;
 }
 
 export type ExtendedVxeGridApi = {
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 feca4cb2b92..be7bf34d955 100644
--- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
+++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { VbenFormProps } from '@vben-core/form-ui';
 import type {
+  VxeGridDefines,
   VxeGridInstance,
+  VxeGridPropTypes,
   VxeGridProps as VxeTableGridProps,
 } from 'vxe-table';
 
@@ -57,6 +59,7 @@ const {
   formOptions,
   tableTitle,
   tableTitleHelp,
+  isFormShow,
 } = usePriorityValues(props, state);
 
 const { isMobile } = usePreferences();
@@ -103,21 +106,36 @@ const toolbarOptions = computed(() => {
   const slotActions = slots[TOOLBAR_ACTIONS]?.();
   const slotTools = slots[TOOLBAR_TOOLS]?.();
 
+  const toolbarConfig: VxeGridPropTypes.ToolbarConfig = {
+    tools: gridOptions.value?.toolbarConfig?.search
+      ? [
+          {
+            code: 'search',
+            icon: 'vxe-icon--search',
+            circle: true,
+            status: isFormShow.value ? 'primary' : undefined,
+            title: $t('common.search'),
+          },
+        ]
+      : [],
+  };
+
   if (!showToolbar.value) {
-    return {};
+    return { toolbarConfig };
   }
+
+  // if (gridOptions.value?.toolbarConfig?.search) {
+  // }
   // 强制使用固定的toolbar配置，不允许用户自定义
   // 减少配置的复杂度，以及后续维护的成本
-  return {
-    toolbarConfig: {
-      slots: {
-        ...(slotActions || showTableTitle.value
-          ? { buttons: TOOLBAR_ACTIONS }
-          : {}),
-        ...(slotTools ? { tools: TOOLBAR_TOOLS } : {}),
-      },
-    },
+  toolbarConfig.slots = {
+    ...(slotActions || showTableTitle.value
+      ? { buttons: TOOLBAR_ACTIONS }
+      : {}),
+    ...(slotTools ? { tools: TOOLBAR_TOOLS } : {}),
   };
+
+  return { toolbarConfig };
 });
 
 const options = computed(() => {
@@ -173,9 +191,18 @@ const options = computed(() => {
   return mergedOptions;
 });
 
+function onToolbarToolClick(event: VxeGridDefines.ToolbarToolClickEventParams) {
+  if (event.code === 'search') {
+    props.api?.toggleSearchForm?.();
+  }
+  // @ts-ignore
+  gridEvents.value?.toolbarToolClick?.(event);
+}
+
 const events = computed(() => {
   return {
     ...gridEvents.value,
+    toolbarToolClick: onToolbarToolClick,
   };
 });
 
@@ -304,7 +331,11 @@ onUnmounted(() => {
 
       <!-- form表单 -->
       <template #form>
-        <div v-if="formOptions" class="relative rounded py-3 pb-4">
+        <div
+          v-if="formOptions"
+          v-show="isFormShow !== false"
+          class="relative rounded py-3 pb-4"
+        >
           <slot name="form">
             <Form>
               <template
diff --git a/packages/locales/src/langs/en-US/common.json b/packages/locales/src/langs/en-US/common.json
index 23308b776dd..01fc9ce72dc 100644
--- a/packages/locales/src/langs/en-US/common.json
+++ b/packages/locales/src/langs/en-US/common.json
@@ -9,5 +9,6 @@
   "noData": "No Data",
   "refresh": "Refresh",
   "loadingMenu": "Loading Menu",
-  "query": "Search"
+  "query": "Search",
+  "search": "Search"
 }
diff --git a/packages/locales/src/langs/zh-CN/common.json b/packages/locales/src/langs/zh-CN/common.json
index fdfc6e49e2b..d0b5ffc0fff 100644
--- a/packages/locales/src/langs/zh-CN/common.json
+++ b/packages/locales/src/langs/zh-CN/common.json
@@ -9,5 +9,6 @@
   "noData": "暂无数据",
   "refresh": "刷新",
   "loadingMenu": "加载菜单中",
-  "query": "查询"
+  "query": "查询",
+  "search": "搜索"
 }
diff --git a/playground/src/views/examples/vxe-table/form.vue b/playground/src/views/examples/vxe-table/form.vue
index 90035033348..023ded72904 100644
--- a/playground/src/views/examples/vxe-table/form.vue
+++ b/playground/src/views/examples/vxe-table/form.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { VbenFormProps } from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { Page } from '@vben/common-ui';
 
@@ -71,7 +71,7 @@ const formOptions: VbenFormProps = {
   submitOnEnter: false,
 };
 
-const gridOptions: VxeGridProps<RowType> = {
+const gridOptions: VxeTableGridOptions<RowType> = {
   checkboxConfig: {
     highlight: true,
     labelField: 'name',
@@ -85,6 +85,7 @@ const gridOptions: VxeGridProps<RowType> = {
     { field: 'price', title: 'Price' },
     { field: 'releaseDate', formatter: 'formatDateTime', title: 'Date' },
   ],
+  exportConfig: {},
   height: 'auto',
   keepSource: true,
   pagerConfig: {},
@@ -100,9 +101,19 @@ const gridOptions: VxeGridProps<RowType> = {
       },
     },
   },
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    refresh: true,
+    resizable: true,
+    search: true,
+  },
 };
 
-const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
+const [Grid] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
 </script>
 
 <template>

From 0a887d343c0d880e98b35da9768f6245a926a790 Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Thu, 12 Dec 2024 22:00:36 +0800
Subject: [PATCH 2/3] chore: fix docs and demo

---
 .../components/common-ui/vben-vxe-table.md    |  2 ++
 docs/src/demos/vben-vxe-table/form/index.vue  |  5 ++++
 .../plugins/src/vxe-table/use-vxe-grid.vue    | 23 ++++++++++---------
 .../views/examples/vxe-table/custom-cell.vue  |  1 +
 .../src/views/examples/vxe-table/form.vue     |  1 +
 5 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/docs/src/components/common-ui/vben-vxe-table.md b/docs/src/components/common-ui/vben-vxe-table.md
index 75af4bdff5b..f8c53a06811 100644
--- a/docs/src/components/common-ui/vben-vxe-table.md
+++ b/docs/src/components/common-ui/vben-vxe-table.md
@@ -165,6 +165,8 @@ vxeUI.renderer.add('CellLink', {
 
 **表单搜索** 部分采用了`Vben Form 表单`，参考 [Vben Form 表单文档](/components/common-ui/vben-form)。
 
+当启用了表单搜索时，可以在toolbarConfig中配置`search`为`true`来让表格在工具栏区域显示一个搜索表单控制按钮。
+
 <DemoPreview dir="demos/vben-vxe-table/form" />
 
 ## 单元格编辑
diff --git a/docs/src/demos/vben-vxe-table/form/index.vue b/docs/src/demos/vben-vxe-table/form/index.vue
index b5be6c65da1..bcf3f5a5d19 100644
--- a/docs/src/demos/vben-vxe-table/form/index.vue
+++ b/docs/src/demos/vben-vxe-table/form/index.vue
@@ -110,6 +110,11 @@ const gridOptions: VxeGridProps<RowType> = {
       },
     },
   },
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+  },
 };
 
 const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
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 be7bf34d955..082ed5ae5a1 100644
--- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
+++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -107,17 +107,18 @@ const toolbarOptions = computed(() => {
   const slotTools = slots[TOOLBAR_TOOLS]?.();
 
   const toolbarConfig: VxeGridPropTypes.ToolbarConfig = {
-    tools: gridOptions.value?.toolbarConfig?.search
-      ? [
-          {
-            code: 'search',
-            icon: 'vxe-icon--search',
-            circle: true,
-            status: isFormShow.value ? 'primary' : undefined,
-            title: $t('common.search'),
-          },
-        ]
-      : [],
+    tools:
+      gridOptions.value?.toolbarConfig?.search && !!formOptions.value
+        ? [
+            {
+              code: 'search',
+              icon: 'vxe-icon--search',
+              circle: true,
+              status: isFormShow.value ? 'primary' : undefined,
+              title: $t('common.search'),
+            },
+          ]
+        : [],
   };
 
   if (!showToolbar.value) {
diff --git a/playground/src/views/examples/vxe-table/custom-cell.vue b/playground/src/views/examples/vxe-table/custom-cell.vue
index 46fd29cce15..3bf1cb91c64 100644
--- a/playground/src/views/examples/vxe-table/custom-cell.vue
+++ b/playground/src/views/examples/vxe-table/custom-cell.vue
@@ -82,6 +82,7 @@ const gridOptions: VxeGridProps<RowType> = {
       },
     },
   },
+  showOverflow: false,
 };
 
 const [Grid] = useVbenVxeGrid({ gridOptions });
diff --git a/playground/src/views/examples/vxe-table/form.vue b/playground/src/views/examples/vxe-table/form.vue
index 023ded72904..dd9e2a376f8 100644
--- a/playground/src/views/examples/vxe-table/form.vue
+++ b/playground/src/views/examples/vxe-table/form.vue
@@ -107,6 +107,7 @@ const gridOptions: VxeTableGridOptions<RowType> = {
     refresh: true,
     resizable: true,
     search: true,
+    zoom: true,
   },
 };
 

From 2b846d23616e7238c25f9a1cffd40635da9df5e0 Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Thu, 12 Dec 2024 22:19:01 +0800
Subject: [PATCH 3/3] chore: type error fixed

---
 docs/src/components/common-ui/vben-vxe-table.md      |  2 +-
 packages/effects/plugins/src/vxe-table/api.ts        | 12 +++---------
 packages/effects/plugins/src/vxe-table/types.ts      |  5 +++--
 .../effects/plugins/src/vxe-table/use-vxe-grid.vue   | 12 +++++++-----
 4 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/docs/src/components/common-ui/vben-vxe-table.md b/docs/src/components/common-ui/vben-vxe-table.md
index f8c53a06811..24d911da794 100644
--- a/docs/src/components/common-ui/vben-vxe-table.md
+++ b/docs/src/components/common-ui/vben-vxe-table.md
@@ -239,4 +239,4 @@ useVbenVxeGrid 返回的第二个参数，是一个对象，包含了一些表
 | gridOptions    | grid组件的参数     | `VxeTableGridProps` |
 | gridEvents     | grid组件的触发的⌚️ | `VxeGridListeners`  |
 | formOptions    | 表单参数           | `VbenFormProps`     |
-| isFormShow     | 是否显示搜索表单   | `boolean`           |
+| showSearchForm | 是否显示搜索表单   | `boolean`           |
diff --git a/packages/effects/plugins/src/vxe-table/api.ts b/packages/effects/plugins/src/vxe-table/api.ts
index 0f3ea65d9db..0bff8b384c6 100644
--- a/packages/effects/plugins/src/vxe-table/api.ts
+++ b/packages/effects/plugins/src/vxe-table/api.ts
@@ -21,7 +21,7 @@ function getDefaultState(): VxeGridProps {
     gridOptions: {},
     gridEvents: {},
     formOptions: undefined,
-    isFormShow: true,
+    showSearchForm: true,
   };
 }
 
@@ -82,12 +82,6 @@ export class VxeGridApi {
     }
   }
 
-  setFormVisible(isVisible: boolean) {
-    this.setState({
-      isFormShow: isVisible,
-    });
-  }
-
   setGridOptions(options: Partial<VxeGridProps['gridOptions']>) {
     this.setState({
       gridOptions: options,
@@ -118,12 +112,12 @@ export class VxeGridApi {
 
   toggleSearchForm(show?: boolean) {
     this.setState({
-      isFormShow: isBoolean(show) ? show : !this.state?.isFormShow,
+      showSearchForm: isBoolean(show) ? show : !this.state?.showSearchForm,
     });
     // nextTick(() => {
     //   this.grid.recalculate();
     // });
-    return this.state?.isFormShow;
+    return this.state?.showSearchForm;
   }
 
   unmount() {
diff --git a/packages/effects/plugins/src/vxe-table/types.ts b/packages/effects/plugins/src/vxe-table/types.ts
index aac88a70544..7e8f2b8397d 100644
--- a/packages/effects/plugins/src/vxe-table/types.ts
+++ b/packages/effects/plugins/src/vxe-table/types.ts
@@ -25,7 +25,8 @@ interface ToolbarConfigOptions extends VxeGridPropTypes.ToolbarConfig {
 }
 
 export interface VxeTableGridOptions<T = any> extends VxeTableGridProps<T> {
-  toolbarConfig: ToolbarConfigOptions;
+  /** 工具栏配置 */
+  toolbarConfig?: ToolbarConfigOptions;
 }
 
 export interface VxeGridProps {
@@ -60,7 +61,7 @@ export interface VxeGridProps {
   /**
    * 显示搜索表单
    */
-  isFormShow?: boolean;
+  showSearchForm?: boolean;
 }
 
 export type ExtendedVxeGridApi = {
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 082ed5ae5a1..91749835dea 100644
--- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
+++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -3,6 +3,7 @@ import type { VbenFormProps } from '@vben-core/form-ui';
 import type {
   VxeGridDefines,
   VxeGridInstance,
+  VxeGridListeners,
   VxeGridPropTypes,
   VxeGridProps as VxeTableGridProps,
 } from 'vxe-table';
@@ -59,7 +60,7 @@ const {
   formOptions,
   tableTitle,
   tableTitleHelp,
-  isFormShow,
+  showSearchForm,
 } = usePriorityValues(props, state);
 
 const { isMobile } = usePreferences();
@@ -114,7 +115,7 @@ const toolbarOptions = computed(() => {
               code: 'search',
               icon: 'vxe-icon--search',
               circle: true,
-              status: isFormShow.value ? 'primary' : undefined,
+              status: showSearchForm.value ? 'primary' : undefined,
               title: $t('common.search'),
             },
           ]
@@ -196,8 +197,9 @@ function onToolbarToolClick(event: VxeGridDefines.ToolbarToolClickEventParams) {
   if (event.code === 'search') {
     props.api?.toggleSearchForm?.();
   }
-  // @ts-ignore
-  gridEvents.value?.toolbarToolClick?.(event);
+  (
+    gridEvents.value?.toolbarToolClick as VxeGridListeners['toolbarToolClick']
+  )?.(event);
 }
 
 const events = computed(() => {
@@ -334,7 +336,7 @@ onUnmounted(() => {
       <template #form>
         <div
           v-if="formOptions"
-          v-show="isFormShow !== false"
+          v-show="showSearchForm !== false"
           class="relative rounded py-3 pb-4"
         >
           <slot name="form">