用例编排功能优化

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

@@ -17,6 +17,7 @@ import org.springframework.validation.annotation.Validated;
 import org.springframework.web.bind.annotation.*;
 
 import java.util.List;
+import java.util.concurrent.CompletableFuture;
 
 /**
  * 用例Controller
@@ -87,6 +88,10 @@ public class TestCaseController extends BaseController {
     @PostMapping("/run")
     public AjaxResult run(@RequestBody IDQO qo) {
         log.info("执行用例 id:{}, jmeterHomePath:{}", qo.getId(), jmeterHomePath);
-        return success(testCaseService.executeTestCaseById(qo.getId(), jmeterHomePath));
+        // 异步执行任务
+        CompletableFuture.runAsync(() -> {
+            testCaseService.executeTestCaseById(qo.getId(), jmeterHomePath);
+        });
+        return toAjax(true);
     }
 }

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

@@ -6,7 +6,7 @@
       </el-form-item>
     </el-form>
     <el-tabs>
-      <el-tab-pane label="用例编排">
+      <el-tab-pane label="接口编排">
         <step @submit="submit"/>
       </el-tab-pane>
 <!--      <el-tab-pane label="操作日志">-->
@@ -96,7 +96,7 @@ export default {
       }).then(res => {
         this.$message.success("修改成功");
         this.loading = false;
-        this.$tab.closeOpenPage({path: "/case"});
+        // this.$tab.closeOpenPage({path: "/case"});
       })
     }
   }

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

@@ -99,7 +99,7 @@
           <el-table-column label="提取对象">
             <template slot-scope="scope">
               <el-select v-model="form.assignment[scope.$index].content" style="width: 100%;" placeholder="请选择提取对象">
-                <el-option v-for="dict in dict.type.extract_object" :key="dict.value" :label="dict.label" :value="dict.value" @change="e => handleTableEdit(e, 'assignment', scope)"/>
+                <el-option v-for="dict in extract_object" :key="dict.value" :label="dict.label" :value="dict.value" @change="e => handleTableEdit(e, 'assignment', scope)"/>
               </el-select>
 <!--              <el-input placeholder="请输入提取对象" v-model="form.assignment[scope.$index].content" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>-->
             </template>
@@ -130,9 +130,6 @@
               <el-tab-pane label="响应体" name="responseBody">
                 <codemirror v-model="resultLog.responseBody" :options="editorOptions" v-if="resultLog.responseBody"/>
               </el-tab-pane>
-              <el-tab-pane label="sql结果" name="sqlResult">
-                <codemirror v-model="resultLog.sqlResult" :options="editorOptions" v-if="resultLog.sqlResult"/>
-              </el-tab-pane>
             </el-tabs>
           </el-collapse-item>
         </el-collapse>
@@ -206,7 +203,7 @@ import {getCaseStepResultLog} from "@/api/test/caseStep";
 
 export default {
   components: {FolderPage, JsonEditorVue, codemirror},
-  dicts: ['http_method', 'http_protocol','extract_type','extract_object','assert_condition'],
+  dicts: ['http_method', 'http_protocol','extract_type','assert_condition'],
   props: {
     form: {
       type: Object
@@ -231,6 +228,16 @@ export default {
         pageSize: 10,
         groupId: null,
       },
+      extract_object: [{
+        value: '${RESPONSE_BODY}',
+        label: '${RESPONSE_BODY}'
+      }, {
+        value: '${RESPONSE_HEADER}',
+        label: '${RESPONSE_HEADER}'
+      }, {
+        value: '${RESPONSE_CODE}',
+        label: '${RESPONSE_CODE}'
+      }],
       resultLog: {
         requestHeader: '',
         requestBody: '',
@@ -238,7 +245,6 @@ export default {
         responseBody: '',
         sqlResult: ''
       },
-      title: '111111',
       activeNames: 'requestHeader',
       activeTabs: 'requestHeader',
       editorOptions: {

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

@@ -20,12 +20,18 @@
           </el-table-column>
           <el-table-column label="提取方式">
             <template slot-scope="scope">
-              <el-input placeholder="请输入提取方式" v-model="form.assignment[scope.$index].type" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
+              <el-select v-model="form.assignment[scope.$index].type" style="width: 100%;" placeholder="请选择提取方式">
+                <el-option v-for="dict in dict.type.extract_type" :key="dict.value" :label="dict.label" :value="dict.value" @change="e => handleTableEdit(e, 'assignment', scope)"/>
+              </el-select>
+<!--              <el-input placeholder="请输入提取方式" v-model="form.assignment[scope.$index].type" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>-->
             </template>
           </el-table-column>
           <el-table-column label="提取对象">
             <template slot-scope="scope">
-              <el-input placeholder="请输入提取对象" v-model="form.assignment[scope.$index].content" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>
+              <el-select v-model="form.assignment[scope.$index].content" style="width: 100%;" placeholder="请选择提取对象">
+                <el-option v-for="dict in extract_object" :key="dict.value" :label="dict.label" :value="dict.value" @change="e => handleTableEdit(e, 'assignment', scope)"/>
+              </el-select>
+<!--              <el-input placeholder="请输入提取对象" v-model="form.assignment[scope.$index].content" @input="e => handleTableEdit(e, 'assignment', scope)" clearable/>-->
             </template>
           </el-table-column>
           <el-table-column label="提取表达式">
@@ -39,6 +45,15 @@
             </template>
           </el-table-column>
         </el-table>
+        <el-collapse v-model="activeNames" accordion v-if="form.testCaseResultList" @change="handleLogChange">
+          <el-collapse-item :title="itemSub.title" :name="itemSub.title" v-for="(itemSub, index) in form.testCaseResultList" :key="index">
+            <el-tabs v-model="activeTabs">
+              <el-tab-pane label="sql结果" name="sqlResult">
+                <codemirror v-model="resultLog.sqlResult" :options="editorOptions" v-if="resultLog.sqlResult"/>
+              </el-tab-pane>
+            </el-tabs>
+          </el-collapse-item>
+        </el-collapse>
       </el-tab-pane>
       <el-tab-pane label="校验" name="assertion">
         <el-table :data="form.assertion">
@@ -54,7 +69,10 @@
           </el-table-column>
           <el-table-column label="条件">
             <template slot-scope="scope">
-              <el-input placeholder="请输入条件" v-model="form.assertion[scope.$index].fn" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>
+              <el-select v-model="form.assertion[scope.$index].fn" style="width: 100%;" placeholder="请选择条件">
+                <el-option v-for="dict in dict.type.assert_condition" :key="dict.value" :label="dict.label" :value="dict.value" @change="e => handleTableEdit(e, 'assertion', scope)"/>
+              </el-select>
+<!--              <el-input placeholder="请输入条件" v-model="form.assertion[scope.$index].fn" @input="e => handleTableEdit(e, 'assertion', scope)" clearable/>-->
             </template>
           </el-table-column>
           <el-table-column label="内容">
@@ -79,9 +97,11 @@ import "codemirror/lib/codemirror.css";
 import "codemirror/mode/sql/sql"; // 语言模式
 import "codemirror/theme/dracula.css";
 import "codemirror/addon/display/autorefresh";
+import {getCaseStepResultLog} from "@/api/test/caseStep";
 
 export default {
   components: { codemirror },
+  dicts: ['extract_type','assert_condition'],
   props: {
     form: {
       type: Object
@@ -93,6 +113,19 @@ export default {
   data() {
     return {
       activeName: "sql",
+      extract_object: [{
+        value: '${RESULT_DATA}',
+        label: '${RESULT_DATA}'
+      }],
+      resultLog: {
+        requestHeader: '',
+        requestBody: '',
+        responseHeader: '',
+        responseBody: '',
+        sqlResult: ''
+      },
+      activeNames: 'sqlResult',
+      activeTabs: 'sqlResult',
       editorOptions: {
         autoRefresh: true,
         mode: "sql", // 代码语言
@@ -102,6 +135,16 @@ export default {
       }
     }
   },
+  methods: {
+    handleLogChange(val) {
+      const selectedItem = this.form.testCaseResultList.find(item => item.title === val);
+      if (selectedItem) {
+        getCaseStepResultLog(selectedItem.id).then(res => {
+          this.resultLog = res.data;
+        });
+      }
+    },
+  }
 }
 </script>
 

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

@@ -1,14 +1,18 @@
 <template>
   <div v-loading="loading">
-    <div style="margin-bottom:20px;">
+    <div style="margin-bottom:20px;" v-if="isVisible">
       <el-dropdown trigger="click" @command="handleAdd">
         <el-button type="primary" plain icon="el-icon-plus" size="mini">添加步骤</el-button>
-        <el-button type="primary" plain icon="el-icon-caret-right" size="mini" @click="handleRun(id)">调试</el-button>
+        <el-button type="primary" plain icon="el-icon-caret-right" size="mini" :disabled="isVisible">调试</el-button>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item v-for="dict in dict.type.step_type" :command="dict.value" :key="dict.value">{{ dict.label }}</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
+    <div style="margin-bottom:20px;" v-if="!isVisible">
+      <el-button type="primary" plain icon="el-icon-edit" size="mini" @click="caseEditVisible">用例编排</el-button>
+      <el-button type="primary" plain icon="el-icon-caret-right" size="mini" @click="handleRun(id)">调试</el-button>
+    </div>
     <div>
     </div>
     <el-collapse v-model="activeName" accordion v-if="list && list.length">
@@ -32,7 +36,7 @@
     </el-collapse>
     <el-empty v-else/>
     <div class="footer">
-      <el-button type="primary" @click="submit">提 交</el-button>
+      <el-button type="primary" @click="submit" v-if="isVisible">提 交</el-button>
       <el-button @click="cancel">取 消</el-button>
     </div>
     <el-dialog title="操作日志详细" :visible.sync="open" >
@@ -61,6 +65,7 @@ export default {
   data() {
     return {
       id: '',
+      isVisible: false,
       loading: false,
       open: false,
       activeName: null,
@@ -153,6 +158,9 @@ export default {
 
   },
   methods: {
+    caseEditVisible() {
+      this.isVisible = true;
+    },
     handleRun(id) {
       this.$modal.confirm('是否确认执行用例？').then(function () {
         return runCase(id);
@@ -207,10 +215,13 @@ export default {
       });
     },
     submit() {
+      this.isVisible = false;
       this.$emit("submit", this.list);
     },
     cancel() {
-      this.$tab.closeOpenPage({path: "/case"});
+      this.isVisible = false;
+      this.$tab.refreshPage({path: "/case/detail/?id=" + this.id})
+      // this.$tab.closeOpenPage({path: "/case"});
     },
     handleDel(index) {
       this.list.splice(index, 1)