diff --git a/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue b/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue index 81133d8d8ac..0f74d702d89 100644 --- a/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue +++ b/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue @@ -100,6 +100,7 @@ function refreshFieldList(data: any) { onDragHandle() } +// 表格排序拖拽 function onDragHandle() { if (!tableRef.value) return diff --git a/ui/src/workflow/nodes/form-node/index.vue b/ui/src/workflow/nodes/form-node/index.vue index 8079a308116..87fe4788b7e 100644 --- a/ui/src/workflow/nodes/form-node/index.vue +++ b/ui/src/workflow/nodes/form-node/index.vue @@ -69,6 +69,8 @@ class="border" v-if="form_data.form_field_list.length > 0" :data="form_data.form_field_list" + ref="tableRef" + row-key="field" > () const formNodeFormRef = ref() +const tableRef = ref() const editFormField = (form_field_data: any, field_index: number) => { const _value = form_data.value.form_field_list.map((item: any, index: number) => { if (field_index === index) { @@ -185,6 +189,7 @@ const sync_form_field_list = () => { ] set(props.nodeModel.properties.config, 'fields', fields) props.nodeModel.clear_next_node_field(false) + onDragHandle() } const addFormCollectRef = ref>() const editFormCollectRef = ref>() @@ -243,6 +248,30 @@ const validate = () => { function submitDialog(val: string) { set(props.nodeModel.properties.node_data, 'form_content_format', val) } + +// 表格排序拖拽 +function onDragHandle() { + if (!tableRef.value) return + + // 获取表格的 tbody DOM 元素 + const wrapper = tableRef.value.$el as HTMLElement + const tbody = wrapper.querySelector('.el-table__body-wrapper tbody') + if (!tbody) return + // 初始化 Sortable + Sortable.create(tbody as HTMLElement, { + animation: 150, + ghostClass: 'ghost-row', + onEnd: (evt) => { + if (evt.oldIndex === undefined || evt.newIndex === undefined) return + // 更新数据顺序 + const items = [...form_data.value.form_field_list] + const [movedItem] = items.splice(evt.oldIndex, 1) + items.splice(evt.newIndex, 0, movedItem) + form_data.value.form_field_list = items + sync_form_field_list() + } + }) +} onMounted(() => { set(props.nodeModel, 'validate', validate) sync_form_field_list()