FieldCondition
以字段+操作符+值行式编辑 AND/OR 条件组。中文惯用名:字段条件(条件树与表达式字符串互转)。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.field-condition |
| 名称 | FieldCondition |
| 二级分类 | 业务组件(business) |
| 用途 | 以字段+操作符+值行式编辑 AND/OR 条件组 |
| 描述 | 中文惯用名:字段条件(条件树与表达式字符串互转)。 |
预览
静态结构:根节点为条件组容器——组内 >1 条时顶部展示「且 / 或」relation 切换按钮(AND=蓝 / OR=橙);每条条件一行:字段(SearchableSelect 选候选字段)→ 操作符(Select,13 个操作符按 fieldType 白名单过滤)→ 值输入(NUMBER→数字、DATE→日期、BETWEEN→双输入 ~ 分隔、无值操作符 HASVAL / NOHASVAL / TRUE / FALSE 隐藏值输入);行尾删除按钮(组内仅 1 条时隐藏),底部「添加条件」按钮(disabled 时隐藏)。当前实现单层结构:只渲染第一个分组,根 relation 仅用于组间连接;字段变更重置操作符与值,操作符变更在值语义变化时重置 value;statementToCondition 仅支持单层解析(顶层 || 组成单个 OR 组,否则 && 组成 AND 组,支持生成器外层括号与简单 AI 格式),无法解析返回 null。
DSL 结构
{
"type": "FieldCondition",
"props": {
"value": "${state.condition}",
"fields": [
{
"featureCode": "age",
"featureName": "年龄",
"fieldType": "NUMBER"
},
{
"featureCode": "name",
"featureName": "姓名",
"fieldType": "STRING"
},
{
"featureCode": "registerTime",
"featureName": "注册时间",
"fieldType": "DATE"
}
]
},
"events": {
"onChange": {
"action": "setState",
"params": {
"condition": "${event}"
}
}
}
}何时用
何时使用
- 以「字段 + 操作符 + 值」行式 UI 可视化编辑 AND/OR 条件组。
- 作为其他业务组件的内嵌控件(ExpressionEditor 的 fieldCondition 类型控件)。
- 需要条件树与表达式字符串互转(conditionToStatement / statementToCondition)。
何时不用
- 带权重 / 评分的评分规则条件(每条条件附 score):使用 RuleConfig。
- 含函数调用、运算符混排的自由表达式:使用 ExpressionEditor 或 RuleExpression。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 操作符按字段类型过滤 | 13 个操作符,按 fieldType 白名单收敛 | BOOLEAN 只出 TRUE / FALSE,NUMBER / DATE 才出 BETWEEN,IN / NOT_IN 限 NUMBER / STRING |
| BETWEEN 范围输入 | 双值输入,~ 分隔 | 数值 / 日期区间条件 |
| 无值操作符 | HASVAL / NOHASVAL / TRUE / FALSE 隐藏值输入 | 只看有无值的存在性条件 |
| relation 切换 | AND=蓝 / OR=橙「且 / 或」 | 组内 >1 条时切换连接方式 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | FieldConditionValue | defaultFieldConditionValue() | 受控条件树:{ relation, children: 分组[] },每条 { field, term, value? } |
onChange | (value: FieldConditionValue) => void | — | 条件树变更回调 |
fields | ConditionFieldOption[] | [] | 候选字段(datasource.json 结构:featureCode / featureName / fieldType / recommended) |
disabled | boolean | false | 禁用:隐藏添加 / 删除入口,控件全部禁用 |
使用规范
- fields 来自 datasource.json 结构,featureCode 唯一;fieldType(DATE / STRING / NUMBER / BOOLEAN)决定操作符白名单,必须准确。
- 条件树 ↔ 语句串互转只支持单层结构:多组嵌套条件暂无法表示,设计时避免深嵌套。
- 表达式回填走 statementToCondition,解析失败返回 null——外部赋值格式要符合「组内 && 、组间 ||」约定。
正例
- ✓ 筛选器:fields 传数据集字段,用户搭「age > 18 且 status = ACTIVE」。
- ✓ ExpressionEditor 的条件参数位:fieldCondition 控件输出语句串拼入表达式模板。
反例
- ✕ 用 FieldCondition 做带评分的规则条件(应使用 RuleConfig)。
- ✕ 依赖多层嵌套条件组(statementToCondition 无法表示,会被解析失败)。
Design Token 映射
不适用:组件 tokenRefs 为空:样式 Token 数据尚未接入,三层映射(Primitive → Semantic → Component)待样式 Token 接入后回填。