feat: conditionBuilder组件增加是否可拖拽字段控制 (#7111)

* feat: conditionBuilder组件增加是否可拖拽字段控制

* 更新用例

---------

Co-authored-by: wangqiang <wangqiang@lattebank.com>
Co-authored-by: liaoxuezhi <2betop.cn@gmail.com>

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及以上版本`          |

packages/amis-ui/src/components/condition-builder/Group.tsx

@@ -260,7 +260,7 @@ export class ConditionGroup extends React.Component<
             {body ? (
               body.map((item, index) => (
                 <GroupOrItem
-                  draggable={value!.children!.length > 1}
+                  draggable={draggable && value!.children!.length > 1}
                   onDragStart={onDragStart}
                   config={config}
                   key={item.id}

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}

packages/amis/__tests__/renderers/Form/__snapshots__/conditionBuilder.test.tsx.snap

@@ -70,6 +70,7 @@ exports[`Renderer:condition-builder 1`] = `
                     >
                       <div
                         class="cxd-CBGroup-toolbarCondition"
+                        draggable="true"
                       >
                         <div
                           aria-expanded="false"
@@ -112,6 +113,7 @@ exports[`Renderer:condition-builder 1`] = `
                         </div>
                         <div
                           class="cxd-CBGroup-toolbar"
+                          draggable="true"
                         >
                           <div
                             class="cxd-CBGroup-toolbarConditionAdd"

packages/amis/src/renderers/Form/ConditionBuilder.tsx

@@ -78,6 +78,11 @@ export interface ConditionBuilderControlSchema extends FormBaseControlSchema {
   showANDOR?: boolean;
 
   /**
+   * 是否可拖拽，默认为 true
+   */
+  draggable?: boolean;
+
+  /*
    * 表达式：控制按钮“添加条件”的显示
    */
   addBtnVisibleOn?: string;