实现测试用例编排拖曳功能、解决用例编排步骤引入接口后参数没有带入以及无法删除的问题、解决点击执行用例调整用例编排页面的问题

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

@@ -60,6 +60,9 @@ public class TestCaseStepController extends BaseController {
     @Log(title = "步骤", businessType = BusinessType.UPDATE)
     @PostMapping("/edit")
     public AjaxResult edit(@RequestBody TestCaseStep testCaseStep) {
+        if (testCaseStep.getId() == null) {
+            return null;
+        }
         return toAjax(testCaseStepService.updateTestCaseStep(testCaseStep));
     }
 

test-ui/src/views/test/case/detail/page1.vue

@@ -229,15 +229,22 @@ export default {
             value: "",
           }]
         }
+
         if (row.param && JSON.parse(row.param).length) {
-          this.form.requestParam = JSON.parse(row.param);
+          this.form.requestParams = JSON.parse(row.param);
-          this.form.requestParam.push([{}])
+          this.form.requestParams.push([{}])
         } else {
-          this.form.requestParam = [{
+          this.form.requestParams = [{
             key: "",
             value: "",
           }]
         }
+
+        if (row.body) {
+          this.form.requestBody = row.body;
+        } else {
+          this.form.requestBody = '';
+        }
       }
     },
     apiHttpIdHandleChange(e) {
@@ -271,16 +278,16 @@ export default {
     },
     handleTableEdit(e, flag, scope) {
       if (flag === "header") {
-        if (e && this.form.header.length === scope.$index + 1) {
+        if (e && this.form.requestHeader.length === scope.$index + 1) {
-          this.form.header.push({
+          this.form.requestHeader.push({
             key: "",
             value: ""
           })
         }
       }
       if (flag === "param") {
-        if (e && this.form.param.length === scope.$index + 1) {
+        if (e && this.form.requestParams.length === scope.$index + 1) {
-          this.form.param.push({
+          this.form.requestParams.push({
             key: "",
             value: ""
           })
@@ -289,10 +296,10 @@ export default {
     },
     handleDelete(flag, scope) {
       if (flag === "header") {
-        this.form.header.splice(scope.$index, 1)
+        this.form.requestHeader.splice(scope.$index, 1)
       }
       if (flag === "param") {
-        this.form.param.splice(scope.$index, 1)
+        this.form.requestParams.splice(scope.$index, 1)
       }
       if (flag === "assignment") {
         this.form.assignment.splice(scope.$index, 1)

test-ui/src/views/test/case/detail/step.vue

@@ -8,7 +8,10 @@
         </el-dropdown-menu>
       </el-dropdown>
     </div>
+    <div>
+    </div>
     <el-collapse v-model="activeName" accordion v-if="list && list.length">
+      <draggable v-model="list" @end="onDragEnd">
       <el-collapse-item :name="index" v-for="(item, index) in list" :key="index" v-if="!item.parentId">
         <template slot="title">
           <el-button size="mini" plain type="warning" icon="el-icon-rank" circle style="margin-right: 12px"/>
@@ -16,6 +19,7 @@
           <el-tag v-if="item.name" effect="plain" style="width: 240px;text-align: center;margin-right: 12px;" type="info">{{ item.name }}</el-tag>
           <el-tag v-if="item.datasourceId" effect="plain" style="width: 240px;text-align: center;margin-right: 12px;" type="info">{{ datasourceList.findLast(t => t.id === item.datasourceId).name }}</el-tag>
           <el-tag v-if="item.requestUrl" effect="plain" style="text-align: center;margin-right: 12px;" type="success">{{ item.requestUrl }}</el-tag>
+          <el-tag effect="plain" style="text-align: center;margin-right: 12px;">{{ index + 1 }}</el-tag>
         </template>
         <el-button size="mini" type="text" @click="handleDel(index)" style="float: right">删除</el-button>
         <page1 v-if="item.type == 1" :form="item" :hosts="hosts"/>
@@ -23,6 +27,7 @@
         <page3 v-if="item.type == 3" :form="item" :list="list" :hosts="hosts" :datasourceList="datasourceList"/>
         <page4 v-if="item.type == 4" :form="item" :list="list" :hosts="hosts" :datasourceList="datasourceList"/>
       </el-collapse-item>
+      </draggable>
     </el-collapse>
     <el-empty v-else/>
     <div class="footer">
@@ -33,7 +38,8 @@
 </template>
 
 <script>
-import {listCaseStep} from "@/api/test/caseStep";
+import draggable from "vuedraggable";
+import {listCaseStep, updateCaseStep} from "@/api/test/caseStep";
 import page1 from "./page1.vue"
 import page2 from "./page2.vue"
 import page3 from "./page3.vue"
@@ -43,7 +49,7 @@ import {listDatasource} from "@/api/test/database";
 
 export default {
   dicts: ['step_type'],
-  components: {page1, page2, page3, page4},
+  components: {draggable, page1, page2, page3, page4},
   data() {
     return {
       loading: false,
@@ -98,6 +104,20 @@ export default {
 
   },
   methods: {
+    // 拖拽结束后更新排序值
+    onDragEnd() {
+      this.updateSortValues();
+    },
+    // 更新每行数据的 sort 值
+    updateSortValues() {
+      this.list.forEach((item, index) => {
+        item.stepNum = index + 1;
+        updateCaseStep({
+          id: item.id,
+          stepNum: item.stepNum,
+        })
+      });
+    },
     handleAdd(type) {
       this.list.push({
         name: "",

test-ui/src/views/test/case/index.vue

@@ -14,8 +14,8 @@
         <el-table-column label="创建时间" align="center" prop="createTime"/>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template slot-scope="scope">
-            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleRun(scope.row.id)">执行</el-button>
+            <el-button size="mini" type="text" icon="el-icon-delete" @click.native.stop="handleRun(scope.row.id)">执行</el-button>
-            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button>
+            <el-button size="mini" type="text" icon="el-icon-delete" @click.native.stop="handleDelete(scope.row.id)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>

test-ui/src/views/test/task/index.vue

@@ -15,8 +15,8 @@
         <el-table-column label="创建时间" align="center" prop="createTime"/>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template slot-scope="scope">
-            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleRun(scope.row.id)">执行</el-button>
+            <el-button size="mini" type="text" icon="el-icon-delete" @click.native.stop="handleRun(scope.row.id)">执行</el-button>
-            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button>
+            <el-button size="mini" type="text" icon="el-icon-delete" @click.native.stop="handleDelete(scope.row.id)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>