From 8c2036dc7d1dc74ce7aa90357548b06f0df5b8ff Mon Sep 17 00:00:00 2001 From: lvxiaojiao Date: Tue, 14 Nov 2023 12:13:50 +0800 Subject: [PATCH] =?UTF-8?q?feat:inputTable=E6=94=AF=E6=8C=81initDrag?= =?UTF-8?q?=E5=8A=A8=E4=BD=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/form/input-table.md | 81 +++++++++++++++++++ .../amis/src/renderers/Form/InputTable.tsx | 6 ++ 2 files changed, 87 insertions(+) diff --git a/docs/zh-CN/components/form/input-table.md b/docs/zh-CN/components/form/input-table.md index bf20dd56b..254dd497f 100755 --- 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` 替换的值
`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 index 66d0ec2fb..271e0f902 100644 --- 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 { subFormItems: any = {}; rowPrinstine: Array = []; editting: any = {}; + table: any; constructor(props: TableProps) { super(props); @@ -587,6 +588,10 @@ export default class FormTable extends React.Component { ); 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 { while (ref && ref.getWrappedInstance) { ref = ref.getWrappedInstance(); } + this.table = ref; } computedAddBtnDisabled() {