feat:inputTable支持initDrag动作

This commit is contained in:
lvxiaojiao 2023-11-14 12:13:50 +08:00
parent 7755656470
commit 8c2036dc7d
2 changed files with 87 additions and 0 deletions

View File

@ -1574,6 +1574,7 @@ order: 54
| setValue | `value: object \| Array<object>` 替换的值<br /> `index?: number` 可选,替换第几行数据,如果没有指定,则替换全部表格数据 | 替换表格数据 | | setValue | `value: object \| Array<object>` 替换的值<br /> `index?: number` 可选,替换第几行数据,如果没有指定,则替换全部表格数据 | 替换表格数据 |
| clear | - | 清空表格数据 | | clear | - | 清空表格数据 |
| reset | - | 将表格数据重置为`resetValue`,若没有配置`resetValue`,则清空表格数据 | | reset | - | 将表格数据重置为`resetValue`,若没有配置`resetValue`,则清空表格数据 |
| initDrag | - | 开启表格拖拽排序功能 |
### addItem ### 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"
}
]
}
}
```

View File

@ -299,6 +299,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
subFormItems: any = {}; subFormItems: any = {};
rowPrinstine: Array<any> = []; rowPrinstine: Array<any> = [];
editting: any = {}; editting: any = {};
table: any;
constructor(props: TableProps) { constructor(props: TableProps) {
super(props); super(props);
@ -587,6 +588,10 @@ export default class FormTable extends React.Component<TableProps, TableState> {
); );
return; return;
} else if (actionType === 'initDrag') {
const tableStore = this.table?.props?.store;
tableStore?.stopDragging();
tableStore?.toggleDragging();
} }
return onAction && onAction(action, ctx, ...rest); return onAction && onAction(action, ctx, ...rest);
} }
@ -1550,6 +1555,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
while (ref && ref.getWrappedInstance) { while (ref && ref.getWrappedInstance) {
ref = ref.getWrappedInstance(); ref = ref.getWrappedInstance();
} }
this.table = ref;
} }
computedAddBtnDisabled() { computedAddBtnDisabled() {