用例每个步骤下方需增加历史调用记录展现

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

@@ -19,6 +19,15 @@ export function getCaseStep(id) {
   })
 }
 
+// 查询步骤日志详细
+export function getCaseStepResultLog(id) {
+  return request({
+    url: '/test/testCaseStepResult/detail',
+    method: 'post',
+    data: {id}
+  })
+}
+
 // 新增步骤
 export function addCaseStep(data) {
   return request({

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

@@ -115,6 +115,27 @@
             </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="请求头" name="requestHeader">
+                <codemirror v-model="resultLog.requestHeader" :options="editorOptions" v-if="resultLog.requestHeader"/>
+              </el-tab-pane>
+              <el-tab-pane label="请求体" name="requestBody">
+                <codemirror v-model="resultLog.requestBody" :options="editorOptions" v-if="resultLog.requestBody"/>
+              </el-tab-pane>
+              <el-tab-pane label="响应头" name="responseHeader">
+                <codemirror v-model="resultLog.responseHeader" :options="editorOptions" v-if="resultLog.responseHeader"/>
+              </el-tab-pane>
+              <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>
       </el-tab-pane>
       <el-tab-pane label="校验" name="assertion">
         <el-table :data="form.assertion">
@@ -173,12 +194,18 @@
 
 <script>
 import JsonEditorVue from "json-editor-vue";
+import { codemirror } from "vue-codemirror";
+import "codemirror/lib/codemirror.css";
+import "codemirror/mode/sql/sql"; // 语言模式
+import "codemirror/theme/dracula.css";
+import "codemirror/addon/display/autorefresh";
 import {listHttp} from "@/api/test/http";
 import FolderPage from "@/components/FolderPage/index.vue";
 import {listApi} from "@/api/test/api";
+import {getCaseStepResultLog} from "@/api/test/caseStep";
 
 export default {
-  components: {FolderPage, JsonEditorVue},
+  components: {FolderPage, JsonEditorVue, codemirror},
   dicts: ['http_method', 'http_protocol','extract_type','extract_object','assert_condition'],
   props: {
     form: {
@@ -204,9 +231,34 @@ export default {
         pageSize: 10,
         groupId: null,
       },
+      resultLog: {
+        requestHeader: '',
+        requestBody: '',
+        responseHeader: '',
+        responseBody: '',
+        sqlResult: ''
+      },
+      title: '111111',
+      activeNames: 'requestHeader',
+      activeTabs: 'requestHeader',
+      editorOptions: {
+        autoRefresh: true,
+        mode: "sql", // 代码语言
+        theme: "dracula", // 主题
+        lineNumbers: true, // 显示行号
+        tabSize: 2
+      }
     }
   },
   methods: {
+    handleLogChange(val) {
+      const selectedItem = this.form.testCaseResultList.find(item => item.title === val);
+      if (selectedItem) {
+        getCaseStepResultLog(selectedItem.id).then(res => {
+          this.resultLog = res.data;
+        });
+      }
+    },
     preProcessFormData() {
       if (typeof this.form.requestHeader === 'string') {
         try {