# SearchAdvanced 高级搜索

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/search-advanced/freepass)
- 平台：PC
- 维护者：蒋贝贝
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys/#s30
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[SearchAdvanced]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import { Component, ReactNode } from 'react';
import {
  constants, SearchAdvanced, SearchAdvancedProps,
  FormItemProps, FormDatas, FormLayoutType, SearchDatas,
  Layout, SearchAdvancedStore, utils, Button, Menu, Icon, SnapDataType,
  SelectValueType,
} from '@weapp/ui';
import { request, RequestOptionConfig, RequestResult } from '@weapp/utils';
const { needSync } = utils;

const { Panel } = SearchAdvanced;
const { Row, Col } = Layout;
const prefixCls = `${constants.uiPcClsPrefix}-demo-searchAdvanced`;

const initItem: FormItemProps = {
  'input': {
    itemType: "INPUT",
    customParameterName: 'wfTitle',
    otherParams: {
      className: 'textInput'
    },
    customParameters: {
      specialValue: '1',
    }
  },
  'inputProp': {
    itemType: "SELECT",
    condition: true, // 代表该字段为条件关系(高级搜索中使用)
    options: [ // 兼容data和options
      { id: 'contain', content: '包含包含包含包含包含文字超长处理问题内容包含包含包含包含包含文字超长处理问题内容' },
      { id: 'ncontain', content: '不包含' },
    ],
  },
  'select': {
    itemType: "SELECT",
    data: [
      { id: 'op1', content: '选项一' },
      { id: 'op2', content: '选项二' },
    ]
  },
  'datepicker': {
    itemType: 'DATEPICKER',
    isRange: true,
    type: 'day',
    bindTriggerContainer: true,
  },
  'datepicker2': {
    itemType: 'DATEPICKER',
    isRange: true,
    type: 'day',
    selectedKeyPrior: true,
    bindTriggerContainer: true,
  },
  'input1': {
    itemType: "INPUT",
  },
  'input2': {
    itemType: "INPUT",
  },
  'input3': {
    itemType: "INPUT",
  },
  'scope': {
    itemType: "SCOPE",
  },
  'checkbox': {
    itemType: 'CHECKBOX',
    data: [
      { id: 'op1', content: '苹果' },
      { id: 'op2', content: '香蕉' },
      { id: 'op3', content: '橘子' }
    ],
  },
  'browser': {
    itemType: 'BROWSER',
    browserBean: {
      module: 'hrm',
      type: 'resource',
    }
  }
}
const initLayout: Array<FormLayoutType> = [
  [
    {
      id: '1', label: '单行文本', items: ['inputProp', 'input'], labelSpan: 6, groupId: 'commonGroup', hide: false,
      needQuickSearch: true, select: true, customParameterName: 'title',
      cascadeRules: {
        'inputProp': {
          'contain': ['input'],
          'ncontain': [],
        }
      },
      type: '1',
      colClassName: 'colClassName',
    },
    { id: '2', label: '下拉选择框', items: ['select'], labelSpan: 6, groupId: 'commonGroup', hide: false, disableCustomConditions: true, type: '1' },
    { id: '3', label: '日期', items: ['datepicker'], labelSpan: 6, groupId: 'commonGroup', hide: false, type: '1', needQuickSearch: true, },
    { id: '7', label: '日期2', items: ['datepicker2'], labelSpan: 6, groupId: 'commonGroup', hide: false, type: '1' },
    { id: '4', label: '复选框', items: ['checkbox'], labelSpan: 6, groupId: 'commonGroup', hide: false, type: '2' }, // 其他条件无需确定具体布局，但需给label和items的对应关系
    { id: '8', label: '浏览框', items: ['browser'], labelSpan: 6, groupId: 'commonGroup', hide: false, type: '2' }, // 其他条件无需确定具体布局，但需给label和items的对应关系
    { id: '5', label: '其他条件2', items: ['input2'], labelSpan: 6, groupId: 'commonGroup', hide: true, type: '2' },
    { id: '6', label: '其他条件3', items: ['input3'], labelSpan: 6, groupId: 'commonGroup', hide: true, custom: true, type: '2', delete: true },
  ]
]

const groups = [
  {
    "id": "commonGroup",
    "title": "常用分组",
    "visible": true,
    "custom": false
  },
  {
    "id": "otherGroup",
    "title": "其他条件",
    "visible": true,
    "custom": true
  },
]

class CustomTopContent extends Component<any> {
  render() {
    return (<div style={{ marginTop: 10, marginLeft: 24 }}>自定义内容</div>)
  }
}

export interface SearchAdvancedDemoProps {}
class SearchAdvancedDemo extends Component<SearchAdvancedDemoProps> {
  customFilterFormDatas = (datas: FormDatas, otherParams: any) => {
    // const { items } = otherParams;
    if (datas && Object.prototype.toString.call(datas) === '[object Object]') {
      Object.keys(datas).forEach((dataKey) => {
        if (['datepicker', 'datepicker2'].indexOf(dataKey) >= 0) {
          const val = datas[dataKey] as any;
          // datas[dataKey] = val?.selectedKey;
          datas[dataKey] = val?.value;
        }
      })
    }
    return datas;
  }
  fetchData = (options: RequestOptionConfig) => {
    // options内输出的url内容在network对应可抓到
    return request({
      ...options, headers: {
        ...options.headers,
        testHeaderId: '1',
      }
    });
  }
  setPublicSnapSavingAuth = (currentModule?: string) => {
    return true;
  }
  searchAdvancedStore: SearchAdvancedStore = new SearchAdvancedStore({
    // customFilterFormDatas: this.customFilterFormDatas, // 特殊场景开放，示例代码如上
    // setPublicSnapSavingAuth: this.setPublicSnapSavingAuth, // 特殊场景开放，示例代码如上
  });
  searchAdvancedRef: any;
  componentDidMount() {
    this.searchAdvancedStore.setState({ initAfterGetField: false }); // demo没有接口，临时屏蔽自定义行为
    // this.searchAdvancedStore.commonFilterStore.setState({ needSaveSearchValue: true }); // 常用筛选存储getSearchValue的数据
    // this.searchAdvancedStore.setVisible(true); // 默认展开面板或配置defaultVisible
    // const apiTimeout = setTimeout(() => { // 模拟接口
    // request({
    //   url: '/api/workflow/core/list/getListSearchAd',
    //   method: 'post',
    //   data: {
    //     dimension: "done",
    //     tabid: "0",
    //     workflowid: "",
    //   }
    // }).then((result) => {
    //   const { data, items, layout, groups, conditionId } = result.data;
    //   this.searchAdvancedStore.init({
    //     data, items, layout,  groups, module: 'workflow/core', conditionId,
    //   }).then((result) => {
    //   })
    // })
    this.searchAdvancedStore.init({
      data: {
        // 'input': '',
        'inputProp': 'contain',
      }, items: initItem, layout: initLayout, groups, module: 'test', conditionId: '1',
      fetchData: this.fetchData,
    }).then((result) => {
      console.log('result', result);
    })
    // this.searchAdvancedStore.transDatasStore.setState({ enableLatestFormConfig: true }); // 启用后，常用筛选数据回显采用最新布局及字段配置，非常用筛选保存的布局和字段配置(默认为false，即存为版本)
  }

  onVisibleChange = (visible?: boolean) => { // 面板显示/隐藏状态切换回调事件
    console.log('onVisibleChange', visible);
  }

  // 搜索
  onSearch = (datas: SearchDatas) => {
    console.log('onSearch', datas);
    this.blur();
  }

  // 重置
  onReset = (datas?: FormDatas) => console.log(datas);

  // 取消
  onCancel = () => { }

  // 自定义渲染顶部内容

  focus = () => {
    this.searchAdvancedRef?.focusAndClear?.();
  }
  blur = () => {
    this.searchAdvancedRef?.focusAndSelectValue?.();
  }
  customRenderTop = (props: any, content: ReactNode) => {
    const menudata = [
      { id: 'import', content: '导入' },
      { id: 'export', content: '导出' },
      { id: 'subscribe', content: '订阅任务' },
    ];
    return <Row>
      <Col span={12}>
        <Button onClick={this.getData}>获取表单数据</Button>
        <Button onClick={this.focus}>输入框聚焦并清空内容</Button>
      </Col>
      <Col span={12}>
        <div className={`${prefixCls}-basic-test`} style={{ display: 'flex', alignItems: 'center', marginBottom: 5 }}>
          <div style={{ display: 'inline-block', marginLeft: 10 }}>
            <Menu
              defaultValue={'tab1'}
              data={menudata}
              type="select"
              selectType="btn"
              btnText="新建任务"
              btnIcon="Icon-add-to01"
              triggerProps={{
                popupPlacement: 'bottomRight'
              }}
            />
          </div>
          <div style={{ display: 'inline-block', marginLeft: 10 }}>
            {content}
          </div>
          <div style={{ display: 'inline-block', marginLeft: 10 }}>
            <Menu
              data={menudata}
              type="select"
              selectType="iconOverlay"
              selectIcon={<Icon name="Icon-Message-tag-read-o" size="sm" />}
              triggerProps={{
                popupPlacement: 'bottomRight',
                popupClassName: 'menuDemo-select-overlay'
              }}
              childTriggerProps={{
                popupPlacement: 'leftTop',
                popupClassName: 'menuDemo-select-overlay-child'
              }}
            />
          </div>
          <div style={{ display: 'inline-block' }}>
            <Menu
              data={menudata}
              action={['click']}
              type="select"
              selectType="iconOverlay"
              selectIcon={<Icon name="Icon-more02" size="sm" />}
              triggerProps={{
                popupPlacement: 'bottomRight',
                popupClassName: 'menuDemo-select'
              }}
              childTriggerProps={{
                popupPlacement: 'leftTop',
                popupClassName: 'menuDemo-select-child'
              }}
            />
          </div>
        </div>
      </Col>
    </Row>;
  }

  getData = () => {
    console.log('getFormDatas()', this.searchAdvancedStore.formStore.getFormDatas())
    console.log('datas', this.searchAdvancedStore.formStore.datas)
  }

  onBlur = (value?: FormDatas, otherParams?: any) => {
    console.log('onBlur', value, otherParams);
  }
  onChange = (value?: FormDatas, otherParams?: any) => {
    console.log('onChange', value, otherParams);

    // 以下为常用条件和自定义条件分组内联动
    // const { allFields } = this.searchAdvancedStore.formStore;
    // if (value && needSync('select', value)) {
    //   const result = allFields?.map((field) => {
    //     if (field.id === '2') { // allFields的id对应layout的id
    //       return {
    //         ...field,
    //         disableCustomConditions: value.select !== 'op2',
    //       }
    //     }
    //     return field;
    //   })
    //   this.searchAdvancedStore.formStore.setState({ allFields: result });
    // }
  }
  afterSaveSnaps = (result: any) => { console.log('afterSaveSnaps', result) }
  afterDeleteSnaps = (result: any) => { console.log('afterDeleteSnaps', result) }
  onChooseSnap = (id: string, params: SnapDataType, datas: RequestResult<any>) => {
    this.searchAdvancedStore.commonFilterStore.updateSnapes(datas); // 更新表单
    console.log('searchData', this.searchAdvancedStore.getSearchValue());
  }
  onRangeChange = (value: SelectValueType) => {
    console.log('onRangeChange', value);
  }
  saveSearchAdvancedRef = (el: any) => this.searchAdvancedRef = el;
  render() {
    const conditionId = "1"; // 高级搜索唯一值
    const module = 'bcw';
    const groupTitle = [
      { id: '1', content: '分组1' },
      { id: '2', content: '分组2' },
      { id: '3', content: '分组3' }
    ];
    return (
      <div className={prefixCls}>
        <SearchAdvanced
          onVisibleChange={this.onVisibleChange}
          className={"test"}
          customRenderTop={this.customRenderTop}
          conditionId={conditionId}
          searchAdvancedStore={this.searchAdvancedStore}
          onSearch={this.onSearch}
          module={module}
          onChooseSnap={this.onChooseSnap}
          afterDeleteSnaps={this.afterDeleteSnaps}
          fetchData={this.fetchData}
          ref={this.saveSearchAdvancedRef}
          enablePanelEnterSearch={false}
        />
        <Panel
          onVisibleChange={this.onVisibleChange}
          defaultVisible={true}
          needRange={true}
          onSearch={this.onSearch}
          onReset={this.onReset}
          onCancel={this.onCancel}
          colSpan={12}
          className={"testPanel"}
          conditionId={conditionId}
          searchAdvancedStore={this.searchAdvancedStore}
          module={module}
          onChange={this.onChange}
          onBlur={this.onBlur}
          formProps={{
            onChange: this.onChange,
            selectProps: {
              showDataGroupByType: true,
              dataGroupTitle: groupTitle,
            }
          }}
          enablePanelEnterSearch={false}
          // customTopContent={(<CustomTopContent />)}
          // customSettingContent={(<CustomTopContent />)}
          saveAsPublic
          saveAsDefault
          setUseScope
          afterSaveSnaps={this.afterSaveSnaps}
          afterDeleteSnaps={this.afterDeleteSnaps}
          disabledCustomDateSaveFormat={false}
          onChooseSnap={this.onChooseSnap}
          fetchData={this.fetchData}
          rangeSelectProps={{
            placeholder: '1',
          }}
          onRangeChange={this.onRangeChange}
          // buttons={<Button>测试</Button>}
        />
      </div>
    );
  }
}

export default SearchAdvancedDemo;
```

### 弹出层模式

弹出层模式

```jsx
import { Component, ReactNode } from 'react';
import {
  constants, SearchAdvanced, SearchAdvancedProps,
  FormItemProps, FormDatas, FormLayoutType, SearchDatas,
  Layout, SearchAdvancedStore,
} from '@weapp/ui';

const { Panel } = SearchAdvanced;
const { Row, Col } = Layout;
const prefixCls = `${constants.uiPcClsPrefix}-demo-searchAdvanced`;

const initItem: FormItemProps = {
  'input': {
    itemType: "INPUT",
    customParameterName: 'wfTitle',
    customParameters: {
      specialValue: '1',
    }
  },
  'inputProp': {
    itemType: "SELECT",
    condition: true, // 代表该字段为条件关系(高级搜索中使用)
    options: [ // 兼容data和options
      { id: 'contain', content: '包含' },
      { id: 'ncontain', content: '不包含' },
    ],
  },
  'select': {
    itemType: "SELECT",
    data: [
      { id: 'op1', content: '选项一' },
      { id: 'op2', content: '选项二' },
    ]
  },
  'datepicker': {
    itemType: 'DATEPICKER',
  },
  'input1': {
    itemType: "INPUT",
  },
  'input2': {
    itemType: "INPUT",
  },
  'input3': {
    itemType: "INPUT",
  },
}
const initLayout: Array<FormLayoutType> = [
  [
    { id: '1', label: '单行文本', items: ['inputProp', 'input'], labelSpan: 6, groupId: 'commonGroup', hide: false, needQuickSearch: true, customParameterName: 'title' },
    { id: '2', label: '下拉选择框', items: ['select'], labelSpan: 6, groupId: 'commonGroup', hide: false, },
  ],
  [
    { id: '3', label: '多行文本', items: ['datepicker'], labelSpan: 6, groupId: 'commonGroup', hide: false, needQuickSearch: true },
    { id: '4', label: '其他条件1', items: ['input1'], labelSpan: 6, groupId: 'commonGroup', hide: false, }, // 其他条件无需确定具体布局，但需给label和items的对应关系
  ],
  [
    { id: '5', label: '其他条件2', items: ['input2'], labelSpan: 6, groupId: 'commonGroup', hide: true, },
    { id: '6', label: '其他条件3', items: ['input3'], labelSpan: 6, groupId: 'commonGroup', hide: true, custom: true },
  ],
]

const groups = [
  {
    "id": "commonGroup",
    "title": "常用分组",
    "visible": true,
    "custom": false
  },
  {
    "id": "g2",
    "title": "其他条件",
    "visible": true,
    "custom": true
  },
]
class SearchAdvancedDemo extends Component<SearchAdvancedProps> {
  searchAdvancedStore: SearchAdvancedStore = new SearchAdvancedStore();
  componentDidMount() {
    this.searchAdvancedStore.setState({ initAfterGetField: false }); // demo没有接口，临时屏蔽自定义行为
    // this.searchAdvancedStore.setVisible(true); // 默认展开面板或配置defaultVisible
    const apiTimeout = setTimeout(() => { // 模拟接口
      this.searchAdvancedStore.init({
        data: {
          // 'input': '1',
          // 'inputProp': 'contain',
        }, items: initItem, layout: initLayout, groups, module: 'common', conditionId: '1',
      })
      if (apiTimeout) clearTimeout(apiTimeout);
    }, 500);
  }

  onVisibleChange = (visible?: boolean) => { // 面板显示/隐藏状态切换回调事件
    console.log('onVisibleChange', visible);
  }

  // 搜索
  onSearch = (datas: SearchDatas) => console.log('onSearch', datas);

  // 重置
  onReset = (datas?: FormDatas) => console.log(datas);

  // 取消
  onCancel = () => { }

  // 自定义渲染顶部内容

  customRenderTop = (props: any, content: ReactNode) => {
    return <Row>
      <Col span={12}>
        左侧内容
      </Col>
      <Col span={12}>
        {content}
      </Col>
    </Row>;
  }
  
  onBlur = (value?: FormDatas, otherParams?: any) => {
    console.log('onBlur', value, otherParams);
  }
  onChange = (value?: FormDatas, otherParams?: any) => {
    console.log('onChange', value, otherParams);
  }
  render() {
    const conditionId = '1'; // 高级搜索唯一值
    return (
      <div className={prefixCls}>
        <SearchAdvanced
          onVisibleChange={this.onVisibleChange}
          className={"test"}
          customRenderTop={this.customRenderTop}
          conditionId={conditionId}
          searchAdvancedStore={this.searchAdvancedStore}
          onSearch={this.onSearch}
          module={'common'}
          enablePanelEnterSearch={false}
        />
        <Panel
          onVisibleChange={this.onVisibleChange}
          defaultVisible={false}
          needRange={true}
          onSearch={this.onSearch}
          onReset={this.onReset}
          onCancel={this.onCancel}
          colSpan={12}
          className={`${prefixCls}-panel-popup`}
          conditionId={conditionId}
          searchAdvancedStore={this.searchAdvancedStore}
          module={'common'}
          onChange={this.onChange}
          enablePanelEnterSearch={false}
          onBlur={this.onBlur}
          formProps={{
            onChange: this.onChange,
          }}
          mode="popup"
        />
      </div>
    );
  }
}

export default SearchAdvancedDemo;
```

### 快捷搜索框

快捷搜索框

```jsx
import { Component, ReactNode } from 'react';
import {
  constants, SearchAdvanced, SearchAdvancedProps, SearchDatas, SearchAdvancedStore,
  Menu, Icon, FormLayoutType, DialogProps
} from '@weapp/ui';
import { observer } from 'mobx-react';

const prefixCls = `${constants.uiPcClsPrefix}-demo-searchAdvanced`;

// 快捷搜索条件需设置needQuickSearch
const initLayout: Array<FormLayoutType> = [
  [
    { id: '1', label: '条件一', items: ['op1'], labelSpan: 6, groupId: 'commonGroup', hide: false, needQuickSearch: true, customParameterName: 'title' },
  ],
  [
    { id: '2', label: '条件二', items: ['op2'], labelSpan: 6, groupId: 'commonGroup', hide: false, needQuickSearch: true },
  ],
  [
    { id: '3', label: '条件三', items: ['op3'], labelSpan: 6, groupId: 'commonGroup', hide: true, needQuickSearch: true },
  ],
  [
    { id: '4', label: '条件四', items: ['op4'], labelSpan: 6, groupId: 'commonGroup', hide: true, needQuickSearch: true },
  ]
]

const searchAdvancedStore = new SearchAdvancedStore();
@observer
class SearchAdvancedDemo extends Component<SearchAdvancedProps> {
  componentDidMount() {
    searchAdvancedStore.setState({ initAfterGetField: false }); // demo没有接口，临时屏蔽自定义行为
    searchAdvancedStore.init({
      layout: initLayout,
      items: {},
      conditionId: '1',
      data: {}, groups: [], module: 'common'
    })
  }
  // 搜索
  onSearch = (datas: SearchDatas) => console.log('onSearch', datas);

  // 自定义渲染顶部内容

  onItemClick = () => {
    searchAdvancedStore.setState({ settingVisible: true, hSSetting: true });
  }

  customRenderDialogBody = (props: DialogProps, com: ReactNode) => {
    return <div className={`${prefixCls}-quick-search-dialog`}>
      <div className={`${prefixCls}-quick-search-dialog-tip`}>设置后，快捷搜索会根据开启的字段进行匹配，最多可设置3个字段</div>
      {com}
    </div>
  }

  customRenderTop = (props: any, content: ReactNode) => {
    const data = [
      { id: 'tab1', content: '设置快捷搜索条件', groupId: 'group1', icon: 'Icon-Basic-settings-o' },
    ];
    return <div className={`${prefixCls}-quicksearch`}>
      <div className={`${prefixCls}-quicksearch-input`}>
        {content}
      </div>
      <Menu
        data={data}
        type="select"
        className={`${prefixCls}-quicksearch-menu`}
        triggerProps={{
          cover: true,
          popupPlacement: 'bottomRight',
          popupClassName: 'menuDemo-select'
        }}
        childTriggerProps={{
          popupPlacement: 'leftTop',
          popupClassName: 'menuDemo-select-child'
        }}
        customSelectContent={<Icon
          name={'Icon-more02'}
          className={`${prefixCls}-quicksearch-input-icon`}
          size="sm"
        />}
        onItemClick={this.onItemClick}
      />
    </div>
  }

  render() {
    const conditionId = '1'; // 高级搜索唯一值
    return (
      <div className={prefixCls}>
        <SearchAdvanced
          className={"test"}
          customRenderTop={this.customRenderTop}
          conditionId={conditionId}
          searchAdvancedStore={searchAdvancedStore}
          onSearch={this.onSearch}
          module={'common'}
          quickSearchInputProps={{
            suffix: null,
          }}
          enablePanelEnterSearch={false}
          maxNumberOfQuickSearchCondition={3}
          // settingDialogProps={{ className: 'settingDialog', customRenderDialogBody: this.customRenderDialogBody }}
        />
      </div>
    );
  }
}

export default SearchAdvancedDemo;
```

### 快捷搜索框(简易模式)

快捷搜索框(简易模式)，不耦合表单数据

```jsx
import { Component } from 'react';
import {
  constants, SearchAdvanced, SearchAdvancedProps, SearchDatas, SearchAdvancedStore,
} from '@weapp/ui';
import { observer } from 'mobx-react';

const prefixCls = `${constants.uiPcClsPrefix}-demo-searchAdvanced`;

const searchAdvancedStore = new SearchAdvancedStore();
@observer
class SearchAdvancedDemo extends Component<SearchAdvancedProps> {
  componentDidMount() {
    searchAdvancedStore.init({
      layout: [],
      items: {},
      data: {},
      groups: [],
      module: 'common',
      conditionId: '1',
    })
  }
  // 搜索
  onSearch = (datas: SearchDatas) => console.log('onSearch', datas);

  render() {
    const conditionId = '1'; // 高级搜索唯一值
    return (
      <div className={prefixCls}>
        <SearchAdvanced
          className={"test"}
          conditionId={conditionId}
          searchAdvancedStore={searchAdvancedStore}
          onSearch={this.onSearch}
          module={'common'}
          quickSearchKey="test"
          quickSearchPlaceHolder="请输入"
          enablePanelEnterSearch={false}
          disableQuickSearchSetting
          quickSearchInputProps={{
            suffix: null,
          }}
        />
      </div>
    );
  }
}

export default SearchAdvancedDemo;
```

### 搜索面板

搜索面板

```jsx
import { Component, ReactNode } from 'react';
import {
  constants, SearchAdvanced, SearchAdvancedProps,
  FormItemProps, FormDatas, FormLayoutType, SearchDatas,
  Layout, SearchAdvancedStore, TypesBrowserOption,
} from '@weapp/ui';
import { MockDataBrowserBase } from '../../browser/pc/MockData';

const { Panel } = SearchAdvanced;
const { Row, Col } = Layout;
const prefixCls = `${constants.uiPcClsPrefix}-demo-searchAdvanced`;

const customBrowserTypes: TypesBrowserOption[] = [
  { id: "resource", content: "人员" },
  { id: "department", content: "部门" },
  { id: "subCompany", content: "分部" },
];

const initLayout = [
  [
    { id: '1', label: '单行文本', items: ['inputProp', 'input'], labelSpan: 6, hide: false, needQuickSearch: true, groupId: 'commonGroup', helpTip: '提示信息', helpTipProps: { placement: 'top' } },
    { id: '2', label: '数字输入', items: ['inputnumber'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '3', label: '下拉选择框', items: ['select'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '4', label: '多行文本', items: ['text'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '5', label: '单选', items: ['radio'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '6', label: '复选', items: ['checkbox'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '7', label: '评分', items: ['rate'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '8', label: '时间选择器', items: ['timepicker'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '9', label: '开关', items: ['switch'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '10', label: '区间', items: ['scope'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '11', label: '浏览框', items: ['inputProp', 'browser'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '12', label: '搜索框', items: ['search'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '13', label: '颜色选择器', items: ['colorpicker'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '18', label: '日期选择器', items: ['datepicker'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '20', label: '日期时间选择器', items: ['datetimepicker'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '21', label: '日期快速筛选', items: ['datequickfilter'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    // { id: '19', label: '多类型浏览框', items: ['typesBrowser'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
  ],
]

const groups = [
  {
    "id": "commonGroup",
    "title": "常用分组",
    "visible": true,
    "custom": false
  },
  {
    "id": "g2",
    "title": "其他条件",
    "visible": true,
    "custom": true
  },
]
class SearchAdvancedDemo extends MockDataBrowserBase {
  searchAdvancedStore: SearchAdvancedStore = new SearchAdvancedStore();
  componentDidMount() {
    this.searchAdvancedStore.setState({ initAfterGetField: false }); // demo没有接口，临时屏蔽自定义行为
    // this.searchAdvancedStore.setVisible(true); // 默认展开面板或配置defaultVisible
    const initItem = this.getInitItem();
    const apiTimeout = setTimeout(() => { // 模拟接口
      this.searchAdvancedStore.init({
        data: {
          'input': '1',
          'inputProp': 'contain',
        }, items: initItem, layout: initLayout, groups, module: 'common', conditionId: '1',
      })
      if (apiTimeout) clearTimeout(apiTimeout);
    }, 500);
  }

  getInitItem = () => {
    const initItem: FormItemProps = {
      'input': {
        itemType: "INPUT",
        customParameterName: 'wfTitle',
        customParameters: {
          specialValue: '1',
        }
      },
      'inputProp': {
        itemType: "SELECT",
        condition: true, // 代表该字段为条件关系(高级搜索中使用)
        options: [ // 兼容data和options
          { id: 'contain', content: '包含' },
          { id: 'ncontain', content: '不包含' },
        ],
      },
      'text': {
        itemType: 'TEXTAREA',
        rules: 'required',
      },
      'inputnumber': {
        itemType: 'INPUTNUMBER',
      },
      'select': {
        itemType: "SELECT",
        data: [
          { id: 'op1', content: '选项一' },
          { id: 'op2', content: '选项二' },
        ]
      },
      'datepicker': {
        itemType: 'DATEPICKER',
        isRange: true,
        type: 'day',
      },
      'datequickfilter': {
        itemType: 'DATEQUICKFILTER',
      },
      'datetimepicker': {
        itemType: 'DATETIMEPICKER',
      },
      'timepicker': {
        itemType: 'TIMEPICKER',
      },
      'radio': {
        itemType: "RADIO",
      },
      'rate': {
        itemType: 'RATE',
      },
      'checkbox': {
        itemType: "CHECKBOX",
        options: [
          { id: "7831654986932194939", content: "选项1", disabled: false },
          { id: "7831654986932394940", content: "选项2", disabled: false },
          { id: "7831654986932494941", content: "选项3", disabled: false }]
      },
      'switch': {
        itemType: "SWITCH",
      },
      'scope': {
        itemType: 'SCOPE',
      },
      'browser': {
        itemType: 'BROWSER',
        browserBean: { // BROWSER 对应 browserBean
          type: 'demo',
          module: 'common',
          fetchData: this.mockFetchData,
          multiple: true,
        }
      },
      'typesBrowser': {
        itemType: 'TYPESBROWSER',
        typesBrowserBean: { // TYPESBROWSER 对应 typesBrowserBean
          type: 'hrm',
          module: 'hrm',
          options: customBrowserTypes,
        }
      },
      'search': {
        itemType: 'INPUT',
      },
      'colorpicker': {
        itemType: 'COLORPICKER',
      }
    }
    return initItem;
  }

  onVisibleChange = (visible?: boolean) => { // 面板显示/隐藏状态切换回调事件
    console.log('onVisibleChange', visible);
  }

  // 搜索
  onSearch = (datas: SearchDatas) => console.log('onSearch', datas);

  // 重置
  onReset = (datas?: FormDatas) => console.log(datas);

  // 取消
  onCancel = () => { }

  // 自定义渲染顶部内容

  customRenderTop = (props: any, content: ReactNode) => {
    return <Row>
      <Col span={12}>
        左侧内容
      </Col>
      <Col span={12}>
        {content}
      </Col>
    </Row>;
  }

  onBlur = (value?: FormDatas, otherParams?: any) => {
    console.log('onBlur', value, otherParams);
  }
  onChange = (value?: FormDatas, otherParams?: any) => {
    console.log('onChange', value, otherParams);
  }
  render() {
    const conditionId = '1'; // 高级搜索唯一值
    return (
      <div className={prefixCls}>
        <Panel
          onVisibleChange={this.onVisibleChange}
          defaultVisible={true}
          needRange={true}
          onSearch={this.onSearch}
          onReset={this.onReset}
          onCancel={this.onCancel}
          colSpan={12}
          className={"testPanel"}
          conditionId={conditionId}
          searchAdvancedStore={this.searchAdvancedStore}
          module={'common'}
          enablePanelEnterSearch ={false}
          onChange={this.onChange}
          onBlur={this.onBlur}
          formProps={{
            onChange: this.onChange,
          }}
        />
      </div>
    );
  }
}

export default SearchAdvancedDemo;
```

### 简易筛选模式

简易筛选模式

```jsx
import {
  constants, SearchAdvanced, SearchDatas, SearchAdvancedStore, FormItemProps, Layout
} from '@weapp/ui';
import { observer } from 'mobx-react';
import { FormLayoutType } from '@weapp/ui';
import { MockDataBrowserBase } from '../../browser/pc/MockData';
import { ReactNode } from 'react';

const { Row, Col } = Layout;

const prefixCls = `${constants.uiPcClsPrefix}-demo-searchAdvanced-simple`;

const initLayout: Array<FormLayoutType> = [
  [
    { id: '1', label: '人员范围', items: ['rangeOpt', 'range'], labelSpan: 4, hide: false },
  ],
  [
    { id: '2', label: '人员类型', items: ['type'], labelSpan: 4, hide: false, },
  ],
  [
    { id: '2', label: '日期', items: ['date'], labelSpan: 4, hide: false, },
  ],
  [
    { id: '2', label: '浏览框', items: ['browserDialog'], labelSpan: 4, hide: false, },
  ],
  [
    { id: '3', label: '浏览框', items: ['browser'], labelSpan: 0, hide: false, needQuickSearch: true },
  ],
]

const searchAdvancedStore = new SearchAdvancedStore();
@observer
class SearchAdvancedDemo extends MockDataBrowserBase {
  componentDidMount() {
    const initItem: FormItemProps = {
      'range': {
        itemType: 'CHECKBOX',
        data: [
          { id: 'my', title: '我的', content: '我的' },
          { id: 'attention', title: '我关注的', content: '我关注的' },
          { id: 'subordinate', title: '我的下属', content: '我的下属' },
        ]
      },
      'rangeOpt': {
        itemType: "SELECT",
        condition: true, // 代表该字段为条件关系(高级搜索中使用)
        options: [ // 兼容data和options
          { id: 'contain', content: '包含' },
          { id: 'ncontain', content: '不包含' },
        ],
      },
      'type': {
        itemType: 'CHECKBOX',
        data: [
          { id: 'resign', title: '离职人员', content: '离职人员' },
          { id: 'noattendance', title: '不考勤人员', content: '不考勤人员' },
        ]
      },
      'date': {
        itemType: 'DATEPICKER',
        otherParams: {
          bindTriggerContainer: true,
        },
      },
      'browserDialog': {
        itemType: 'BROWSER',
        browserBean: {
          type: "demo",
          module: "common",
          panelHeight: 360,
          fetchData: this.mockFetchData,
          dataParams: { cmd: 'list' },
          browserSearchAdvancedProps: {
            disableHistorySearch: true,
            disableCommonFilter: true,
          },
          browserSearchAdvancedPanelProps: {
            disableHistorySearch: true,
            disableCommonFilter: true,
          }
        }
      },
      'browser': {
        itemType: 'BROWSERWINDOW',
        browserBean: {
          type: "demo",
          module: "common",
          panelHeight: 400,
          fetchData: this.mockFetchData,
          dataParams: { cmd: 'list' },
          browserSearchAdvancedProps: {
            disableHistorySearch: true,
            disableCommonFilter: true,
          },
          browserSearchAdvancedPanelProps: {
            disableHistorySearch: true,
            disableCommonFilter: true,
          }
        }
      }
    }
    searchAdvancedStore.setState({ initAfterGetField: false }); // 简易筛选模式可关闭自定义行为逻辑
    searchAdvancedStore.init({
      layout: initLayout,
      items: initItem,
      data: {
        rangeOpt: "contain",
      },
      groups: [],
      module: 'common',
      conditionId: '1',
    })
  }

  // 搜索
  onSearch = (datas: SearchDatas) => console.log('onSearch', datas);

  render() {
    const conditionId = '1'; // 高级搜索唯一值
    return (
      <div className={prefixCls}>
        <SearchAdvanced
          className={"test"}
          conditionId={conditionId}
          searchAdvancedStore={searchAdvancedStore}
          onSearch={this.onSearch}
          module={'common'}
          quickSearchKey="test"
          quickSearchPlaceHolder="请输入"
          mode="simple"
          onlyShowIcon
          simpleSearchTriggerProps={{
            blacklist: [
              'div[class=ui-date-picker-dayPanel',
              'div[class=ui-trigger-popupInter-container]',
              'div[class=ui-dialog-portal]'
            ],
          }}
          enablePanelEnterSearch={false}
        />
      </div>
    );
  }
}

export default SearchAdvancedDemo;
```

### 自定义常用筛选

简易筛选模式

```jsx
import { constants, SearchAdvanced, FormItemProps, SearchAdvancedStore, SearchAdvancedStoreType } from '@weapp/ui';
import { MockDataBrowserBase } from '../../browser/pc/MockData';

const { Panel } = SearchAdvanced;
const prefixCls = `${constants.uiPcClsPrefix}-demo-searchAdvanced`;

const initLayout = [
  [
    {
      id: '1', label: '单行文本',
      items: ['inputProp', 'input'],
      labelSpan: 6,
      hide: false,
      needQuickSearch: true,
      groupId: 'commonGroup',
      cascadeRules: { 
        'inputProp': {
          'contain': ['input'],
          'ncontain': ['input'],
          'empty': [],
        }
      },
    },
  ],
]

const groups = [
  {
    "id": "commonGroup",
    "title": "常用分组",
    "visible": true,
    "custom": false
  }
]
class SearchAdvancedDemo extends MockDataBrowserBase {
  setSnapSavingCondition = (store: SearchAdvancedStoreType) => {
    const { formStore: { getFormDatas } } = store;
    const datas = getFormDatas();
    return datas.inputProp === 'empty'; // 不走自定义的逻辑，return false
  }
  searchAdvancedStore: SearchAdvancedStore = new SearchAdvancedStore({
    setSnapSavingCondition: this.setSnapSavingCondition,
  });
  componentDidMount() {
    this.searchAdvancedStore.setState({ initAfterGetField: false }); // demo没有接口，临时屏蔽自定义行为
    const initItem = this.getInitItem();
    this.searchAdvancedStore.init({
      data: {
        'inputProp': 'contain',
      }, items: initItem, layout: initLayout, groups, module: 'common', conditionId: '1',
    })
  }
  getInitItem = () => {
    const initItem: FormItemProps = {
      'input': {
        itemType: "INPUT",
        customParameterName: 'wfTitle',
        customParameters: {
          specialValue: '1',
        }
      },
      'inputProp': {
        itemType: "SELECT",
        condition: true, // 代表该字段为条件关系(高级搜索中使用)
        options: [ // 兼容data和options
          { id: 'contain', content: '包含' },
          { id: 'ncontain', content: '不包含' },
          { id: 'empty', content: '为空' },
        ],
      },
    }
    return initItem;
  }

  onVisibleChange = (visible?: boolean) => { // 面板显示/隐藏状态切换回调事件
    console.log('onVisibleChange', visible);
  }

  render() {
    const conditionId = '1'; // 高级搜索唯一值
    return (
      <div className={prefixCls}>
        <Panel
          onVisibleChange={this.onVisibleChange}
          defaultVisible={true}
          colSpan={12}
          conditionId={conditionId}
          searchAdvancedStore={this.searchAdvancedStore}
          module={'common'}
          enablePanelEnterSearch={false}
        />
      </div>
    );
  }
}

export default SearchAdvancedDemo;
```

### 外置简易模式

外置简易模式, layout数据配置defaultShow

```jsx
import { ReactNode } from 'react';
import {
  constants, SearchAdvanced, FormItemProps, FormDatas, SearchDatas,
  Layout, SearchAdvancedStore, TypesBrowserOption, Checkbox, CheckboxValueType
} from '@weapp/ui';
import { MockDataBrowserBase } from '../../browser/pc/MockData';
import { data } from 'dom7';

const { Panel } = SearchAdvanced;
const { Row, Col } = Layout;
const prefixCls = `${constants.uiPcClsPrefix}-demo-searchAdvanced`;

const customBrowserTypes: TypesBrowserOption[] = [
  { id: "resource", content: "人员" },
  { id: "department", content: "部门" },
  { id: "subCompany", content: "分部" },
];

const initLayout = [
  [
    { id: '1', label: '单行文本', items: ['inputProp', 'input'], labelSpan: 12, hide: false, needQuickSearch: true, groupId: 'commonGroup', helpTip: '提示信息', helpTipProps: { placement: 'top' }, defaultShow: true },
    { id: '2', label: '数字输入', items: ['inputnumber'], labelSpan: 12, hide: false, groupId: 'commonGroup' },
    { id: '3', label: '下拉选择框', items: ['select'], labelSpan: 12, hide: false, groupId: 'commonGroup' },
    { id: '4', label: '多行文本', items: ['text'], labelSpan: 12, hide: false, groupId: 'commonGroup' },
    { id: '5', label: '单选', items: ['radio'], labelSpan: 12, hide: false, groupId: 'commonGroup' },
    { id: '6', label: '复选', items: ['checkbox'], labelSpan: 12, hide: false, groupId: 'commonGroup' },
    { id: '7', label: '评分', items: ['rate'], labelSpan: 12, hide: false, groupId: 'commonGroup' },
    { id: '8', label: '时间选择器', items: ['timepicker'], labelSpan: 12, hide: false, groupId: 'commonGroup' },
    { id: '9', label: '开关', items: ['switch'], labelSpan: 12, hide: false, groupId: 'commonGroup' },
    { id: '10', label: '区间', items: ['scope'], labelSpan: 12, hide: false, groupId: 'commonGroup' },
    { id: '11', label: '浏览框', items: ['inputProp', 'browser'], labelSpan: 12, hide: false, groupId: 'commonGroup' },
    { id: '12', label: '搜索框', items: ['search'], labelSpan: 12, hide: false, groupId: 'commonGroup' },
    { id: '13', label: '颜色选择器', items: ['colorpicker'], labelSpan: 12, hide: false, groupId: 'commonGroup' },
    { id: '18', label: '日期选择器', items: ['datepicker'], labelSpan: 12, hide: false, groupId: 'commonGroup' },
    { id: '20', label: '日期时间选择器', items: ['datetimepicker'], labelSpan: 12, hide: false, groupId: 'commonGroup' },
    { id: '21', label: '日期快速筛选', items: ['datequickfilter'], labelSpan: 12, hide: false, groupId: 'commonGroup' },
  ],
]

const groups = [
  {
    "id": "commonGroup",
    "title": "常用分组",
    "visible": true,
    "custom": false
  },
  {
    "id": "g2",
    "title": "其他条件",
    "visible": true,
    "custom": true
  },
]
class SearchAdvancedDemo extends MockDataBrowserBase{
  searchAdvancedStore: SearchAdvancedStore = new SearchAdvancedStore();
  constructor(props: any) {
    super(props);
    const data: { id: string; content: string; }[] = [], checkLayout: string[] = [];
    initLayout.forEach((row) => {
      row.forEach((col) => {
        if (col.defaultShow) checkLayout.push(col.id);
        data.push({
          id: col.id,
          content: col.label,
        })
      })
    })
    this.state = {
      layout: initLayout,
      checkLayout,
      checkData: data,
    }
  }
  componentDidMount() {
    this.searchAdvancedStore.setState({ initAfterGetField: false }); // demo没有接口，临时屏蔽自定义行为
    // this.searchAdvancedStore.setVisible(true); // 默认展开面板或配置defaultVisible
    this.initSearchAd();
  }

  initSearchAd = () => {
    const initItem = this.getInitItem();
    const apiTimeout = setTimeout(() => { // 模拟接口
      const { layout } = this.state as any;
      this.searchAdvancedStore.init({
        data: {
          'input': '1',
          'inputProp': 'contain',
        }, items: initItem, layout, groups, module: 'common', conditionId: '1',
      })
      if (apiTimeout) clearTimeout(apiTimeout);
    }, 500);
  }
  getInitItem = () => {
    const initItem: FormItemProps = {
      'input': {
        itemType: "INPUT",
        customParameterName: 'wfTitle',
        customParameters: {
          specialValue: '1',
        }
      },
      'inputProp': {
        itemType: "SELECT",
        condition: true, // 代表该字段为条件关系(高级搜索中使用)
        options: [ // 兼容data和options
          { id: 'contain', content: '包含' },
          { id: 'ncontain', content: '不包含' },
        ],
      },
      'text': {
        itemType: 'TEXTAREA',
        rules: 'required',
      },
      'inputnumber': {
        itemType: 'INPUTNUMBER',
      },
      'select': {
        itemType: "SELECT",
        data: [
          { id: 'op1', content: '选项一' },
          { id: 'op2', content: '选项二' },
        ]
      },
      'datepicker': {
        itemType: 'DATEPICKER',
        isRange: true,
        type: 'day',
      },
      'datequickfilter': {
        itemType: 'DATEQUICKFILTER',
      },
      'datetimepicker': {
        itemType: 'DATETIMEPICKER',
      },
      'timepicker': {
        itemType: 'TIMEPICKER',
      },
      'radio': {
        itemType: "RADIO",
      },
      'rate': {
        itemType: 'RATE',
      },
      'checkbox': {
        itemType: "CHECKBOX",
        options: [
          { id: "7831654986932194939", content: "选项1", disabled: false },
          { id: "7831654986932394940", content: "选项2", disabled: false },
          { id: "7831654986932494941", content: "选项3", disabled: false }]
      },
      'switch': {
        itemType: "SWITCH",
      },
      'scope': {
        itemType: 'SCOPE',
      },
      'browser': {
        itemType: 'BROWSER',
        browserBean: { // BROWSER 对应 browserBean
          type: 'demo',
          module: 'common',
          fetchData: this.mockFetchData,
          multiple: true,
        }
      },
      'typesBrowser': {
        itemType: 'TYPESBROWSER',
        typesBrowserBean: { // TYPESBROWSER 对应 typesBrowserBean
          type: 'hrm',
          module: 'hrm',
          options: customBrowserTypes,
        }
      },
      'search': {
        itemType: 'INPUT',
      },
      'colorpicker': {
        itemType: 'COLORPICKER',
      }
    }
    return initItem;
  }

  onVisibleChange = (visible?: boolean) => { // 面板显示/隐藏状态切换回调事件
    console.log('onVisibleChange', visible);
  }

  // 搜索
  onSearch = (datas: SearchDatas) => console.log('onSearch', datas);

  // 重置
  onReset = (datas?: FormDatas) => console.log(datas);

  // 取消
  onCancel = () => { }

  // 自定义渲染顶部内容

  customRenderTop = (props: any, content: ReactNode) => {
    return <Row>
      <Col span={12}>
        左侧内容
      </Col>
      <Col span={12}>
        {content}
      </Col>
    </Row>;
  }

  onBlur = (value?: FormDatas, otherParams?: any) => {
    console.log('onBlur', value, otherParams);
  }
  onChange = (value?: FormDatas, otherParams?: any) => {
    console.log('onChange', value, otherParams);
  }
  onChangeLayout = (value: CheckboxValueType) => {
    const checkboxVal = value as any;
    const { layout } = this.state as any;
    const result = layout.map((row: any[]) => {
      return row.map((col) => {
        return {
          ...col,
          defaultShow: checkboxVal?.indexOf(col.id) >= 0,
        }
      })
    })
    this.setState({ checkLayout: value, layout: result }, () => {
      this.initSearchAd();
    });
  }
  render() {
    const conditionId = '1'; // 高级搜索唯一值
    const { checkLayout, checkData } = this.state as any;
    return (
      <div className={prefixCls}>
        <Row>
          <Col span={2}>
            默认展示字段:
          </Col>
          <Col span={22}>
            <Checkbox data={checkData} value={checkLayout} onChange={this.onChangeLayout} />
          </Col>
        </Row>
        <Panel
          onVisibleChange={this.onVisibleChange}
          defaultVisible={true}
          needRange={true}
          onSearch={this.onSearch}
          onReset={this.onReset}
          onCancel={this.onCancel}
          colSpan={12}
          conditionId={conditionId}
          searchAdvancedStore={this.searchAdvancedStore}
          module={'common'}
          onChange={this.onChange}
          onBlur={this.onBlur}
          disableCommonHide
          formProps={{
            onChange: this.onChange,
          }}
          enablePanelEnterSearch={false}
        />
      </div>
    );
  }
}

export default SearchAdvancedDemo;
```

### 搜索面板(支持回车搜索)

搜索面板(支持回车搜索)

```jsx
import { Component, ReactNode } from 'react';
import {
  constants, SearchAdvanced, SearchAdvancedProps,
  FormItemProps, FormDatas, FormLayoutType, SearchDatas,
  Layout, SearchAdvancedStore, TypesBrowserOption,
  ShareBrowserValueType,
  ShareBrowserOption,
  TypesBrowserData,
  Button,
  Dialog,
} from '@weapp/ui';
import { MockDataBrowserBase } from '../../browser/pc/MockData';
import { message } from '../../../../components/dialog/dialog/message';
import FormDemo from '../../form/pc/basic';

const { Panel } = SearchAdvanced;
const { Row, Col } = Layout;
const prefixCls = `${constants.uiPcClsPrefix}-demo-searchAdvanced`;

const customBrowserProps: TypesBrowserData = {
  "user": {
    dataParams: {
      test: 'resource'
    },
  },
  "dept": {
    dataParams: {
      test: 'department'
    }
  },
};

const customShareBrowserTypes: ShareBrowserOption[] = [
  { id: "user", content: "人员" },
  { id: "dept", content: "部门" },
  { id: "subcompany", content: "分部" },
  { id: "group", content: "群组" },
  { id: "role", content: "角色" },
  { id: "position", content: "岗位" },
  { id: "external", content: "外部联系人" },
  { id: "all", content: "所有人" },
  { id: "allExternal", content: "所有外部人", addData: { id: '1', name: '所有外部人', icon: 'Icon-personnel' } },
  // { id: "other", content: "其他人", addData: { id: '1', name: '其他人', icon: 'Icon-personnel' } },
];

const defaultValue: ShareBrowserValueType = [
  {
    // 浏览按钮选择的数据
    id: '1',
    content: '张三',
    obj_id: {
      id: '1',
      content: '张三',
      icon: 'Icon-personnel',
    },
    obj_id_span: '张三',
    icon: 'Icon-personnel',
    // 下拉框选择数据的id和content
    shareKey: 'resource_1',
    objType: "resource",
    objTypeSpan: "人员",
    _entityType: "user"
  },
  {
    // 浏览按钮选择的数据
    id: '19',
    content: '财务部',
    icon: 'Icon-department',
    obj_id: {
      id: '19',
      content: '财务部',
      icon: 'Icon-department',
    },
    obj_id_span: '财务部',
    // 下拉框选择数据的id和content
    shareKey: 'department_19',
    objType: "department",
    objTypeSpan: "部门",
    // 含下级
    has_sub: false,
    // 安全级别
    level: { min: 10, max: 100 },
    _entityType: "dept"
  },
  {
    // 浏览按钮选择的数据
    id: '3',
    content: '维森集团',
    icon: 'Icon-department',
    obj_id: {
      id: '3',
      content: '维森集团',
      icon: 'Icon-department',
    },
    obj_id_span: '维森集团',
    // 下拉框选择数据的id和content
    shareKey: 'department_3',
    objType: "department",
    objTypeSpan: "分部",
    // 含下级
    has_sub: false,
    // 安全级别
    level: { min: 10, max: 100 },
    _entityType: "subcompany"
  },
  {
    // 
    id: '5',
    content: '需求组',
    icon: 'Icon-Group-portrait-o',
    obj_id: {
      id: '5',
      content: '需求组',
      icon: 'Icon-Group-portrait-o',
    },
    obj_id_span: '需求组',
    // 下拉框选择数据的id和content
    shareKey: 'group_5',
    objType: 'group',
    objTypeSpan: '群组',
    _entityType: "group"
  },
  {
    // 浏览按钮选择的数据
    id: '1',
    content: '公司管理员',
    icon: 'Icon-personnel',
    obj_id: {
      id: '1',
      content: '公司管理员',
      icon: 'Icon-personnel',
    },
    obj_id_span: '公司管理员',
    // 下拉框选择数据的id和content
    shareKey: 'role_1',
    objType: "role",
    objTypeSpan: "角色",
    // 安全级别
    level: { min: 10, max: 100 },
    // 角色级别
    role_level: "1",
    role_level_span: "总部",
    _entityType: "user"
  },
  {
    // 浏览按钮选择的数据
    id: '8',
    content: '财务总监',
    icon: 'Icon-personnel',
    obj_id: {
      id: '8',
      content: '财务总监',
      icon: 'Icon-personnel',
    },
    obj_id_span: '财务总监',
    // 下拉框选择数据的id和content
    shareKey: 'position_8',
    objType: "position",
    objTypeSpan: "岗位",
    // 指定总部
    position_level: "1",
    position_level_span: "总部",
    _entityType: "position"
  },
  {
    // 浏览按钮选择的数据
    id: '3',
    content: '前端开发工程师',
    icon: 'Icon-personnel',
    obj_id: {
      id: '3',
      content: '前端开发工程师',
      icon: 'Icon-personnel',
    },
    obj_id_span: '前端开发工程师',
    // 下拉框选择数据的id和content
    shareKey: 'position_3',
    objType: "position",
    objTypeSpan: "岗位",
    // 指定分部
    position_level: "1",
    position_level_span: "指定分部",
    // _jobFieldData: [{ id: '3', content: '维森集团' }]
    _entityType: "position"
  },
  {
    // 浏览按钮选择的数据
    id: '27',
    content: '高级客户经理',
    icon: 'Icon-personnel',
    obj_id: {
      id: '27',
      content: '高级客户经理',
      icon: 'Icon-personnel',

    },
    obj_id_span: '高级客户经理',
    // 下拉框选择数据的id和content
    shareKey: 'position_27',
    objType: "position",
    objTypeSpan: "岗位",
    // 指定部门
    position_level: "2",
    position_level_span: "指定部门",
    _entityType: "position"
    // _jobFieldData: [{ id: '4', content: '客户部' }],
  },
  {
    id: '0',
    content: '所有人',
    icon: "Icon-all02",
    obj_id: {
      id: '0',
      content: '所有人',
      icon: "Icon-all02",
    },
    obj_id_span: '所有人',
    // 下拉框选择数据的id和content
    shareKey: 'all_0',
    objType: "all",
    objTypeSpan: "所有人",
    // 安全级别
    level: { min: 10, max: 100 },
    _entityType: "all"
  },
];
const initLayout = [
  [
    { id: '1', label: '单行文本', items: ['inputProp', 'input'], labelSpan: 6, hide: false, needQuickSearch: true, groupId: 'commonGroup', helpTip: '提示信息', helpTipProps: { placement: 'top' } },
    { id: '2', label: '数字输入', items: ['inputnumber'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '3', label: '下拉选择框', items: ['select'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '4', label: '密码', items: ['password'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '5', label: '单选', items: ['radio'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '6', label: '复选', items: ['checkbox'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '7', label: '评分', items: ['rate'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '8', label: '时间选择器', items: ['timepicker'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '9', label: '开关', items: ['switch'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '10', label: '区间', items: ['scope'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '11', label: '浏览框', items: ['inputProp', 'browser'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '12', label: '搜索框', items: ['search'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '13', label: '颜色选择器', items: ['colorpicker'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '18', label: '日期选择器', items: ['datepicker'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '20', label: '日期时间选择器', items: ['datetimepicker'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
    { id: '21', label: '日期快速筛选', items: ['datequickfilter'], labelSpan: 6, hide: false, groupId: 'commonGroup' },
  ],
]

const groups = [
  {
    "id": "commonGroup",
    "title": "常用分组",
    "visible": true,
    "custom": false
  },
  {
    "id": "g2",
    "title": "其他条件",
    "visible": true,
    "custom": true
  },
]
class SearchAdvancedDemo extends MockDataBrowserBase {
  searchAdvancedStore: SearchAdvancedStore = new SearchAdvancedStore();
  searchAdvancedStore1: SearchAdvancedStore = new SearchAdvancedStore();
  constructor(props: any) {
    super(props);
    this.state = {
      visible: false
    }
  }
  componentDidMount() {
    this.searchAdvancedStore.setState({ initAfterGetField: false });
    this.searchAdvancedStore1.setState({ initAfterGetField: false });
    const init = {
      data: {
        'input': '1',
        'inputProp': 'contain',
      }, items: this.getInitItem(), layout: initLayout, groups, module: 'common', conditionId: '1',
    }
    this.searchAdvancedStore.init(init)
    this.searchAdvancedStore1.init(init)
  }

  getInitItem = () => {
    const initItem: FormItemProps = {
      'input': {
        itemType: "INPUT",
        customParameterName: 'wfTitle',
        customParameters: {
          specialValue: '1',
        }
      },
      'inputProp': {
        itemType: "SELECT",
        condition: true, // 代表该字段为条件关系(高级搜索中使用)
        options: [ // 兼容data和options
          { id: 'contain', content: '包含' },
          { id: 'ncontain', content: '不包含' },
        ],
      },
      'password': {
        itemType: 'PASSWORD',
      },
      'inputnumber': {
        itemType: 'INPUTNUMBER',
      },
      'select': {
        itemType: "SELECT",
        data: [
          { id: 'op1', content: '选项一' },
          { id: 'op2', content: '选项二' },
        ]
      },
      'datepicker': {
        itemType: 'DATEPICKER',
        isRange: true,
        type: 'day',
      },
      'datequickfilter': {
        itemType: 'DATEQUICKFILTER',
      },
      'datetimepicker': {
        itemType: 'DATETIMEPICKER',
      },
      'timepicker': {
        itemType: 'TIMEPICKER',
      },
      'radio': {
        itemType: "RADIO",
      },
      'rate': {
        itemType: 'RATE',
      },
      'checkbox': {
        itemType: "CHECKBOX",
        options: [
          { id: "7831654986932194939", content: "选项1", disabled: false },
          { id: "7831654986932394940", content: "选项2", disabled: false },
          { id: "7831654986932494941", content: "选项3", disabled: false }]
      },
      'switch': {
        itemType: "SWITCH",
      },
      'scope': {
        itemType: 'SCOPE',
      },
      'browser': {
        itemType: 'BROWSER',
        browserBean: { // BROWSER 对应 browserBean
          type: 'demo',
          module: 'common',
          fetchData: this.mockFetchData,
          multiple: true,
        }
      },
      'search': {
        itemType: 'INPUT',
      },
      'colorpicker': {
        itemType: 'COLORPICKER',
      }
    }
    return initItem;
  }

  onVisibleChange = (visible?: boolean) => { // 面板显示/隐藏状态切换回调事件
    console.log('onVisibleChange', visible);
  }

  // 搜索
  onSearch = (datas: SearchDatas) => {
    Dialog.message({ type: 'success', content: '高级搜索面板触发搜索' })
  }
  onSearch1 = (datas: SearchDatas) => {
    Dialog.message({ type: 'success', content: '高级搜索面板（弹窗）触发搜索' })
  }
  // 重置
  onReset = (datas?: FormDatas) => console.log(datas);

  // 取消
  onCancel = () => { }

  // 自定义渲染顶部内容

  customRenderTop = (props: any, content: ReactNode) => {
    return <Row>
      <Col span={12}>
        左侧内容
      </Col>
      <Col span={12}>
        {content}
      </Col>
    </Row>;
  }

  onBlur = (value?: FormDatas, otherParams?: any) => {
    console.log('onBlur', value, otherParams);
  }
  onChange = (value?: FormDatas, otherParams?: any) => {
    console.log('onChange', value, otherParams);
  }
  onClose = () => {
    this.setState({ visible: false });
  }
  showDialog = () => {
    this.setState({ visible: true });
  }
  render() {
    const conditionId = '1'; // 高级搜索唯一值
    const { visible } = this.state as any;
    return (
      <div className={prefixCls}>
        <Panel
          onVisibleChange={this.onVisibleChange}
          defaultVisible={true}
          needRange={true}
          onSearch={this.onSearch}
          onReset={this.onReset}
          onCancel={this.onCancel}
          colSpan={12}
          className={"testPanel"}
          conditionId={conditionId}
          enablePanelEnterSearch
          searchAdvancedStore={this.searchAdvancedStore}
          disableCommonFilter
          onChange={this.onChange}
          onBlur={this.onBlur}
          formProps={{
            onChange: this.onChange,
          }}
        />
        <Button onClick={this.showDialog} className={`${prefixCls}-btn`}>打开弹框</Button>
        <Dialog
          visible={visible}
          onClose={this.onClose}
          title="1级弹框"
          width={900}
          closable
          destroyOnClose
          scale
          icon="Icon--Import-and-export"
          isStopPropagation={false}
        >
          <Panel
            onVisibleChange={this.onVisibleChange}
            defaultVisible={true}
            needRange={true}
            onSearch={this.onSearch1}
            onReset={this.onReset}
            onCancel={this.onCancel}
            colSpan={12}
            className={"testPanel"}
            conditionId={conditionId}
            enablePanelEnterSearch
            searchAdvancedStore={this.searchAdvancedStore1}
            module={'common'}
            onChange={this.onChange}
            onBlur={this.onBlur}
            formProps={{
              onChange: this.onChange,
            }}
          />
        </Dialog>
        <div className={`${prefixCls}-text`}>
          其他组件enter或聚焦影响确认
        </div>
        <FormDemo />
      </div>
    );
  }
}

export default SearchAdvancedDemo;
```

## 后端接口公共组件 API：点击此处

## 前端 API 参数说明如下：

```
为满足PC端快捷搜索输入框及面板单独使用的需求，pc端将高级搜索组件拆分为两个组件。
其中SearchAdvanced为顶部快捷搜索区域及其内部历史搜索等功能, SearchAdvanced.Panel为面板区域。
快捷搜索和面板可使用同一个store进行数据管理。
```

#### SearchAdvanced API 说明

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| searchAdvancedStore | 高级搜索 store | SearchAdvancedStore |  |  |
| onSearch | 搜索事件 | (data: SearchDatas, dataSource: string ) => void |  |  |
| customRenderTop | 自定义输入框顶部内容 | (_: any, top: ReactNode) => ReactNode |  |  |
| leftContent | 自定义输入框左侧内容 | ReactNode |  |  |
| conditionId | 高级搜索唯一标识 | string | 是 |  |
| module | 高级搜索模块接口标识 | string | 是 |  |
| requestHeaderParams | 高级搜索模块接口headers参数 | AnyObj | 是 |  |
| quickSearchInputProps | 快捷搜索输入框自定义属性设置 | InputProps | 否 |  |
| maxNumberOfQuickSearchCondition | 最大快捷搜索条件数 | number | 否 | -1 |
| minNumberOfQuickSearchCondition | 最小快捷搜索条件数 | number | 否 | 1 |
| rightContent | 自定义输入框右侧内容 | ReactNode |  |  |
| quickSearchKey | 快捷搜索主键值（简易模式需设置） | string | 否 |  |
| quickSearchPlaceHolder | 快捷搜索提示信息（简易模式可设置） | string | 否 |  |
| disableHistorySearch | 屏蔽历史搜索功能 | boolean | 否 |  |
| disableCommonFilter | 屏蔽常用筛选功能 | boolean | 否 |  |
| needRange | 是否需要满足以下所有/任一条件选项 | boolean | 否 |  |
| type | 筛选模式 | SearchAdvancedMode | 否 |  |
| disableQuickSearchSetting | 屏蔽快捷搜索字段设置功能 | boolean | 否 |  |
| afterDeleteSnaps | 删除常用筛选回调事件 | (result: any) => void | 否 |  |
| onlyShowIcon | 快捷搜索输入框仅展示图标 | boolean | 否 |  |
| settingDialogProps | 弹框自定义配置 | DialogProps | 否 |  |
| currentModule | 指定当前模块（公用常用筛选权限校验, 对应window.TEAMS.modules） | string | 否 |  |
| simpleSearchTriggerProps | 弹层自定义属性设置(type=simple) | TriggerConfig | 否 |  |
| triggerProps | 弹层自定义属性设置(type !== simple) | TriggerConfig | 否 |  |
| onChooseSnap | 常用筛选项自定义选中回调事件 | (id: string, params: SnapDataType, datas: RequestResult<any>)  => void | 否 |  |
| unChooseSnap | 常用筛选项自定义取消选中回调事件 | (id: string, params: SnapDataType)  => void | 否 |  |
| onCancelSnap | 常用筛选项自定义取消事件，取消常用筛选后直接全部抛给外部处理 | (id: string, params: SnapDataType)  => void | 否 |  |
| historicalSearchExtras | 历史搜索额外内容 | historicalSearchExtras?: ReactNode \| (() => ReactNode) | 否 |  |
| fetchData | 自定义请求数据 | (options: RequestOptionConfig) => RequestPromise | 否 |  |
| hideCondition | 隐藏条件关系字段 | boolean | 否 |  |
| useOnDemandRequest | 是否使用按需请求数据 | boolean | 否 | false |
#### SearchAdvanced.Panel API 说明

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| searchAdvancedStore | 高级搜索 store | SearchAdvancedStore |  |  |
| defaultVisible | 是否默认显示面板 | boolean |  |  |
| onVisibleChange | 面板显示隐藏的回调 | (visible?: boolean) => void |  |  |
| needRange | 是否需要筛选条件范围 | boolean |  |  |
| onSearch | 搜索事件 | (data: SearchDatas, dataSource: string ) => void |  |  |
| onReset | 重置事件 | (data?: FormDatas) => void |  |  |
| onCancel | 取消事件 | (data?: FormDatas) => void |  |  |
| conditionId | 高级搜索唯一标识 | string | 是 |  |
| module | 高级搜索模块接口标识 | string | 是 |  |
| requestHeaderParams | 高级搜索模块接口headers参数 | AnyObj | 是 |  |
| colSpan | 自定义模式表单 的 特殊布局, 仅在分组布局自定义情况下使用，即 group 内 custom=true | number |  |  |
| onChange | 字段值改变事件 | (value?: FormDatas, otherParams?: any) => void | 否 |  |
| onBlur | 字段值失去焦点事件 | (value?: FormDatas, otherParams?: any) => void | 否 |  |
| formProps | 表单自定义属性设置 | FormCustomProps | 否 |  |
| mode | 面板弹出层模式 | string | 否 | mode="popup"，默认不设置 |
| disableCommonFilter | 屏蔽常用筛选功能 | boolean | 否 |  |
| customTopContent | 自定义顶部内容 | string \| ReactNode | 否 |  |
| customSettingContent | 业务自定义设置项内容 | string \| ReactNode | 否 |  |
| saveAsPublic | 启用常用筛选存为公用功能 | boolean | 否 | false |
| saveAsDefault | 启用常用筛选存为默认功能 | boolean | 否 | false |
| currentModule | 指定当前模块（公用常用筛选权限校验, 对应window.TEAMS.modules） | string | 否 |  |
| setUseScope | 启用常用筛选使用范围功能 | boolean | 否 |  |
| afterSaveSnaps | 保存常用筛选回调事件 | (result: any, otherParams: any) => void | 否 |  |
| afterDeleteSnaps | 删除常用筛选回调事件 | (result: any) => void | 否 |  |
| settingDialogProps | 弹框自定义配置 | DialogProps | 否 |  |
| disabledCustomDateSaveFormat | 禁用自定义日期保存格式功能 | boolean | 否 | true |
| buttons | 自定义底部按钮组 | ReactNode | 否 |  |
| disabledCommonConditionSetting | 禁用常用条件设置功能 | boolean | 否 |  |
| onChooseSnap | 常用筛选项自定义选中回调事件 | (id: string, params: SnapDataType, datas: RequestResult<any>)  => void | 否 |  |
| unChooseSnap | 常用筛选项自定义取消选中回调事件 | (id: string, params: SnapDataType)  => void | 否 |  |
| customRenderRange | 自定义渲染条件范围设置区 | (_: any, ele: ReactNode) => ReactNode | 否 |  |
| enableSnapDescription | 启用常用筛选描述信息 | boolean | 否 |  |
| fetchData | 自定义请求数据 | (options: RequestOptionConfig) => RequestPromise | 否 |  |
| disableCommonHide | 禁用全局关闭搜索面板设置 | boolean | 否 |  |
| hideCondition | 隐藏条件关系字段 | boolean | 否 |  |
| enablePanelEnterSearch | 是否启用回车触发面板搜索 | boolean | 否 |  |
| useOnDemandRequest | 是否启用按需请求数据 | boolean | 否 | false |
| onRangeChange | 自定义条件范围选项更新回调事件 | (value: SelectValueType) => void | 否 |  |
| rangeSelectProps | 自定义条件范围选择组件配置 | SelectProps | 否 |  |
#### SearchAdvanced Store API 说明

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| init | 初始化高级搜索面板 | (allDatas: SearchAdvancedInitAllDatas) => Promise | 是 |  |
| getSearchValue | 获取高级搜索面板数据 |  |  |  |
| filterUselessDatas | 过滤不展示的datas数据(用于getSearchValue) | boolean | 否 | true |
| setState | 更新store内参数 | (params: Partial) => void | 否 |  |
#### SearchAdvanced Store 实例化属性

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| setSnapSavingCondition | 设置常用筛选保存条件(能否触发保存) | ((store: SearchAdvancedStoreType) => boolean) \| undefined | 否 |  |
| customFilterFormDatas | 拦截form数据，自定义过滤数据 | ((datas: FormDatas, otherParams: any) => FormDatas) \| undefined | 否 |  |
| setPublicSnapSavingAuth | 自定义存为公用常用筛选权限 | ((currentModule?: string) => boolean) \| undefined | 否 |  |
##### filterUselessDatas具体说明

```
1.filterUselessDatas默认为true，作用于getSearchValue方法
2.filterUselessDatas为true，getSearchValue方法返回的数据会过滤掉当前布局未展示的字段值
3.如业务有需求搜索时需带出当前未展示的数据，可通过setState({ filterUselessDatas: false })修改默认配置
```

#### SearchAdvancedInitAllDatas 说明

```
interface SearchAdvancedInitAllDatas extends FormInitAllDatas {
  module: string,
  conditionId: string,
  requestHeaderParams?: AnyObj;
  layout: Array<SearchAdvancedFormLayoutType>,
  fetchData?: (options: RequestOptionConfig) => RequestPromise;
}
SearchAdvancedInitAllDatas继承FormInitAllDatas的所有配置，与Form组件一致，需要layout、items、groups、data，另新增module(模块标识)、conditionId(高级搜索标识)、requestHeaderParams(接口headers参数)、fetchData(自定义请求数据)
```

#### SearchAdvancedMode 说明

```
type SearchAdvancedMode = 'normal' | 'simple' | 'popup';
```

### 组件参数特殊说明如下：

#### 一、onSearch 方法 dataSource 参数说明

##### 由于 pc 端高级搜索组件拆分为输入框及面板两个组件，onSearch 为一个，业务无法区分数据来源

方案一：onSearch 方法 新增一个参数 dataSource 作为触发 onSearch 动作的标识，dataSource 表示 onSearch 触发的位置，fromQuickSearch 代表 快捷搜索，fromSearchPanel 代表搜索面板

方案二：业务使用时可考虑在使用输入框/面板组件时，处理成子组件的形式，则无需使用 dataSource，即在未新增 dataSource 的版本可这么处理

```
 class Parent extends React.Component {
   render() {
     <SearchAdvancedParent onSearch={this.onSearch} dataSource="fromQuickSearch" />
   }
 }

 class SearchAdvancedParent extends React.Component {
   onSearch = (searchValue) => {
     const { onSearch, dataSource } = this.props;
     onSearch(searchValue, dataSource);
   }
   render() {
     return (
       <SearchAdvanced onSearch={this.onSearch} />
     )
   }
 }
```

#### 二、layout 及 items 需支持配置字段别名及自定义参数集合

##### layout、items、group、data 参数配置基本规则与 Form 组件一致，新增特性如下：

[layout、items、group、data 参数配置详情查看 Form 组件文档](/ui/form)

##### layout 仅支持别名配置

```
通过customParameterName配置layout的别名
[
  [
    { id: '1', label: '单行文本', items: ['inputProp', 'input'], labelSpan: 6, groupId: 'commonGroup', hide: false, needQuickSearch: true, customParameterName: 'title' },
  ]
]
```

##### items 支持配置字段别名及自定义参数集合

```
通过customParameterName配置items的别名，通过customParameters设置items的自定义参数集合
{
  'input': {
    itemType: "INPUT",
    customParameterName: 'wfTitle',
    customParameters: {
      specialValue: '1',
    }
  }
}
```

##### items 支持配置日期区间字段自定义数据返回格式

```
标准组件设计：日期区间字段受控数据分为['2021-11-15', '2021-11-15']及'today'两种格式，store.getSearchValue 返回的数据格式以item(字段配置)中配置的selectedKeyPrior为准，同日期组件受控逻辑。

存在的问题：业务反馈，后端无法兼容同一字段存在两种数据格式的情况，而组件内的业务逻辑需要按照以上方式处理，因此item(字段配置)内新增配置realDateValue：true：只取数组(value)、false只取selectedKey，
不传根据目前的逻辑走

例以下两种字段配置，datepicker返回值以selectedKey为准(字符串格式)，datepicker2返回值以value为准(数组格式)
'datepicker': {
    itemType: 'DATEPICKER',
    isRange: true,
    type: 'day',
    selectedKeyPrior: true,
  },

'datepicker2': {
    itemType: 'DATEPICKER',
    isRange: true,
    type: 'day',
    selectedKeyPrior: true,
    otherParams: {
      realDateValue: true,
    }
  },
```

#### 三、layout 数据中设置 custom=true，表示该字段仅在其他搜索条件内出现

#### 四、关于高级搜索布局样式处理

```
1.常用分组需实现删除常用条件设置项，实现各条件自动补位，可通过配置布局处理，具体请参考demo。仅需将常用分组的所有布局放置一个数组内即可，通过colSpan来处理布局
2.高级搜索包含/不包含等条件项，需在对应的items配置中设置condition: true，代表该字段为条件关系(条件关系在高级搜索判空处理时会视作非高级搜索条件字段)，才会按照特定布局处理
3.常用分组的groupId必须为commonGroup，请按照后端接口规定处理
```

#### 五、关于高级搜索快捷搜索区弹出面板（历史记录、常用筛选、快捷搜索设置）显示说明

```
面板显示的情况如下：
1.未同时禁用历史搜索、常用筛选及快捷搜索字段自定义设置功能
2.有历史搜索记录或常用筛选数据：表示用户首次点击输入框，不展示弹层
3.快捷搜索输入框聚焦并无输入值
```

#### 六、关于高级搜索表单重置功能的说明

```
1、一般情况重置：支持表单恢复到初始化状态(与Form一致)
2、选中高级搜索数据时重置：恢复到选中常用筛选的情况，即重置后展现为当前选中的常用筛选保存的布局和数据，非默认初始化布局和数据。
3、高级搜索快捷输入框右边的图标说明：
（1）颜色区分：默认颜色代表表单面板未展示，蓝色代表面板展示。对于移动端，能够看到图标的均为未打开面板的情况，因此颜色也用作区分表单值是否被改变功能。
（2）图标区分：图标用于区分当前表单字段值是否有被改变，即不同于默认值。
```

#### 七、关于高级搜索老数据兼容方案

注意：前端组件仅提供布局转换方案，数据转换需接口配合处理

```
1.转换方法统一在searchAdvancedStore.transDatasStore内实现
2.transOldDatas方法：et高级搜索常用筛选老数据转换(仅处理布局) 
  2.1 et 老数据格式例子
    {
      createTimes: [ // createTimes --- layout的id
        { value: ['2021-07-01'] } // value ---- items的key
      ]
    }
  2.2 老数据转换后会自动调用内部的saveOldData方法，存储数据至常用筛选(主要用于常用筛选)，若不需要，则第二个参数(disabledUpdateData)传true
3.transCustomLayout方法：常用筛选自定义布局转换
  3.1常用筛选保存默认layout、items、groups及所有的datas数据
  3.2数据量过大，影响接口速度，则自定义布局从datas内推
  3.3自定义布局指分组custom=true对应的layout布局
  3.4若业务转换的老数据格式与常用筛选默认布局格式一致，则可采用该方法生成其他条件组的自定义布局
  3.5该方法返回生存的其他条件组布局及当前最新的items，因此调用者需自行更新当前表单
    const {
       searchAdvancedStore: {
        formStore: { initForm, setAllCustomLayout },
        transDatasStore: { transCustomLayout },
      },
    } = this.props;
    const { customLayout, items } = transCustomLayout(content); // 转换布局
    initForm({ ...content, items }); // 初始化表单
    customLayout && setAllCustomLayout(customLayout, true); // 更新其他条件组自定义布局
```

#### searchAdvancedStore.transDatasStore API说明

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| transOldDatas | et高级搜索常用筛选老数据转换(仅处理布局) | (oldDatas: AnyObj, disabledUpdateData?: boolean) => void | 否 |  |
| transCustomLayout | 常用筛选自定义布局转换 | (content: FormInitAllDatas) => { customLayout, items } | 否 |  |
| keepOriginData | 过滤数据时，无字段展示，保留传入的data数据 | boolean | 否 | true |
| enableLatestFormConfig | 是否启用最新布局及字段配置(用于常用筛选数据回显) | boolean | 否 | 默认存为版本 |
```
keepOriginData设置为false，当无展示字段时，保存常用筛选及返回的数据会过滤条件关系字段值(即item中设置了condition=true的字段)
```

##### enableLatestFormConfig说明

```
1.用于常用筛选数据回显
2.默认常用筛选数据存为版本，再次选择时布局及字段配置（layout、items）数据为当时保存的内容
3.通过searchAdvancedStore.transDatasStore.setState({ enableLatestFormConfig: true }) 启用最新布局及字段配置后，选中常用筛选，数据展示以当前最新的默认布局及字段配置为准
4.使用场景：如高级搜索保存常用后修改字段名称(layout配置中的label参数)，之后再查看常用条件的字段名称需显示当前最新的字段名称
```

#### 八、关于高级搜索conditionId、module、requestHeaderParams和fetchData的设置说明

```
一、组件结构简单介绍
1.pc端高级搜索组件一共分成两部分，快捷搜索区域及高级搜索面板区域，可分开单独使用(目前大部分场景)。
2.高级搜索组件内部拆分多个小组件，每个组件处理独立的需求，但各个组件内部数据有关联，因此通过searchAdvancedStore统一管理
3.保存常用条件排序、默认显示等用户自定义行为的请求与初始化高级搜索表单之前处理，因此于searchAdvancedStore.init方法内处理

二、关于module的使用
由于pc端组件拆分成两个，因此当快捷搜索和高级搜索面板采用同一个searchAdvancedStore统一管理数据时，需两边都传

三、关于conditionId的使用
1.由于pc端组件拆分成两个，因此当快捷搜索和高级搜索面板采用同一个searchAdvancedStore统一管理数据时，需两部都传
2.业务层面使用，conditionId为接口返回，存在首次获取历史搜索记录及常用筛选数据不准确的问题(未能在didmount的时候获取conditionId)。
  因此组件内部做了受控，当传给组件的conditionId前后有变化后，会更新conditionId，并重新获取历史搜索记录及常用筛选数据。

四、由于用户自定义行为的接口需要module及conditionId，因此，init方法内部也需要传入相应的参数

五、requestHeaderParams同module

六、fetchData同module
```

#### searchAdvancedStore.commonFilterStore API说明

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| needSaveSearchValue | 常用筛选存储searchValue数据 | boolean | 否 | false |
| snapCustomData | 常用筛选保存自定义数据 | any | 否 |  |
| setState | 更新数据 | (params: Partial<CommonFilterStoreType>) => void | 否 |  |
| checkSnaps | 选中常用筛选数据 | (id: string) => Promise<any> | 否 |  |
| unCheckSnaps | 取消选中常用筛选 | () => void | 否 |  |
