plain-design 1.0.0-beta.99 → 3.0.0

package/src/packages/components/AutoTable/setting/useTableOption.setting.senior.filter.tsx

@@ -1,385 +1,388 @@
-import {eAutoTableFilterMode} from "../filter/useTableOption.filter.state";
-import {computed, Fragment, iMouseEvent, reactive, RenderNode, useRefList} from "plain-design-composition";
-import {FilterFormSingle, iFilterFormSingleData} from "../../FilterFormSingle";
-import {eTableOptionSettingView} from "./useTableOption.setting.utils";
-import {Button} from "../../Button";
-import {Checkbox} from "../../Checkbox";
-import {Input} from "../../Input";
-import {Empty} from "../../Empty";
-import {iFilterQueryMeta} from "../../FilterService/utils/filter.service.utils";
-import {$message} from "../../$message";
-import {delay} from "plain-utils/utils/delay";
-import {Icon} from "../../Icon";
-import {doNothing} from "plain-utils/utils/doNothing";
-import {deepcopy} from "plain-utils/object/deepcopy";
-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 {
-      settingSeniorFilter: ReturnType<typeof useTableOptionSettingSeniorFilter>;
-    }
-  }
-}
-
-export const useTableOptionSettingSeniorFilter = AutoModule.createRegistration((
-  {
-    cache,
-    setting,
-    hooks,
-    methods,
-    filterState,
-  }
-) => {
-
-  const { refList, onRefList } = useRefList(FilterFormSingle);
-
-  const filterOptions = filterState.createComputedFilterOptions(eAutoTableFilterMode.filterSenior);
-
-  const utils = {
-    nextId: (() => {
-      const maxCount = computed(() => {
-        const max = edit.state.metas.reduce((prev, item) => {
-          let [_, val] = item.id.split('_');
-          const v = Number(val);
-          return !isNaN(v) && v > prev ? v : prev;
-        }, 0);
-        return Math.max(max, edit.state.metas.length);
-      });
-      return () => `F_${maxCount.value + 1}`;
-    })(),
-    resetOperator: () => {
-      edit.state.expression = edit.defaultExpression.value;
-    },
-    createState: () => {
-      const state: iTableOptionSeniorData = reactive({
-        metas: [],
-        expression: null,
-        isCustomExpression: false,
-      });
-      const defaultExpression = computed(() => state.metas.map(i => i.id).join(` ${DEFAULT_EXPRESSION_JOIN} `));
-      return {
-        state, defaultExpression,
-      };
-    },
-  };
-
-  /**
-   * 查询的时候的数据
-   * @author  韦胜健
-   * @date    2021/7/22 21:05
-   */
-  const query = (() => {
-    const { state, defaultExpression } = utils.createState();
-
-    const apply = async () => {
-      await delay();
-      const dataList = refList.length === 0 ? [] : await Promise.all(refList.map(i => i.getData()));
-      const metas = !isSettingSeniorOpen() ? edit.state.metas : dataList.map((data, index) => ({ data, id: edit.state.metas[index].id }));
-      const invalidIndex = metas.findIndex(i => !i.data || !i.data.filterQueryParam || !i.data.filterQueryParam.queries?.length);
-      if (invalidIndex > -1) {
-        $message.error(i18n.$it('table.pleaseEnterCompleteParamsForCondition').d(`第${invalidIndex + 1}个条件请输入完整参数！`));
-        return;
-      }
-      state.metas = metas;
-      state.expression = edit.state.expression;
-      state.isCustomExpression = edit.state.isCustomExpression;
-      await methods.pageMethods.reload();
-    };
-
-    return {
-      state,
-      defaultExpression,
-      apply,
-    };
-  })();
-
-  /**
-   * 编辑的时候的数据
-   * @author  韦胜健
-   * @date    2021/7/22 21:05
-   */
-  const edit = (() => {
-
-    /**
-     * 状态需要与query同步初始化，因为应用的时候可能filter form single没有初始化，此时应该用edit的状态
-     * 因为 edit.remove 删除的是edit内部的状态
-     * @author  韦胜健
-     * @date    2023.1.15 22:11
-     */
-    const { state, defaultExpression } = {
-      state: reactive(deepcopy(query.state)),
-      defaultExpression: query.defaultExpression,
-    };
-
-    const add = () => {
-      const id = utils.nextId();
-      if (state.metas.length === 0) {
-        state.expression = id;
-      } else {
-        state.expression += ` ${DEFAULT_EXPRESSION_JOIN} ${id}`;
-      }
-      state.metas.push({ id, data: undefined });
-    };
-
-    const remove = (index: number) => {
-      const isMatchDefaultOperator = !!state.expression && state.expression.trim() === defaultExpression.value;
-      state.metas.splice(index, 1);
-      if (isMatchDefaultOperator) {state.expression = defaultExpression.value;}
-    };
-
-    const clear = () => {
-      state.metas = [];
-      state.expression = null;
-      query.apply();
-    };
-
-    return {
-      state,
-      defaultExpression,
-      add,
-      remove,
-      clear,
-    };
-  })();
-
-  cache.registry<iTableOptionSeniorData>({
-    cacheKey: 'filter-state-senior',
-    applyCache: ({ plcList, cacheData }) => {
-      query.state.isCustomExpression = !cacheData ? false : cacheData.isCustomExpression;
-      query.state.expression = !cacheData ? null : cacheData.expression;
-      query.state.metas = !cacheData ? [] : cacheData.metas.map(item => {
-        /*有些字段可能从代码中去掉了，这里将无效的字段对应的缓存筛选条件去除*/
-        if (!item.data?.field) {return null;}
-        const { field } = item.data || {};
-        const plc = plcList.find(i => i.props.searchField === field || i.props.field === field);
-        if (!plc) {return null;}
-        return item;
-      }).filter(Boolean) as iTableOptionSeniorFilterMeta[];
-      /*同步edit与query的状态*/
-      edit.state.metas = deepcopy(query.state.metas);
-      edit.state.expression = query.state.expression;
-      edit.state.isCustomExpression = query.state.isCustomExpression;
-    },
-    getCache: () => {
-      return {
-        expression: query.state.expression,
-        metas: query.state.metas,
-        isCustomExpression: query.state.isCustomExpression,
-      };
-    },
-  });
-
-  const { isOpen: isSettingSeniorOpen } = setting.useTableOptionSettingInner({
-    key: eTableOptionSettingView.seniorFilter,
-    title: i18n.$it('table.seniorFilter').d('高级筛选'),
-    seq: 1,
-    beforeOpen: () => {
-      edit.state.metas = deepcopy(query.state.metas);
-      edit.state.expression = query.state.expression;
-      edit.state.isCustomExpression = query.state.isCustomExpression;
-    },
-    render: () => {
-      refList.splice(0, refList.length);
-      return (
-        <div className="auto-table-setting-senior-filter">
-          <div className="auto-table-setting-senior-filter-button">
-            <div>
-              <Button label={i18n.$it('base.edit.apply').d('应用')} onClick={query.apply} mode="fill" icon="pi-find-replace"/>
-              <Button label={i18n.$it('base.edit.add').d('添加')} onClick={edit.add} icon="pi-plus"/>
-            </div>
-            <Button label={i18n.$it('base.clear').d('清空')} icon="pi-delete" status="error" onClick={edit.clear}/>
-          </div>
-          <div className="auto-table-setting-senior-filter-list">
-            {edit.state.metas.length === 0 ? (
-              <Empty noData label={i18n.$it('table.pleaseAddFilterCondition').d('请添加筛选条件')}/>
-            ) : (
-              edit.state.metas.map((meta, index) => (
-                <div key={meta.id} className="auto-table-setting-senior-filter-list-item">
-                  <FilterFormSingle
-                    ref={onRefList(index)}
-                    filterOptions={filterOptions.value}
-                    initialState={meta.data}
-                    onSearch={query.apply}
-                    width="calc(100% - 40px)"
-                    hideSearchButton
-                    v-slots={{
-                      prepend: () => (<Input readonly modelValue={meta.id} width={60}/>)
-                    }}
-                  />
-                  <Button icon="pi-delete" onClick={() => edit.remove(index)}/>
-                </div>
-              ))
-            )}
-          </div>
-          <div className="auto-table-setting-senior-filter-expression-header">
-            <div className="auto-table-setting-senior-filter-expression-title">{i18n.$it('table.expression').d('表达式')}</div>
-          </div>
-          <Input textarea v-model={edit.state.expression} disabled={!edit.state.isCustomExpression}/>
-          <Checkbox label={i18n.$it('base.custom').d('自定义')} v-model={edit.state.isCustomExpression} onChange={utils.resetOperator}/>
-        </div>
-      );
-    },
-  });
-
-  /**
-   * 获取查询参数时返回当前绑定的参数
-   * @author  韦胜健
-   * @date    2023.1.8 19:09
-   */
-  hooks.onQueryParam.use(async () => {
-    let expression = !query.state.isCustomExpression || !query.state.expression ? query.defaultExpression.value : query.state.expression;
-    /*处理空格*/
-    expression = expression.replace(/\s*(\|\||&&|或者|并且|or|and)\s*/gi, ' $1 ').replace(/\s+/, ' ');
-    /*目标queries数组*/
-    const resultQueries: iFilterQueryMeta[] = [];
-
-    /*id映射senior meta查询参数*/
-    const idToSeniorMeta: Record<string, iTableOptionSeniorFilterMeta & { index: number }> = query.state.metas.reduce((prev, item) => {
-      prev[item.id] = item;
-      return prev;
-    }, {} as any);
-
-    expression = expression.replace(/\w+/g, (input) => {
-      if (ExpressionJoins.indexOf(input) > -1) {return input;}
-      const senior = idToSeniorMeta[input];
-      if (!senior || !senior.data) {return input;}
-      const { queries } = senior.data.filterQueryParam;
-      if (!queries || queries.length === 0) {return input;}
-      if (queries.length === 1) {
-        queries[0].id = input;
-        resultQueries.push(...queries);
-        return input;
-      }
-      const itemQueryIds: string[] = [];
-      queries.forEach((i, idx) => {
-        const itemId = `${input}-${idx + 1}`;
-        itemQueryIds.push(itemId);
-        resultQueries.push({
-          ...i,
-          id: itemId,
-        });
-      });
-      return `(${itemQueryIds.join(' 并且 ')})`;
-    });
-
-    // console.log(resultQueries.length === 0 ? null : { queries: resultQueries, expression: expression });
-
-    return resultQueries.length === 0 ? null : { queries: resultQueries, expression: expression };
-  });
-
-  /*只显示激活的筛选条件*/
-  filterState.useState<any>({
-    seq: Infinity,
-    key: 'senior-filter',
-    title: i18n.$it('table.seniorQuery').d('高级查询'),
-    applyCache: () => null,
-    getCache: () => null,
-    getDisplay: () => () => (
-      <Button onClick={() => setting.openSetting(eTableOptionSettingView.seniorFilter)}>
-        <span>{i18n.$it('table.configSeniorFilter').d('配置高级筛选')}</span>
-        <Icon icon="pi-arrow-right"/>
-      </Button>
-    ),
-    clear: () => null,
-    getActiveFilterCount: () => query.state.metas.length
-  });
-
-  const tips = computed((): TableOptionSpace.iTableOptionTipMeta[] => {
-    const list: TableOptionSpace.iTableOptionTipMeta[] = [];
-    const { metas, expression, isCustomExpression } = query.state;
-    if (!metas.length || !filterOptions.value) {return list;}
-    if (metas.every(i => !i.data?.filterQueryParam.queries?.length)) {return list;}
-    if (!isCustomExpression) {
-      metas.forEach((meta, index) => {
-        if (!meta.data) {return;}
-        const { field, filterHandler, formData } = meta.data;
-        let filterOption = filterOptions.value!.find(i => i.field === field);
-        if (!filterOption) {return;}
-        filterOption = { ...filterOption, filterHandler };
-        const tip = TableOptionUtils.createTableOptionTipMeta({
-          formData,
-          filterOption,
-          onClear: async () => {
-            edit.remove(index);
-            await delay();
-            await query.apply();
-          },
-          onClick: () => {setting.openSetting(eTableOptionSettingView.seniorFilter);},
-        });
-        !!tip && list.push(tip);
-      });
-    } else {
-      if (!expression || !filterOptions.value.length) {return list;}
-      /*id映射senior meta查询参数*/
-      const idToSeniorMeta: Record<string, iTableOptionSeniorFilterMeta & { index: number }> = query.state.metas.reduce((prev, item) => {
-        prev[item.id] = item;
-        return prev;
-      }, {} as any);
-      const renderList: (() => RenderNode)[] = [];
-      expression.split(' ').forEach(work => {
-        if (!work.trim().length) {return; }
-        if (ExpressionJoins.indexOf(work) > -1) {
-          renderList.push(() => work);
-          return;
-        }
-        const senior = idToSeniorMeta[work];
-        if (!senior || !senior.data) {
-          renderList.push(() => work);
-          return;
-        }
-        const { filterHandler, field, formData } = senior.data;
-        let filterOption = filterOptions.value!.find(i => i.field === field);
-        if (!filterOption) {
-          renderList.push(() => work);
-          return;
-        }
-        filterOption = { ...filterOption, filterHandler };
-        const tip = TableOptionUtils.createTableOptionTipMeta({
-          filterOption,
-          formData,
-          onClick: doNothing,
-          onClear: doNothing,
-        });
-        if (!tip) {
-          renderList.push(() => work);
-          return;
-        }
-        renderList.push(tip.display);
-      });
-      list.push({
-        display: () => renderList.map((i, index) => <Fragment key={index}>{i()}</Fragment>),
-        onClear: async (e: iMouseEvent) => {
-          e.stopPropagation();
-          Object.assign(edit.state, utils.createState().state);
-          await query.apply();
-        },
-        onClick: () => {setting.openSetting(eTableOptionSettingView.seniorFilter);},
-      });
-    }
-    return list;
-  });
-
-  hooks.onTips.use(list => {
-    !!tips.value.length && list.push(...tips.value);
-  });
-});
-
-export type iTableOptionSeniorFilterMeta = {
-  id: string,
-  data: undefined | iFilterFormSingleData,
-}
-
-export interface iTableOptionSeniorData {
-  metas: iTableOptionSeniorFilterMeta[],
-  expression: null | string,
-  isCustomExpression: boolean,
-}
-
-const ExpressionJoins = ['&&', '||', 'and', 'or', '并且', '或者'];
-
-const DEFAULT_EXPRESSION_JOIN = '或者';
+import {eAutoTableFilterMode} from "../filter/useTableOption.filter.state";
+import {computed, Fragment, iMouseEvent, reactive, RenderNode, useRefList} from "@peryl/react-compose";
+import {FilterFormSingle, iFilterFormSingleData} from "../../FilterFormSingle";
+import {eTableOptionSettingView} from "./useTableOption.setting.utils";
+import {Button} from "../../Button";
+import {Checkbox} from "../../Checkbox";
+import {Input} from "../../Input";
+import {Empty} from "../../Empty";
+import {iFilterQueryMeta} from "../../FilterService/utils/filter.service.utils";
+import {$message} from "../../$message";
+import {delay} from "@peryl/utils/delay";
+import {Icon} from "../../Icon";
+import {doNothing} from "@peryl/utils/doNothing";
+import {deepcopy} from "@peryl/utils/deepcopy";
+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 {
+      settingSeniorFilter: ReturnType<typeof useTableOptionSettingSeniorFilter>;
+    }
+  }
+}
+
+export const useTableOptionSettingSeniorFilter = AutoModule.createRegistration((
+  {
+    cache,
+    setting,
+    hooks,
+    methods,
+    filterState,
+  }
+) => {
+
+  const { refList, onRefList } = useRefList(FilterFormSingle);
+
+  const filterOptions = filterState.createComputedFilterOptions(eAutoTableFilterMode.filterSenior);
+
+  const utils = {
+    /*按照F_1, F_2, F_3...的规则生成ID*/
+    nextId: (() => {
+      /*这里maxCount使用computed，导致出现异常*/
+      /*第二次打开高级筛选配置页面的时候，点击添加触发这里会导致内容渲染异常，这里把computed去掉*/
+      const maxCount = () => {
+        const max = edit.state.metas.reduce((prev, item) => {
+          let [_, val] = item.id.split('_');
+          const v = Number(val);
+          return !isNaN(v) && v > prev ? v : prev;
+        }, 0);
+        return Math.max(max, edit.state.metas.length);
+      };
+      return () => `F_${maxCount() + 1}`;
+    })(),
+    /*重置查询表达式*/
+    resetOperator: () => {
+      edit.state.expression = edit.getDefaultExpression();
+    },
+    /*创建初始状态变量*/
+    createState: () => {
+      const state: iTableOptionSeniorData = ({
+        /*iTableOptionSeniorFilterMeta*/
+        metas: [],
+        /*查询表达式*/
+        expression: null,
+        /*当前是否开启自定义表达式*/
+        isCustomExpression: true,
+      });
+      /*默认的查询表达式*/
+      const getDefaultExpression = (): string => state.metas.map(i => i.id).join(` ${DEFAULT_EXPRESSION_JOIN} `);
+      return {
+        state, getDefaultExpression,
+      };
+    },
+  };
+
+  /**
+   * 查询的时候的数据
+   * @author  韦胜健
+   * @date    2021/7/22 21:05
+   */
+  const query = (() => {
+    const { state: _state, getDefaultExpression } = utils.createState();
+    const state = reactive(_state);
+
+    const apply = async (autoReload: boolean) => {
+      await delay();
+      const dataList = refList.length === 0 ? [] : await Promise.all(refList.map(i => i.getData()));
+      const metas = !isSettingSeniorOpen() ? edit.state.metas : dataList.map((data, index) => ({ data, id: edit.state.metas[index].id }));
+      /*检查每一个条件是否输入正确*/
+      const invalidIndex = metas.findIndex(i => !i.data || !i.data.filterQueryParam || !i.data.filterQueryParam.queries?.length);
+      if (invalidIndex > -1) {
+        $message.error(i18n.$it('table.pleaseEnterCompleteParamsForCondition', { invalidIndex: invalidIndex + 1 }).d(`第${invalidIndex + 1}个条件请输入完整参数！`));
+        return;
+      }
+      state.metas = metas;
+      state.expression = edit.state.expression;
+      state.isCustomExpression = edit.state.isCustomExpression;
+
+      if (autoReload) {await methods.pageMethods.reload();}
+    };
+
+    return {
+      state,
+      getDefaultExpression,
+      apply,
+    };
+  })();
+
+  /**
+   * 编辑的时候的数据
+   * @author  韦胜健
+   * @date    2021/7/22 21:05
+   */
+  const edit = (() => {
+
+    /**
+     * 状态需要与query同步初始化，因为应用的时候可能filter form single没有初始化，此时应该用edit的状态
+     * 因为 edit.remove 删除的是edit内部的状态
+     * @author  韦胜健
+     * @date    2023.1.15 22:11
+     */
+    const { state: _state, getDefaultExpression } = utils.createState();
+    const state = reactive(_state);
+
+    const add = () => {
+      const id = utils.nextId();
+      if (state.metas.length === 0) {
+        state.expression = id;
+      } else {
+        state.expression += ` ${DEFAULT_EXPRESSION_JOIN} ${id}`;
+      }
+      state.metas.push({ id, data: undefined });
+    };
+
+    const remove = (index: number) => {
+      const isMatchDefaultOperator = !!state.expression && state.expression.trim() === getDefaultExpression();
+      state.metas.splice(index, 1);
+      if (isMatchDefaultOperator) {state.expression = getDefaultExpression();}
+    };
+
+    const clear = async (autoReload: boolean) => {
+      Object.assign(state, utils.createState().state);
+      await query.apply(autoReload);
+    };
+
+    return {
+      state,
+      getDefaultExpression,
+
+      add,
+      remove,
+      clear,
+    };
+  })();
+
+  cache.registry<iTableOptionSeniorData>({
+    cacheKey: 'filter-state-senior',
+    applyCache: ({ plcList, cacheData }) => {
+      query.state.isCustomExpression = !cacheData ? false : cacheData.isCustomExpression;
+      query.state.expression = !cacheData ? null : cacheData.expression;
+      query.state.metas = !cacheData ? [] : cacheData.metas.map(item => {
+        /*有些字段可能从代码中去掉了，这里将无效的字段对应的缓存筛选条件去除*/
+        if (!item.data?.field) {return null;}
+        const { field } = item.data || {};
+        const plc = plcList.find(i => i.props.searchField === field || i.props.field === field);
+        if (!plc) {return null;}
+        return item;
+      }).filter(Boolean) as iTableOptionSeniorFilterMeta[];
+      /*同步edit与query的状态*/
+      edit.state.metas = deepcopy(query.state.metas);
+      edit.state.expression = query.state.expression;
+      edit.state.isCustomExpression = query.state.isCustomExpression;
+    },
+    getCache: () => {
+      return {
+        expression: query.state.expression,
+        metas: query.state.metas,
+        isCustomExpression: query.state.isCustomExpression,
+      };
+    },
+  });
+
+  const { isOpen: isSettingSeniorOpen } = setting.useTableOptionSettingInner({
+    key: eTableOptionSettingView.seniorFilter,
+    title: i18n.$it('table.seniorFilter').d('高级筛选'),
+    seq: 1,
+    beforeOpen: () => {
+      edit.state.metas = deepcopy(query.state.metas);
+      edit.state.expression = query.state.expression;
+      edit.state.isCustomExpression = query.state.isCustomExpression;
+    },
+    render: () => {
+      refList.splice(0, refList.length);
+
+      const apply = () => query.apply(true);
+      const clear = () => edit.clear(true);
+
+      return (
+        <div className="auto-table-setting-senior-filter">
+          <div className="auto-table-setting-senior-filter-button">
+            <div>
+              <Button label={i18n.$it('base.edit.apply').d('应用')} onClick={apply} mode="fill" icon="pi-find-replace"/>
+              <Button label={i18n.$it('base.edit.add').d('添加')} onClick={edit.add} icon="pi-plus"/>
+            </div>
+            <Button label={i18n.$it('base.clear').d('清空')} icon="pi-delete" status="error" onClick={clear}/>
+          </div>
+          <div className="auto-table-setting-senior-filter-list">
+            {edit.state.metas.length === 0 ? (
+              <Empty noData label={i18n.$it('table.pleaseAddFilterCondition').d('请添加筛选条件')}/>
+            ) : (
+              edit.state.metas.map((meta, index) => (
+                <div key={meta.id} className="auto-table-setting-senior-filter-list-item">
+                  <FilterFormSingle
+                    ref={onRefList(index)}
+                    filterOptions={filterOptions.value}
+                    initialState={meta.data}
+                    onSearch={apply}
+                    width="calc(100% - 40px)"
+                    hideSearchButton
+                    v-slots={{
+                      prepend: () => (<Input readonly modelValue={meta.id} width={60}/>)
+                    }}
+                  />
+                  <Button icon="pi-delete" onClick={() => edit.remove(index)}/>
+                </div>
+              ))
+            )}
+          </div>
+          <div className="auto-table-setting-senior-filter-expression-header">
+            <div className="auto-table-setting-senior-filter-expression-title">{i18n.$it('table.expression').d('表达式')}</div>
+          </div>
+          <Input textarea v-model={edit.state.expression} disabled={!edit.state.isCustomExpression}/>
+          <Checkbox label={i18n.$it('base.custom').d('自定义')} v-model={edit.state.isCustomExpression} onChange={utils.resetOperator}/>
+        </div>
+      );
+    },
+  });
+
+  /**
+   * 获取查询参数时返回当前绑定的参数
+   * @author  韦胜健
+   * @date    2023.1.8 19:09
+   */
+  hooks.onQueryParam.use(async () => {
+    let expression = !query.state.isCustomExpression || !query.state.expression ? query.getDefaultExpression() : query.state.expression;
+    /*处理空格*/
+    expression = expression.replace(/\s*(\|\||&&|或者|并且|or|and)\s*/gi, ' $1 ').replace(/\s+/, ' ');
+    /*目标queries数组*/
+    const resultQueries: iFilterQueryMeta[] = [];
+
+    /*id映射senior meta查询参数*/
+    const idToSeniorMeta: Record<string, iTableOptionSeniorFilterMeta & { index: number }> = query.state.metas.reduce((prev, item) => {
+      prev[item.id] = item;
+      return prev;
+    }, {} as any);
+
+    expression = expression.replace(/\w+/g, (input) => {
+      if (ExpressionJoins.indexOf(input) > -1) {return input;}
+      const senior = idToSeniorMeta[input];
+      if (!senior || !senior.data) {return input;}
+      const { queries } = senior.data.filterQueryParam;
+      if (!queries || queries.length === 0) {return input;}
+      if (queries.length === 1) {
+        queries[0].id = input;
+        resultQueries.push(...queries);
+        return input;
+      }
+      const itemQueryIds: string[] = [];
+      queries.forEach((i, idx) => {
+        const itemId = `${input}-${idx + 1}`;
+        itemQueryIds.push(itemId);
+        resultQueries.push({
+          ...i,
+          id: itemId,
+        });
+      });
+      return `(${itemQueryIds.join(' 并且 ')})`;
+    });
+
+    // console.log(resultQueries.length === 0 ? null : { queries: resultQueries, expression: expression });
+
+    return resultQueries.length === 0 ? null : { queries: resultQueries, expression: expression };
+  });
+
+  /*只显示激活的筛选条件*/
+  filterState.useState<any>({
+    seq: Infinity,
+    key: 'senior-filter',
+    title: i18n.$it('table.seniorQuery').d('高级查询'),
+    applyCache: () => null,
+    getCache: () => null,
+    getDisplay: () => () => (
+      <Button onClick={() => setting.openSetting(eTableOptionSettingView.seniorFilter)}>
+        <span>{i18n.$it('table.configSeniorFilter').d('配置高级筛选')}</span>
+        <Icon icon="pi-arrow-right"/>
+      </Button>
+    ),
+    clear: () => edit.clear(false),
+    getActiveFilterCount: () => query.state.metas.length
+  });
+
+  const tips = computed((): TableOptionSpace.iTableOptionTipMeta[] => {
+    const list: TableOptionSpace.iTableOptionTipMeta[] = [];
+    const { metas } = query.state;
+    if (!metas.length || !filterOptions.value) {return list;}
+    if (metas.every(i => !i.data?.filterQueryParam.queries?.length)) {return list;}
+
+    let expression = !query.state.isCustomExpression || !query.state.expression ? query.getDefaultExpression() : query.state.expression;
+    /*处理空格*/
+    expression = expression.replace(/\s*(\|\||&&|或者|并且|or|and)\s*/gi, ' $1 ').replace(/\s+/, ' ');
+
+    if (!expression || !filterOptions.value.length) {return list;}
+    /*id映射senior meta查询参数*/
+    const idToSeniorMeta: Record<string, iTableOptionSeniorFilterMeta & { index: number }> = query.state.metas.reduce((prev, item) => {
+      prev[item.id] = item;
+      return prev;
+    }, {} as any);
+    const renderList: (() => RenderNode)[] = [];
+    expression.split(' ').forEach(work => {
+      if (!work.trim().length) {return; }
+      if (ExpressionJoins.indexOf(work) > -1) {
+        renderList.push(() => ` ${work} `);
+        return;
+      }
+      const senior = idToSeniorMeta[work];
+      if (!senior || !senior.data) {
+        renderList.push(() => work);
+        return;
+      }
+      const { filterHandler, field, formData } = senior.data;
+      let filterOption = filterOptions.value!.find(i => i.field === field);
+      if (!filterOption) {
+        renderList.push(() => work);
+        return;
+      }
+      filterOption = { ...filterOption, filterHandler };
+      const tip = TableOptionUtils.createTableOptionTipMeta({
+        filterOption,
+        formData,
+        onClick: doNothing,
+        onClear: doNothing,
+      });
+      if (!tip) {
+        renderList.push(() => work);
+        return;
+      }
+      renderList.push(tip.display);
+    });
+    list.push({
+      display: () => renderList.map((i, index) => <Fragment key={index}>{i()}</Fragment>),
+      onClear: async (e: iMouseEvent) => {
+        e.stopPropagation();
+        await edit.clear(true);
+      },
+      onClick: () => {setting.openSetting(eTableOptionSettingView.seniorFilter);},
+    });
+
+    return list;
+  });
+
+  hooks.onTips.use(list => {
+    !!tips.value.length && list.push(...tips.value);
+  });
+
+  return {
+    query,
+    edit,
+  };
+});
+
+export type iTableOptionSeniorFilterMeta = {
+  id: string,
+  data: undefined | iFilterFormSingleData,
+}
+
+export interface iTableOptionSeniorData {
+  metas: iTableOptionSeniorFilterMeta[],
+  expression: null | string,
+  isCustomExpression: boolean,
+}
+
+const ExpressionJoins = ['&&', '||', 'and', 'or', '并且', '或者'];
+
+const DEFAULT_EXPRESSION_JOIN = '或者';