# @beisen-phoenix/search-form

> ## 概述

Latest version **3.3.55** (published 2019-11-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-phoenix/search-form
pnpm add @beisen-phoenix/search-form
yarn add @beisen-phoenix/search-form
bun add @beisen-phoenix/search-form
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.3.55 |
| Published | 2019-11-25 |
| First published | 2019-02-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 30 |
| Unpacked size | 248.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | beisencorp |

## Links

- npm: https://www.npmjs.com/package/@beisen-phoenix/search-form
- npm.io page: https://npm.io/package/@beisen-phoenix/search-form

## Dependencies (30)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) ^3.0.0
- [lodash.isequal](https://npm.io/package/lodash.isequal.md) ^4.5.0
- [lodash.clonedeep](https://npm.io/package/lodash.clonedeep.md) ^4.5.0
- [@beisen-phoenix/icon](https://npm.io/package/@beisen-phoenix/icon.md) ^3.2.54
- [@beisen-phoenix/input](https://npm.io/package/@beisen-phoenix/input.md) ^3.3.55
- [@beisen-phoenix/button](https://npm.io/package/@beisen-phoenix/button.md) ^3.3.55
- [@beisen-phoenix/drawer](https://npm.io/package/@beisen-phoenix/drawer.md) ^3.3.55
- [@beisen-phoenix/lookup](https://npm.io/package/@beisen-phoenix/lookup.md) ^3.3.55
- [@beisen-phoenix/select](https://npm.io/package/@beisen-phoenix/select.md) ^3.3.55
- [@beisen-phoenix/tooltip](https://npm.io/package/@beisen-phoenix/tooltip.md) ^3.3.55
- [@beisen-phoenix/department](https://npm.io/package/@beisen-phoenix/department.md) ^3.3.55
- [@beisen-phoenix/field-area](https://npm.io/package/@beisen-phoenix/field-area.md) ^3.3.55
- [@beisen-phoenix/field-user](https://npm.io/package/@beisen-phoenix/field-user.md) ^3.3.55
- [@beisen-phoenix/date-picker](https://npm.io/package/@beisen-phoenix/date-picker.md) ^3.3.55
- [@beisen-phoenix/field-input](https://npm.io/package/@beisen-phoenix/field-input.md) ^3.3.55
- [@beisen-phoenix/select-list](https://npm.io/package/@beisen-phoenix/select-list.md) ^3.3.55
- [@beisen-phoenix/style-token](https://npm.io/package/@beisen-phoenix/style-token.md) ^3.3.55
- [@beisen-phoenix/time-picker](https://npm.io/package/@beisen-phoenix/time-picker.md) ^3.3.55
- [@beisen-phoenix/common-utils](https://npm.io/package/@beisen-phoenix/common-utils.md) ^3.3.55
- [@beisen-phoenix/field-lookup](https://npm.io/package/@beisen-phoenix/field-lookup.md) ^3.3.55
- [@beisen-phoenix/input-number](https://npm.io/package/@beisen-phoenix/input-number.md) ^3.3.55
- [@beisen-phoenix/area-selector](https://npm.io/package/@beisen-phoenix/area-selector.md) ^3.3.55
- [@beisen-phoenix/auto-complete](https://npm.io/package/@beisen-phoenix/auto-complete.md) ^3.3.55
- [@beisen-phoenix/field-dropdown](https://npm.io/package/@beisen-phoenix/field-dropdown.md) ^3.3.55
- [@beisen-phoenix/person-selector](https://npm.io/package/@beisen-phoenix/person-selector.md) ^3.3.55
- [@beisen-phoenix/unmodeled-layer](https://npm.io/package/@beisen-phoenix/unmodeled-layer.md) ^3.3.55
- [@beisen-phoenix/date-time-picker](https://npm.io/package/@beisen-phoenix/date-time-picker.md) ^3.3.55
- [@beisen-phoenix/field-department](https://npm.io/package/@beisen-phoenix/field-department.md) ^3.3.55
- [@beisen-phoenix/field-date-time-picker](https://npm.io/package/@beisen-phoenix/field-date-time-picker.md) ^3.3.55

## Recent versions

- 3.3.55 (latest) — 2019-11-25
- 3.2.44-rc.1 (rc) — 2019-10-24
- 3.3.54 — 2019-11-25
- 3.3.53 — 2019-11-25
- 3.3.52 — 2019-11-24
- 3.3.51 — 2019-11-23
- 3.3.50 — 2019-11-22
- 3.3.49 — 2019-11-22
- 3.3.48 — 2019-11-22
- 3.3.47 — 2019-11-22
- 3.3.46 — 2019-11-22
- 3.3.45 — 2019-11-21
- 3.3.43 — 2019-11-21
- 3.3.42 — 2019-11-21
- 3.3.41-beta.1 — 2019-11-21
- … 261 more at https://npm.io/package/@beisen-phoenix/search-form/versions

## README

# SearchForm

## 概述

SearchForm 筛选表单

规则说明
1、【常用筛选】最多配置5个，更多收到【高级筛选】中；
2、除「常用筛选」外，如果还有更多筛选条件没有展示出来，显示「高级筛选」按钮，如果没有，则不显示「高级筛选」按钮；
3、用户在「高级筛选」中的某个筛选项填充值，点击确定弹层关闭后，该筛选项会出现在「常用筛选」后面，一次排列，个数不限，一行显示不下时，换行显示；
4、当筛选项中有填充值时，显示「清空已选」按钮，如果所有字段都没有值则不显示；点击「清空已选」后，清空所有已选值；

## API

| 参数          | 说明                                              | 类型     | 默认值 | 必须 |
| ------------- | ------------------------------------------------- | -------- | ------ | ---- |
| fields        | 筛选表单字段数据                                  | IField[]    | 无     | Yes  |
| advanceFields | 筛选表单高级模式下字段数据                                  | IField[]    | 无     | No  |
| doubleColumns | 高级模式下是否以两列显示                          | Boolean  | false  | No   |
| zIndex        | 外部容器的层级，高级模式下的推屏会在此基础上加 10 | Number   | 无     | No   |
| extraCls      | 自定义的 className                                | String   | 无     | No   |
| onChange      | 筛选表单选中值发生变化后的回调，**该回调中需要同步fields,advanceFields：将接收到的fields赋值给fields,advanceFields即可** | ({items?: Array,fields: Array}) => void | 无     | Yes   |
| onAdvanceFieldChange | 筛选表单高级模式下字段发生变化后的回调,**该回调中需要同步advanceFields：将接收到的fields赋值给advanceFields即可** | (fields) => void | 无     | No   |
| groups      | 分组信息 | IGroup[] | 无     | No  |

## IField 字段数据格式

传人的字段数据fields、advanceFields是数组，每一项的结构如下：

| 参数 | 说明 | 类型 | 默认值 | 必须 |
| --- | --- | --- | --- | --- |
| name | 字段编码,字段唯一标识 | string | 无 | Yes |
| label | 字段显示名称 | string | 无 | Yes |
| type | 字段类型 | string | 无 | Yes |
| order | 字段序号 | number | 无 | No |
| normalMode | 是否配置到常用模式中 | boolean | 无 | No |
| controlProps | 字段的配置信息，**不同组件有不同的属性,详见下面各字段说明（没有列在字段说明中的配置均不支持）** | object | 无 | No |
| data | 字段选中数据，可作为默认值传入 | {label: string,value: string} | 无 | No |
| dataSource | 数据源 | array | 无 | No |
| dataSourceUrl | 数据源地址 | string | 无 | No |

## 字段类型Type

| 字段中文名 | type | 内置验证 |
| --- | --- | --- |
| 单行文本 | `BC_TextBox` | 无 |
| 文本区 | `BC_TextArea` | 无 |
| 电子邮件 | `BC_Email` | 搜索时，支持格式验证，释放焦点或点击确定按钮报错，提示文案  “请输入正确的邮箱格式”|
| URL | `BC_Url` | 搜索时，支持格式验证，释放焦点或点击确定按钮报错，提示文案  “请输入以http://或https://开头的网址” |
| 整数、长整数、小数、双精度小数 | `BC_DigitText` | 无 |
| 是否、单选列表 | `BC_RadioList` | 无 |
| 复选列表、下拉列表 | `BC_DropDownList` | 无 |
| AutoComplete | `BC_AutoComplete` | 无 |
| 树状选择框 | `BC_PopTree` | 无 |
| 日期 | `BC_Date` | 无 |
| 日期范围 | `BC_DateRange` | 无 |
| 日期时间 | `BC_DateTime` | 无 |
| 日期 | `BC_Date` | 无 |
| 日期范围 | `BC_DateRange` | 无 |
| 日期时间 | `BC_DateTime` | 无 |
| 日期时间范围 | `BC_DateTimeRange` | 无 |
| 年月 | `BC_Month` | 无 |
| 年月范围 | `BC_YearsRange` | 无 |
| 时分 | `BC_Time` | 无 |
| 时分范围 | `BC_TimeRange` | 无 |
| 员工选择（单个、多个） | `BC_UserSelect` | 无 |
| 地区单选、多选 | `BC_PopArea` | 无 |
| LookUp单选、多选  | `BC_LookUpV2` | 搜索框最多输入200个字符,超过200 的字符被截断，并显示提示文字，3s消失 |
| 部门单选、多选 | `BC_Department` | 无 |

fields、advanceFields属性示例

```javascript
[
  {
    name: 'dev01',
    type: 'BC_TextBox',
    order: 1,
    normalMode: true,
    controlProps: {
      maxLength: 10
    },
    label: '输入框',
    data: {
      label: '',
      value: ''
    }
  },{
    name: 'dev03',
    type: 'BC_AutoComplete',
    normalMode: false,
    order: 3,
    label: '自动完成',
    data: {
      label: '',
      value: ''
    },
    // 数据源地址
    dataSourceUrl:
      'https://www.easy-mock.com/mock/5d5a850c4c0d364290effa1d/cmp/auto-complete#!method=get',
    dataSource: []
  }
]
```

## IGroup 分组项数据格式

传人的分组信息是数组，每一项的结构如下：

| 参数 | 说明 | 类型 | 默认值 | 必须 |
| --- | --- | --- | --- | --- |
| id | 组ID | string | 无 | Yes |
| title | 组名 | string | 无 | No |
| showTitle | 是否显示组标题 | string | 无 | No |
| fields | 该组下包含的字段序号集合 | array | 无 | Yes |

groups属性示例

```javascript
[
  {
    id: 'group01',
    title: '分组一',
    showTitle: true,
    fields: ['1', '2', '3', '4', '5']
  },
  {
    id: 'group02',
    title: '分组二',
    showTitle: true,
    fields: ['6', '7', '8', '9', '10', '11', '12', '13']
  }
]
```

## 说明

1. 组件为受控组件，change事件后组件会将当前字段数据放入回调参数中，使用时按需处理fields再回传给组件即可。

2. 筛选包含字段及对应组件：筛选字段均为内置，按照设置的type做映射。

【一】「单行文本」「文本区」「电子邮件」「URL」
  这些字段对应的组件简单模式下均为「文本输入弹层」pop-search，高级模式下对应的为「输入框」input

controlProps

| 参数 | 说明 | 类型 | 默认值 | 必须 |
| --- | --- | --- | --- | --- |
| maxLength | 输入的最大字符数。搜索时，输入框支持配置最大数值，释放焦点或点击确定按钮报错，提示文案  “最多支持输入N字符” | number | 无 | No |

```javascript
{
  name: 'dev01',
  type: 'BC_TextBox',
  order: 1,
  normalMode: true,
  controlProps: {
    // 输入框相关控件的最大字符数
    maxLength: 10
  },
  label: '输入框',
  data: {
    label: '',
    value: ''
  }
}
```

【二】「整数」「长整数」「小数」「双精度小数」BC_DigitText
这些字段对应的组件简单模式下均为「数字输入弹层」，高级模式下对应的为「数字输入框」input-number


controlProps

| 参数 | 说明 | 类型 | 默认值 | 必须 |
| --- | --- | --- | --- | --- |
| maxLength | 输入的最大字符数。搜索时，输入框支持配置最大数值，释放焦点或点击确定按钮报错，提示文案  “最多支持输入N字符” | number | 无 | No |
| max | 输入的最大值。搜索时，支持配置可输入的最大值，输入数值超出范围，释放焦点或点击确定按钮报错，提示文案  “请输入正确数值” | number | 无 | No |
| min | 输入的最小值。搜索时，支持配置可输入的最小值，输入数值没有达到最小值，释放焦点或点击确定按钮报错，提示文案  “请输入正确数值” | number | 无 | No |

```javascript
{
  name: 'dev02',
  type: 'BC_DigitText',
  order: 2,
  normalMode: true,
  controlProps: {
    // 最大字符数
    maxLength: 10,
    // 数字最小值
    min: 0,
    // 数字最大值
    max: 10000
  },
  label: '数字输入框',
  data: {
    label: '',
    value: ''
  }
}
```
【三】「是否」「单选列表」BC_RadioList「复选列表」「下拉列表」BC_DropDownList字段
这些字段对应的组件简单模式下均为「复选下拉弹层」，高级模式下对应的为「可输入选择器」+「复选下拉弹层」

数据源：为数组，每一项格式如下

| 参数 | 说明 | 类型 | 默认值 | 必须 |
| --- | --- | --- | --- | --- |
| label | 显示名称 | string | 无 | Yes |
| value | 字段值 | string | 无 | Yes |


普通模式 controlProps

| 参数 | 说明 | 类型 | 默认值 | 必须 |
| --- | --- | --- | --- | --- |
| showSearch | 下拉弹层中“搜索框”可配置是否显示 | boolean | 数据源超过8项时为true | No |
| showCheckAll | 下拉弹层中“搜索框”是否显示 | boolean | 数据源超过8项时为true | No |
| showSearch | 复选下拉弹层中“全选”是否显示 | boolean | 数据源超过8项时为true | No |
| allowSearchNull | 是否开启空值搜索，开启后，选项会添加空值选项：空（未填写） | boolean | true | No |

高级模式 controlProps

| 参数 | 说明 | 类型 | 默认值 | 必须 |
| --- | --- | --- | --- | --- |
| showCheckAll | 下拉弹层中“搜索框”是否显示 | boolean | 数据源超过8项时为true | No |
| allowSearchNull | 是否开启空值搜索，开启后，选项会添加空值选项：空（未填写） | boolean | true | No |

```javascript
{
  name: 'dev03',
  type: 'BC_DropDownList',
  order: 3,
  normalMode: true,
  controlProps: {
    // 是否显示搜索框
    showSearch: false,
    // 是否显示全选
    showCheckAll: false,
    // 是否开启空值搜索
    allowSearchNull: false
  },
  label: '下拉框',
  data: {
    label: '',
    value: ''
  },
  // 下拉多选的数据源
  dataSource: [
    {
      label: '专科',
      value: 'zhuanke'
    },
    {
      label: '本科',
      value: 'benke'
    },
    {
      label: '硕士',
      value: 'shuoshi'
    },
    {
      label: '博士',
      value: 'boshi'
    }
  ]
}
```

【四】「AutoComplete」BC_AutoComplete 字段
字段对应的组件简单模式、高级模式下对应的为AutoComplete

数据源返回数据格式： string[]

```javascript
{
  name: 'dev04',
  type: 'BC_AutoComplete',
  normalMode: false,
  order: 4,
  label: '自动完成',
  data: {
    label: '',
    value: ''
  },
  // 数据源地址
  dataSourceUrl:
    'https://www.easy-mock.com/mock/5d5a850c4c0d364290effa1d/cmp/auto-complete#!method=get'
}
```

【五】「树状选择框」BC_PopTree 字段
数据源返回数据格式详见部门组件：http://cmp.italent-inc.cn/details?id=1557

```javascript
{
  name: 'dev05',
  type: 'BC_PopTree',
  normalMode: false,
  order: 5,
  label: '树形选择框',
  data: {
    label: '',
    value: ''
  },
  // 数据源地址
  dataSourceUrl:
    'https://www.easy-mock.com/mock/5d5a850c4c0d364290effa1d/cmp/tree-selector#!method=get'
}
```

【六】「日期」BC_Date BC_DateRange
「日期」字段可配置成 “单日期”和“日期范围”两种情况

```javascript
{
  name: 'dev07',
  type: 'BC_Date',
  order: 7,
  normalMode: false,
  controlProps: {
    dateTimeFormat: 'YYYY/MM/DD'
  },
  label: '日期',
  data: {
    label: '',
    value: ''
  }
}
```

```javascript
{
  name: 'dev11',
  type: 'BC_DateRange',
  order: 11,
  normalMode: false,
  label: '日期范围',
  data: {
    label: '',
    value: ''
  }
}
```
【七】「日期时间」 BC_DateTime BC_DateTimeRange
「日期时间」字段可配置成 “单日期时间”和“日期时间范围”两种情况

```javascript
{
  name: 'dev06',
  type: 'BC_DateTime',
  order: 6,
  normalMode: false,
  controlProps: {
    // 日期时间格式，具体参考moment，默认就是YYYY/MM/DD HH:mm:ss
    dateTimeFormat: 'YYYY/MM/DD HH:mm:ss'
  },
  label: '日期时间',
  data: {
    label: '',
    value: ''
  }
}
```

```javascript
{
  name: 'dev10',
  type: 'BC_DateTimeRange',
  order: 10,
  normalMode: false,
  label: '日期时间范围',
  data: {
    label: '',
    value: ''
  }
}
```
【八】「年月」BC_Month BC_YearsRange
「年月」字段可配置成 “单年月”和“年月范围”两种情况

```javascript
{
  name: 'dev08',
  type: 'BC_Month',
  order: 8,
  normalMode: false,
  controlProps: {
    dateTimeFormat: 'YYYY/MM'
  },
  label: '年月',
  data: {
    label: '',
    value: ''
  }
}
```

```javascript
{
  name: 'dev12',
  type: 'BC_YearsRange',
  order: 12,
  normalMode: false,
  label: '年月范围',
  data: {
    label: '',
    value: ''
  }
}
```

【九】「时分」BC_Time BC_TimeRange
「时分」字段可配置成 “时分”和“时分范围”两种情况

```javascript
{
  name: 'dev09',
  type: 'BC_Time',
  order: 9,
  normalMode: false,
  controlProps: {
    dateTimeFormat: 'HH:mm:ss'
  },
  label: '时分',
  data: {
    label: '',
    value: ''
  }
}
```

```javascript
{
  name: 'dev13',
  type: 'BC_TimeRange',
  order: 13,
  normalMode: false,
  label: '时分范围',
  data: {
    label: '',
    value: ''
  }
}
```

【十】「员工选择（单个）」「员工选择（多个）」BC_UserSelect

普通模式 controlProps

| 参数 | 说明 | 类型 | 默认值 | 必须 |
| --- | --- | --- | --- | --- |
| apiPath | 接口请求前缀，形如(http://www.italent-inc.cn)  | string | 无 | yes(仅在使用内置APi模式下需要) |
| tenantId | BSGlobal.tenantInfo中的Id | string、number | 无 |yes(仅在使用内置APi模式下需要) |
| userId | BSGlobal.loginUserInfo中的Id | string、number | 无 | yes(仅在使用内置APi模式下需要) |
| allowSearchNull | 是否配置允许搜索"空（未填写）"  |    boolean | 无 | no |
| isMultiple | 是否复选，单选时展示为人员普通模式，配置为复选时组件展示为高级模式  |    boolean | 无 | no |
| dataProvideByExternalPromise | 组件是否使用外部数据  | boolean | false | no | 
| contactPromise | 外部数据-常用联系人函数（返回promise）| ()=>Promise | 无 | no |
| searchPromise | 外部数据-search函数（返回promise）| (string)=>Promise | 无 | no |

高级模式 controlProps

| 参数 | 说明 | 类型 | 默认值 | 必须 |
| --- | --- | --- | --- | --- |
| apiPath | 接口请求前缀，形如(http://www.italent-inc.cn)  | string | 无 | yes(仅在使用内置APi模式下需要) |
| tenantId | BSGlobal.tenantInfo中的Id | string、number | 无 |yes(仅在使用内置APi模式下需要) |
| userId | BSGlobal.loginUserInfo中的Id | string、number | 无 | yes(仅在使用内置APi模式下需要) |
| allowSearchNull | 是否配置允许搜索"空（未填写）"  |    boolean | 无 | no |
| isMultiple | 是否复选，单选时展示为人员普通模式，配置为复选时组件展示为高级模式  |    boolean | 无 | no |
| dataProvideByExternalPromise | 组件是否使用外部数据  | boolean | false | no | 
| contactPromise | 外部数据-常用联系人函数（返回promise）| ()=>Promise | 无 | no |
| staffPromise | 外部数据-我的下属函数（返回promise）| ()=>Promise |  无 | no |
| departmentPromise | 外部数据-所有部门函数（返回promise）| ()=>Promise |  无 | no |
| departmentStaffPromise | 外部数据-部门下面的员工函数（返回promise）| (staffId)=>Promise | 无 | no |
| searchPromise | 外部数据-search函数（返回promise）| (string)=>Promise | 无 | no |

#### 注意
数据源返回数据格式详见人员组件说明：http://cmp.italent-inc.cn/details?id=1269

```javascript
{
  name: 'dev14',
  type: 'BC_UserSelect',
  order: 14,
  normalMode: false,
  controlProps: {
    host: '//www.italent.link',
    tenantId: '100013',
    userId: '100766253',
    isMultiple: false
  },
  label: '人员选择',
  data: {
    label: '',
    value: ''
  }
}
```

【十一】地区单选 地区多选 BC_PopArea

controlProps

| 参数 | 说明 | 类型 | 默认值 | 必须 |
| --- | --- | --- | --- | --- |
| isMultiple | 单选/多选 | boolean | false | Yes |

```javascript
{
  name: 'dev15',
  type: 'BC_PopArea',
  order: 15,
  normalMode: false,
  controlProps: {},
  label: '地区选择',
  data: {
    label: '',
    value: ''
  }
}
```

【十二】LookUp单选 多选 BC_LookUpV2
搜索框验证规则：最多输入200个字符,超过200 的字符被截断，并显示提示文字，3s消失

普通模式\高级模式 controlProps

| 参数 | 说明 | 类型 | 默认值 | 必须 |
| --- | --- | --- | --- | --- |
| isMultiple | 单选/多选 | boolean | false | Yes |
| isAvator| 简单模式下是否显示头象 | boolean | false |


```javascript

{
  name: 'dev101',
  type: 'BC_LookUpV2',
  order: '101',
  normalMode: true,
  controlProps: {
    isMultiple: false,
    advanceParamUrl:
      'http://10.129.7.191:7300/mock/5d78c8dc4353610020816045/example/lookup-selector-advanced',
    tableMeta: {
      
    }
  },
  label: 'lookup单选',
  data: {
    label: '',
    value: ''
  },
  dataSource: [],
  dataSourceUrl:
    'http://10.129.7.191:7300/mock/5d78c8dc4353610020816045/example/lookup-selector-simple'
}
```

【十三】部门单选、多选字段 BC_Department

数据源返回数据格式详见部门组件：数据源返回格式详见部门组件：http://cmp.italent-inc.cn/details?id=1557

高级模式 controlProps

| 参数 | 说明 | 类型 | 默认值 | 必须 |
| --- | --- | --- | --- | --- |
| isMultiple | 是否多选 | `boolean` | `false` | 否 |

```javascript
{
  name: 'dev16',
  type: 'BC_Department',
  order: 16,
  normalMode: false,
  controlProps: {},
  label: '部门选择',
  data: {
    label: '',
    value: ''
  },
  dataSourceUrl:
    'https://www.easy-mock.com/mock/5d5a850c4c0d364290effa1d/cmp/department-selector#!method=get'
}
```

## translation

```
translation: {
  btnAdvanced: '高级筛选',
  btnReset: '恢复默认',
  normalLayerOk: '确定',
  advancedTitle: '高级筛选',
  advancedOk: '确定',
  advancedCancel: '取消',
  maxLengthErrorMsg: '最多支持输入${N}个字符',
  emailErrorMsg: '请输入正确的邮箱格式',
  urlErrorMsg: '请输入以http://或https://开头的网址',
  numberErrorMsg: '请输入正确数值',
  inputPlaceholder: '请输入',
  selectSearchPlaceholder: '请选择'
}
```

### 新增对自定义组件的支持，在 fields 可以传入自定义组件

```javascript
const customFieldItem = {
  name: 'dev00',
  type: 'Custom',
  order: '0',
  normalMode: true,
  controlProps: {},
  label: '自定义组件',
  component: {
    normal: props => {
      const handleChange = value => {
        props.onChange({
          label: value,
          value
        });
      };
      return (
        <div style={{ width: '200px' }}>
          <Input value={props.data.value} onChange={handleChange} />
        </div>
      );
    },
    advanced: props => {
      const handleChange = value => {
        props.onChange({
          label: value,
          value
        });
      };
      return <Input value={props.data.value} onChange={handleChange} />;
    }
  },
  data: {
    label: '',
    value: ''
  }
};
```

---
_Source: https://npm.io/package/@beisen-phoenix/search-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._