plain-design 1.0.0-beta.22 → 1.0.0-beta.23

package/src/packages/components/AutoTable/use/useTableOption.column.popper.tsx

@@ -1,490 +1,490 @@
-import {findParentElement} from "../../../utils/findParentElement";
-import {hasClass} from "plain-utils/dom/hasClass";
-import {tPlc} from "../../Table/plc/utils/plc.utils";
-import {computed, designComponent, getComponentCls, iMouseEvent, PropType, reactive, toRaw} from "plain-design-composition";
-import {eAutoTableFilterMode} from "../filter/useTableOption.filter.state";
-import {FilterFormSingle, iFilterFormSingleData} from "../../FilterFormSingle";
-import {ButtonGroup} from "../../ButtonGroup";
-import {Button} from "../../Button";
-import {Tooltip} from "../../Tooltip";
-import {iFilterOption, iFilterQueryParam} from "../../FilterService/utils/filter.service.utils";
-import {mergeQueryParam} from "../../FilterService/utils/mergeQueryParam";
-import {$dialog} from "../../$dialog";
-import {AutoTable} from "../index";
-import {PlainObject} from "plain-utils/utils/event";
-import {RenderTableOptionTips} from "./useTableOption.tips";
-import {eTableOptionSortMode} from "./useTableOption.sort";
-import {FilterService} from "../../FilterService";
-import {PlcCheck} from "../../Table/standard/PlcCheck/PlcCheck";
-import {nextPlcExcludeCode, PlcExclusion} from "../../Table/standard/PlcExclusion";
-import {deepCloneRenderNode} from "../../../utils/deepCloneRenderNode";
-import {PlcIndex} from "../../Table/standard/PlcIndex";
-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";
-import {createPopupEditor, iPopupEditor, iPopupEditorUseOption} from "../../usePopupEditor";
-
-declare module '../utils/TableOption.space' {
-  namespace TableOptionSpace {
-    interface iTableOption {
-      columnPopper: ReturnType<typeof useTableOptionColumnPopper>;
-    }
-  }
-}
-
-export const useTableOptionColumnPopper = AutoModule.createRegistration((
-  {
-    hooks,
-    methods,
-    filterState,
-    config,
-    clone,
-    sortState,
-  }
-) => {
-
-  /**
-   * 列搜索状态控制
-   * @author  韦胜健
-   * @date    2023.1.14 22:49
-   */
-  const searchHandler = (() => {
-    const columnFilterOptions = filterState.createComputedFilterOptions(eAutoTableFilterMode.filterColumn);
-
-    const innerState = reactive({
-      data: {} as Record<string, undefined | iFilterFormSingleData>,
-    });
-    const onSearch = (val: iFilterFormSingleData) => {
-      innerState.data[val.field] = val;
-      methods.pageMethods.reload();
-    };
-    hooks.onQueryParam.use(() => {
-      const queryParamList = Object.values(innerState.data).map(i => i?.filterQueryParam).filter(Boolean) as iFilterQueryParam[];
-      return mergeQueryParam(...queryParamList);
-    });
-    filterState.useState<Record<string, undefined | iFilterFormSingleData>>({
-      seq: 1,
-      key: 'column-search',
-      title: i18n('table.columnFilter').d('列搜索'),
-      getActiveFilterCount: () => {
-        return Object.values(innerState.data).reduce((prev, item) => {
-          return prev + (item?.filterQueryParam.queries?.length || 0);
-        }, 0);
-      },
-      applyCache: ({ cacheData }) => {innerState.data = cacheData || {};},
-      getCache: () => {return innerState.data;},
-      clear: () => {innerState.data = {};},
-      getDisplay: () => {
-        const valList = Object.values(innerState.data).filter(Boolean) as iFilterFormSingleData[];
-        if (valList.length === 0) {return () => null;}
-        const contentList = valList.map(singleData => {
-          const filterOption = columnFilterOptions.value?.find(i => i.field === singleData.field);
-          return !filterOption ? null : (
-            <FilterFormSingle
-              key={singleData.field}
-              initialState={innerState.data[singleData.field]}
-              filterOptions={[filterOption]}
-              width="100%"
-              onSearch={onSearch}
-            />
-          );
-        }).filter(Boolean);
-        return () => contentList;
-      },
-    });
-    const tips = computed((): TableOptionSpace.iTableOptionTipMeta[] => {
-      const list: TableOptionSpace.iTableOptionTipMeta[] = [];
-      if (!columnFilterOptions.value) {return list;}
-      Object.values(innerState.data).forEach(singleData => {
-        if (!singleData) {return;}
-        const { formData, filterHandler, filterQueryParam, field } = singleData;
-        if (!filterQueryParam.queries?.length) {return; }
-        let filterOption = columnFilterOptions.value!.find(i => i.field === field);
-        if (!filterOption) {return;}
-        filterOption = { ...filterOption, filterHandler };
-        const meta = TableOptionUtils.createTableOptionTipMeta({
-          filterOption,
-          formData,
-          onClick: () => {/*do nothing*/},
-          onClear: () => {
-            singleData.filterQueryParam = {};
-            methods.pageMethods.reload();
-          },
-        });
-        !!meta && list.push(meta);
-      });
-      return list;
-    });
-    hooks.onTips.use(list => {!!tips.value && list.push(...tips.value);});
-
-    function getFilterOption(plc: tPlc): iFilterOption | null {
-      const searchField = plc.props.searchField || plc.props.field;
-      if (!searchField) {return null;}
-      return columnFilterOptions.value?.find(i => i.field === searchField) || null;
-    }
-
-    return {
-      innerState,
-      onSearch,
-      getFilterOption,
-    };
-  })();
-
-  /**
-   * 去重筛选状态控制
-   * @author  韦胜健
-   * @date    2023.1.14 22:51
-   */
-  const distinctHandler = ((() => {
-    /**
-     * 可用的去重筛选字段
-     * @author  韦胜健
-     * @date    2023.1.14 22:51
-     */
-    const distinctFilterOptions = filterState.createComputedFilterOptions(eAutoTableFilterMode.filterDistinct);
-
-    function getFilterOption(plc: tPlc): iFilterOption | null {
-      const searchField = plc.props.searchField || plc.props.field;
-      if (!searchField) {return null;}
-      return distinctFilterOptions.value?.find(i => i.field === searchField) || null;
-    }
-
-    const innerState = reactive({
-      data: {} as Record<string, undefined | PlainObject[]>,
-      /*调用 methods.pageMethods.loadQueryParam时要忽略 要打开的那个字段的筛选参数*/
-      ignoreDistinctFilterField: null as null | string,
-    });
-
-    const onConfirm = (field: string, selected: PlainObject[]) => {
-      innerState.data[field!] = selected;
-      methods.pageMethods.reload();
-    };
-
-    hooks.onQueryParam.use(async () => {
-      if (!distinctFilterOptions.value) {return;}
-      const queryParamList = await Promise.all(
-        Object.entries(innerState.data).map(async ([field, selected]) => {
-          if (!selected || selected.length === 0 || field === innerState.ignoreDistinctFilterField) {return;}
-          return { queries: [{ id: `distinct_filter_${field}`, field, operator: 'in' as const, value: selected.map(i => i[field]).join(',') }] };
-        })
-      );
-      return mergeQueryParam(...queryParamList);
-    });
-
-    filterState.useState<Record<string, undefined | PlainObject[]>>({
-      seq: 1,
-      key: 'distinct-search',
-      title: i18n('table.distinctFilter').d('去重筛选'),
-      getActiveFilterCount: () => {
-        return Object.values(innerState.data).reduce((prev, item) => {
-          return prev + ((!!item && item.length > 0) ? 1 : 0);
-        }, 0);
-      },
-      applyCache: ({ cacheData }) => {innerState.data = cacheData || {};},
-      getCache: () => {return innerState.data;},
-      clear: () => {innerState.data = {};},
-      getDisplay: () => {
-        // todo
-        return () => (
-          <RenderTableOptionTips tips={tips.value} hideClearButton/>
-        );
-      },
-    });
-
-    const tips = computed((): TableOptionSpace.iTableOptionTipMeta[] => {
-      const list: TableOptionSpace.iTableOptionTipMeta[] = [];
-
-      Object.entries(innerState.data).forEach(([field, value]) => {
-        if (!distinctFilterOptions.value || !value || value.length === 0) {return;}
-        let filterOption = distinctFilterOptions.value.find(i => i.field === field)!;
-        filterOption = { ...filterOption, filterHandler: 'in' };
-        const handler = FilterService.getHandler(filterOption);
-        const vals = value.map(i => i[field]).join(',');
-        const onClick = async () => {
-          const plc = (await methods.getSourceFlatPlcList()).find(i => i.props.searchField === field || i.props.field === field);
-          !!plc && open(plc);
-        };
-        const onClear = (e?: iMouseEvent) => {
-          e?.stopPropagation();
-          innerState.data[field] = undefined;
-          methods.pageMethods.reload();
-        };
-        if (!handler) {
-          list.push({
-            display: () => i18n('table.filterTipInclude', { field: filterOption.label, val: vals }).d(`${filterOption.label}包含${vals}`),
-            onClick,
-            onClear,
-          });
-        } else {
-          const meta = TableOptionUtils.createTableOptionTipMeta({
-            filterOption,
-            formData: { [field]: vals },
-            onClick,
-            onClear,
-          });
-          !!meta && list.push(meta);
-        }
-      });
-      return list;
-    });
-    hooks.onTips.use(list => {!!tips.value && list.push(...tips.value);});
-
-    const open = async (plc: tPlc) => {
-      popperHandler.close();
-      const wrapperStyles = { width: '400px' };
-      const field = plc.props.searchField || plc.props.field;
-      if (!field) {return;}
-      const excludeCode = nextPlcExcludeCode();
-      /*用排除法来去掉不显示的列*/
-      const isExclude = (i: tPlc): boolean => {
-        if (i.props.excludeCode === excludeCode) {
-          return false;
-        }
-        if (i.props.title === plc.props.title && i.props.field === plc.props.field && i.props.searchField == plc.props.searchField) {
-          return false;
-        }
-        return true;
-      };
-
-      const openState = reactive({ data: innerState.data[field!] || [] });
-      innerState.ignoreDistinctFilterField = field;
-      try {
-        const externalQueryParam = await methods.pageMethods.getLoadQueryParam();
-        // console.log(externalQueryParam);
-
-        $dialog({
-          title: i18n('table.distinctFilter').d('去重筛选'),
-          size: config.size,
-          confirmButton: true,
-          cancelButton: true,
-          handleConfirm: () => {onConfirm(field, openState.data);},
-          render: () => {
-            return (
-              <div style={wrapperStyles}>
-                <PlcExclusion isExclude={isExclude}>
-                  <DistinctAutoTable
-                    externalQueryParam={externalQueryParam}
-                    distinctField={field}
-                    cloneOption={clone as any}
-                    excludeCode={excludeCode}
-                  >
-                    <PlcCheck
-                      excludeCode={excludeCode}
-                      v-model={openState.data}
-                      field={plc.props.field!}
-                      toggleOnClickRow
-                    />
-                    {deepCloneRenderNode(hooks.onRenderColumns.exec())}
-                  </DistinctAutoTable>
-                </PlcExclusion>
-              </div>
-            );
-          }
-        });
-      } finally {
-        innerState.ignoreDistinctFilterField = null;
-      }
-    };
-
-    const clear = (field: string) => {
-      innerState.data[field] = [];
-      methods.pageMethods.reload();
-    };
-
-    return {
-      getFilterOption,
-      innerState,
-      open,
-      clear,
-    };
-  })());
-
-  /**
-   * column popper 控制
-   * @author  韦胜健
-   * @date    2023.1.14 10:34
-   */
-  const popperHandler = (() => {
-
-    const innerState = reactive({
-      data: null as null | {
-        // filterOption: iFilterOption | null,
-        getOption: () => { el: HTMLElement, plc: tPlc },
-        popper: iPopupEditor,
-      }
-    });
-
-    const getPopperAttrs = (): iPopupEditorUseOption => ({ arrowSize: 0, size: config.size });
-
-    const open = ({ el, plc }: { el: HTMLElement, plc: tPlc }) => {
-      if (((!plc.props.field && !plc.props.searchField) || plc.props.noFilter) || plc.props.noSort) {
-        return;
-      }
-      if (!!innerState.data) {
-        const option = innerState.data.getOption();
-        if (toRaw(option.el) === toRaw(el) && toRaw(plc) === toRaw(option.plc)) {
-          /*已经打开，并且打开的是同一个列，则直接切换显示*/
-          return;
-        } else {
-          innerState.data.popper.methods.dispose();
-        }
-      }
-
-      const filterOption = searchHandler.getFilterOption(plc);
-      /*selectFilterOptions只计算一次，避免每次给FilterFormSingle传递变化的options导致重置filterHandler*/
-      const selectFilterOptions = !filterOption ? null : [filterOption];
-
-      innerState.data = {
-        getOption: () => ({ el, plc }),
-        popper: createPopupEditor({
-          option: {
-            alwaysShowOnClickReference: () => false,
-            popperAttrs: getPopperAttrs,
-            reference: () => el,
-            popper: () => {
-              const columnFilterContent = (() => {
-                if (!selectFilterOptions || selectFilterOptions.length === 0) {return null;}
-                return (
-                  <FilterFormSingle
-                    width="360px"
-                    filterOptions={selectFilterOptions}
-                    initialState={searchHandler.innerState.data[selectFilterOptions[0].field]}
-                    onSearch={searchHandler.onSearch}
-                    hideFieldSelector
-                  />
-                );
-              })();
-              const distinctFilterContent = (() => {
-                if (!filterOption) {return null;}
-                return (
-                  <ButtonGroup className="auto-table-column-popper-button-group" size={config.size}>
-                    <Button label={i18n('table.distinctFilter').d('去重筛选')} icon="pi-select-all" size={config.size} onClick={() => distinctHandler.open(plc)}/>
-                    <Tooltip message={i18n('table.clearDistinctFilter').d('清空去重筛选')}><Button icon="pi-delete" size={config.size} onClick={() => distinctHandler.clear(filterOption.field)}/></Tooltip>
-                  </ButtonGroup>
-                );
-              })();
-              return (
-                <div className={getComponentCls('auto-table-column-popper')}>
-                  <SortSwitcher
-                    type={(() => {
-                      if (sortState.state.data.sortMode === eTableOptionSortMode.single) {
-                        if (!!sortState.state.data.singleParam) {
-                          if (sortState.state.data.singleParam.field === plc.props.field) {
-                            return sortState.state.data.singleParam.desc ? 'desc' : 'asc';
-                          }
-                        }
-                      } else {
-                        if (!!sortState.state.data.seniorParam?.length) {
-                          const findParam = sortState.state.data.seniorParam?.find(i => i.field === plc.props.field);
-                          if (!!findParam) {
-                            return findParam.desc ? 'desc' : 'asc';
-                          }
-                        }
-                      }
-                      return undefined;
-                    })()}
-                    onChange={(type) => sortState.useSingle({ field: plc.props.field!, desc: type === 'desc' })}
-                  />
-                  {columnFilterContent}
-                  {distinctFilterContent}
-                </div>
-              );
-            }
-          },
-        }),
-      };
-      innerState.data.popper.methods.show();
-    };
-
-    const close = () => innerState.data?.popper.methods.hide();
-
-    return { open, close };
-  })();
-
-  /**
-   * 点击列标题的时候打开column popper
-   * @author  韦胜健
-   * @date    2023.1.14 10:33
-   */
-  hooks.onClickHead.use(({ e, plc }) => {
-    if (plc.group) {return;}
-    const target = e.target as HTMLElement;
-    const cellEl = hasClass(target, 'plt-head-cell') ? target : findParentElement(target, i => hasClass(i, 'plt-head-cell'));
-    if (!cellEl) {return;}
-    popperHandler.open({ el: cellEl, plc });
-  });
-
-  return {};
-});
-
-const SortSwitcher = designComponent({
-  name: 'sort-switcher',
-  props: {
-    type: { type: String as PropType<'asc' | 'desc'> },
-  },
-  emits: {
-    onChange: (type: 'asc' | 'desc') => true,
-  },
-  setup({ props, event: { emit } }) {
-    const emitAsc = () => emit.onChange('asc');
-    const emitDesc = () => emit.onChange('desc');
-    return () => (
-      <div className="auto-table-sort-switcher">
-        <Button label={i18n('base.asc').d('升序')} icon="pi-sort-descending" status={props.type === 'asc' ? 'primary' : undefined} onClick={emitAsc}/>
-        <Button label={i18n('base.desc').d('降序')} icon="pi-sort-ascending" status={props.type === 'desc' ? 'primary' : undefined} onClick={emitDesc}/>
-      </div>
-    );
-  },
-});
-
-const DistinctAutoTable = designComponent({
-  name: 'distinct-auto-table',
-  props: {
-    distinctField: { type: String, required: true },
-    cloneOption: { type: Function as PropType<TableOptionSpace.iTableOptionClone>, required: true },
-    externalQueryParam: {},
-    excludeCode: { type: String, required: true },
-  },
-  emits: {},
-  slots: ['default'],
-  setup({ props, slots }) {
-
-    const option = props.cloneOption(useConfig => {
-      useConfig.showRows = 10;
-      useConfig.fill = false;
-      useConfig.showRowsMode = 'fixed';
-      useConfig.hideFilterForm = true;
-      if (!useConfig.permit) {useConfig.permit = {};}
-      useConfig.permit.show = {
-        insert: false,
-        update: false,
-        delete: false,
-        other: false,
-      };
-      useConfig.searchAttrs = {
-        ...useConfig.searchAttrs,
-        hideFieldSelector: true,
-        width: '100%',
-      };
-      useConfig.paginationAttrs = {
-        ...useConfig.paginationAttrs,
-        layout: 'sizes,prev,next,jumper',
-      };
-    });
-    option.hooks.onQueryParam.use(() => {
-      return { distinctFields: [props.distinctField], ...props.externalQueryParam as any };
-    });
-
-    return () => (
-      <AutoTable option={option}>
-        <PlcIndex
-          start={(option.pagination.state.page - 1) * option.pagination.state.size}
-          excludeCode={props.excludeCode}
-        />
-        {slots.default()}
-      </AutoTable>
-    );
-  },
-});
+import {findParentElement} from "../../../utils/findParentElement";
+import {hasClass} from "plain-utils/dom/hasClass";
+import {tPlc} from "../../Table/plc/utils/plc.utils";
+import {computed, designComponent, getComponentCls, iMouseEvent, PropType, reactive, toRaw} from "plain-design-composition";
+import {eAutoTableFilterMode} from "../filter/useTableOption.filter.state";
+import {FilterFormSingle, iFilterFormSingleData} from "../../FilterFormSingle";
+import {ButtonGroup} from "../../ButtonGroup";
+import {Button} from "../../Button";
+import {Tooltip} from "../../Tooltip";
+import {iFilterOption, iFilterQueryParam} from "../../FilterService/utils/filter.service.utils";
+import {mergeQueryParam} from "../../FilterService/utils/mergeQueryParam";
+import {$dialog} from "../../$dialog";
+import {AutoTable} from "../index";
+import {PlainObject} from "plain-utils/utils/event";
+import {RenderTableOptionTips} from "./useTableOption.tips";
+import {eTableOptionSortMode} from "./useTableOption.sort";
+import {FilterService} from "../../FilterService";
+import {PlcCheck} from "../../Table/standard/PlcCheck/PlcCheck";
+import {nextPlcExcludeCode, PlcExclusion} from "../../Table/standard/PlcExclusion";
+import {deepCloneRenderNode} from "../../../utils/deepCloneRenderNode";
+import {PlcIndex} from "../../Table/standard/PlcIndex";
+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";
+import {createPopupEditor, iPopupEditor, iPopupEditorUseOption} from "../../usePopupEditor";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      columnPopper: ReturnType<typeof useTableOptionColumnPopper>;
+    }
+  }
+}
+
+export const useTableOptionColumnPopper = AutoModule.createRegistration((
+  {
+    hooks,
+    methods,
+    filterState,
+    config,
+    clone,
+    sortState,
+  }
+) => {
+
+  /**
+   * 列搜索状态控制
+   * @author  韦胜健
+   * @date    2023.1.14 22:49
+   */
+  const searchHandler = (() => {
+    const columnFilterOptions = filterState.createComputedFilterOptions(eAutoTableFilterMode.filterColumn);
+
+    const innerState = reactive({
+      data: {} as Record<string, undefined | iFilterFormSingleData>,
+    });
+    const onSearch = (val: iFilterFormSingleData) => {
+      innerState.data[val.field] = val;
+      methods.pageMethods.reload();
+    };
+    hooks.onQueryParam.use(() => {
+      const queryParamList = Object.values(innerState.data).map(i => i?.filterQueryParam).filter(Boolean) as iFilterQueryParam[];
+      return mergeQueryParam(...queryParamList);
+    });
+    filterState.useState<Record<string, undefined | iFilterFormSingleData>>({
+      seq: 1,
+      key: 'column-search',
+      title: i18n('table.columnFilter').d('列搜索'),
+      getActiveFilterCount: () => {
+        return Object.values(innerState.data).reduce((prev, item) => {
+          return prev + (item?.filterQueryParam.queries?.length || 0);
+        }, 0);
+      },
+      applyCache: ({ cacheData }) => {innerState.data = cacheData || {};},
+      getCache: () => {return innerState.data;},
+      clear: () => {innerState.data = {};},
+      getDisplay: () => {
+        const valList = Object.values(innerState.data).filter(Boolean) as iFilterFormSingleData[];
+        if (valList.length === 0) {return () => null;}
+        const contentList = valList.map(singleData => {
+          const filterOption = columnFilterOptions.value?.find(i => i.field === singleData.field);
+          return !filterOption ? null : (
+            <FilterFormSingle
+              key={singleData.field}
+              initialState={innerState.data[singleData.field]}
+              filterOptions={[filterOption]}
+              width="100%"
+              onSearch={onSearch}
+            />
+          );
+        }).filter(Boolean);
+        return () => contentList;
+      },
+    });
+    const tips = computed((): TableOptionSpace.iTableOptionTipMeta[] => {
+      const list: TableOptionSpace.iTableOptionTipMeta[] = [];
+      if (!columnFilterOptions.value) {return list;}
+      Object.values(innerState.data).forEach(singleData => {
+        if (!singleData) {return;}
+        const { formData, filterHandler, filterQueryParam, field } = singleData;
+        if (!filterQueryParam.queries?.length) {return; }
+        let filterOption = columnFilterOptions.value!.find(i => i.field === field);
+        if (!filterOption) {return;}
+        filterOption = { ...filterOption, filterHandler };
+        const meta = TableOptionUtils.createTableOptionTipMeta({
+          filterOption,
+          formData,
+          onClick: () => {/*do nothing*/},
+          onClear: () => {
+            singleData.filterQueryParam = {};
+            methods.pageMethods.reload();
+          },
+        });
+        !!meta && list.push(meta);
+      });
+      return list;
+    });
+    hooks.onTips.use(list => {!!tips.value && list.push(...tips.value);});
+
+    function getFilterOption(plc: tPlc): iFilterOption | null {
+      const searchField = plc.props.searchField || plc.props.field;
+      if (!searchField) {return null;}
+      return columnFilterOptions.value?.find(i => i.field === searchField) || null;
+    }
+
+    return {
+      innerState,
+      onSearch,
+      getFilterOption,
+    };
+  })();
+
+  /**
+   * 去重筛选状态控制
+   * @author  韦胜健
+   * @date    2023.1.14 22:51
+   */
+  const distinctHandler = ((() => {
+    /**
+     * 可用的去重筛选字段
+     * @author  韦胜健
+     * @date    2023.1.14 22:51
+     */
+    const distinctFilterOptions = filterState.createComputedFilterOptions(eAutoTableFilterMode.filterDistinct);
+
+    function getFilterOption(plc: tPlc): iFilterOption | null {
+      const searchField = plc.props.searchField || plc.props.field;
+      if (!searchField) {return null;}
+      return distinctFilterOptions.value?.find(i => i.field === searchField) || null;
+    }
+
+    const innerState = reactive({
+      data: {} as Record<string, undefined | PlainObject[]>,
+      /*调用 methods.pageMethods.loadQueryParam时要忽略 要打开的那个字段的筛选参数*/
+      ignoreDistinctFilterField: null as null | string,
+    });
+
+    const onConfirm = (field: string, selected: PlainObject[]) => {
+      innerState.data[field!] = selected;
+      methods.pageMethods.reload();
+    };
+
+    hooks.onQueryParam.use(async () => {
+      if (!distinctFilterOptions.value) {return;}
+      const queryParamList = await Promise.all(
+        Object.entries(innerState.data).map(async ([field, selected]) => {
+          if (!selected || selected.length === 0 || field === innerState.ignoreDistinctFilterField) {return;}
+          return { queries: [{ id: `distinct_filter_${field}`, field, operator: 'in' as const, value: selected.map(i => i[field]).join(',') }] };
+        })
+      );
+      return mergeQueryParam(...queryParamList);
+    });
+
+    filterState.useState<Record<string, undefined | PlainObject[]>>({
+      seq: 1,
+      key: 'distinct-search',
+      title: i18n('table.distinctFilter').d('去重筛选'),
+      getActiveFilterCount: () => {
+        return Object.values(innerState.data).reduce((prev, item) => {
+          return prev + ((!!item && item.length > 0) ? 1 : 0);
+        }, 0);
+      },
+      applyCache: ({ cacheData }) => {innerState.data = cacheData || {};},
+      getCache: () => {return innerState.data;},
+      clear: () => {innerState.data = {};},
+      getDisplay: () => {
+        // todo
+        return () => (
+          <RenderTableOptionTips tips={tips.value} hideClearButton/>
+        );
+      },
+    });
+
+    const tips = computed((): TableOptionSpace.iTableOptionTipMeta[] => {
+      const list: TableOptionSpace.iTableOptionTipMeta[] = [];
+
+      Object.entries(innerState.data).forEach(([field, value]) => {
+        if (!distinctFilterOptions.value || !value || value.length === 0) {return;}
+        let filterOption = distinctFilterOptions.value.find(i => i.field === field)!;
+        filterOption = { ...filterOption, filterHandler: 'in' };
+        const handler = FilterService.getHandler(filterOption);
+        const vals = value.map(i => i[field]).join(',');
+        const onClick = async () => {
+          const plc = (await methods.getSourceFlatPlcList()).find(i => i.props.searchField === field || i.props.field === field);
+          !!plc && open(plc);
+        };
+        const onClear = (e?: iMouseEvent) => {
+          e?.stopPropagation();
+          innerState.data[field] = undefined;
+          methods.pageMethods.reload();
+        };
+        if (!handler) {
+          list.push({
+            display: () => i18n('table.filterTipInclude', { field: filterOption.label, val: vals }).d(`${filterOption.label}包含${vals}`),
+            onClick,
+            onClear,
+          });
+        } else {
+          const meta = TableOptionUtils.createTableOptionTipMeta({
+            filterOption,
+            formData: { [field]: vals },
+            onClick,
+            onClear,
+          });
+          !!meta && list.push(meta);
+        }
+      });
+      return list;
+    });
+    hooks.onTips.use(list => {!!tips.value && list.push(...tips.value);});
+
+    const open = async (plc: tPlc) => {
+      popperHandler.close();
+      const wrapperStyles = { width: '400px' };
+      const field = plc.props.searchField || plc.props.field;
+      if (!field) {return;}
+      const excludeCode = nextPlcExcludeCode();
+      /*用排除法来去掉不显示的列*/
+      const isExclude = (i: tPlc): boolean => {
+        if (i.props.excludeCode === excludeCode) {
+          return false;
+        }
+        if (i.props.title === plc.props.title && i.props.field === plc.props.field && i.props.searchField == plc.props.searchField) {
+          return false;
+        }
+        return true;
+      };
+
+      const openState = reactive({ data: innerState.data[field!] || [] });
+      innerState.ignoreDistinctFilterField = field;
+      try {
+        const externalQueryParam = await methods.pageMethods.getLoadQueryParam();
+        // console.log(externalQueryParam);
+
+        $dialog({
+          title: i18n('table.distinctFilter').d('去重筛选'),
+          size: config.size,
+          confirmButton: true,
+          cancelButton: true,
+          handleConfirm: () => {onConfirm(field, openState.data);},
+          render: () => {
+            return (
+              <div style={wrapperStyles}>
+                <PlcExclusion isExclude={isExclude}>
+                  <DistinctAutoTable
+                    externalQueryParam={externalQueryParam}
+                    distinctField={field}
+                    cloneOption={clone as any}
+                    excludeCode={excludeCode}
+                  >
+                    <PlcCheck
+                      excludeCode={excludeCode}
+                      v-model={openState.data}
+                      field={plc.props.field!}
+                      toggleOnClickRow
+                    />
+                    {deepCloneRenderNode(hooks.onRenderColumns.exec())}
+                  </DistinctAutoTable>
+                </PlcExclusion>
+              </div>
+            );
+          }
+        });
+      } finally {
+        innerState.ignoreDistinctFilterField = null;
+      }
+    };
+
+    const clear = (field: string) => {
+      innerState.data[field] = [];
+      methods.pageMethods.reload();
+    };
+
+    return {
+      getFilterOption,
+      innerState,
+      open,
+      clear,
+    };
+  })());
+
+  /**
+   * column popper 控制
+   * @author  韦胜健
+   * @date    2023.1.14 10:34
+   */
+  const popperHandler = (() => {
+
+    const innerState = reactive({
+      data: null as null | {
+        // filterOption: iFilterOption | null,
+        getOption: () => { el: HTMLElement, plc: tPlc },
+        popper: iPopupEditor,
+      }
+    });
+
+    const getPopperAttrs = (): iPopupEditorUseOption => ({ arrowSize: 0, size: config.size });
+
+    const open = ({ el, plc }: { el: HTMLElement, plc: tPlc }) => {
+      if (((!plc.props.field && !plc.props.searchField) || plc.props.noFilter) || plc.props.noSort) {
+        return;
+      }
+      if (!!innerState.data) {
+        const option = innerState.data.getOption();
+        if (toRaw(option.el) === toRaw(el) && toRaw(plc) === toRaw(option.plc)) {
+          /*已经打开，并且打开的是同一个列，则直接切换显示*/
+          return;
+        } else {
+          innerState.data.popper.methods.dispose();
+        }
+      }
+
+      const filterOption = searchHandler.getFilterOption(plc);
+      /*selectFilterOptions只计算一次，避免每次给FilterFormSingle传递变化的options导致重置filterHandler*/
+      const selectFilterOptions = !filterOption ? null : [filterOption];
+
+      innerState.data = {
+        getOption: () => ({ el, plc }),
+        popper: createPopupEditor({
+          option: {
+            alwaysShowOnClickReference: () => false,
+            popperAttrs: getPopperAttrs,
+            reference: () => el,
+            popper: () => {
+              const columnFilterContent = (() => {
+                if (!selectFilterOptions || selectFilterOptions.length === 0) {return null;}
+                return (
+                  <FilterFormSingle
+                    width="360px"
+                    filterOptions={selectFilterOptions}
+                    initialState={searchHandler.innerState.data[selectFilterOptions[0].field]}
+                    onSearch={searchHandler.onSearch}
+                    hideFieldSelector
+                  />
+                );
+              })();
+              const distinctFilterContent = (() => {
+                if (!filterOption) {return null;}
+                return (
+                  <ButtonGroup className="auto-table-column-popper-button-group" size={config.size}>
+                    <Button label={i18n('table.distinctFilter').d('去重筛选')} icon="pi-select-all" size={config.size} onClick={() => distinctHandler.open(plc)}/>
+                    <Tooltip message={i18n('table.clearDistinctFilter').d('清空去重筛选')}><Button icon="pi-delete" size={config.size} onClick={() => distinctHandler.clear(filterOption.field)}/></Tooltip>
+                  </ButtonGroup>
+                );
+              })();
+              return (
+                <div className={getComponentCls('auto-table-column-popper')}>
+                  <SortSwitcher
+                    type={(() => {
+                      if (sortState.state.data.sortMode === eTableOptionSortMode.single) {
+                        if (!!sortState.state.data.singleParam) {
+                          if (sortState.state.data.singleParam.field === plc.props.field) {
+                            return sortState.state.data.singleParam.desc ? 'desc' : 'asc';
+                          }
+                        }
+                      } else {
+                        if (!!sortState.state.data.seniorParam?.length) {
+                          const findParam = sortState.state.data.seniorParam?.find(i => i.field === plc.props.field);
+                          if (!!findParam) {
+                            return findParam.desc ? 'desc' : 'asc';
+                          }
+                        }
+                      }
+                      return undefined;
+                    })()}
+                    onChange={(type) => sortState.useSingle({ field: plc.props.field!, desc: type === 'desc' })}
+                  />
+                  {columnFilterContent}
+                  {distinctFilterContent}
+                </div>
+              );
+            }
+          },
+        }),
+      };
+      innerState.data.popper.methods.show();
+    };
+
+    const close = () => innerState.data?.popper.methods.hide();
+
+    return { open, close };
+  })();
+
+  /**
+   * 点击列标题的时候打开column popper
+   * @author  韦胜健
+   * @date    2023.1.14 10:33
+   */
+  hooks.onClickHead.use(({ e, plc }) => {
+    if (plc.group) {return;}
+    const target = e.target as HTMLElement;
+    const cellEl = hasClass(target, 'plt-head-cell') ? target : findParentElement(target, i => hasClass(i, 'plt-head-cell'));
+    if (!cellEl) {return;}
+    popperHandler.open({ el: cellEl, plc });
+  });
+
+  return {};
+});
+
+const SortSwitcher = designComponent({
+  name: 'sort-switcher',
+  props: {
+    type: { type: String as PropType<'asc' | 'desc'> },
+  },
+  emits: {
+    onChange: (type: 'asc' | 'desc') => true,
+  },
+  setup({ props, event: { emit } }) {
+    const emitAsc = () => emit.onChange('asc');
+    const emitDesc = () => emit.onChange('desc');
+    return () => (
+      <div className="auto-table-sort-switcher">
+        <Button label={i18n('base.asc').d('升序')} icon="pi-sort-descending" status={props.type === 'asc' ? 'primary' : undefined} onClick={emitAsc}/>
+        <Button label={i18n('base.desc').d('降序')} icon="pi-sort-ascending" status={props.type === 'desc' ? 'primary' : undefined} onClick={emitDesc}/>
+      </div>
+    );
+  },
+});
+
+const DistinctAutoTable = designComponent({
+  name: 'distinct-auto-table',
+  props: {
+    distinctField: { type: String, required: true },
+    cloneOption: { type: Function as PropType<TableOptionSpace.iTableOptionClone>, required: true },
+    externalQueryParam: {},
+    excludeCode: { type: String, required: true },
+  },
+  emits: {},
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const option = props.cloneOption(useConfig => {
+      useConfig.showRows = 10;
+      useConfig.fill = false;
+      useConfig.showRowsMode = 'fixed';
+      useConfig.hideFilterForm = true;
+      if (!useConfig.permit) {useConfig.permit = {};}
+      useConfig.permit.show = {
+        insert: false,
+        update: false,
+        delete: false,
+        other: false,
+      };
+      useConfig.searchAttrs = {
+        ...useConfig.searchAttrs,
+        hideFieldSelector: true,
+        width: '100%',
+      };
+      useConfig.paginationAttrs = {
+        ...useConfig.paginationAttrs,
+        layout: 'sizes,prev,next,jumper',
+      };
+    });
+    option.hooks.onQueryParam.use(() => {
+      return { distinctFields: [props.distinctField], ...props.externalQueryParam as any };
+    });
+
+    return () => (
+      <AutoTable option={option}>
+        <PlcIndex
+          start={(option.pagination.state.page - 1) * option.pagination.state.size}
+          excludeCode={props.excludeCode}
+        />
+        {slots.default()}
+      </AutoTable>
+    );
+  },
+});