Add case step detail component and drawer for report detail view.

web/src/views/record/build/components/caseStepDetail.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import {ref, watch, onMounted} from "vue";
+import {reactive} from 'vue';
+import MirrorCode from "@/components/MirrorCode/index.vue";
+
+const activeName =  ref('StepResponseBody')
+
+const props = defineProps({
+  reportData: {
+    type: Object,
+    default: () => {
+    }
+  }
+})
+
+const state = reactive({
+  runLog: "",
+  status_code: "",
+  response_time: "",
+  content_type: "",
+  responseBody: "",
+  headers: "",
+  editorConfig: { language: 'python', theme: 'vs' },
+})
+
+const initData = () => {
+  let data
+  if (props.reportData) {
+    data = props.reportData
+    state.runLog = eval('(' + data['log_data'] + ')').join('')
+    state.status_code = data['status_code']
+    state.response_time = data['run_time']
+    state.responseBody = data['requests_body']
+    state.headers = JSON.parse(data['requests_header'])
+  }
+}
+
+watch(
+    () => props.reportData,
+    () => {
+      initData()
+    },
+    {deep: true}
+);
+
+onMounted(() => {
+  initData()
+})
+
+</script>
+
+<template>
+  <div>
+    <el-tabs v-model="activeName" style="overflow-y: auto">
+
+      <!--响应体-->
+      <el-tab-pane name='StepResponseBody'>
+        <template #label>
+          <strong>实时响应</strong>
+        </template>
+        <div class="response">
+          <div class="response-info">
+            <el-tag type="success"
+                    class="response-info__item"
+                    effect="dark">
+              {{ state.status_code === 200 ? state.status_code + ' OK' : state.status_code }}
+            </el-tag>
+            <el-tag type="success"
+                    effect="plain"
+                    class="response-info__item">
+              响应时间：{{ state.response_time }} ms
+            </el-tag>
+          </div>
+        </div>
+        <div>
+          <mirror-code
+              style="height: 500px"
+              v-model="state.responseBody"
+              :constModelData="state.responseBody"
+              :editorConfig="state.editorConfig"
+          >
+          </mirror-code>
+        </div>
+      </el-tab-pane>
+
+      <!--请求信息-->
+      <el-tab-pane name='ApiRequest'>
+        <template #label>
+          <strong>请求头</strong>
+        </template>
+        <div>
+          <div v-for="(value, key) in state.headers" :key="key">
+          <span style="font-size: 12px">
+          <span style="font-weight: 600">{{ key }}: </span><span>{{ value }}</span>
+          </span>
+          </div>
+        </div>
+      </el-tab-pane>
+
+      <!--运行日志-->
+      <el-tab-pane name='ApiResponseLog'>
+        <template #label>
+          <strong>运行日志</strong>
+        </template>
+        <div>
+          <mirror-code
+              style="height: 500px"
+              v-model="state.runLog"
+              :constModelData="state.runLog"
+              :editorConfig="state.editorConfig"
+          >
+          </mirror-code>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.response {
+  .response-info {
+    margin-bottom: 15px;
+
+    .response-info__item {
+      margin-right: 8px;
+    }
+  }
+}
+</style>

web/src/views/record/build/components/detail.vue

@@ -51,11 +51,29 @@
                       {{ item.name }}
                     </div>
                     <div style="float: right">
-                      <el-button type="primary" link>详情</el-button>
+                      <el-button type="primary" link @click="viewDetail(item)">详情</el-button>
                     </div>
                   </div>
                 </div>
               </div>
+              <el-drawer
+                  v-model="state.showDetailInfo"
+                  size="70%"
+                  append-to-body
+                  direction="ltr"
+                  destroy-on-close
+                  :with-header="true">
+                <template #header>
+                        <span>
+                          <strong class="pr10">报告详情</strong>
+                          <el-tag type="danger" v-if="state.statisticsData.success === 0">不通过</el-tag>
+                          <el-tag type="success" v-else>通过</el-tag>
+                        </span>
+                </template>
+                <div style="height: 500px; overflow-y: auto">
+                  <case-step-detail :reportData="ResponseData"></case-step-detail>
+                </div>
+              </el-drawer>
             </template>
           </el-table-column>
           <el-table-column prop="name" label="用例名称"></el-table-column>
@@ -114,6 +132,7 @@ import ReportStatistics from "./ReportStatistics.vue"
 import {Close, Search, WarningFilled} from "@element-plus/icons-vue";
 import {ElMessage, ElPagination} from "element-plus";
 import {recordDetail} from "@/api/record";
+import CaseStepDetail from "@/views/record/build/components/caseStepDetail.vue";
 
 const route = useRoute()
 
@@ -137,6 +156,7 @@ const state = reactive({
     step_success_count: 1,
     success: 1
   },
+  showDetailInfo: false
 })
 
 const queryParams = reactive({
@@ -145,19 +165,14 @@ const queryParams = reactive({
   page: 1
 })
 
-const methods = reactive([
-  {id: 0, type: '', name: 'POST'},
-  {id: 1, type: 'success', name: 'GET'},
-  {id: 2, type: 'warning', name: 'PUT'},
-  {id: 3, type: 'danger', name: 'DELETE'}
-])
-
 const tableLoading = ref(false)
 
 const tableData = ref([])
 
 const count = ref(0)
 
+const ResponseData = ref()
+
 const reportStatus = computed(() => {
   return state.statisticsData?.success === 1 || state.statisticsData?.success
 })
@@ -181,6 +196,16 @@ const handlePageChange = (newPage: any) => {
   queryList()
 }
 
+const viewDetail = (row) => {
+  if (row) {
+    console.log("测试")
+    console.log(row)
+    console.log("测试")
+    state.showDetailInfo = true
+    ResponseData.value = eval(row)
+  }
+}
+
 queryList()
 </script>