# @rrc-materials/search

> rrc materials for Search

Latest version **0.2.0** (published 2018-11-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install @rrc-materials/search
pnpm add @rrc-materials/search
yarn add @rrc-materials/search
bun add @rrc-materials/search
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2018-11-30 |
| First published | 2018-08-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 35.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | xierenhong@renrenche.com |
| Maintainers | xierenhong |
| Keywords | rrc, vue |

## Links

- npm: https://www.npmjs.com/package/@rrc-materials/search
- Repository: https://gitlab.renrenche.com/fe/rrc
- npm.io page: https://npm.io/package/@rrc-materials/search

## Dependencies (1)

- [@rrc-materials/helpers](https://npm.io/package/@rrc-materials/helpers.md) ^0.2.0

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2018-11-30
- 0.1.0 — 2018-11-26
- 0.0.1-beta.22 — 2018-11-26
- 0.0.1-beta.21 — 2018-11-22
- 0.0.1-beta.20 — 2018-11-20
- 0.0.1-beta.19 — 2018-11-19
- 0.0.1-beta.18 — 2018-11-09
- 0.0.1-beta.15 — 2018-10-19
- 0.0.1-beta.14 — 2018-10-12
- 0.0.1-beta.13 — 2018-10-11
- 0.0.1-beta.12 — 2018-10-11
- 0.0.1-beta.11 — 2018-10-10
- 0.0.1-beta.10 — 2018-09-29
- 0.0.1-beta.9 — 2018-09-26
- 0.0.1-beta.8 — 2018-09-19
- … 7 more at https://npm.io/package/@rrc-materials/search/versions

## README

---
showNav: true
---

# Search

> `@rrc-materials/search` for rrc

<script>
import Search from './demo/search.md'
import EnableConditionList from './demo/enable.condition.list.md'
import HoverSearch from './demo/hover.search.md'
import Placement from './demo/placement.md'
import Placeholder from './demo/placeholder.md'
import PageNames from './demo/pageNames.md'
import ButtonTexts from './demo/buttonTexts.md'
import EnableSql from './demo/enableSql.md'

export default {
  components: {
    Search,
    EnableConditionList,
    HoverSearch,
    Placement,
    Placeholder,
    PageNames,
    ButtonTexts,
    EnableSql
  }
}
</script>

## Search 检索

### 默认Search 检索

<Search/>

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

<EnableConditionList/>

### 关闭高级公式检索
设置enableSql为false，即可关闭

<EnableSql/>

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

<HoverSearch/>

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

<Placement/>

### 设置占位文本

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

<Placeholder/>

### 自定义检索页名称

<PageNames/>

### 自定义检索页按钮文案

<ButtonTexts/>




### 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
| 事件名称   | 说明    |回调参数 |
|---------- |-------- |---------- |
| search  | 常用检索，单个条件点击 | 条件值value |
| saveCondition  | 保存为常用检索 | 当前检索条件值value |
| visible-change  | 下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false | true/false |

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

---
_Source: https://npm.io/package/@rrc-materials/search · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._