@beisen-phoenix/search-form v3.3.55

SearchForm

概述

SearchForm 筛选表单

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

API

IField 字段数据格式

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

字段类型Type

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 分组项数据格式

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

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

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

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

controlProps

{
  name: 'dev02',
  type: 'BC_DigitText',
  order: 2,
  normalMode: true,
  controlProps: {
    // 最大字符数
    maxLength: 10,
    // 数字最小值
    min: 0,
    // 数字最大值
    max: 10000
  },
  label: '数字输入框',
  data: {
    label: '',
    value: ''
  }
}

【三】「是否」「单选列表」BC_RadioList「复选列表」「下拉列表」BC_DropDownList字段 这些字段对应的组件简单模式下均为「复选下拉弹层」，高级模式下对应的为「可输入选择器」+「复选下拉弹层」

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

普通模式 controlProps

高级模式 controlProps

{
  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

高级模式 controlProps

注意

数据源返回数据格式详见人员组件说明：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

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

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

普通模式\高级模式 controlProps

{
  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

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