## 1、搜索配置组件（FieldSearch）

### 1.1 参数说明

| 参数 | 类型 | 是否必填 | 说明 |  |
| --- | --- | --- | --- | --- |
| dataset | DataSet | 是 | 数据源 |  |
| configType | 'formView'\|'ebDesigner' | 是 | formView | ebDesigner |
| configParams | ConfigParams | 否 |  |  |
| data | SearchConfigDataType | 是 | 组件内部数据默认值和配置等 |  |
| onConfirm | (                                 datas:  AnyObj,             type: string,                   callBack?: Function, otherConfigs?:{ needCondition:string, noneOfShow:string, searchRelationEnable:string }) =\> void | 是 | 确定回调函数：datas（搜索配置数组）、otherConfigs（搜索其余开关配置等） |  |
| customBtnRender | (showModalFC: any) =\> React.ReactNode | 否 | 外部自定义点击部分渲染 |  |
| localeProps | obj | 否 | 多语言参数 |  |
| fieldFilter | (item: any) =\> boolean | 否 | 过滤字段 |  |
| ebBusinessId | string | 是 | eb鉴权，没有传10000000000即可 |  |
| enableSqlEncry | boolean | 否 | 是否需要开启sql 加密， |  |
| comServicePath | string | 否 | 二级路径 |  |
| comId | string | 否 | 页面组件id |  |
| buttonType | "primary" \| "default" \| "success" \| "warning" \| "danger" \| "link" | 否 |  |  |
| needNewDateOpts | boolean | 否 | 默认false ，是否需要日期选项 |  |
| needCommonFilterGroups | boolean | 否 | 是否需要平铺分组 |  |
| needRename | boolean | 否 | 是否需要重定义显示名称 |  |
| needDateMenu | boolean | 否 | 是否需要日期菜单平铺 |  |
| needNumCustomOpt | boolean | 否 | 是否需要日期自定义选项 |  |
| needSearchRelationEnable | boolean | 否 | 是否需要【启用条件关系】 |  |
| needStyleSetting | boolean | 否 | 是否需要【样式设置】 |  |
| customFormatStyleSetRows | (rows: any\[\]) =\> any\[\]; | 否 | 自定义过滤样式设置：【隐藏所有条件/任一条件切换】、【无下拉字段时不显示】 |  |
| needManualFilter | boolean | 否 | 是否需要手动触发筛选 |  |
| needDefaultConditionSet | boolean | 否 | 是否需要默认条件设置 |  |
| needDateTimeSwitch | boolean | 否 | 是否需要开启时间开关 |  |
| needGroupEmployeeFilter | boolean | 否 | 是否需要分类-人员-筛选 |  |
| needGroupCountNumSet | boolean | 否 | 是否需要分类-选择框/eb浏览框-【显示统计数量】的相关配置 |  |
| needRequired | boolean | 否 | 是否需要【条件必填】 | false |

### 1.2 数据结构说明

```
// 平铺分组数据结构
export type tileGroupType = {
  id: string;
  content: string | Object;
  order: number;
  canEdit?: boolean;
  canDelete?: boolean;
};
//搜索类型
export enum SearchType {
  CommonSearch = 'commonFilters', // 常用搜索 
  QuickSearch = 'quickFilters', // 快捷搜索
  GrouprSearch = 'groupFilters' // 分类搜索
}
//常用搜索选中类型
export enum ShowType {
  Advance = '0',
  Filter = '1',
}
// 常用搜索数据结构
export type CommonFilterData = {
  id: string;
  showName: string;
  fieldId: string;
  fieldName: string;
  fieldType: string;
  componentKey: EtComponentKey;
  isQuick: '0' | '1'; // 平铺、更多下拉框
  required: '0' | '1'; // 必填
  objId: string;
  tileOptionList: any[]; // 老的选项平铺
  configNameJson: string; // 显示名称
  groupJson: string; // 平铺分组
  listFilterDefaultSets: {
    optionEnable: '0' | '1'; // 日期、数值开启选项
    defaultType: '0' | '1' | '2'; // 默认值类型
    startValue: string; // 默认值
    startValueSpan: string;
    endValue: string;
    endValueSpan: string;
    listFilterSets: any[]; // 日期、数值开启选项之后的选项options
    isOptionTile: '0' | '1'; // 选择框类tag是否平铺展示
    multiSelect: boolean | '0' | '1';
    listGroupSets: any[];
    isDateMenu: '0' | '1'; // 日期：开启日期菜单
    dateMenuGroup?: any[]; // 日期菜单选项
    isCurrentMax: '0' | '1'; // 日期：开启日期菜单之后当前月份最大
    conditionTypeValue: string; // 条件默认值
    enableTime: 0 | 1; // 日期：年月日时分开启时分属性
    // 以下属性都是接口所返的字段相关属性，基本涵盖（如果不全，参考api/ebuilder/common/ds/fields入参为eb数据源的模式）
    fieldInfo: {
      // eb表单
      fieldId: string;
      fieldName: string;
      fieldType?: string;
      objId?: string;
      componentKey: EtComponentKey;
      // 数据源
      id: string;
      name: string;
      text: string;
      usage: string;
      disAllowedUsage?: any[];
      compType?: EtComponentKey;
      // 公共属性
      type: string;
      format: string;
      config: string; // json字符串，日期等字段特殊的配置：format等
      otherProperties: string; // json字符串，eb字段的字段特殊配置，作用类似于config
      conditionType: any[]; // 等于、不等于等多条件
      conditionTypeValue: string; // 默认选中的多条件值
      disableGroupSearch?: boolean;
      multiSelect?: boolean | 'false' | 'true'; // 数据源是字符串
      // 浏览框相关属性
      browserParams?: any;
      browserType?: string;
      module?: string;
      formInfo?: any; // eb浏览框相关属性
      // 选择框选项
      options?: any[];
    };
  };
  fieldConfig: any; // 级联可能特殊的属性
};
// 分类搜索数据结构
export type GroupFilterData = {
  id: string;
  fieldId: string;
  name: string;
  fieldName: string;
  showName: string;
  fieldShowName: string;
  fieldType: string;
  componentKey: EtComponentKey;
  compType: EtComponentKey;
  objId: string;
  text: string;
  type: string;
  // 显示位置
  showPosition: '0' | '1';
  // 显示方式
  tabStyle: any;
  listFilterDefaultSets: {
    enableFilter: 0 | 1; // 人员是否显示筛选
    enableShowCountNum: 0 | 1; // 是否展示统计
    enableShowCountNumLimit: 0 | 1; // 数据超过99条显示为99+
    showCountNumType: 'withConditionUpdate' | 'notUpdate'; // 统计是否跟随搜索
    enableCustomFilter: 0 | 1; // 自定义筛选维度
    customFilterOptions: any[];
    tileOptionAllConfig: any; // 选项全部配置
    tileOptionNoGroupConfig: any; // 选项未分组配置
    listGroupSets: any[];
    multiSelect: boolean | '0' | '1';
    // 以下属性都是接口所返的字段相关属性
    fieldInfo: {
      // eb表单
      fieldId: string;
      fieldName: string;
      fieldType?: string;
      objId?: string;
      componentKey: EtComponentKey;
      // 数据源
      id: string;
      name: string;
      text: string;
      usage: string;
      disAllowedUsage?: any[];
      compType?: EtComponentKey;
      // 公共属性
      type: string;
      format: string;
      config: string;
      otherProperties: string;
      conditionType: any[];
      conditionTypeValue: string;
      disableGroupSearch?: boolean;
      multiSelect?: boolean | 'false' | 'true'; // 数据源是字符串
      // 浏览框相关属性
      browserParams?: any;
      browserType?: string;
      module?: string;
      formInfo?: any; // eb浏览框相关属性
      // 选择框选项
      options?: any[];
    };
  };
};

export interface SearchConfigDataType {
  quickFilters: Array<any>;
  groupFilters: Array<GroupFilterData>;
  commonFilters: Array<CommonFilterData>;
  commonSearchType: ShowType;
  hideCommonSearchType?: ShowType[]; // 常用搜索隐藏的类型
  commonFilterGroups: tileGroupType[];// 平铺分组
  showMenu: SearchType[]; // 左侧展示的菜单类别
  filterHidePosition?: boolean;
  groupHideTopPosition?: boolean;
  needId?: boolean; // 是否需要内部生成id，视图类需要
  isVForm?: boolean; /** 新的虚拟表单，数据源本源 */
  vFormDataset?: DataSet;
  needCondition?: string; // 【隐藏所有条件/任一条件切换】0或1
  noneOfShow?: string; // 【无下拉字段时不显示】0或1
  searchRelationEnable?: string; // 【启用条件关系】0或1
  fixedCol?: '0' | '1'; // 固定列数
  fixedColCount?: number; // 选择列数
  manualFilter?: '0' | '1'; // 手动触发筛选
}
export type ConfigParams = {
  RIU: boolean; // 是否走远程接口
  needDetail: boolean; // 是否需要明细
  EffectType?: string;
};
```

### 1.3 Demo

```
 <CorsComponent
        weId={`${this.props.weId || ''}_9lxdvj`}
        app="@weapp/ebdform"
        compName="FieldSearch"
        module={module} // 屏蔽明细表用，内部判断，可以不填
        dataset={dataset}
        configType="formView" // 配置类型，使用的场景，默认式表单 ebDesigner
        onConfirm={this.onConfirm} // 确定回调，两个参数
        data={{
          commonFilters: value?.commonFilters || [],
          quickFilters: value?.quickFilters || [],
          groupFilters: value?.groupFilters || [],
          showMenu: ['commonFilters', 'quickFilters', 'groupFilters'], // 左侧展示的菜单类别，这里不需要分类搜索
          hideCommonSearchType: [], // 常用搜索隐藏的类型，这里隐藏高级搜索  ['0']  01
          commonSearchType: '1', // 常用搜索的类型，这里默认选中筛选0 1
          filterHidePosition: false, // 常用搜索类型，筛选隐藏显示位置的配置，默认仅有下拉
          needId: true,//是否需要内部生成id
        }}
        customBtnRender={externalElement} // 外部定义点击按钮
        needNewDateOpts
      />
      
externalElement=(showModalFC:any)=>{
	return <Button onClick={showModalFC}>点击</Button>
}
```

## 2、搜索配置-字段组件

### 2.1 常用搜索字段组件

1. 参数说明
2. demo

### 2.2 分类搜索以及小分类字段组件

1. 参数说明
  
  ```javascript
  interface GroupItemSettingProps {
    onCancel: () => void;
    onSave: (data: any) => void;
    data: {
      // 属性有点乱，具体的去扒一下表格筛选
      componentKey:'GroupCustom' | EtComponentKey;
      enableFilter:1|0;
      fieldInfo:AnyObj;
      isOptionTile:boolean;
      listGroupSets:AnyObj[];
      multiSelect:boolean;
      required:1|0;
      tabStyle:string;
      // 选择框类才有，小分类没有
      tileOptionAllConfig:AnyObj;
      tileOptionNoGroupConfig:AnyObj;
    };
    isVForm?: boolean;//是否是虚拟表
    dataset: DataSet;
    needRequired?: boolean;
    type?: 'formView'|'ebDesigner'; // 外部eb页面调用，加个类型区分
    needTile?: boolean; // 是否需要选项平铺
    searchConfigData?: {
      // 虚拟表相关判断，条件编辑器优先vFormDataset其次dataset
      isVForm?:boolean;
      vFormDataset?:AnyObj
    };
    localeProps?: AnyObj;
    conditionDlgProps?: {
      enableSqlEncry?: boolean; // ：是否需要开启sql 加密，
      comServicePath?: string; // 二级路径 、
      comId?: string; // ： 组件id
    };
    // 是否需要分类-选择框/eb浏览框-【显示统计数量】的相关配置
    needGroupCountNumSet?: boolean;
    // 分类搜索选择支持图标
    needGroupOptionIcon?: boolean;
    onRef?: (self: any) => void;
  }
  ```
2. demo

```
<CorsComponent
                    app="@weapp/ebdform"
                    compName="GroupFieldFilterItemSet"
                    data={{
                      isOptionTile: data.isOptionTile,
                      enableFilter: 0,
                      ...listFilterDefaultSets,
                      fieldInfo: {
                        componentKey: data.componentKey,
                        ...(listFilterDefaultSets.fieldInfo || {}),
                      },
                    }}
                    dataset={dataset}
                    onCancel={this.onCancel}
                    onSave={this.onSave}
                    type={type}
                    needRequired={false}
                    needTile={needTile}
                    searchConfigData={searchConfigData}
                    localeProps={localeProps}
                    conditionDlgProps={this.props.conditionDlgProps}
                    needGroupCountNumSet={false}
                    // 目前仅分类搜索&页面需要
                    needGroupOptionIcon={false}
                  />
```

## 3、搜索运行组件--筛选（FilterSearchCom）

### 3.1 参数说明

| 参数 | 类型 | 是否必填 | 说明 | 默认值 |
| --- | --- | --- | --- | --- |
| viewId | string | 否 | 外部接入不需要 |  |
| type | string | 否 | 外部接入不需要 |  |
| outerInfo | OuterInfoProps | 是 | 外部数据 |  |
| getInstance | (store: FilterSearchStore) =\> void | 是 | 获取内部store示例 |  |
| callBack | (bool: boolean) =\> void | 否 | 挂载回调 |  |
| onSearch | (data: any, type: 'and' \| 'or') =\> void | 是 | 搜索事件 |  |
| clientType | 'PC' \| "MOBILE" | 否 | 终端类型 |  |
| needGroup | boolean | 否 | 是否需要分组，true则groupCom必填 |  |
| groupCom | React.ReactNode | 否 |  |  |
| isShowLabel | boolean | 否 | 是否展示label |  |
| needCondition | boolean\|’1‘\|‘0’ | 否 | 是否需要满足任意、所有条件 | true |
| hideFilterContent | boolean | 否 | 隐藏外放字段以及trigger按钮 | false |
| hideTrigger | boolean | 否 | 隐藏trigger按钮 | false |
| coverContentStyle | CSSProperties | 否 | 筛选框内部样式 |  |
| bindTriggerContainer | boolean | 否 | 绑定trigger定位 | false |
| customIconRender | (visible: boolean) =\> React.ReactNode | 否 | 是否自定义图标 |  |
| needOtherCustom | boolean | 否 | 是否需要其他条件 | false |
| wrapperRef | any | 否 | trigger按钮最外面容器 |  |
| conditionId | string | 否 | 类似高级搜索的condition |  |
| saveAsPublic | boolean | 否 | 是否存为公有 | false |
| module | string | 否 | 复写常用筛选接口，直接引用的高级搜索的接口 |  |
| onBeforeSnapSave | (datas: AnyObj) =\> AnyObj | 否 | before保存常用筛选 |  |
| popupVisible | boolean | 否 | 筛选popover相关 |  |
| popupPlacement | string | 否 | 筛选popover相关 |  |
| forceRender | boolean | 否 | 筛选popover相关 |  |
| noneOfShow | ‘1’\|\|‘0’ | 否 | 无下拉字段时【筛选】不显示&重置外放 | '0' |
| needTopDisplay | boolean | 否 | 是否需要独立展示区域 | false |
| onlyTopDisplay | boolean | 否 | 是否只显示独立展示区域 | false |
| searchRelationEnable | '1' \| '0' | 否 | 是否启用条件关系 | '1' |
| hideFilterCommon | boolean | 否 | 隐藏自定义常用筛选 | false |
| ebBusinessId | string | 否 | 应用独立部署需要ebBusinessId |  |
| fixedCol | ''1' \| '0' | 否 | 是否固定列数 | '0' |
| fixedColCount | number | 否 | 固定列数 | 3 |
| manualFilter | '1' \| '0' | 否 | 手动触发筛选 | '0' |
| showSearchLabel | ‘1’ \|\| ‘0’ | 否 | 显示字段名称 | ‘1’ |
| filterRequiredDlgKey | string | 否 | 条件必填校验弹窗的唯一key |  |
| enableBrowserIncludeSub | boolean | 否 | 分部、部门字段是否包含下级 | false |
| isSimpleTrigger | boolean | 否 | 筛选支持trigger简易模式（ui有部分调整） | false |
| needFieldIcon | boolean | 否 | 筛选简易模式字段名称支持图标 | false |
| needNestedSelect | boolean | 否 | 是否需要父子选择框 |  |
| customTriggerProps | AnyObj | 否 | trigger复写对象 |  |
| customInitFilterData | (datas: FilterData\[\]) =\> FilterData\[\] | 否 | 复写非其他条件筛选字段 |  |
| customInitAllFilterData | (datas: FilterData\[\]) =\> FilterData\[\] | 否 | 复写筛选字段+其他条件字段 |  |

### 3.2 FilterSearchStore常用API

| 参数 | 类型 | 说明 |
| --- | --- | --- |
| getDatas | () =\> any | 获取字段所有值 |
| onChange | (data: { \[key: string\]: any }) =\> void | 更改字段值 |
| changeFieldProps | (fieldName: string, prop: any) =\> void | 更改单个字段属性 |
| setDfaultValues | (data: { \[key: string\]: any }) =\> void | 设置默认值 |
| onCustomDatasChange | (datas: CustomFilterData\[\]) =\> void | 更改其他条件 |

### 3.3 数据结构说明

```
export interface OuterInfoProps {
  filterData: FilterData[];
}

export interface FilterData {
  componentKey: EtComponentKey; // et字段类型
  config: string; // et的字段额外配置，json字符串：eg，日期的format等
  fieldId: string; // 字段id、系统字段id
  fieldName: string; // 搜索key
  filterId: string; // 唯一标识,仅用于react key
  isQuick: string; // 外放还是筛选框内
  number: number; // Number 0 NumberComponent 3  Money 16  ，0作为文本字段
  showName: string; // 展示名称
  configNameJson?: string;// 重命名显示名称,json字符串
  type: EtComponentKey | 'Placeholder'; // 字段类型，但是部分字段eb和et不一致做的兼容，主要还是以上面的componentKey为准value?: any; // 字段值
  conditionType?: Array<{ id: string; content: string }>; // 条件options 包含不包含，等于不等于
  conditionReadOnly?: boolean; // 条件options 是否只读
  conValue?: string; // 条件值
  conditionTypeValue?: string; // 默认条件值
  custom?: boolean; // 字段是否可作为默认展示字段
  disableCustomConditions?: boolean; // 字段是否可作为其他条件字段
  required?: 1|0; //是否必填
  groupJson?:string;//平铺分组json
  optionEnable?:'0' | '1'; // 日期、数值开启选项
  //浏览框相关属性
  objId?: string;  // 表单id，eg：eb浏览框这种需要
  browserParams?: any;
  browserType?: string;
  module?: string;
  formInfo?: any; // eb浏览框相关属性
  // 字段额外配置信息
  otherParams?: {[_:string]:any}; 
  // 选项型字段相关属性
  isOptionTile?:boolean; // 针对选项等，是否平埔
  options?:any[];//选项配置，内部的archive属性决定封存状态
  multiSelect?:boolean; // 针对选项等，是否多选
  filterSets?: any[] // 日期、数值相关两种字段的开启选项配置
  tileOptionList?: string[]; // 日期老版本的快捷选项，新版使用filterSets
  // 日期字段相关属性
  isDateMenu?:'0' | '1'; // 日期：开启日期菜单
  dateMenuGroup?: any[]; // 日期菜单选项
  isCurrentMax?:'0' | '1'; // 日期：开启日期菜单之后当前月份最大
  enableTime?:0 | 1; // 日期：年月日时分开启时分属性
  // 级联额外配置
  fieldConfig?:any
}
//示例
const fields:Array<FilterData> = [
    {
      "componentKey": "DateComponent",
      "number": 9,
      "type": "Date",
      "filterId": "769849454629257217",
      "config": "{\"format\":\"yyyy-MM-dd\"}",
      "fieldId": "4765942239889169457",
      "fieldName": "field_9",
      "showName": "日期区间(开始时间)",
      "isQuick": "0",
      "objId": 756808636864208900,
      "conditionType": [
        {
          "id": "between",
          "sqlKey": " between ",
          "content": "介于"
        },
        {
          "id": "isNull",
          "sqlKey": " is null ",
          "content": "为空"
        },
        {
          "id": "isNotNull",
          "sqlKey": " is not null ",
          "content": "不为空"
        }
      ],
      "conditionTypeValue": "between",
      "isOptionTile": false,
      "multiSelect": false,
      "required": 0,
      "filterSets": [
        {
          "id": "769849454629257218",
          "filterId": "769849454629257217",
          "name": "全部",
          "dateScope": "allDate"
        },
        {
          "id": "769849454629257219",
          "filterId": "769849454629257217",
          "name": "今天",
          "dateScope": "today"
        },
        {
          "id": "769849454629257220",
          "filterId": "769849454629257217",
          "name": "昨天",
          "dateScope": "yesterday"
        }
      ],
      "tileOptionList": [],
    }
]
```

### 3.4 Demo

新旧组件迁移文档：[https://docs.qq.com/sheet/DYmloV1pXZEVnZXd3?tab=BB08J2](https://docs.qq.com/sheet/DYmloV1pXZEVnZXd3?tab=BB08J2)

```
旧版筛选运行-已舍弃
<CorsComponent
  app="@weapp/ebdfpage"
  compName="FilterSearchCom"
  outerInfo={{ filterData:[] }}
  getInstance={()=>{}}
  onSearch={()=>{}}
  module="ebuilder/form"
  conditionId={"121212121212"}
  saveAsPublic
  callBack={()=>{}}
  needCondition
  needOtherCustom           
  bindTriggerContainer
/>

新版筛选运行
<CorsComponent
        weId={`${this.props.weId || ''}_ge2wxv`}
        app="@weapp/components"
        compName="FilterSearch"
        appId={appId}
        outerInfo={{ filterData }}
        module={getApiEbuilderModule(appId)}
        wrapperRef={wrapperRef}
        onSearch={onSearch}
        callBack={callBack}
        getInstance={getInstance}
        needOtherCustom={needOtherCustom}
        needTopDisplay={needTopDisplay}
        onlyTopDisplay={onlyTopDisplay}
        hideFilterContent={hideFilterContent}
        conditionId={conditionId}
        saveAsPublic={saveAsPublic}
        bindTriggerContainer={bindTriggerContainer}
        ebBusinessId={ebBusinessId}
        hideFilterCommon={hideFilterCommon}
        needCondition={needCondition}
        noneOfShow={noneOfShow}
        searchRelationEnable={searchRelationEnable}
        fixedCol={fixedCol}
        fixedColCount={fixedColCount}
        manualFilter={manualFilter}
        customPrefixDom={customPrefixDom}
        needInitPersonalFilter={needInitPersonalFilter}
        customGetFilterCommon={this.customGetFilterCommon}
        customSaveFilterCommon={this.customSaveFilterCommon}
        needNestedSelect
      />
```

## 4、搜索运行组件--筛选单组件（FilterSearchField）

筛选单组件抛出，需要结合FilterSearchStore使用（因为store中包含必填校验、父子选择框联动、级联、为空不为空联动、浏览数据定义、数字等于不等于单区间、各种特殊字段、日期独立展示等等逻辑，需要保留）

```typescript

@observer
export default class MockCom extends Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      store: null,
    };
  }

  componentDidMount(): void {
    try {
      corsImport('@weapp/components').then(async ({ getFilterSearchStore }) => {
        const storeModule = await getFilterSearchStore();
        const { FilterSearchStore } = storeModule;
        if (FilterSearchStore) {
          const store = new FilterSearchStore();
          this.setState({ store });
          store.init(
            () => {},
            // 初始化所有字段
            { filterData: mockFilterData  },
            {
              searchRelationEnable: '1',
              needNestedSelect: true,
              enableBrowserIncludeSub: true,
            },
          );
        }
      });
    } catch (error) {
      console.log(error);
    }
  }

  onChange = (val: any) => {
    console.log('onChange', val);
  };

  onSearch = (val: any) => {
    console.log('onSearch', val);
  };

  render(): React.ReactNode {
    const { store } = this.state;
    if (!store) return <></>;

    const { searchParams, filterData } = store;
    const field1 = filterData.find((item: any) => item.fieldName === mockFilterData[0].fieldName);
    const field2 = filterData.find((item: any) => item.fieldName === mockFilterData[1].fieldName);
    return (
      <div>
        <span>字段1</span>
        {field1 && (
          <CorsComponent
            weId={`${this.props.weId || ''}_l9mm0n`}
            app="@weapp/components"
            compName="FilterSearchField"
            store={store}
            field={field1}
            fieldValue={searchParams[field1.fieldName]}
            searchRelationEnable="1"
            onChange={this.onChange}
            onSearch={this.onSearch}
          />
        )}
        <span>字段2</span>
        {field2 && (
          <CorsComponent
            weId={`${this.props.weId || ''}_6hypfp`}
            app="@weapp/components"
            compName="FilterSearchField"
            store={store}
            field={field2}
            fieldValue={searchParams[field2.fieldName]}
            searchRelationEnable="1"
            onChange={this.onChange}
            onSearch={this.onSearch}
          />
        )}
      </div>
    );
  }
}

const mockFilterData = [
{
    componentKey: 'Text',
    conditionType: [
      {
        id: 'notLike',
        sqlKey: ' not like ',
        content: '不包含',
      },
    ],
    conditionTypeValue: 'like',
    custom:false,
    configNameJson: '',
    defaultType: 0,
    enableTime: 0,
    endValue: '',
    fieldId: '1193213267226238977',
    fieldName: 'field_1193213267226238977',
    fieldOrder: 0,
    fieldTitle: '单行文本',
    filterId: '1196960952713281536',
    filterShow: true,
    groupJson: '',
    isCurrentMax: 0,
    isDateMenu: 0,
    isOptionTile: false,
    isQuick: '0',
    required: '1',
    limitInfo: {
      maxWordLength: 50,
      needWordSearch: true,
      maxLength: 10000,
      maxEqWordLength: 500,
    },
    multiSelect: false,
    number: 1,
    objId: '1193212240868532231',
    optionEnable: 0,
    showName: '单行文本',
    showOrder: 0,
    sourceModule: 'ebuilder',
    thirdPartyFlag: 0,
    tileOptionList: [],
    type: 'String',
  },
{
    componentKey: 'NumberComponent',
    conditionType: [
      {
        id: 'between',
        sqlKey: ' between ',
        content: '介于',
      },
      {
        id: 'eq',
        sqlKey: ' = ',
        content: '等于',
      },
    ],
    conditionTypeValue: 'between',
    configNameJson: '',
    defaultType: 0,
    enableTime: 0,
    endValue: '',
    fieldId: '1193213267226238979',
    fieldName: 'field_1193213267226238979',
    fieldOrder: 1,
    fieldTitle: '数字',
    filterId: '1196960952713281537',
    filterShow: true,
    groupJson: '',
    isCurrentMax: 0,
    isDateMenu: 0,
    isOptionTile: false,
    isQuick: '0',
    multiSelect: false,
    number: 1,
    optionEnable: 0,
    required: 0,
    showName: '数字',
    type: 'Number',
  }
]
```
