diff --git a/CHANGELOG.md b/CHANGELOG.md index 15cbff70a376b5887cbc44abd989a702a2973244..e13df404e80130349e1af96d2c59664accb0629e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ ## [Unreleased] +### Added + +- 重复器表单拖拽支持表单自动保存配置 + ## [0.7.41-alpha.10] - 2025-07-08 ### Added diff --git a/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-multi-form/repeater-multi-form.tsx b/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-multi-form/repeater-multi-form.tsx index b2953fdddc0c05e09b416f3c5f4efaf0f6481fe7..475918c070e120d4453e480b2b15d968538f0a31 100644 --- a/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-multi-form/repeater-multi-form.tsx +++ b/src/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-multi-form/repeater-multi-form.tsx @@ -58,6 +58,9 @@ export const RepeaterMultiForm = defineComponent({ onRemoveClick={(_item: IData, index: number): void => this.controller.remove(index) } + onDragChange={(draggedIndex: number, targetIndex: number) => { + this.controller.dragChange(draggedIndex, targetIndex); + }} > {{ item: ({ data, index }: { data: IData; index: number }) => { diff --git a/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.tsx b/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.tsx index 53ae28e7bb7c334020d7dbc14447651c1591e99c..5d99ba349af39c09af4ea3d184ace6f038210508 100644 --- a/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.tsx +++ b/src/control/form/form-detail/form-mdctrl/mdctrl-container/mdctrl-container.tsx @@ -33,6 +33,7 @@ export const MDCtrlContainer = defineComponent({ emits: { addClick: () => true, removeClick: (_data: IData, _index: number) => true, + dragChange: (_draggedIndex: number, _targetIndex: number) => true, }, setup(props, { emit, slots }) { const ns = useNamespace('mdctrl-container'); @@ -45,6 +46,17 @@ export const MDCtrlContainer = defineComponent({ return props.enableCreate || props.enableDelete; }); + /** 拖拽数据集 */ + const dragItems = computed(() => [...props.items]); + + // 拖拽结束 + const handleDragChange = (_params: IParams) => { + const { moved } = _params; + const draggedIndex = moved.oldIndex; + const targetIndex = moved.newIndex; + emit('dragChange', draggedIndex, targetIndex); + }; + // 排序拖拽按钮 const renderDragBtn = (): JSX.Element => { return ( @@ -220,12 +232,14 @@ export const MDCtrlContainer = defineComponent({ ns, showActions, dragClssName, + dragItems, renderDragBtn, renderAddBtn, renderDefaultItem, renderRemoveBtn, renderStyle2AddBtn, renderStyle2RemoveBtn, + handleDragChange, }; }, render() { @@ -278,9 +292,10 @@ export const MDCtrlContainer = defineComponent({ ref='container' class={[this.ns.e('drag')]} chosenClass={this.ns.is('drag-chosen', true)} - list={this.items} + list={this.dragItems} itemKey='id' handle={`.${this.dragClssName}`} + onChange={this.handleDragChange} > {{ item: ({ element, index }: { element: IData; index: number }) =>