@beisen-phoenix/search-form

v3.3.55

Published

4 years ago

## 概述

Downloads

674

0High
0Medium
0Low

beisencorp

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属性示例

[
  {
    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属性示例

[
  {
    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']
  }
]

说明

组件为受控组件，change事件后组件会将当前字段数据放入回调参数中，使用时按需处理fields再回传给组件即可。
筛选包含字段及对应组件：筛选字段均为内置，按照设置的type做映射。

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

controlProps

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

{
  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 |

{
  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 |

{
  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[]

{
  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

{
  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 「日期」字段可配置成 “单日期”和“日期范围”两种情况

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

{
  name: 'dev11',
  type: 'BC_DateRange',
  order: 11,
  normalMode: false,
  label: '日期范围',
  data: {
    label: '',
    value: ''
  }
}

【七】「日期时间」 BC_DateTime BC_DateTimeRange 「日期时间」字段可配置成 “单日期时间”和“日期时间范围”两种情况

{
  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: ''
  }
}

{
  name: 'dev10',
  type: 'BC_DateTimeRange',
  order: 10,
  normalMode: false,
  label: '日期时间范围',
  data: {
    label: '',
    value: ''
  }
}

【八】「年月」BC_Month BC_YearsRange 「年月」字段可配置成 “单年月”和“年月范围”两种情况

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

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

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

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

{
  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

{
  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 |

{
  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 |


{
  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 | 否 |

{
  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 可以传入自定义组件

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: ''
  }
};

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

SearchForm

概述

API

IField 字段数据格式

字段类型Type

IGroup 分组项数据格式

说明

注意

translation

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