@tntx/rule-tree
v1.0.1
Published
规则树
Downloads
1
Readme
规则树
默认内置:
- 数据类型与操作符联动
- 字段为枚举场景
- 操作符为空不为空与后续操作的联动
- 变更字段重置当前行其他数据
通用数据结构
{
logicOperator:"&&",
children:[{
"property":"xxx",
"propertyDataType":"String",
"operator":">=",
"type":"context",
"value":"1",
},{
logicOperator:"&&",
children:[{
"property":"xxx1",
"propertyDataType":"DOUBLE",
"operator":"==",
"type":"input",
"value":"3333",
}]
}]
}
API
1.组件 API
|参数|数据类型|默认值|作用|备注|
| ---- | ---- | ---- | ---- | ----|
| canDrag | Boolean | true | 是否支持拖拽 | disabled模式设置false即可,将取消增删拖拽功能 |
| nameKeys | Map | null | 数据结构不符合上述结构进行映射 | 结构一致无需设置 |
| value | Map | { logicOperator: "||", children: [] }
| 组件的值 | 需初始值|
| onChange | Function | (value)=>{}
| 组件变更事件 ||
| fields | Function | (colValue)=>{}
| 条件组展示的Dom | colValue为每一条件组返回的值,可以自定义联动 |
2.fields API
|参数|数据类型|作用| | ---- | ---- | ---- | | name | String | 表单名称 |
案例
<RuleTree
canDrag={true}
relationName="logicOperator"
value={value}
onChange={onChange}
fields={(colValue)=>{
return (
[
<Select
name="property"
placeholder="字段"
>
{
fieldList.map(data=>{
return (
<Option key={data.name} type={data.type} value={data.name}>{data.dName}</Option>
)
})
}
</Select>,
<Select
name="operator"
placeholder="操作符"
/>,
<Select
name="type"
placeholder="类型"
style={{"width":"100px"}}
>
<Option value="input">常量</Option>
<Option value="context">变量</Option>
</Select>,
<Input
name="value"
placeholder="请输入数量"
/>,
<Select
name="enumValue"
placeholder="枚举类型"
>
<Option value="lower">较低风险</Option>
<Option value="low">低风险</Option>
<Option value="high">高风险</Option>
<Option value="higher">较高风险</Option>
</Select>
]
)
}}
/>