plain-design 1.0.0-beta.6 → 1.0.0-beta.60

package/src/packages/components/AutoTable/createTableOptionUser.tsx

@@ -1,75 +1,75 @@
-import {useTableOptionRender} from "./use/useTableOption.render";
-import {useTableOptionTable} from "./use/useTableOption.table";
-import {useTableOptionPagination} from "./use/useTableOption.pagination";
-import {useTableOptionMethods} from "./use/useTableOption.methods";
-import {useTableOptionButtons} from "./use/useTableOption.buttons";
-import {useTableOptionConfirm} from "./use/useTableOption.confirm";
-import {useTableOptionCheck} from "./use/useTableOption.check";
-import {useTableOptionCache} from "./use/useTableOption.cache";
-import {useTableOptionSetting} from "./setting/useTableOption.setting";
-import {useTableOptionSortState} from "./use/useTableOption.sort";
-import {useTableOptionFilterState} from "./filter/useTableOption.filter.state";
-import {useTableOptionFilterSearch} from "./filter/useTableOption.filter.search";
-import {useTableOptionFilterForm} from "./filter/useTableOption.filter.form";
-import {useTableOptionSettingAllFilter} from "./setting/useTableOption.setting.all.fitler";
-import {useTableOptionSettingCache} from "./setting/useTableOption.setting.cache";
-import {useTableOptionSettingImport} from "./setting/useTableOption.setting.import";
-import {useTableOptionSettingExport} from "./setting/useTableOption.setting.export";
-import {useTableOptionSettingConfig} from "./setting/useTableOption.setting.config";
-import {useTableOptionSettingSeniorFilter} from "./setting/useTableOption.setting.senior.filter";
-import {useTableOptionColumnPopper} from "./use/useTableOption.column.popper";
-import {useTableOptionTips} from "./use/useTableOption.tips";
-import {useTableOptionKeyboard} from "./use/useTableOptionKeyboard";
-import {useTableOptionSettingSeniorSort} from "./setting/useTableOption.setting.senior.sort";
-import {useTableOptionParent} from "./use/useTableOption.parent";
-import {useTableOptionFill} from "./use/useTableOption.fill";
-import {useTableOptionLoading} from "./use/useTableOption.loading";
-import {ApplicationConfigurationProvider} from "../Application/utils/application.utils";
-import {useTableOptionState} from "./use/useTableOption.state";
-import {useTableOptionHooks} from "./use/useTableOption.hooks";
-import {useTableOptionPermission} from "./use/useTableOption.permission";
-import {AutoModule} from "./utils/AutoModule";
-
-AutoModule.globalRegistrationManager.use(0, '_', (option) => {
-  const applicationConfiguration = ApplicationConfigurationProvider.inject();
-  const oldConfig = option.config;
-  const newConfig = new Proxy(oldConfig, {
-    get(target, key) {
-      if (key === 'size') {return target.size || applicationConfiguration.value.default.size;}
-      return (target as any)[key];
-    },
-  });
-  option.config = newConfig;
-});
-AutoModule.globalRegistrationManager.use(1, 'hooks', useTableOptionHooks);                              // 钩子
-AutoModule.globalRegistrationManager.use(2, 'state', useTableOptionState);                              // 内部状态
-AutoModule.globalRegistrationManager.use(3, 'loading', useTableOptionLoading);                          // 加载遮罩控制
-AutoModule.globalRegistrationManager.use(4, 'keyboard', useTableOptionKeyboard);                        // 快捷键
-AutoModule.globalRegistrationManager.use(5, 'confirm', useTableOptionConfirm);                          // 确认控制
-AutoModule.globalRegistrationManager.use(6, 'permission', useTableOptionPermission);                    // 编辑控制
-AutoModule.globalRegistrationManager.use(7, 'render', useTableOptionRender);                            // 渲染管理
-AutoModule.globalRegistrationManager.use(8, 'check', useTableOptionCheck);                              // 多选
-AutoModule.globalRegistrationManager.use(9, 'methods', useTableOptionMethods);                          // 暴露方法
-AutoModule.globalRegistrationManager.use(10, 'cache', useTableOptionCache);                             // 缓存
-AutoModule.globalRegistrationManager.use(11, 'filterState', useTableOptionFilterState);                 // 筛选状态
-AutoModule.globalRegistrationManager.use(12, 'setting', useTableOptionSetting);                         // 设置
-AutoModule.globalRegistrationManager.use(13, 'sortState', useTableOptionSortState);                     // 排序状态
-AutoModule.globalRegistrationManager.use(14, 'pagination', useTableOptionPagination);                   // 分页
-AutoModule.globalRegistrationManager.use(15, 'buttons', useTableOptionButtons);                         // 按钮控制
-AutoModule.globalRegistrationManager.use(16, 'filterSearch', useTableOptionFilterSearch);               // 搜索栏
-AutoModule.globalRegistrationManager.use(17, 'filterForm', useTableOptionFilterForm);                   // 查询表单
-AutoModule.globalRegistrationManager.use(18, 'columnPopper', useTableOptionColumnPopper);               // 列筛选
-AutoModule.globalRegistrationManager.use(19, 'tips', useTableOptionTips);                               // tips提示栏
-AutoModule.globalRegistrationManager.use(20, 'fill', useTableOptionFill);                               // 自动行数
-AutoModule.globalRegistrationManager.use(21, 'table', useTableOptionTable);                             // 渲染表格主体
-AutoModule.globalRegistrationManager.use(22, 'parent', useTableOptionParent);                           // 父表
-
-AutoModule.globalRegistrationManager.use(23, 'settingAllFilter', useTableOptionSettingAllFilter);       // 设置：所有筛选
-AutoModule.globalRegistrationManager.use(25, 'settingCache', useTableOptionSettingCache);               // 设置：缓存设置
-AutoModule.globalRegistrationManager.use(26, 'settingImport', useTableOptionSettingImport);             // 设置：导入数据
-AutoModule.globalRegistrationManager.use(27, 'settingExport', useTableOptionSettingExport);             // 设置：导出数据
-AutoModule.globalRegistrationManager.use(28, 'settingConfig', useTableOptionSettingConfig);             // 设置：个性设置
-AutoModule.globalRegistrationManager.use(29, 'settingSeniorFilter', useTableOptionSettingSeniorFilter); // 设置：高级筛选
-AutoModule.globalRegistrationManager.use(30, 'settingSeniorSort', useTableOptionSettingSeniorSort);     // 设置：高级排序
-
-export const createTableOptionUser = AutoModule.createOptionUser;
+import {useTableOptionRender} from "./use/useTableOption.render";
+import {useTableOptionTable} from "./use/useTableOption.table";
+import {useTableOptionPagination} from "./use/useTableOption.pagination";
+import {useTableOptionMethods} from "./use/useTableOption.methods";
+import {useTableOptionButtons} from "./use/useTableOption.buttons";
+import {useTableOptionConfirm} from "./use/useTableOption.confirm";
+import {useTableOptionCheck} from "./use/useTableOption.check";
+import {useTableOptionCache} from "./use/useTableOption.cache";
+import {useTableOptionSetting} from "./setting/useTableOption.setting";
+import {useTableOptionSortState} from "./use/useTableOption.sort";
+import {useTableOptionFilterState} from "./filter/useTableOption.filter.state";
+import {useTableOptionFilterSearch} from "./filter/useTableOption.filter.search";
+import {useTableOptionFilterForm} from "./filter/useTableOption.filter.form";
+import {useTableOptionSettingAllFilter} from "./setting/useTableOption.setting.all.fitler";
+import {useTableOptionSettingCache} from "./setting/useTableOption.setting.cache";
+import {useTableOptionSettingImport} from "./setting/useTableOption.setting.import";
+import {useTableOptionSettingExport} from "./setting/useTableOption.setting.export";
+import {useTableOptionSettingConfig} from "./setting/useTableOption.setting.config";
+import {useTableOptionSettingSeniorFilter} from "./setting/useTableOption.setting.senior.filter";
+import {useTableOptionColumnPopper} from "./use/useTableOption.column.popper";
+import {useTableOptionTips} from "./use/useTableOption.tips";
+import {useTableOptionKeyboard} from "./use/useTableOptionKeyboard";
+import {useTableOptionSettingSeniorSort} from "./setting/useTableOption.setting.senior.sort";
+import {useTableOptionParent} from "./use/useTableOption.parent";
+import {useTableOptionFill} from "./use/useTableOption.fill";
+import {useTableOptionLoading} from "./use/useTableOption.loading";
+import {ApplicationConfigurationProvider} from "../Application/utils/application.utils";
+import {useTableOptionState} from "./use/useTableOption.state";
+import {useTableOptionHooks} from "./use/useTableOption.hooks";
+import {useTableOptionPermission} from "./use/useTableOption.permission";
+import {AutoModule} from "./utils/AutoModule";
+
+AutoModule.globalRegistrationManager.use(0, '_', (option) => {
+  const applicationConfiguration = ApplicationConfigurationProvider.inject();
+  const oldConfig = option.config;
+  const newConfig = new Proxy(oldConfig, {
+    get(target, key) {
+      if (key === 'size') {return target.size || applicationConfiguration.value.default.size;}
+      return (target as any)[key];
+    },
+  });
+  option.config = newConfig;
+});
+AutoModule.globalRegistrationManager.use(1, 'hooks', useTableOptionHooks);                              // 钩子
+AutoModule.globalRegistrationManager.use(2, 'state', useTableOptionState);                              // 内部状态
+AutoModule.globalRegistrationManager.use(3, 'loading', useTableOptionLoading);                          // 加载遮罩控制
+AutoModule.globalRegistrationManager.use(4, 'keyboard', useTableOptionKeyboard);                        // 快捷键
+AutoModule.globalRegistrationManager.use(5, 'confirm', useTableOptionConfirm);                          // 确认控制
+AutoModule.globalRegistrationManager.use(6, 'permission', useTableOptionPermission);                    // 编辑控制
+AutoModule.globalRegistrationManager.use(7, 'render', useTableOptionRender);                            // 渲染管理
+AutoModule.globalRegistrationManager.use(8, 'check', useTableOptionCheck);                              // 多选
+AutoModule.globalRegistrationManager.use(9, 'methods', useTableOptionMethods);                          // 暴露方法
+AutoModule.globalRegistrationManager.use(10, 'cache', useTableOptionCache);                             // 缓存
+AutoModule.globalRegistrationManager.use(11, 'filterState', useTableOptionFilterState);                 // 筛选状态
+AutoModule.globalRegistrationManager.use(12, 'setting', useTableOptionSetting);                         // 设置
+AutoModule.globalRegistrationManager.use(13, 'sortState', useTableOptionSortState);                     // 排序状态
+AutoModule.globalRegistrationManager.use(14, 'pagination', useTableOptionPagination);                   // 分页
+AutoModule.globalRegistrationManager.use(15, 'buttons', useTableOptionButtons);                         // 按钮控制
+AutoModule.globalRegistrationManager.use(16, 'filterSearch', useTableOptionFilterSearch);               // 搜索栏
+AutoModule.globalRegistrationManager.use(17, 'filterForm', useTableOptionFilterForm);                   // 查询表单
+AutoModule.globalRegistrationManager.use(18, 'columnPopper', useTableOptionColumnPopper);               // 列筛选
+AutoModule.globalRegistrationManager.use(19, 'tips', useTableOptionTips);                               // tips提示栏
+AutoModule.globalRegistrationManager.use(20, 'fill', useTableOptionFill);                               // 自动行数
+AutoModule.globalRegistrationManager.use(21, 'table', useTableOptionTable);                             // 渲染表格主体
+AutoModule.globalRegistrationManager.use(22, 'parent', useTableOptionParent);                           // 父表
+
+AutoModule.globalRegistrationManager.use(23, 'settingAllFilter', useTableOptionSettingAllFilter);       // 设置：所有筛选
+AutoModule.globalRegistrationManager.use(25, 'settingCache', useTableOptionSettingCache);               // 设置：缓存设置
+AutoModule.globalRegistrationManager.use(26, 'settingImport', useTableOptionSettingImport);             // 设置：导入数据
+AutoModule.globalRegistrationManager.use(27, 'settingExport', useTableOptionSettingExport);             // 设置：导出数据
+AutoModule.globalRegistrationManager.use(28, 'settingConfig', useTableOptionSettingConfig);             // 设置：个性设置
+AutoModule.globalRegistrationManager.use(29, 'settingSeniorFilter', useTableOptionSettingSeniorFilter); // 设置：高级筛选
+AutoModule.globalRegistrationManager.use(30, 'settingSeniorSort', useTableOptionSettingSeniorSort);     // 设置：高级排序
+
+export const createTableOptionUser = AutoModule.createOptionUser;

package/src/packages/components/AutoTable/filter/useTableOption.filter.form.tsx

@@ -1,215 +1,214 @@
-import {eAutoTableFilterMode} from "./useTableOption.filter.state";
-import {computed, reactive, useRefs} from "plain-design-composition";
-import {FilterFormMultiple, iFilterFormMultipleData} from "../../FilterFormMultiple";
-import {Button} from "../../Button";
-import {Tooltip} from "../../Tooltip";
-import {deepcopy} from "plain-utils/object/deepcopy";
-import {FilterService} from "../../FilterService";
-import {TableOptionSpace} from "../utils/TableOption.space";
-import '../utils/TableOption.space';
-import {TableOptionUtils} from "../utils/TableOption.utils";
-import i18n from "../../i18n";
-import {AutoModule} from "../utils/AutoModule";
-
-declare module '../utils/TableOption.space' {
-  namespace TableOptionSpace {
-    interface iTableOption {
-      filterForm: ReturnType<typeof useTableOptionFilterForm>;
-    }
-  }
-}
-
-export const useTableOptionFilterForm = AutoModule.createRegistration((
-  {
-    config,
-    hooks,
-    methods: tableMethods,
-    filterState,
-  }
-) => {
-
-  const { refs, onRef } = useRefs({ filter: FilterFormMultiple });
-
-  /**
-   * 内部状态
-   * @author  韦胜健
-   * @date    2023.1.8 19:12
-   */
-  const state = reactive({
-    data: undefined as undefined | iFilterFormMultipleData,
-    show: false,
-  });
-
-  /**
-   * 筛选的字段
-   * @author  韦胜健
-   * @date    2023.1.8 19:12
-   */
-  const filterOptions = filterState.createComputedFilterOptions(eAutoTableFilterMode.filterForm);
-
-  const activeFilterOption = computed(() => {
-    if (!state.data) {return undefined;}
-    const { formData } = state.data;
-    return filterOptions.value?.filter((filterOption) => {
-      const { field, startField, endField } = filterOption;
-      return formData[field] != null || formData[startField] != null || formData[endField] != null;
-    });
-  });
-
-  const handler = {
-    /**
-     * 当外部的搜索时
-     * 只所以直接调用reload，而不采取这里获取值的原因是因为，可能点击其他的查询按钮触发的reload，此时一样要获取最新的查询参数
-     * 取搜索值的时候固定取外部的filter form single的值
-     * @author  韦胜健
-     * @date    2023.1.8 19:06
-     */
-    onNormalSearch: () => {
-      tableMethods.pageMethods.reload();
-    },
-    /**
-     * 当设置面板中的搜索栏值变化时取出来变化的值，更新到外部的filter form single组件实例中
-     * @author  韦胜健
-     * @date    2023.1.8 19:07
-     */
-    onSettingSearch: (val: iFilterFormMultipleData) => {
-      refs.filter?.update(val);
-      tableMethods.pageMethods.reload();
-    },
-  };
-
-  const methods = { toggleShow: () => {state.show = !state.show;} };
-
-  const filterForm = ({
-    filterOptions,
-    state,
-    refs,
-    onRef,
-    handler,
-    methods,
-    config,
-  });
-
-  if (config.hideFilterForm) {return filterForm;}
-
-  filterState.useState<iFilterFormMultipleData & { show: boolean }>({
-    seq: 1,
-    key: 'form-filter',
-    title: i18n('table.formFilter').d('表单筛选'),
-    getActiveFilterCount: () => {
-      const length = state.data?.filterQueryParam.queries?.length;
-      return length == null ? 0 : length;
-    },
-    applyCache({ cacheData }) {
-      state.data = cacheData?.formData ? cacheData : undefined;
-      state.show = !!cacheData?.show;
-      refs.filter?.update(cacheData);
-    },
-    getCache: () => {
-      return { ...state.data, show: state.show };
-    },
-    getDisplay: () => {
-      const options = !activeFilterOption.value ? undefined : [...activeFilterOption.value];
-      return () => (
-        !!options && (
-          <FilterFormMultiple
-            filterOptions={options}
-            initialState={state.data}
-            onSearch={handler.onSettingSearch}
-            formAttrs={{ column: 1 }}
-            column={1}
-          />
-        )
-      );
-    },
-    clear: () => {
-      if (!state.data) {return;}
-      state.data = undefined;
-      refs.filter?.update(undefined);
-    },
-  });
-
-  hooks.onQueryParam.use(async () => {
-    /*每次查询之前获取组件实例中最新的筛选参数*/
-    !!refs.filter && (state.data = deepcopy(await refs.filter!.getData()));
-
-    if (!!state.data && state.data.filterQueryParam && Object.keys(state.data.filterQueryParam).length > 0) {
-      return state.data.filterQueryParam;
-    }
-  });
-
-  /**
-   * 渲染左侧操作栏时，渲染一个按钮用来展开搜索表单
-   * @author  韦胜健
-   * @date    2023.1.8 19:13
-   */
-  hooks.onRenderLeftOperation.use({
-    processor: ({ list, render }) => {list.push({ key: 'form-filter-expander', seq: 1, render });},
-    render: () => (
-      <Tooltip message={i18n('table.formQuery').d('表单查询')}><Button icon="pi-find-replace" onClick={methods.toggleShow}/></Tooltip>
-    ),
-  });
-
-  /**
-   * 当展开的时候，给auto-table添加一个class，使得搜索栏和查询表单以及表体之间的间隔符合标准
-   * @author  韦胜健
-   * @date    2023.1.8 19:14
-   */
-  hooks.onTableClass.use(list => {
-    if (state.show) {list.push('filter-form-expanded');}
-  });
-
-  hooks.onTableRender.use({
-    processor: ({ list, render }) => {list.push({ seq: 4.5, key: 'form-filter', render, });},
-    render: () => (
-      !!filterOptions.value &&
-      filterOptions.value.length > 0 &&
-      state.show &&
-      <FilterFormMultiple
-        ref={onRef.filter}
-        filterOptions={filterOptions.value!}
-        initialState={state.data}
-        onSearch={handler.onNormalSearch}
-        column={config.filterFormColumn}
-        v-slots={{
-          operation: () => (
-            <Button label={i18n('base.collapse').d('收起')} icon="pi-shrink" onClick={methods.toggleShow}/>
-          )
-        }}
-      />
-    ),
-  });
-
-  const tips = computed((): TableOptionSpace.iTableOptionTipMeta[] => {
-    const list: TableOptionSpace.iTableOptionTipMeta[] = [];
-    const { data } = state;
-    if (!data || !filterOptions.value) {return list;}
-    const { formData, filterQueryParam, filterHandlerMap } = data;
-    if (!filterQueryParam.queries?.length) {return list;}
-    filterOptions.value.forEach(filterOption => {
-      const filterHandler = filterHandlerMap[FilterService.getHandlerBindKey(filterOption)];
-      if (!filterHandler) {return;}
-      filterOption = { ...filterOption, filterHandler };
-      const meta = TableOptionUtils.createTableOptionTipMeta({
-        filterOption,
-        formData,
-        onClick: () => {
-          if (!state.show) {methods.toggleShow();}
-        },
-        onClear: () => {
-          data.filterQueryParam = {};
-          refs.filter?.update({ ...data, });
-          tableMethods.pageMethods.reload();
-        },
-      });
-      !!meta && list.push(meta);
-    });
-    return list;
-  });
-
-  hooks.onTips.use((list) => {
-    !!tips.value.length && list.push(...tips.value);
-  });
-
-  return filterForm;
-});
+import {eAutoTableFilterMode} from "./useTableOption.filter.state";
+import {computed, reactive, useRefs} from "plain-design-composition";
+import {FilterFormMultiple, iFilterFormMultipleData} from "../../FilterFormMultiple";
+import {Button} from "../../Button";
+import {Tooltip} from "../../Tooltip";
+import {deepcopy} from "plain-utils/object/deepcopy";
+import {FilterService} from "../../FilterService";
+import {TableOptionSpace} from "../utils/TableOption.space";
+import '../utils/TableOption.space';
+import {TableOptionUtils} from "../utils/TableOption.utils";
+import i18n from "../../i18n";
+import {AutoModule} from "../utils/AutoModule";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      filterForm: ReturnType<typeof useTableOptionFilterForm>;
+    }
+  }
+}
+
+export const useTableOptionFilterForm = AutoModule.createRegistration((
+  {
+    config,
+    hooks,
+    methods: tableMethods,
+    filterState,
+  }
+) => {
+
+  const { refs, onRef } = useRefs({ filter: FilterFormMultiple });
+
+  /**
+   * 内部状态
+   * @author  韦胜健
+   * @date    2023.1.8 19:12
+   */
+  const state = reactive({
+    data: undefined as undefined | iFilterFormMultipleData,
+    show: false,
+  });
+
+  /**
+   * 筛选的字段
+   * @author  韦胜健
+   * @date    2023.1.8 19:12
+   */
+  const filterOptions = filterState.createComputedFilterOptions(eAutoTableFilterMode.filterForm);
+
+  const activeFilterOption = computed(() => {
+    if (!state.data) {return undefined;}
+    const { formData } = state.data;
+    return filterOptions.value?.filter((filterOption) => {
+      const { field, startField, endField } = filterOption;
+      return formData[field] != null || formData[startField] != null || formData[endField] != null;
+    });
+  });
+
+  const handler = {
+    /**
+     * 当外部的搜索时
+     * 只所以直接调用reload，而不采取这里获取值的原因是因为，可能点击其他的查询按钮触发的reload，此时一样要获取最新的查询参数
+     * 取搜索值的时候固定取外部的filter form single的值
+     * @author  韦胜健
+     * @date    2023.1.8 19:06
+     */
+    onNormalSearch: () => {
+      tableMethods.pageMethods.reload();
+    },
+    /**
+     * 当设置面板中的搜索栏值变化时取出来变化的值，更新到外部的filter form single组件实例中
+     * @author  韦胜健
+     * @date    2023.1.8 19:07
+     */
+    onSettingSearch: (val: iFilterFormMultipleData) => {
+      refs.filter?.update(val);
+      tableMethods.pageMethods.reload();
+    },
+  };
+
+  const methods = { toggleShow: () => {state.show = !state.show;} };
+
+  const filterForm = ({
+    filterOptions,
+    state,
+    refs,
+    onRef,
+    handler,
+    methods,
+    config,
+  });
+
+  if (config.hideFilterForm) {return filterForm;}
+
+  filterState.useState<iFilterFormMultipleData & { show: boolean }>({
+    seq: 1,
+    key: 'form-filter',
+    title: i18n.$it('table.formFilter').d('表单筛选'),
+    getActiveFilterCount: () => {
+      const length = state.data?.filterQueryParam.queries?.length;
+      return length == null ? 0 : length;
+    },
+    applyCache({ cacheData }) {
+      state.data = cacheData?.formData ? cacheData : undefined;
+      state.show = !!cacheData?.show;
+      refs.filter?.update(cacheData);
+    },
+    getCache: () => {
+      return { ...state.data, show: state.show };
+    },
+    getDisplay: () => {
+      const options = !activeFilterOption.value ? undefined : [...activeFilterOption.value];
+      return () => (
+        !!options && (
+          <FilterFormMultiple
+            filterOptions={options}
+            initialState={state.data}
+            onSearch={handler.onSettingSearch}
+            formAttrs={{ column: 1 }}
+            column={1}
+          />
+        )
+      );
+    },
+    clear: () => {
+      if (!state.data) {return;}
+      state.data = undefined;
+      refs.filter?.update(undefined);
+    },
+  });
+
+  hooks.onQueryParam.use(async () => {
+    /*每次查询之前获取组件实例中最新的筛选参数*/
+    !!refs.filter && (state.data = deepcopy(await refs.filter!.getData()));
+
+    if (!!state.data && state.data.filterQueryParam && Object.keys(state.data.filterQueryParam).length > 0) {
+      return state.data.filterQueryParam;
+    }
+  });
+
+  /**
+   * 渲染左侧操作栏时，渲染一个按钮用来展开搜索表单
+   * @author  韦胜健
+   * @date    2023.1.8 19:13
+   */
+  hooks.onRenderLeftOperation.use({
+    processor: ({ list, render }) => {list.push({ key: 'form-filter-expander', seq: 1, render });},
+    render: () => (
+      <Tooltip message={i18n.$it('table.formQuery').d('表单查询')}><Button icon="pi-find-replace" onClick={methods.toggleShow}/></Tooltip>
+    ),
+  });
+
+  /**
+   * 当展开的时候，给auto-table添加一个class，使得搜索栏和查询表单以及表体之间的间隔符合标准
+   * @author  韦胜健
+   * @date    2023.1.8 19:14
+   */
+  hooks.onTableClass.use(list => {
+    if (state.show) {list.push('filter-form-expanded');}
+  });
+
+  hooks.onTableOuterRender.use({
+    processor: ({ list, render }) => {list.push({ seq: 0, key: 'form-filter', render, });},
+    render: () => (
+      !!filterOptions.value &&
+      filterOptions.value.length > 0 &&
+      state.show && <FilterFormMultiple
+        ref={onRef.filter}
+        filterOptions={filterOptions.value!}
+        initialState={state.data}
+        onSearch={handler.onNormalSearch}
+        column={config.filterFormColumn}
+        v-slots={{
+          operation: () => (
+            <Button label={i18n.$it('base.collapse').d('收起')} icon="pi-shrink" onClick={methods.toggleShow}/>
+          )
+        }}
+      />
+    ),
+  });
+
+  const tips = computed((): TableOptionSpace.iTableOptionTipMeta[] => {
+    const list: TableOptionSpace.iTableOptionTipMeta[] = [];
+    const { data } = state;
+    if (!data || !filterOptions.value) {return list;}
+    const { formData, filterQueryParam, filterHandlerMap } = data;
+    if (!filterQueryParam.queries?.length) {return list;}
+    filterOptions.value.forEach(filterOption => {
+      const filterHandler = filterHandlerMap[FilterService.getHandlerBindKey(filterOption)];
+      if (!filterHandler) {return;}
+      filterOption = { ...filterOption, filterHandler };
+      const meta = TableOptionUtils.createTableOptionTipMeta({
+        filterOption,
+        formData,
+        onClick: () => {
+          if (!state.show) {methods.toggleShow();}
+        },
+        onClear: () => {
+          data.filterQueryParam = {};
+          refs.filter?.update({ ...data, });
+          tableMethods.pageMethods.reload();
+        },
+      });
+      !!meta && list.push(meta);
+    });
+    return list;
+  });
+
+  hooks.onTips.use((list) => {
+    !!tips.value.length && list.push(...tips.value);
+  });
+
+  return filterForm;
+});