feat:inputTable支持initDrag动作

hsm-lv · Nov 14, 2023 · 8c2036d · 8c2036d
1 parent 7755656
commit 8c2036d
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 0 deletions.
diff --git a/docs/zh-CN/components/form/input-table.md b/docs/zh-CN/components/form/input-table.md
@@ -1574,6 +1574,7 @@ order: 54
 | setValue   | `value: object \| Array<object>` 替换的值<br /> `index?: number` 可选，替换第几行数据，如果没有指定，则替换全部表格数据            | 替换表格数据                                                         |
 | clear      | -                                                                                                                                  | 清空表格数据                                                         |
 | reset      | -                                                                                                                                  | 将表格数据重置为`resetValue`，若没有配置`resetValue`，则清空表格数据 |
+| initDrag   | -                                                                                                                                  | 开启表格拖拽排序功能                                                 |
 
 ### addItem
 
@@ -2199,3 +2200,83 @@ order: 54
   }
 }
 ```
+
+### initDrag
+
+```schema: scope="body"
+{
+  "type": "form",
+  "api": "/api/mock2/form/saveForm",
+  "body": [
+    {
+      "type": "button",
+      "label": "开始表格排序",
+      "onEvent": {
+        "click": {
+          "actions": [
+            {
+              "componentId": "drag-input-table",
+              "actionType": "initDrag"
+            }
+          ]
+        }
+      }
+    },
+    {
+      "type": "input-table",
+      "label": "表格表单",
+      "id": "drag-input-table",
+      "name": "table",
+      "columns": [
+        {
+          "name": "a",
+          "label": "A"
+        },
+        {
+          "name": "b",
+          "label": "B"
+        }
+      ],
+      "addable": true,
+      "footerAddBtn": {
+        "label": "新增",
+        "icon": "fa fa-plus",
+        "hidden": true
+      },
+      "strictMode": true,
+      "minLength": 0,
+      "needConfirm": false,
+      "showTableAddBtn": false
+    }
+  ],
+  "data": {
+    "table": [
+      {
+        "id": 1,
+        "a": "a1",
+        "b": "b1"
+      },
+      {
+        "id": 2,
+        "a": "a2",
+        "b": "b2"
+      },
+      {
+        "id": 3,
+        "a": "a3",
+        "b": "b3"
+      },
+      {
+        "id": 4,
+        "a": "a4",
+        "b": "b4"
+      },
+      {
+        "id": 5,
+        "a": "a5",
+        "b": "b5"
+      }
+    ]
+  }
+}
+```
diff --git a/packages/amis/src/renderers/Form/InputTable.tsx b/packages/amis/src/renderers/Form/InputTable.tsx
@@ -299,6 +299,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
   subFormItems: any = {};
   rowPrinstine: Array<any> = [];
   editting: any = {};
+  table: any;
 
   constructor(props: TableProps) {
     super(props);
@@ -587,6 +588,10 @@ export default class FormTable extends React.Component<TableProps, TableState> {
       );
 
       return;
+    } else if (actionType === 'initDrag') {
+      const tableStore = this.table?.props?.store;
+      tableStore?.stopDragging();
+      tableStore?.toggleDragging();
     }
     return onAction && onAction(action, ctx, ...rest);
   }
@@ -1550,6 +1555,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
     while (ref && ref.getWrappedInstance) {
       ref = ref.getWrappedInstance();
     }
+    this.table = ref;
   }
 
   computedAddBtnDisabled() {