增加拖拽效果

src/views/task/components/addAndEditForm.vue

@@ -59,54 +59,85 @@
             <el-button @click="handleAddAccount" icon="el-icon-plus" type="text">添加步骤</el-button>
         </h3>
 
-        <el-form
+        <draggable
-            :key="item.id"
+            v-model="accountForm"
-            :model="item"
+            animation="300"
-            label-width="120px"
+            direction="vertical"
-            class="account-form"
+            @end="onDragEnd"
-            :rules="accountFormRules"
+            class="draggable-container"
-            :ref="`accountFormRef${index}`"
-            v-for="(item, index) in accountForm"
         >
-            <el-row>
+            <div v-for="(item, index) in accountForm" :key="item.id" class="draggable-item">
-                <el-col :span="12">
+                <el-form
-                    <el-form-item label="操作元素" prop="loginAccount">
+                    :model="item"
-                        <el-input v-model="item.loginAccount" clearable placeholder="请输入操作元素" />
+                    label-width="120px"
-                    </el-form-item>
+                    class="account-form"
-                </el-col>
+                    :rules="accountFormRules"
-                <el-col :span="12">
+                    :ref="`accountFormRef${index}`"
-                    <el-form-item>
+                >
-                        <el-button
+                    <el-row>
-                            type="text"
+                        <el-col :span="12">
-                            style="color: red"
+                            <el-form-item label="操作元素" prop="loginAccount">
-                            icon="el-icon-delete"
+                                <el-input v-model="item.loginAccount" clearable placeholder="请输入操作元素" />
-                            v-if="index > 0"
+                            </el-form-item>
-                            @click="handleDeleteAccount(index)"
+                        </el-col>
-                        >
+                        <el-col :span="12">
-                            删除
+                            <el-form-item>
-                        </el-button>
+                                <div class="action-buttons">
-                    </el-form-item>
+                                    <el-button
-                </el-col>
+                                        type="text"
-            </el-row>
+                                        icon="el-icon-arrow-up"
-            <el-row>
+                                        :disabled="index === 0"
-                <el-col :span="12">
+                                        @click="moveUp(index)"
-                    <el-form-item label="元素值" prop="loginPassword">
+                                        title="上移"
-                        <el-input v-model="item.loginPassword" clearable placeholder="请输入元素值" />
+                                    >
-                    </el-form-item>
+                                    </el-button>
-                </el-col>
+                                    <el-button
-                <el-col :span="12">
+                                        type="text"
-                    <el-form-item label="交互方式" prop="accountRole">
+                                        icon="el-icon-arrow-down"
-                        <el-input v-model="item.accountRole" clearable placeholder="请输入交互方式" />
+                                        :disabled="index === accountForm.length - 1"
-                    </el-form-item>
+                                        @click="moveDown(index)"
-                </el-col>
+                                        title="下移"
-            </el-row>
+                                    >
-        </el-form>
+                                    </el-button>
+                                    <el-button
+                                        type="text"
+                                        style="color: red"
+                                        icon="el-icon-delete"
+                                        v-if="index > 0"
+                                        @click="handleDeleteAccount(index)"
+                                        title="删除"
+                                    >
+                                        删除
+                                    </el-button>
+                                </div>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="元素值" prop="loginPassword">
+                                <el-input v-model="item.loginPassword" clearable placeholder="请输入元素值" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="交互方式" prop="accountRole">
+                                <el-input v-model="item.accountRole" clearable placeholder="请输入交互方式" />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+            </div>
+        </draggable>
     </div>
 </template>
 
 <script>
+import draggable from 'vuedraggable'
 export default {
     name: 'AddAndEditForm',
+    components: {
+        draggable,
+    },
     data() {
         return {
             basicInfoForm: {
@@ -163,6 +194,25 @@ export default {
             this.accountForm.splice(index, 1)
         },
 
+        // 拖拽结束事件
+        onDragEnd(evt) {},
+
+        // 上移步骤
+        moveUp(index) {
+            if (index > 0) {
+                const item = this.accountForm.splice(index, 1)[0]
+                this.accountForm.splice(index - 1, 0, item)
+            }
+        },
+
+        // 下移步骤
+        moveDown(index) {
+            if (index < this.accountForm.length - 1) {
+                const item = this.accountForm.splice(index, 1)[0]
+                this.accountForm.splice(index + 1, 0, item)
+            }
+        },
+
         async submitForm() {
             try {
                 await this.$refs.basicInfoFormRef.validate()
@@ -177,11 +227,98 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.account-form {
+.draggable-container {
     margin-top: 20px;
+}
+
+.draggable-item {
+    margin-bottom: 15px;
+    transition: all 0.3s ease;
+
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+}
+
+.account-form {
     border: 1px solid #dfe6ec;
     padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    background: #fff;
+    transition: all 0.3s ease;
+
+    &:hover {
+        border-color: #409eff;
+    }
+}
+
+.drag-handle {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    cursor: move;
+    color: #909399;
+    font-size: 12px;
+    padding: 10px 5px;
+    border: 1px dashed #dcdfe6;
     border-radius: 4px;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+    background: #f5f7fa;
+    transition: all 0.3s ease;
+
+    &:hover {
+        color: #409eff;
+        border-color: #409eff;
+        background: #ecf5ff;
+    }
+
+    i {
+        font-size: 16px;
+        margin-bottom: 4px;
+    }
+
+    span {
+        font-size: 10px;
+    }
+}
+
+.action-buttons {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+
+    .el-button {
+        padding: 5px 8px;
+        min-height: auto;
+
+        &:hover {
+            background: #f5f7fa;
+        }
+
+        &.is-disabled {
+            color: #c0c4cc;
+            cursor: not-allowed;
+        }
+    }
+}
+
+// 拖拽时的样式
+.sortable-ghost {
+    opacity: 0.5;
+    background: #f0f9ff;
+    border: 2px dashed #409eff;
+}
+
+.sortable-chosen {
+    background: #ecf5ff;
+    border-color: #409eff;
+}
+
+.sortable-drag {
+    transform: rotate(5deg);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
 }
 </style>