diff --git a/docs/zh-CN/components/form/condition-builder.md b/docs/zh-CN/components/form/condition-builder.md index 4068f724c..b2dbe6e15 100644 --- a/docs/zh-CN/components/form/condition-builder.md +++ b/docs/zh-CN/components/form/condition-builder.md @@ -1248,6 +1248,175 @@ selectMode 为`chained`时，使用`source`字段 } ``` +## 开启条件设置 + +通过配置 `showIf` 开启，开启后条件中额外还能配置启动条件。 + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "type": "condition-builder", + "label": "条件组件", + "title": "条件组合设置", + "draggable": false, + "name": "conditions", + "description": "适合让用户自己拼查询条件，然后后端根据数据生成 query where", + "showIf": true, + "pickerIcon": { + "type": "icon", + "icon": "edit", + "className": "w-4 h-4" + }, + "value": { + "id": "1a23a453ce5c", + "conjunction": "and", + "children": [ + { + "id": "550de894b404" + } + ] + }, + "formula": { + "mode":"input-group", + "variables": [ + { + "label": "表单字段", + "children": [ + { + "label": "文章名", + "value": "name", + "tag": "文本" + }, + { + "label": "作者", + "value": "author", + "tag": "文本" + }, + { + "label": "售价", + "value": "price", + "tag": "数字" + }, + { + "label": "出版时间", + "value": "time", + "tag": "时间" + }, + { + "label": "版本号", + "value": "version", + "tag": "数字" + }, + { + "label": "出版社", + "value": "publisher", + "tag": "文本" + } + ] + }, + { + "label": "流程字段", + "children": [ + { + "label": "联系电话", + "value": "telphone" + }, + { + "label": "地址", + "value": "addr" + } + ] + }, + { + "label": "长文本测试分类长文本测试分类长文本测试分类长文本测试分类", + "children": [ + { + "label": "这是一段测试长文本这是一段测试长文本这是一段测试长文本", + "value": "longtext", + "tag": "文本" + } + ] + } + ] + }, + "fields": [ + { + "label": "文本", + "type": "text", + "name": "text" + }, + { + "label": "数字", + "type": "number", + "name": "number" + }, + { + "label": "布尔", + "type": "boolean", + "name": "boolean" + }, + { + "label": "选项", + "type": "select", + "name": "select", + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b" + }, + { + "label": "C", + "value": "c" + }, + { + "label": "D", + "value": "d" + }, + { + "label": "E", + "value": "e" + } + ] + }, + { + "label": "动态选项", + "type": "select", + "name": "select2", + "source": "/api/mock2/form/getOptions?waitSeconds=1" + }, + { + "label": "日期", + "children": [ + { + "label": "日期", + "type": "date", + "name": "date" + }, + { + "label": "时间", + "type": "time", + "name": "time" + }, + { + "label": "日期时间", + "type": "datetime", + "name": "datetime" + } + ] + } + ] + } + ] +} +``` + ## 属性表 | 属性名 | 类型 | 默认值 | 说明 | 版本 | @@ -1266,6 +1435,7 @@ selectMode 为`chained`时，使用`source`字段 | addBtnVisibleOn | `string` | | 表达式：控制按钮“添加条件”的显示。参数为`depth`、`breadth`，分别代表深度、长度。表达式需要返回`boolean`类型 | `3.2.0` | | addGroupBtnVisibleOn | `string` | | 表达式：控制按钮“添加条件组”的显示。参数为`depth`、`breadth`，分别代表深度、长度。表达式需要返回`boolean`类型 | `3.2.0` | | inputSettings | `InputSettings` | | 开启公式编辑模式时的输入控件类型 | `3.2.0` | +| showIf | `boolean` | | 开启后条件中额外还能配置启动条件。 | `3.2.0` | ### InputSettings diff --git a/packages/amis-core/src/types.ts b/packages/amis-core/src/types.ts index 43f26c21f..aeba49b5e 100644 --- a/packages/amis-core/src/types.ts +++ b/packages/amis-core/src/types.ts @@ -718,6 +718,7 @@ export interface ConditionRule { left?: ExpressionComplex; op?: OperatorType; right?: ExpressionComplex | Array; + if?: string; } export interface ConditionGroupValue { @@ -725,6 +726,7 @@ export interface ConditionGroupValue { conjunction: 'and' | 'or'; not?: boolean; children?: Array; + if?: string; } export interface ConditionValue extends ConditionGroupValue {} diff --git a/packages/amis-ui/scss/components/_condition-builder.scss b/packages/amis-ui/scss/components/_condition-builder.scss index 4180d5caa..846329daf 100644 --- a/packages/amis-ui/scss/components/_condition-builder.scss +++ b/packages/amis-ui/scss/components/_condition-builder.scss @@ -237,6 +237,22 @@ // } // } +.#{$ns}CBIf { + margin-left: 10px; + font-size: 16px; + color: #84868c; + + &:hover { + font-size: 16px; + } + + &.is-active { + color: #2468f1; + } + cursor: pointer; + // margin-left: auto; +} + .#{$ns}CBGroupOrItem { position: relative; transition: box-shadow 0.3s ease; diff --git a/packages/amis-ui/src/components/condition-builder/Expression.tsx b/packages/amis-ui/src/components/condition-builder/Expression.tsx index de2009c66..e83732e0c 100644 --- a/packages/amis-ui/src/components/condition-builder/Expression.tsx +++ b/packages/amis-ui/src/components/condition-builder/Expression.tsx @@ -41,7 +41,7 @@ export interface ExpressionProps extends ThemeProps, LocaleProps { valueField?: FieldSimple; fields?: ConditionBuilderField[]; funcs?: ConditionBuilderFuncs; - allowedTypes?: Array<'value' | 'field' | 'func' | 'formula'>; + allowedTypes?: Array<'value' | 'field' | 'func'>; op?: OperatorType; config: ConditionBuilderConfig; disabled?: boolean; @@ -56,13 +56,12 @@ export interface ExpressionProps extends ThemeProps, LocaleProps { const fieldMap = { value: '值', field: '字段', - func: '函数', - formula: '公式' + func: '函数' }; export class Expression extends React.Component { @autobind - handleInputTypeChange(type: 'value' | 'field' | 'func' | 'formula') { + handleInputTypeChange(type: 'value' | 'field' | 'func') { let value = this.props.value; const onChange = this.props.onChange; @@ -84,11 +83,6 @@ export class Expression extends React.Component { type: 'field', field: '' }; - } else if (type === 'formula') { - value = { - type: 'formula', - value: '' - }; } onChange(value, this.props.index); } @@ -120,17 +114,6 @@ export class Expression extends React.Component { onChange(value, this.props.index); } - @autobind - handleFormulaChange(formula: string) { - let value = this.props.value; - const onChange = this.props.onChange; - value = { - type: 'formula', - value: formula - }; - onChange(value, this.props.index); - } - render() { const { value, @@ -155,8 +138,6 @@ export class Expression extends React.Component { ? 'field' : (value as any)?.type === 'func' ? 'func' - : (value as any)?.type === 'formula' - ? 'formula' : value !== undefined ? 'value' : undefined) || @@ -219,14 +200,6 @@ export class Expression extends React.Component { /> ) : null} - {inputType === 'formula' ? ( - - ) : null} - {types.length > 1 ? ( ; + allowedTypes?: Array<'value' | 'field' | 'func'>; fieldClassName?: string; } diff --git a/packages/amis-ui/src/components/condition-builder/Group.tsx b/packages/amis-ui/src/components/condition-builder/Group.tsx index c273f1fc4..243f898dd 100644 --- a/packages/amis-ui/src/components/condition-builder/Group.tsx +++ b/packages/amis-ui/src/components/condition-builder/Group.tsx @@ -31,6 +31,7 @@ export interface ConditionGroupProps extends ThemeProps, LocaleProps { funcs?: ConditionBuilderFuncs; showNot?: boolean; showANDOR?: boolean; + showIf?: boolean; data?: any; disabled?: boolean; searchable?: boolean; @@ -192,7 +193,8 @@ export class ConditionGroup extends React.Component< draggable, depth, isAddBtnVisibleOn, - isAddGroupBtnVisibleOn + isAddGroupBtnVisibleOn, + showIf } = this.props; const {isCollapsed} = this.state; @@ -283,6 +285,7 @@ export class ConditionGroup extends React.Component< depth={depth} isAddBtnVisibleOn={isAddBtnVisibleOn} isAddGroupBtnVisibleOn={isAddGroupBtnVisibleOn} + showIf={showIf} /> )) ) : ( diff --git a/packages/amis-ui/src/components/condition-builder/GroupOrItem.tsx b/packages/amis-ui/src/components/condition-builder/GroupOrItem.tsx index 63f81483d..32b72ce9e 100644 --- a/packages/amis-ui/src/components/condition-builder/GroupOrItem.tsx +++ b/packages/amis-ui/src/components/condition-builder/GroupOrItem.tsx @@ -5,7 +5,7 @@ import React from 'react'; import {Icon} from '../icons'; import ConditionGroup from './Group'; import ConditionItem from './Item'; -import {FormulaPickerProps} from '../formula/Picker'; +import FormulaPicker, {FormulaPickerProps} from '../formula/Picker'; import Button from '../Button'; import type {ConditionGroupValue, ConditionValue} from 'amis-core'; @@ -33,6 +33,7 @@ export interface CBGroupOrItemProps extends ThemeProps { depth: number; isAddBtnVisibleOn?: (param: {depth: number; breadth: number}) => boolean; isAddGroupBtnVisibleOn?: (param: {depth: number; breadth: number}) => boolean; + showIf?: boolean; } export class CBGroupOrItem extends React.Component { @@ -67,6 +68,15 @@ export class CBGroupOrItem extends React.Component { }); } + @autobind + handleIfChange(condition: string) { + const value: ConditionGroupValue = { + ...(this.props.value as any), + if: condition + }; + this.props.onChange(value, this.props.index); + } + render() { const { builderMode, @@ -88,7 +98,8 @@ export class CBGroupOrItem extends React.Component { isCollapsed, depth, isAddBtnVisibleOn, - isAddGroupBtnVisibleOn + isAddGroupBtnVisibleOn, + showIf } = this.props; return ( @@ -138,6 +149,7 @@ export class CBGroupOrItem extends React.Component { depth={depth + 1} isAddBtnVisibleOn={isAddBtnVisibleOn} isAddGroupBtnVisibleOn={isAddGroupBtnVisibleOn} + showIf={showIf} /> ) : ( @@ -166,6 +178,26 @@ export class CBGroupOrItem extends React.Component { renderEtrValue={renderEtrValue} selectMode={selectMode} /> + {showIf ? ( + + {({onClick}) => ( + + + + )} + + ) : null}