From 916a17042711f2d69cc8038422db870753d6748a Mon Sep 17 00:00:00 2001 From: 5se7en <177739007@qq.com> Date: Fri, 30 Jun 2023 11:38:01 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20conditionBuilder=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=98=AF=E5=90=A6=E5=8F=AF=E6=8B=96=E6=8B=BD?= =?UTF-8?q?=E5=AD=97=E6=AE=B5=E6=8E=A7=E5=88=B6=20(#7111)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: conditionBuilder组件增加是否可拖拽字段控制 * 更新用例 --------- Co-authored-by: wangqiang Co-authored-by: liaoxuezhi <2betop.cn@gmail.com> --- .../components/form/condition-builder.md | 97 +++++++++++++++++++ .../components/condition-builder/Group.tsx | 2 +- .../components/condition-builder/index.tsx | 6 ++ .../conditionBuilder.test.tsx.snap | 2 + .../src/renderers/Form/ConditionBuilder.tsx | 5 + 5 files changed, 111 insertions(+), 1 deletion(-) diff --git a/docs/zh-CN/components/form/condition-builder.md b/docs/zh-CN/components/form/condition-builder.md index 947e72341..c3c525422 100644 --- a/docs/zh-CN/components/form/condition-builder.md +++ b/docs/zh-CN/components/form/condition-builder.md @@ -994,6 +994,102 @@ selectMode 为`chained`时，使用`source`字段 } ``` +## 拖拽控制 + +当`draggable`为`false`时，关闭拖拽 + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "type": "condition-builder", + "label": "条件组件", + "title": "条件组合设置", + "draggable": false, + "name": "conditions", + "description": "适合让用户自己拼查询条件，然后后端根据数据生成 query where", + "pickerIcon": { + "type": "icon", + "icon": "edit", + "className": "w-4 h-4" + }, + "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" + } + ] + } + ] + } + ] +} +``` + ## 属性表 | 属性名 | 类型 | 默认值 | 说明 | @@ -1006,6 +1102,7 @@ selectMode 为`chained`时，使用`source`字段 | fields | | | 字段配置 | | showANDOR | `boolean` | | 用于 simple 模式下显示切换按钮 | | showNot | `boolean` | | 是否显示「非」按钮 | +| draggable | `boolean` | true | 是否可拖拽 | | searchable | `boolean` | | 字段是否可搜索 | | selectMode | `'list'` \| `'tree'` \| `'chained'` | `'list'` | 组合条件左侧选项类型。`'chained'`模式需要`3.2.0及以上版本` | | addBtnVisibleOn | `string` | | 表达式：控制按钮“添加条件”的显示。参数为`depth`、`breadth`，分别代表深度、长度。表达式需要返回`boolean`类型`3.2.0及以上版本` | diff --git a/packages/amis-ui/src/components/condition-builder/Group.tsx b/packages/amis-ui/src/components/condition-builder/Group.tsx index f09da7e26..c273f1fc4 100644 --- a/packages/amis-ui/src/components/condition-builder/Group.tsx +++ b/packages/amis-ui/src/components/condition-builder/Group.tsx @@ -260,7 +260,7 @@ export class ConditionGroup extends React.Component< {body ? ( body.map((item, index) => ( 1} + draggable={draggable && value!.children!.length > 1} onDragStart={onDragStart} config={config} key={item.id} diff --git a/packages/amis-ui/src/components/condition-builder/index.tsx b/packages/amis-ui/src/components/condition-builder/index.tsx index 4055e057b..0cf9073ec 100644 --- a/packages/amis-ui/src/components/condition-builder/index.tsx +++ b/packages/amis-ui/src/components/condition-builder/index.tsx @@ -37,6 +37,7 @@ export interface ConditionBuilderProps extends ThemeProps, LocaleProps { onChange: (value?: ConditionGroupValue) => void; config?: ConditionBuilderConfig; disabled?: boolean; + draggable?: boolean; searchable?: boolean; fieldClassName?: string; formula?: FormulaPickerProps; @@ -67,6 +68,9 @@ export class QueryBuilder extends React.Component< @autobind handleDragStart(e: React.DragEvent) { + const {draggable = true} = this.props; + // draggable为false时不可拖拽 + if (!draggable) return; const target = e.currentTarget; const item = target.closest('[data-id]') as HTMLElement; this.dragTarget = item; @@ -250,6 +254,7 @@ export class QueryBuilder extends React.Component< showANDOR, data, disabled, + draggable = true, searchable, builderMode, formula, @@ -291,6 +296,7 @@ export class QueryBuilder extends React.Component< showNot={showNot} data={data} disabled={disabled} + draggable={draggable} searchable={searchable} formula={formula} renderEtrValue={renderEtrValue} diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/conditionBuilder.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/conditionBuilder.test.tsx.snap index baab0fc41..a3b0cfd84 100644 --- a/packages/amis/__tests__/renderers/Form/__snapshots__/conditionBuilder.test.tsx.snap +++ b/packages/amis/__tests__/renderers/Form/__snapshots__/conditionBuilder.test.tsx.snap @@ -70,6 +70,7 @@ exports[`Renderer:condition-builder 1`] = ` >