feat: table support sort(#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/UserInputFieldTable.vue

@@ -21,6 +21,7 @@
     v-if="props.nodeModel.properties.user_input_field_list?.length > 0"
     :data="props.nodeModel.properties.user_input_field_list"
     class="mb-16"
+    ref="tableRef"
   >
     <el-table-column prop="field" :label="$t('dynamicsForm.paramForm.field.label')" width="95">
       <template #default="{ row }">
@@ -107,12 +108,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 +132,7 @@ function openChangeTitleDialog() {
 function deleteField(index: any) {
   inputFieldList.value.splice(index, 1)
   props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+  ondragHandel()
 }
 
 function refreshFieldList(data: any, index: any) {
@@ -153,6 +157,7 @@ function refreshFieldList(data: any, index: any) {
   }
   UserFieldFormDialogRef.value.close()
   props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+  ondragHandel()
 }
 
 function refreshFieldTitle(data: any) {
@@ -178,6 +183,33 @@ const getDefaultValue = (row: any) => {
   }
 }
 
+function ondragHandel() {
+  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
+  console.log(tbody)
+  // 初始化 Sortable
+  Sortable.create(tbody, {
+    animation: 150,
+    ghostClass: 'ghost-row',
+    onEnd: (evt) => {
+      if (evt.oldIndex === undefined || evt.newIndex === undefined) return
+      console.log(inputFieldList.value)
+      // 更新数据顺序
+      const items = [...inputFieldList.value]
+      const [movedItem] = items.splice(evt.oldIndex, 1)
+      items.splice(evt.newIndex, 0, movedItem)
+      inputFieldList.value = items
+      console.log(inputFieldList.value)
+      // set(props.nodeModel.properties, 'user_input_field_list', inputFieldList.value)
+      props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
+    }
+  })
+}
+
 onMounted(() => {
   if (!props.nodeModel.properties.user_input_field_list) {
     if (props.nodeModel.properties.input_field_list) {
@@ -211,6 +243,7 @@ onMounted(() => {
   })
   set(props.nodeModel.properties, 'user_input_field_list', inputFieldList)
   set(props.nodeModel.properties, 'user_input_config', inputFieldConfig)
+  ondragHandel()
 })
 </script>