feat: User input parameters and interface parameters support adjusting the order(#2103)

* feat: table support sort(#2103)

* feat: User input parameters and interface parameters support adjusting the order(#2103)

* feat: User input parameters and interface parameters support adjusting the order(#2103)

Author: wangdan-fit2cloud

ui/package.json

@@ -18,6 +18,7 @@
     "@ctrl/tinycolor": "^4.1.0",
     "@logicflow/core": "^1.2.27",
     "@logicflow/extension": "^1.2.27",
+    "@types/sortablejs": "^1.15.8",
     "@vavt/cm-extension": "^1.6.0",
     "@vueuse/core": "^10.9.0",
     "@wecom/jssdk": "^2.1.0",
@@ -42,6 +43,7 @@
     "pinyin-pro": "^3.18.2",
     "recorder-core": "^1.3.24040900",
     "screenfull": "^6.0.2",
+    "sortablejs": "^1.15.6",
     "use-element-plus-theme": "^0.0.5",
     "vue": "^3.3.4",
     "vue-clipboard3": "^2.0.0",

ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue

@@ -5,13 +5,15 @@
       <el-icon class="mr-4">
         <Plus />
       </el-icon>
-    {{$t('common.add')}}
+      {{ $t('common.add') }}
     </el-button>
   </div>
   <el-table
     v-if="props.nodeModel.properties.api_input_field_list?.length > 0"
     :data="props.nodeModel.properties.api_input_field_list"
     class="mb-16"
+    ref="tableRef"
+    row-key="field"
   >
     <el-table-column prop="variable" :label="$t('dynamicsForm.paramForm.field.label')" />
     <el-table-column prop="default_value" :label="$t('dynamicsForm.default.label')" />
@@ -48,11 +50,13 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { set } from 'lodash'
+import Sortable from 'sortablejs'
 import ApiFieldFormDialog from './ApiFieldFormDialog.vue'
 import { MsgError } from '@/utils/message'
 import { t } from '@/locales'
-const props = defineProps<{ nodeModel: any }>()
 
+const props = defineProps<{ nodeModel: any }>()
+const tableRef = ref()
 const currentIndex = ref(null)
 const ApiFieldFormDialogRef = ref()
 const inputFieldList = ref<any[]>([])
@@ -67,6 +71,7 @@ function openAddDialog(data?: any, index?: any) {
 function deleteField(index: any) {
   inputFieldList.value.splice(index, 1)
   props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+  onDragHandle()
 }
 
 function refreshFieldList(data: any) {
@@ -92,6 +97,30 @@ function refreshFieldList(data: any) {
   currentIndex.value = null
   ApiFieldFormDialogRef.value.close()
   props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+  onDragHandle()
+}
+
+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, {
+    animation: 150,
+    ghostClass: 'ghost-row',
+    onEnd: (evt) => {
+      if (evt.oldIndex === undefined || evt.newIndex === undefined) return
+      // 更新数据顺序
+      const items = [...inputFieldList.value]
+      const [movedItem] = items.splice(evt.oldIndex, 1)
+      items.splice(evt.newIndex, 0, movedItem)
+      inputFieldList.value = items
+      props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+    }
+  })
 }
 
 onMounted(() => {

ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue

@@ -21,6 +21,8 @@
     v-if="props.nodeModel.properties.user_input_field_list?.length > 0"
     :data="props.nodeModel.properties.user_input_field_list"
     class="mb-16"
+    ref="tableRef"
+    row-key="field"
   >
     <el-table-column prop="field" :label="$t('dynamicsForm.paramForm.field.label')" width="95">
       <template #default="{ row }">
@@ -107,12 +109,14 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { set } from 'lodash'
+import Sortable from 'sortablejs'
 import UserFieldFormDialog from './UserFieldFormDialog.vue'
 import { MsgError } from '@/utils/message'
 import { t } from '@/locales'
 import UserInputTitleDialog from '@/workflow/nodes/base-node/component/UserInputTitleDialog.vue'
 const props = defineProps<{ nodeModel: any }>()
 
+const tableRef = ref()
 const UserFieldFormDialogRef = ref()
 const UserInputTitleDialogRef = ref()
 const inputFieldList = ref<any[]>([])
@@ -129,6 +133,7 @@ function openChangeTitleDialog() {
 function deleteField(index: any) {
   inputFieldList.value.splice(index, 1)
   props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+  onDragHandle()
 }
 
 function refreshFieldList(data: any, index: any) {
@@ -153,6 +158,7 @@ function refreshFieldList(data: any, index: any) {
   }
   UserFieldFormDialogRef.value.close()
   props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+  onDragHandle()
 }
 
 function refreshFieldTitle(data: any) {
@@ -178,6 +184,29 @@ const getDefaultValue = (row: any) => {
   }
 }
 
+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, {
+    animation: 150,
+    ghostClass: 'ghost-row',
+    onEnd: (evt) => {
+      if (evt.oldIndex === undefined || evt.newIndex === undefined) return
+      // 更新数据顺序
+      const items = [...inputFieldList.value]
+      const [movedItem] = items.splice(evt.oldIndex, 1)
+      items.splice(evt.newIndex, 0, movedItem)
+      inputFieldList.value = items
+      props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+    }
+  })
+}
+
 onMounted(() => {
   if (!props.nodeModel.properties.user_input_field_list) {
     if (props.nodeModel.properties.input_field_list) {
@@ -211,6 +240,7 @@ onMounted(() => {
   })
   set(props.nodeModel.properties, 'user_input_field_list', inputFieldList)
   set(props.nodeModel.properties, 'user_input_config', inputFieldConfig)
+  onDragHandle()
 })
 </script>