feat: The workflow condition node supports drag and drop sorting (#2648)

ui/package.json

@@ -50,9 +50,11 @@
     "vue-clipboard3": "^2.0.0",
     "vue-codemirror": "^6.1.1",
     "vue-demi": "latest",
+    "vue-draggable-plus": "^0.6.0",
     "vue-i18n": "^9.13.1",
     "vue-router": "^4.2.4",
-    "vue3-menus": "^1.1.2"
+    "vue3-menus": "^1.1.2",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.2",

ui/src/components/index.ts

@@ -25,7 +25,6 @@ import LogoIcon from './logo/LogoIcon.vue'
 import SendIcon from './logo/SendIcon.vue'
 import CodemirrorEditor from './codemirror-editor/index.vue'
 import ModelSelect from './model-select/index.vue'
-
 export default {
   install(app: App) {
     app.component(AppIcon.name, AppIcon)

ui/src/workflow/nodes/condition-node/index.vue

@@ -7,18 +7,31 @@
       label-width="auto"
       ref="ConditionNodeFormRef"
       @submit.prevent
+    >
+      <VueDraggable
+        ref="el"
+        v-model="form_data.branch"
+        :disabled="form_data.branch === 2"
+        :filter="'.no-drag'"
+        handle=".handle"
+        :animation="150"
+        ghostClass="ghost"
+        @end="onEnd"
       >
         <template v-for="(item, index) in form_data.branch" :key="item.id">
           <el-card
             v-resize="(wh: any) => resizeCondition(wh, item, index)"
             shadow="never"
             class="card-never mb-8"
+            :class="{ 'no-drag': index === form_data.branch.length - 1 }"
             style="--el-card-padding: 12px"
           >
-          <div class="flex-between lighter">
+            <div class="handle flex-between lighter">
               {{ item.type }}
               <div class="info" v-if="item.conditions.length > 1">
-              <span>{{ $t('views.applicationWorkflow.nodes.conditionNode.conditions.info') }}</span>
+                <span>{{
+                  $t('views.applicationWorkflow.nodes.conditionNode.conditions.info')
+                }}</span>
                 <el-select
                   :teleported="false"
                   v-model="item.condition"
@@ -132,6 +145,7 @@
             </el-button>
           </el-card>
         </template>
+      </VueDraggable>
       <el-button link type="primary" @click="addBranch">
         <el-icon class="mr-4"><Plus /></el-icon>
         {{ $t('views.applicationWorkflow.nodes.conditionNode.addBranch') }}
@@ -147,6 +161,7 @@ import type { FormInstance } from 'element-plus'
 import { ref, computed, onMounted, nextTick } from 'vue'
 import { randomId } from '@/utils/utils'
 import { compareList } from '@/workflow/common/data'
+import { type DraggableEvent, type UseDraggableReturn, VueDraggable } from 'vue-draggable-plus'
 
 const props = defineProps<{ nodeModel: any }>()
 const form = {
@@ -223,6 +238,16 @@ const validate = () => {
   })
 }
 
+function onEnd(evt: DraggableEvent) {
+  const { oldIndex, newIndex, clonedData } = evt
+  if (oldIndex === undefined || newIndex === undefined) return
+  const list = cloneDeep(props.nodeModel.properties.node_data.branch)
+
+  list[newIndex].type = list[oldIndex].type
+  list[oldIndex].type = clonedData.type // 恢复原始 type
+  set(props.nodeModel.properties.node_data, 'branch', list)
+}
+
 function addBranch() {
   const list = cloneDeep(props.nodeModel.properties.node_data.branch)
   const obj = {