candy-condition-builder v0.3.6

CandyConditionBuilder

适用于Angular项目，逻辑构建器。

使用样例

安装方式

npm i candy-condition-builder

在对应module.ts中：

import {CandyConditionBuilderModule} from "candy-condition-builder";

@NgModule({
  imports: [
    ...
    CandyConditionBuilderModule
  ]
})

在html中：

<candy-condition-builder #conditionBuilder
 [conditionCategories]="categories"
 [conditionSettings]="conditions" 
 [nodes]="buildedNodes"
 [mode]="'JAVASCRIPT'"
></candy-condition-builder>

用户可以自己组合并设置所需要的业务逻辑，上图就可以解读为：

航班日期为 2020-10-28 ~ 2020-10-29 之间 北京首都机场起飞的VIP航班

操作的时候需要注意：条件可以拖拽到逻辑分组之中，逻辑分组可以包含其他逻辑分组，但根节点只能是一个逻辑分组或者单一逻辑条件。

用户可以用此控件构建复杂的逻辑条件。

同时，用户可以选择讲mode设置为 SQL, 用于范围SQL语句中 WHERE 之后的逻辑表达式

配置项

注意事项

1. [conditionSettings] 类型为FieldCondition[]：

   export interface FieldCondition {
     type: string; // 设置为'field' 即可
     category?: string; // 用于分类型显示条件
     field: string; // 
     fieldName: string; // 显示的标签
     fieldType: string; // 条件类型
     conditions: any[]; // 用于选择的条件，例如 等于、不等于、包含、不包含
     selectOptions?: any; // 如果 fieldType 为 select 的时候需要提供配置
   }

   字段	说明	设置值
   type	设置为'field' 即可
   category	对应 CategorySetting 中 key 所对应的字符，用于下拉框中分组显示选项内容
   field	条件对应的实体以及对象的属性，例如 flight.flightDate，flight.taskType 之类的，需要是 实体.属性 的形式
   fieldName	用于下拉框显示的文本
   fieldType	条件类型	string, number, date, datetime, time, nullCheck, select, multiSelect, fieldCompare
   conditions	用于选择的条件，例如 等于、不等于、包含、不包含, 格式需要为 {value: xxx, label: xxx}	详细部分详见下表
   selectOptions	当fieldType为select的时候需要设置	{value: xxx, label: xxxx}, {value: xxx, label: xxxx}, ...

   Conditions可配置属性

   类型	可设置的类型
   date	[{value: 'gt', label: '大于'}, {value: 'gte', label: '大于等于'}, {value: 'lt', label: '小于'}, {value: 'lte', label: '小于等于'}, {value: 'between', label: '在...之间'}]
   datetime	[{value: 'gt', label: '大于'}, {value: 'gte', label: '大于等于'}, {value: 'lt', label: '小于'}, {value: 'lte', label: '小于等于'}, {value: 'between', label: '在...之间'}]
   time	[{value: 'gt', label: '大于'}, {value: 'gte', label: '大于等于'}, {value: 'lt', label: '小于'}, {value: 'lte', label: '小于等于'}, {value: 'between', label: '在...之间'}]
   number	[{value: 'gt', label: '大于'}, {value: 'gte', label: '大于等于'}, {value: 'lt', label: '小于'}, {value: 'lte', label: '小于等于'}, {value: 'between', label: '在...之间'}]
   string	[{value: 'contains', label: '包含'}, {value: 'notContains', label: '不包含'}, {value: 'equals', label: '等于'}, {value: 'notEquals', label: '不等于'}]
   multiSelect	[{value: 'contains', label: '包含'}, {value: 'notContains', label: '不包含'}]
   select	[{value: 'equals', label: '等于'}, {value: 'notEquals', label: '不等于'}]
   fieldCompare	[{value: 'equals', label: '等于'}, {value: 'notEquals', label: '不等于'}]
   nullCheck	[{value: 'exists', label: '存在'}, {value: 'notExists', label: '不存在'}]

2. [conditionCategories] CategorySetting[]：

   用于将条件选择框里的选项按照其分类进行分组，key对应 [conditionSettings] 数据里的category。

   例子：[{key: 'flight', name: '航班'}, {key: 'task', name: '任务'}]

   

3. [nodes] 用于显示已保存了的条件数据，由 getConditionResult() 的方法获取：

   getConditionResult() 会返回 script 和 nodes 两个对象，其中script是最后生成的逻辑表达式；nodes 是代表当前交互界面对应的数据，用户可以把这段json数据保存下来。