@beisen-phoenix/search-form

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

说明

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

2. 筛选包含字段及对应组件：筛选字段均为内置，按照设置的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: ''
  }
};