@xiaohaih/condition-core

条件组件

---

• 只负责核心逻辑, 不关心 UI 以及业务操作

• 目前实现了 wrapper, select, input, datepicker, cascader 组件

• wrapper 是入口组件, 所有条件组件须放在该组件下

• 条件子组件可通过 wrapper 注入的选项来更新最新的条件值

• 目前支持的 UI 库

  • ☑ element-ui
  • ☐ element-plus

• 组件实现逻辑

  • 入口组件通过注入值来更新 query 对象, 以及获取子条件相关的信息
  • 子组件通过父组件提供的信息来注册条件(子组件卸载时父组件会自动销毁其条件)

---

wrapper 组件(容器组件)

---

• props

属性名	类型	默认值	必填	描述
tag	string | object	div	否	显示的标签
resetToInitialValue	boolean	-	否	触发重置时是否设为初始值
datum	定义	-	时	渲染的条件, 需外部通过 t 渲染具体组件
backfill	object	-	-	条件需要回填需提供
realtime	boolean	-	-	是否在条件项发生更改后立马触发搜索事件
immediateSearch	boolean	-	-	初始是否需要触发一次 ready 事件
toast	(msg: string) => void	-	-	校验时不合格时触发

• emits

事件名	返回值	描述
ready	(query: object) => void	初始化事件(需设置 immediateSearch 为 true), 第一个参数是搜索值对象
search	(query: object) => void	搜索事件, 第一个参数是搜索值对象

• provide
• 注入键名为 condition-wrapper, 注入值是一个对象, 对象暴露了以下内容 👇

  属性名	类型	返回值	描述
  realtime	Ref	-	当前组件是否是实时触发
  register	(config: CommonMethod)	() => void	注册条件, 返回一个函数(unregister)
  updateQueryValue	(field: string, value: any)	返回自身对象	更新 query 中搜索的值, 不触发搜索事件
  insetSearch	Function	返回自身对象	子组件内部值发生了变动, 由父级决定是否触发搜索事件(实时搜索时需要区分这两种方式)
  search	Function	-	直接触发搜索事件()

---

子条件共有的 props

---

属性名	类型	默认值	必填	描述
field	string	-	是	提交的字段名
as	string	-	-	提交的字段名(优先级比 field 高)
emptyValue	string|null|undefined	-	-	空值时提交的值
resetToInitialValue	boolean	-	-	重置时是否置为初始值
disabled	boolean|(query: object) => boolean	-	-	禁用, 可动态设置
hide	boolean|(query: object) => boolean	-	-	隐藏
validator	(query: object) => any | Promise	-	-	校验函数, 返回非空字符串代表失败, 触发 wrapper 提供的 toast 函数

• 子组件通过父级注入的对象内的方法 register 来主动注册条件(子组件都需提供的信息)

属性名	类型	返回值	描述
reset	Function	返回自身	重置 query 中的值
updateWrapperQuery	Function	返回自身	更新父级 query 中的值
validator	(query: object) => void	any	校验自身值是否通过校验
getQuery	() => object	object	获取组件自身的 query 参数

---

select 组件(下拉组件)

---

• props

属性名	类型	默认值	必填	描述
valueKey	string	-	是	下拉选项唯一键
labelKey	string	-	是	下拉项显示的值
options	Array	-	-	下拉选项的数据源(可通过 getOptions 动态获取)
multiple	boolean	-	-	多选
depend	boolean	-	-	数据源是否依赖其它字段
dependFields	string | string[]	-	-	依赖的字段
getOptions	(cb: (data: any[]) => void, query: object) => void	-	-	动态获取数据源
filterMethod	(val: string, data: object) => void	-	-	自定义过滤数据的方法

---

input 组件(输入框组件)

---

• props

属性名	类型	默认值	必填	描述
realtime	boolean	-	-	是否实时触发
waitTime	boolean	-	-	实时触发时的防抖时间

---

datepicker 组件(日期组件)

---

• props

属性名	类型	默认值	必填	描述
range	boolean	-	-	是否是范围选择器
beginField	string	-	-	范围选择器时提供的开始时间字段(可不填)
endField	string	-	-	范围选择器时提供的结束时间字段(可不填)

---

cascader 组件(级联组件)

---

• props

属性名	类型	默认值	必填	描述
fields	string[]	-	-	不同层级用不同字段时需提供
valueKey	string	-	是	唯一键名
childrenKey	string	children	-	子级键名
emitPath	boolean	-	-	是否返回选中项, 不返回选中项的父级链(数组形式)
options	object[]	-	-	下拉选项的数据源, 可通过(getOptions)选项动态获取
depend	boolean	-	-	getOptions 是否依赖了其它数据
dependFields	string|string[]	-	-	依赖的字段集合
getOptions	(cb: (data: object[]) => void, query: object) => void	-	-	动态获取数据源

---