yl-dc-component

#### 描述

一个动态查询json生成组件，用于构建复杂的条件查询，一般用于配合后端数据库查询

#### 演示
!演示图片

#### 组件说明

##### 属性

- DynamicConditionProps

| 属性名 | 说明 | 类型 | 默认值 | 必传 | 备注 |
|-----------------|--------------|-------------------------------|---------------------------------------------------------------------------------------------|-------|----|
| size | 尺寸 | "small" 、 "large" 、 "default" | 'small' | false | |
| fromSchemas | 字段配置 | FormSchema[] | [] | true | |
| value (v-model) | 查询条件节点 | GroupNode[] | | true | |
| storeOption | 条件josn存储配置选项 | ConditionStorageOption | {
mode: 'localstorage',
conf: {
storageKey: 'CONDITION_AST_STORAGE_KEY'
}} | false | |
| layoutOption | 布局选项 | {cols: number} | {cols: 2} | false | |

- FormSchema

| 属性名 | 说明 | 类型 | 默认值 | 必传 | 备注 |
|----------------|------|-----------------|---------|-------|----|
| label | 标签 | string | '' | true | |
| field | 字段名 | string | '' | true | |
| conditionTypes | 条件类型 | ConditionType[] | ['eq'] | false | |
| component | 组件类型 | ComponentType | 'Input' | false | |
| componentProps | 组件属性 | object | {} | false | |
| defaultValue | 默认值 | any | '' | false | |

- ComponentType

``ts
type ComponentType =
| 'Input'
| 'InputGroup'
| 'InputPassword'
| 'InputSearch'
| 'InputTextArea'
| 'InputNumber'
| 'InputCountDown'
| 'Select'
| 'ApiSelect'
| 'TreeSelect'
| 'ApiTreeSelect'
| 'RadioButtonGroup'
| 'RadioGroup'
| 'Checkbox'
| 'CheckboxGroup'
| 'AutoComplete'
| 'Cascader'
| 'DatePicker'
| 'MonthPicker'
| 'RangePicker'
| 'WeekPicker'
| 'TimePicker'
| 'Switch'
| 'StrengthMeter'
| 'Upload'
| 'IconPicker'
| 'Render'
| 'Slider'
| 'Rate'
| 'Avatar'
| 'Divider' | Component | (() => JSX.Element)
`

- ConditionStorageOption

| 属性名 | 说明 | 类型 | 必传 | 备注 |
|------|------|-----------------------------|-------|----|
| mode | 存储模式 | 'localstorage' \| ‘api' | false | |
| conf | 配置项 | LocalStorageConf \| ApiConf | false | |

- LocalStorageConf

| 属性名 | 说明 | 类型 | 必传 | 备注 |
|------------|-------|--------|------|----|
| storageKey | 存储key | string | true | |

- ApiConf

| 属性名 | 说明 | 类型 | 必传 | 备注 |
|-------------|--------------|--------------------------------------------------|------|-----------------------|
| getAllApi | 获取所有条件AST接口 | () => Promise | true | |
| getApi | 根据key获取条件AST | (key: string) => Promise | true | |
| updateApi | 更新条件AST | (condition: DynamicConditionAST) => Promise | true | |
| saveApi | 保存条件AST | (condition: DynamicConditionAST) => Promise | true | |
| delApi | 删除条件AST | (key: string) => Promise | true | |
| resultField | api请求结果字段 | string | true | api请求结果字段 支持 xx.xx.xx |

- DynamicConditionAST （该类型为json ast）

| 属性名 | 说明 | 类型 | 备注 |
|--------|----------|-------------|----|
| key | ast唯一key | string | | |
| name | 名称 | string | | |
| groups | 条件组 | GroupNode[] | | |

- GroupNode

| 属性名 | 说明 | 类型 | 备注 |
|------------|------|-----------------|----|
| logicType | 逻辑类型 | LogicType | | |
| conditions | 条件节点 | ConditionNode[] | | |

- ConditionNode

| 属性名 | 说明 | 类型 | 备注 |
|-----------|------|---------------|----|
| logicType | 逻辑类型 | LogicType | | |
| type | 条件类型 | ConditionType | | |
| field | 条件字段 | string | | |
| value | 条件值 | any | | |

- LogicType

| 类型 | 说明 | 备注 |
|-----|----|----|
| and | 与 | |
| or | 或 | |

- ConditionType

| 类型 | 说明 | 备注 |
|--------------|------|----|
| eq | 等于 | |
| not_eq | 不等于 | |
| greater_than | 大于 | |
| less_than | 小于 | |
| like | 模糊匹配 | |
| in | 包含 | |
| not_in | 不包含 | |
| null | 空值 | |
| not_null | 非空值 | |

##### 事件

| 事件名 | 说明 | 参数 |
|--------------------------|----------|----|
| search | 搜索事件 | 无 |
| searchConditionSelect | 搜索条件选择事件 | 无 |
| searchConditionSelectDel | 搜索条件删除事件 | 无 |
| reset | 重置事件 | 无 |
| save | 条件保存事件 | 无 |

#### 使用

##### 安装

`.sybase
yarn add yl-dc-component
npm install yl-dc-component
`

##### 引入

`.js
import 'yl-dc-component/dist/style.css'
import ylDcComponent from 'yl-dc-component'
`

#### 示例

`.vue





``