❤
npm
Sign UpSign In

@beisen-phoenix/search-form

3.3.55 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @beisen-phoenix/search-form

Weekly Downloads

8

Version

3.3.55

License

ISC

Unpacked Size

255 kB

Total Files

92

Last publish

Collaborators

  • beisencorp
Try on RunKit
Report malware