增加测试关联到报告的功能

frontend/src/business/components/api/report/ApiReportList.vue

@@ -7,8 +7,7 @@
                            :show-create="false"/>
         </template>
         <el-table :data="tableData" class="table-content">
-          <el-table-column prop="name" :label="$t('commons.name')" width="150" show-overflow-tooltip>
-          </el-table-column>
+          <el-table-column prop="name" :label="$t('commons.name')" width="150" show-overflow-tooltip/>
           <el-table-column width="250" :label="$t('commons.create_time')">
             <template v-slot:default="scope">
               <span>{{ scope.row.createTime | timestampFormatDate }}</span>

frontend/src/business/components/api/test/ApiReportDialog.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="relate_report">
+    <el-button type="success" plain @click="search">{{$t('api_report.title')}}</el-button>
+
+    <el-dialog :title="$t('api_report.title')" :visible.sync="reportVisible">
+      <el-table :data="tableData">
+        <el-table-column :label="$t('commons.name')" width="150" show-overflow-tooltip>
+          <template v-slot:default="scope">
+            <el-link type="info" @click="link(scope.row)">{{ scope.row.name }}</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column width="250" :label="$t('commons.create_time')">
+          <template v-slot:default="scope">
+            <span>{{ scope.row.createTime | timestampFormatDate }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column width="250" :label="$t('commons.update_time')">
+          <template v-slot:default="scope">
+            <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" :label="$t('commons.status')">
+          <template v-slot:default="{row}">
+            <ms-api-report-status :row="row"/>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import MsApiReportStatus from "../report/ApiReportStatus";
+
+  export default {
+    name: "MsApiReportDialog",
+
+    components: {MsApiReportStatus},
+
+    data() {
+      return {
+        reportVisible: false,
+        result: {},
+        tableData: [],
+        loading: false
+      }
+    },
+
+    methods: {
+      search() {
+        this.reportVisible = true;
+
+        this.result = this.$get("/api/report/recent/99", response => {
+          this.tableData = response.data;
+        });
+      },
+      link(row) {
+        this.reportVisible = false;
+
+        this.$router.push({
+          path: '/api/report/view/' + row.id,
+        })
+      }
+    },
+  }
+</script>
+
+<style scoped>
+  .relate_report {
+    margin-left: 10px;
+  }
+</style>

frontend/src/business/components/api/test/ApiTestConfig.vue

@@ -23,7 +23,10 @@
               <el-button type="primary" plain v-if="isShowRun" @click="runTest">
                 {{$t('api_test.run')}}
               </el-button>
+
               <el-button type="warning" plain @click="cancel">{{$t('commons.cancel')}}</el-button>
+
+              <ms-api-report-dialog/>
             </el-row>
           </el-header>
           <ms-api-scenario-config :scenarios="test.scenarioDefinition" ref="config"/>
@@ -36,16 +39,19 @@
 <script>
   import MsApiScenarioConfig from "./components/ApiScenarioConfig";
   import {Test} from "./model/ScenarioModel"
+  import MsApiReportStatus from "../report/ApiReportStatus";
+  import MsApiReportDialog from "./ApiReportDialog";
 
   export default {
     name: "MsApiTestConfig",
 
-    components: {MsApiScenarioConfig},
+    components: {MsApiReportDialog, MsApiReportStatus, MsApiScenarioConfig},
 
     props: ["id"],
 
     data() {
       return {
+        reportVisible: false,
         create: false,
         result: {},
         projects: [],