feat: apitest接口接入

src/api/apitest.ts

@@ -0,0 +1,5 @@
+import axios from '@/utils/axios';
+
+import { APITEST_PREFIX } from './prefix';
+
+export const getAPITestInfosByProjectId = (projectId: number) => axios.get(`${APITEST_PREFIX}/list/${projectId}`);

src/api/index.ts

@@ -2,10 +2,12 @@ import * as UserAPI from './user';
 import * as ProjectAPI from './project';
 import * as RequirementAPI from './tree';
 import * as PipelineAPI from './pipeline';
+import * as APITestAPI from './apitest';
 
 export {
   UserAPI,
   ProjectAPI,
   RequirementAPI,
   PipelineAPI,
+  APITestAPI,
 };

src/api/prefix.ts

@@ -3,3 +3,4 @@ export const DEPLOYMENT_PREFIX = '/deployments';
 export const USER_PREFIX = '/users';
 export const TREE_PREFIX = '/tree';
 export const PROJECT_PREFIX = '/project';
+export const APITEST_PREFIX = '/test';

src/components/APITestInfoForm.vue

@@ -0,0 +1,120 @@
+<template>
+  <right-form ref="rightForm">
+    <div class="APITestInfoForm">
+      <div class="title">测试任务详情</div>
+      <div class="marginTop">
+        <ElRow>
+          <ElCol :span="3">
+            <div class="key">url：</div>
+          </ElCol>
+          <ElCol :span="12" :offset="2">
+            <div class="value">{{info.url}}</div>
+          </ElCol>
+        </ElRow>
+      </div>
+      <div class="marginTop">
+        <ElRow>
+          <ElCol :span="3">
+            <div class="key">params：</div>
+          </ElCol>
+          <ElCol :span="12" :offset="2">
+            <div>
+              <vue-json-editor
+                :height="'400px'"
+                :value="info.params"
+                :show-btns="false"
+                :mode="'code'"
+                :modes="['code']"
+                lang="zh"
+              ></vue-json-editor>
+            </div>
+          </ElCol>
+        </ElRow>
+      </div>
+      <div class="marginTop">
+        <ElRow>
+          <ElCol :span="3">
+            <div class="key">并发数：</div>
+          </ElCol>
+          <ElCol :span="12" :offset="2">
+            <div class="value">{{info.qps}}</div>
+          </ElCol>
+        </ElRow>
+      </div>
+      <div class="title">测试结果</div>
+      <div v-if="info.success === 0 && info.failure === 0">
+        还未运行！
+      </div>
+      <div v-else>
+        <div class="marginTop">
+          <ElRow>
+            <ElCol :span="3">
+              <div class="key">成功：</div>
+            </ElCol>
+            <ElCol :span="12" :offset="2">
+              <div class="value">{{info.success}}</div>
+            </ElCol>
+          </ElRow>
+        </div>
+        <div class="marginTop">
+          <ElRow>
+            <ElCol :span="3">
+              <div class="key">失败：</div>
+            </ElCol>
+            <ElCol :span="12" :offset="2">
+              <div class="value">{{info.failure}}</div>
+            </ElCol>
+          </ElRow>
+        </div>
+      </div>
+    </div>
+  </right-form>
+</template>
+
+<script>
+import vueJsonEditor from 'vue-json-editor';
+import RightForm from './RightForm.vue';
+
+export default {
+  components: {
+    vueJsonEditor,
+    RightForm,
+  },
+  name: 'APITestInfoForm',
+  data() {
+    return {
+    };
+  },
+  props: {
+    info: {
+      type: Object,
+    },
+  },
+  methods: {
+    showForm() {
+      this.$refs.rightForm.showForm();
+    },
+  },
+};
+</script>
+
+<style>
+.APITestInfoForm {
+  margin-left: 30px;
+}
+.APITestInfoForm .title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-top: 20px;
+}
+.APITestInfoForm .marginTop {
+  margin-top: 20px;
+}
+.APITestInfoForm .marginTop .key {
+  font-size: 20px;
+  font-weight: bold;
+}
+.APITestInfoForm .marginTop .value {
+  font-size: 18px;
+}
+</style>

src/element-plus.ts

@@ -4,6 +4,7 @@ import {
   ElCarousel,
   ElCarouselItem,
   ElContainer,
+  ElCol,
   ElDivider,
   ElHeader,
   ElLink,
@@ -32,6 +33,7 @@ export const Components = [
   ElAside,
   ElRow,
   ElContainer,
+  ElCol,
   ElHeader,
   ElMain,
   ElMenu,

src/views/Project/APITest.vue

@@ -59,7 +59,7 @@
             <template v-else-if="scope.row.state === '已完成'">
               <el-button type="primary" size="small" disabled>执行测试</el-button>
             </template>
-            <el-button type="warning" size="small">查看详情</el-button>
+            <el-button type="warning" size="small" @click="handleClick('viewDetail', scope.row.testId)">查看详情</el-button>
             <el-button type="danger" size="small" @click="handleClick('delete', scope.row.testId)">删除</el-button>
           </template>
         </el-table-column>
@@ -110,15 +110,21 @@
         </template>
       </el-dialog>
     </div>
+    <div>
+      <APITestInfoForm ref="apiTestInfoForm" :info="resultJson"></APITestInfoForm>
+    </div>
   </div>
 </template>
 
 <script>
 import vueJsonEditor from 'vue-json-editor';
+import { APITestAPI } from '@/api';
+import APITestInfoForm from '../../components/APITestInfoForm.vue';
 
 export default {
   components: {
     vueJsonEditor,
+    APITestInfoForm,
   },
   data() {
     return {
@@ -147,9 +153,25 @@ export default {
         createTime: '',
         username: '',
       },
+      resultJson: {
+        url: 'www.baidu.com',
+        params: {
+          name: 'zhangsan',
+          age: 12,
+          occupation: 'SoftWare Engineer',
+        },
+        qps: 10,
+        success: 9,
+        failure: 1,
+        timeList: [4, 3, 5, 6, 2, 2, 10, 7, 1, 8],
+      },
       jsonValid: true,
     };
   },
+  async mounted() {
+    const testJson = await APITestAPI.getAPITestInfosByProjectId(1);
+    console.log(testJson);
+  },
   methods: {
     async handleClick(action, id) {
       switch (action) {
@@ -162,6 +184,10 @@ export default {
           console.log('运行测试');
           break;
         }
+        case 'viewDetail': {
+          this.$refs.apiTestInfoForm.showForm();
+          break;
+        }
         case 'delete': {
           console.log('删除测试任务');
           break;