测试任务用例编排拖曳功能

test-test/src/main/java/com/test/test/controller/TestTaskCaseController.java

@@ -3,20 +3,14 @@ package com.test.test.controller;
 import com.test.common.annotation.Log;
 import com.test.common.core.controller.BaseController;
 import com.test.common.core.domain.AjaxResult;
-import com.test.common.core.page.TableDataInfo;
 import com.test.common.enums.BusinessType;
-import com.test.common.utils.DateUtils;
-import com.test.test.domain.TestTask;
 import com.test.test.domain.TestTaskCase;
-import com.test.test.domain.qo.GroupIdQO;
-import com.test.test.domain.qo.IDQO;
 import com.test.test.service.ITestTaskCaseService;
-import com.test.test.service.ITestTaskService;
 import jakarta.annotation.Resource;
-import org.springframework.validation.annotation.Validated;
+import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.*;
+import org.springframework.web.bind.annotation.RequestBody;
-
+import org.springframework.web.bind.annotation.RequestMapping;
-import java.util.List;
+import org.springframework.web.bind.annotation.RestController;
 
 /**
  * 定时任务用例关联Controller
@@ -44,4 +38,13 @@ public class TestTaskCaseController extends BaseController {
     public AjaxResult remove(@RequestBody TestTaskCase testTaskCase) {
         return toAjax(testTaskCaseService.deleteTestTaskCase(testTaskCase));
     }
+
+    /**
+     * 更新定时任务用例关联
+     */
+    @Log(title = "更新任务用例关联", businessType = BusinessType.UPDATE)
+    @PostMapping("/edit")
+    public AjaxResult edit(@RequestBody TestTaskCase testTaskCase) {
+        return toAjax(testTaskCaseService.updateTestTaskCase(testTaskCase));
+    }
 }

test-test/src/main/resources/mapper/test/TestTaskCaseMapper.xml

@@ -43,10 +43,9 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
     <update id="updateTestTaskCase" parameterType="TestTaskCase">
         update test_task_case
         <trim prefix="SET" suffixOverrides=",">
-            <if test="caseId != null">case_id = #{caseId},</if>
             <if test="sort != null">sort = #{sort},</if>
         </trim>
-        where task_id = #{taskId}
+        where task_id = #{taskId} and case_id = #{caseId}
     </update>
 
     <delete id="deleteTestTaskCaseByTaskId" parameterType="Long">

test-ui/src/api/test/taskCase.js

@@ -9,6 +9,15 @@ export function addTaskCase(data) {
   })
 }
 
+// 修改用例
+export function updateTaskCase(data) {
+  return request({
+    url: '/test/taskCase/edit',
+    method: 'post',
+    data: data
+  })
+}
+
 // 删除用例
 export function delTaskCase(data) {
   return request({

test-ui/src/views/test/task/edit/taskDetails.vue

@@ -75,17 +75,29 @@
           </el-col>
           <right-toolbar @queryTable="getCaseList"></right-toolbar>
         </el-row>
-        <el-table :data="caseList">
+        <!-- 表格头部 -->
-          <el-table-column label="用例名称" align="center" prop="name"/>
+        <div class="table-header">
-          <el-table-column label="执行顺序" sortable align="center" prop="sort"/>
+          <span>用例名称</span>
-          <el-table-column label="创建人" align="center" prop="createBy"/>
+          <span>执行顺序</span>
-          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <span>创建人</span>
-            <template slot-scope="scope">
+          <span>操作</span>
-              <el-button size="mini" type="text" icon="el-icon-delete" @click="delCase(scope.row.id)">删除</el-button>
+        </div>
-            </template>
+        <!-- 使用 draggable 控制数据列表 -->
-          </el-table-column>
+        <draggable v-model="caseList" @end="onDragEnd">
-        </el-table>
+          <transition-group>
+            <div v-for="item in caseList" :key="item.id" class="table-row">
+              <!-- 手动构建表格行的内容 -->
+              <span>{{ item.name }}</span>
+              <span>{{ item.sort }}</span>
+              <span>{{ item.createBy }}</span>
+              <span>
+            <el-button size="mini" type="text" icon="el-icon-delete" @click="delCase(item.id)">删除</el-button>
+          </span>
+            </div>
+          </transition-group>
+        </draggable>
       </div>
+
     </div>
     <el-dialog :visible.sync="dialogFormVisible" title="添加用例" width="80%">
       <caseTable :caseList="caseList" :taskId="form.id" @success="getCaseList"/>
@@ -100,13 +112,15 @@
 </template>
 
 <script>
+import draggable from "vuedraggable";
 import cronParser from "cron-parser";
 import caseTable from "./caseTable.vue";
-import {delTaskCase} from "@/api/test/taskCase";
+import {delTaskCase, updateTaskCase} from "@/api/test/taskCase";
 
 export default {
   components: {
     caseTable,
+    draggable,
   },
   props: {
     task: {
@@ -197,6 +211,21 @@ export default {
     };
   },
   methods: {
+    // 拖拽结束后更新排序值
+    onDragEnd() {
+      this.updateSortValues();
+    },
+    // 更新每行数据的 sort 值
+    updateSortValues() {
+      this.caseList.forEach((item, index) => {
+        item.sort = index + 1;
+        updateTaskCase({
+          taskId: this.form.id,
+          caseId: item.id,
+          sort: item.sort,
+        })
+      });
+    },
     // 根据crontab表达式更新执行时间
     updateExecutionTimes() {
       const crontab = this.form.crontab.trim();
@@ -262,6 +291,30 @@ export default {
 };
 </script>
 <style scoped lang="scss">
+.table-header, .table-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px;
+}
+
+.table-header {
+  font-weight: bold;
+  background-color: #f5f7fa;
+  border-bottom: 1px solid #EBEEF5;
+}
+
+.table-row {
+  border-bottom: 1px solid #EBEEF5;
+}
+
+.table-header span, .table-row span {
+  width: 25%;
+  text-align: center;
+}
+
+.drag-handler {
+  cursor: move; /* 改变鼠标手势 */
+}
 .headline {
   color: #4f597f;
   font-size: 14px;