@rrc-materials/search

v0.2.0

Published

2 years ago

rrc materials for Search

Downloads

0High
0Medium
0Low

rrc-fe

xierenhong

rrc vue

showNav: true

Search

@rrc-materials/search for rrc

Search 检索

默认Search 检索

关闭常用检索页

设置enable-condition-list为false即可关闭常用检索页；设置enable-save-condition为false即可取消“保存为常用检索”按钮。

关闭高级公式检索

设置enableSql为false，即可关闭

hover触发检索

设置trigger为hover即可改变检索面板的触发方式，还可以设置showTimeout和hideTimeout来改变显示和消失时的延迟时间

设置检索面板位置

设置placement属性的值，即可改变检索面板出现的位置，方法同vue-popover

设置占位文本

设置placeholder的值，即可在没有检索值时显示该占位文本

自定义检索页名称

自定义检索页按钮文案

Attributes

| 参数 | 说明 | 可选值 | 类型 | 默认值 | |---------|-------- |---------- |-------- |---------- | | data | search 的数据源，配置可以检索的列，每个列的属性见SearchItem表 | - | Array | [] | | conditionGroup | search条件组，如果有值, 会和默认条件组进行merge操作; 默认条件组见conditionGroup表 | - | Object | {} | | condition | search 的条件定义，如果有值, 会和默认条件定义进行merge操作; 默认条件定义见condition表| - | Object | {} | | defaultCondtion | search 的默认条件表，如果有值, 会和默认条件表进行merge操作; 默认条件组见defaultCondtion表 | - | Array | [] | | enableSql | 启用高级公式 | - | Boolean | true | | enableConditionList | 启用常用检索 | - | Boolean | true | | conditionList | 常用检索列表,启用常用检索后，才能显示常用检索列表，详情见conditionList表 | - | Array | [] | | enableSaveCondition | search 启用检索保存 | - | Boolean | false | | placement | search 检索面板出现位置，同Element-UI | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | String | bottom-start | | trigger | search 的弹出检索面板的触发方式 | hover、click | String | click | | showTimeout | search 的hover触发时，面板显示的延迟时间，ms | - | Number | 250 | | hideTimeout | search 的hover触发时，面板消失的延迟时间，ms | - | Number | 150 | | placeholder | search 没有检索时的占位文本 | - | String | 数据筛选| | pageNames | search 的自定义检索页名称 | - | Array | ['常用检索', '自定义检索'] | | buttonTexts | search 的自定义按钮文案 | - | Array | ['保存为常用检索', '检索'] |

:::tip 一个检索列，检索条件表优先级如下：condition（列自己传入的条件表） > conditionGroup[conditionGroup] （根据列自己传入的conditionGroup检索条件组名字取得的条件表）> defaultCondtion :::

conditionGroup

默认条件组，可以通过Vue.prototype.$RC_SEARCH全局注入。

{
  text: ['=', 'like', 'notLike', 'isNull', 'isNotNull'],
  number: ['>', '=', '<', '>=', '<=', 'between', 'isNull', 'isNotNull'],
  select: ['=', 'in'],
  date: ['>', '=', '<', '>=', '<=', 'between', 'isNull', 'isNotNull'],
  cascader: ['=']
}

condition

默认条件定义，即默认条件的含义对照，key是条件id，value是条件的含义，也是用来显示的条件名称。可以通过Vue.prototype.$RC_SEARCH全局注入。

{
  '>': '大于',
  '=': '等于',
  '<': '小于',
  '>=': '大于等于',
  '<=': '小于等于',
  'like': '包含',
  'notLike': '不包含',
  // 表示一个数在两个数值之间取值
  'between': '区间',
  'in': '范围',
  'isNull': '为空',
  'isNotNull': '不为空',
}

defaultCondtion

默认条件表。即当检索列既没定义condition，也没定义检索type，那就使用此默认的检索条件表。可以通过Vue.prototype.$RC_SEARCH全局注入。

[
  '='
]

conditionList

常用检索列表项定义 | 参数 | 说明 | 可选值 | 类型 | 默认值 | |---------|-------- |---------- |-------- |---------- | | label | 检索项 name，用来显示 | - | String | - | | selected | 检索项选中状态，如果是true，该项选中 | - | Boolean | - | | render | 检索项自定义渲染方法，如果存在render方法，则优先自定义否则显示label | - | function(h, item)，item是该检索项定义 | - |

SearchItem

检索数据项定义

| 参数 | 说明 | 可选值 | 类型 | 默认值 | |---------|-------- |---------- |-------- |---------- | | prop | 检索项的key值，可以用来传给后端 | 必须 | String | - | | label | 检索项的显示名字 | - | String | - | | type | 检索项的检索类型，默认是input类型检索 | select/datePicker/cascader/switch/slider/number/input | String | - | | value | 检索项的初始条件值，具体类型和检索项的类型有关，比如type是select，那value就是select的初始值 | - | any | - | | condition | 检索项的检索条件表，如果未定义，会根据检索conditionGroup到检索条件组去找检索条件表，如果还没有就会默认使用defaultCondtion | - | String | - | | conditionGroup | 检索条件组名称，可以用来获得该检索的检索条件表 | text/number/select/date/cascader | String | - | | renderComponent | 检索项的自定义渲染方法，如果自定义渲染，将不再根据type来渲染相应组件 | - | Function(h, renderComponent, data),renderComponent是是该检索项项组件自身，data是该检索项定义 | - | | asyncData | 检索项是select、cascader等时，返回select、cascader的data数据，可以是异步| - | Function(data) data是该检索项定义 | - | ::: tip 其它检索项的属性，可以是根据type不同传递相应组件的属性，请按jsx识别的模式传，如：

{
  attr,
  on,
  nativeOn,
  class,
  style
}

:::

Events

Methods

| 方法名 | 说明 | 参数 | |---------- |-------- |---------- | | show | 显示检索面板 | - | | hide | 隐藏检索面板 | - |