From 69cebe8f7ff03183773caf079956f4930eb6e7c5 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 7 Apr 2025 17:57:11 +0800
Subject: [PATCH] feat: The workflow condition node supports drag and drop
 sorting

---
 ui/package.json                               |   4 +-
 ui/src/components/index.ts                    |   1 -
 .../workflow/nodes/condition-node/index.vue   | 261 ++++++++++--------
 3 files changed, 146 insertions(+), 120 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 861163bd6d5..cee7a41c8fd 100644
--- a/ui/package.json
+++ b/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",
diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts
index 4cf9df91329..5fe7bf8194c 100644
--- a/ui/src/components/index.ts
+++ b/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)
diff --git a/ui/src/workflow/nodes/condition-node/index.vue b/ui/src/workflow/nodes/condition-node/index.vue
index fdda27de243..a775c83eb66 100644
--- a/ui/src/workflow/nodes/condition-node/index.vue
+++ b/ui/src/workflow/nodes/condition-node/index.vue
@@ -8,130 +8,144 @@
       ref="ConditionNodeFormRef"
       @submit.prevent
     >
-      <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"
-          style="--el-card-padding: 12px"
-        >
-          <div class="flex-between lighter">
-            {{ item.type }}
-            <div class="info" v-if="item.conditions.length > 1">
-              <span>{{ $t('views.applicationWorkflow.nodes.conditionNode.conditions.info') }}</span>
-              <el-select
-                :teleported="false"
-                v-model="item.condition"
-                size="small"
-                style="width: 60px; margin: 0 8px"
-              >
-                <el-option :label="$t('views.applicationWorkflow.condition.AND')" value="and" />
-                <el-option :label="$t('views.applicationWorkflow.condition.OR')" value="or" />
-              </el-select>
-              <span>{{
-                $t('views.applicationWorkflow.nodes.conditionNode.conditions.label')
-              }}</span>
+      <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="handle flex-between lighter">
+              {{ item.type }}
+              <div class="info" v-if="item.conditions.length > 1">
+                <span>{{
+                  $t('views.applicationWorkflow.nodes.conditionNode.conditions.info')
+                }}</span>
+                <el-select
+                  :teleported="false"
+                  v-model="item.condition"
+                  size="small"
+                  style="width: 60px; margin: 0 8px"
+                >
+                  <el-option :label="$t('views.applicationWorkflow.condition.AND')" value="and" />
+                  <el-option :label="$t('views.applicationWorkflow.condition.OR')" value="or" />
+                </el-select>
+                <span>{{
+                  $t('views.applicationWorkflow.nodes.conditionNode.conditions.label')
+                }}</span>
+              </div>
             </div>
-          </div>
-          <div v-if="index !== form_data.branch.length - 1" class="mt-8">
-            <template v-for="(condition, cIndex) in item.conditions" :key="cIndex">
-              <el-row :gutter="8">
-                <el-col :span="11">
-                  <el-form-item
-                    :prop="'branch.' + index + '.conditions.' + cIndex + '.field'"
-                    :rules="{
-                      type: 'array',
-                      required: true,
-                      message: $t('views.applicationWorkflow.variable.placeholder'),
-                      trigger: 'change'
-                    }"
-                  >
-                    <NodeCascader
-                      ref="nodeCascaderRef"
-                      :nodeModel="nodeModel"
-                      class="w-full"
-                      :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
-                      v-model="condition.field"
-                    />
-                  </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <el-form-item
-                    :prop="'branch.' + index + '.conditions.' + cIndex + '.compare'"
-                    :rules="{
-                      required: true,
-                      message: $t(
-                        'views.applicationWorkflow.nodes.conditionNode.conditions.requiredMessage'
-                      ),
-                      trigger: 'change'
-                    }"
-                  >
-                    <el-select
-                      @wheel="wheel"
-                      :teleported="false"
-                      v-model="condition.compare"
-                      :placeholder="
-                        $t(
+            <div v-if="index !== form_data.branch.length - 1" class="mt-8">
+              <template v-for="(condition, cIndex) in item.conditions" :key="cIndex">
+                <el-row :gutter="8">
+                  <el-col :span="11">
+                    <el-form-item
+                      :prop="'branch.' + index + '.conditions.' + cIndex + '.field'"
+                      :rules="{
+                        type: 'array',
+                        required: true,
+                        message: $t('views.applicationWorkflow.variable.placeholder'),
+                        trigger: 'change'
+                      }"
+                    >
+                      <NodeCascader
+                        ref="nodeCascaderRef"
+                        :nodeModel="nodeModel"
+                        class="w-full"
+                        :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
+                        v-model="condition.field"
+                      />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item
+                      :prop="'branch.' + index + '.conditions.' + cIndex + '.compare'"
+                      :rules="{
+                        required: true,
+                        message: $t(
                           'views.applicationWorkflow.nodes.conditionNode.conditions.requiredMessage'
+                        ),
+                        trigger: 'change'
+                      }"
+                    >
+                      <el-select
+                        @wheel="wheel"
+                        :teleported="false"
+                        v-model="condition.compare"
+                        :placeholder="
+                          $t(
+                            'views.applicationWorkflow.nodes.conditionNode.conditions.requiredMessage'
+                          )
+                        "
+                        clearable
+                        @change="changeCondition($event, index, cIndex)"
+                      >
+                        <template v-for="(item, index) in compareList" :key="index">
+                          <el-option :label="item.label" :value="item.value" />
+                        </template>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item
+                      v-if="
+                        !['is_null', 'is_not_null', 'is_true', 'is_not_true'].includes(
+                          condition.compare
                         )
                       "
-                      clearable
-                      @change="changeCondition($event, index, cIndex)"
+                      :prop="'branch.' + index + '.conditions.' + cIndex + '.value'"
+                      :rules="{
+                        required: true,
+                        message: $t('views.applicationWorkflow.nodes.conditionNode.valueMessage'),
+                        trigger: 'blur'
+                      }"
                     >
-                      <template v-for="(item, index) in compareList" :key="index">
-                        <el-option :label="item.label" :value="item.value" />
-                      </template>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                  <el-form-item
-                    v-if="
-                      !['is_null', 'is_not_null', 'is_true', 'is_not_true'].includes(
-                        condition.compare
-                      )
-                    "
-                    :prop="'branch.' + index + '.conditions.' + cIndex + '.value'"
-                    :rules="{
-                      required: true,
-                      message: $t('views.applicationWorkflow.nodes.conditionNode.valueMessage'),
-                      trigger: 'blur'
-                    }"
-                  >
-                    <el-input
-                      v-model="condition.value"
-                      :placeholder="
-                        $t('views.applicationWorkflow.nodes.conditionNode.valueMessage')
-                      "
-                    />
-                  </el-form-item>
-                </el-col>
-                <el-col :span="1">
-                  <el-button
-                    :disabled="index === 0 && cIndex === 0"
-                    link
-                    type="info"
-                    class="mt-4"
-                    @click="deleteCondition(index, cIndex)"
-                  >
-                    <el-icon><Delete /></el-icon>
-                  </el-button>
-                </el-col>
-              </el-row>
-            </template>
-          </div>
+                      <el-input
+                        v-model="condition.value"
+                        :placeholder="
+                          $t('views.applicationWorkflow.nodes.conditionNode.valueMessage')
+                        "
+                      />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="1">
+                    <el-button
+                      :disabled="index === 0 && cIndex === 0"
+                      link
+                      type="info"
+                      class="mt-4"
+                      @click="deleteCondition(index, cIndex)"
+                    >
+                      <el-icon><Delete /></el-icon>
+                    </el-button>
+                  </el-col>
+                </el-row>
+              </template>
+            </div>
 
-          <el-button
-            link
-            type="primary"
-            @click="addCondition(index)"
-            v-if="index !== form_data.branch.length - 1"
-          >
-            <el-icon class="mr-4"><Plus /></el-icon>
-            {{ $t('views.applicationWorkflow.nodes.conditionNode.addCondition') }}
-          </el-button>
-        </el-card>
-      </template>
+            <el-button
+              link
+              type="primary"
+              @click="addCondition(index)"
+              v-if="index !== form_data.branch.length - 1"
+            >
+              <el-icon class="mr-4"><Plus /></el-icon>
+              {{ $t('views.applicationWorkflow.nodes.conditionNode.addCondition') }}
+            </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 = {