feat: 重写接口测试界面

src/api/apitest.ts

@@ -19,3 +19,7 @@ export const createAPITest = (APITest: CreateAPITest) => axios.post(`${APITEST_P
 export const deleteAPITestByTestId = (testId: number) => axios.get(`${APITEST_PREFIX}/delete/${testId}`);
 
 export const executeAPITestByTestId = (testId: number) => axios.get(`${APITEST_PREFIX}/execute/${testId}`);
+
+export const getAPITestResultByTestId = (testId: number) => axios.get(`${APITEST_PREFIX}/result/${testId}`);
+
+export const getLatestResultByTestId = (testId: number) => axios.get(`${APITEST_PREFIX}/latest/${testId}`);

src/components/APITestInfoForm.vue

@@ -1,220 +0,0 @@
-<template>
-  <right-form ref="rightForm">
-    <div class="APITestInfoForm">
-      <div class="title">测试任务详情</div>
-      <div class="marginTop">
-        <ElRow>
-          <ElCol :span="4">
-            <div class="key">url：</div>
-          </ElCol>
-          <ElCol :span="12" :offset="1">
-            <div class="value">{{info.url}}</div>
-          </ElCol>
-        </ElRow>
-      </div>
-      <div class="marginTop">
-        <ElRow>
-          <ElCol :span="4">
-            <div class="key">params：</div>
-          </ElCol>
-          <ElCol :span="12" :offset="1">
-            <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="4">
-            <div class="key">待测url方法：</div>
-          </ElCol>
-          <ElCol :span="12" :offset="1">
-            <div class="value">{{info.method}}</div>
-          </ElCol>
-        </ElRow>
-      </div>
-      <div class="marginTop">
-        <ElRow>
-          <ElCol :span="4">
-            <div class="key">并发数：</div>
-          </ElCol>
-          <ElCol :span="12" :offset="1">
-            <div class="value">{{info.qps}}</div>
-          </ElCol>
-        </ElRow>
-      </div>
-      <div class="title">测试结果</div>
-      <div v-if="info.success === 0 && info.failure === 0" class="marginTop">
-        还未运行！
-      </div>
-      <div v-else>
-        <div v-if="(info.failure === info.qps) || info.success === 0">
-          访问接口失败，请检查接口输入是否规范！
-        </div>
-        <div v-else class="marginTop">
-          <ElRow>
-            <ElCol :span="7">
-              <div id="chart1" style="height: 500px; width: 350px"></div>
-            </ElCol>
-            <ElCol :span="12" :offset="2">
-              <div id="chart2" style="height: 500px; width: 450px"></div>
-            </ElCol>
-          </ElRow>
-        </div>
-      </div>
-    </div>
-  </right-form>
-</template>
-
-<script>
-import vueJsonEditor from 'vue-json-editor';
-import * as echarts from 'echarts';
-import RightForm from './RightForm.vue';
-
-export default {
-  components: {
-    vueJsonEditor,
-    RightForm,
-  },
-  name: 'APITestInfoForm',
-  data() {
-    return {
-    };
-  },
-  props: {
-    info: {
-      type: Object,
-    },
-  },
-  async mounted() {
-    const that = this;
-    setInterval(() => {
-      this.$nextTick(() => {
-        that.initChart1();
-        that.initChart2();
-      });
-    }, 3000);
-  },
-  methods: {
-    showForm() {
-      this.$refs.rightForm.showForm();
-    },
-    async initChart1() {
-      const chart1 = echarts.init(document.getElementById('chart1'));
-      const options1 = {
-        title: {
-          text: `并发数：${this.info.qps}`,
-          x: 'center',
-          y: 'center',
-          textStyle: {
-            fontSize: 16,
-          },
-        },
-        tooltip: {
-          trigger: 'item',
-        },
-        series: [
-          {
-            type: 'pie',
-            radius: ['40%', '50%'],
-            clockwise: true,
-            avoidLabelOverlap: true,
-            hoverOffset: 15,
-            data: [
-              { value: this.info.success, name: '成功', itemStyle: { color: '#CCFF99' } },
-              { value: this.info.failure, name: '失败', itemStyle: { color: '#FF6600' } },
-            ],
-          },
-        ],
-      };
-      chart1.setOption(options1);
-    },
-    async initChart2() {
-      const chart2 = echarts.init(document.getElementById('chart2'));
-      const option2 = {
-        title: {
-          text: '访问时间曲线图',
-          bottom: '5%',
-          left: 'center',
-        },
-        tooltip: {
-          trigger: 'trigger',
-          axisPointer: {
-            type: 'cross',
-            label: {
-              backgroundColor: '#6a7985',
-            },
-          },
-        },
-        xAxis: [
-          {
-            type: 'category',
-            boundaryGap: false,
-          },
-        ],
-        yAxis: [
-          {
-            name: '执行时间/单位ms',
-            type: 'value',
-            min: 'dataMin',
-            max: 'dataMax',
-          },
-        ],
-        series: [
-          {
-            name: '访问时间',
-            data: this.info.timeList,
-            type: 'line',
-            smooth: true,
-            showSymbol: true,
-            symbolSize: 3,
-            symbol: 'circle',
-            itemStyle: { color: '#8D67FF' },
-            markPoint: {
-              data: [
-                { type: 'max', name: '最大值' },
-                { type: 'min', name: '最小值' },
-              ],
-            },
-            markLine: {
-              data: [
-                { type: 'average', name: '平均值' },
-              ],
-            },
-          },
-        ],
-      };
-      chart2.setOption(option2);
-    },
-  },
-};
-</script>
-
-<style>
-.APITestInfoForm {
-  margin-left: 30px;
-}
-.APITestInfoForm .title {
-  font-size: 25px;
-  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/router/index.ts

@@ -56,7 +56,7 @@ const routes: Array<RouteRecordRaw> = [
       },
       {
         path: 'apitest',
-        component: () => import(/* webpackChunkName: "project" */'@/views/Project/APITest1.vue'),
+        component: () => import(/* webpackChunkName: "project" */'@/views/Project/APITest.vue'),
       },
     ],
   }),

src/views/Project/APITest.vue

@@ -1,82 +1,175 @@
 <template>
-  <div class="apiTestContainer">
-    <div class="apiTestHeader">
-      <div class="title">接口测试</div>
-      <el-button size="medium" type="primary" icon="el-icon-plus" @click="handleClick('create')">新建接口测试</el-button>
-    </div>
-    <div class="apiTestTableContainer">
-      <el-table
-        :data="APITests">
-        <el-table-column
+  <ElTabs class="tabs" v-model="activeTab">
+    <ElTabPane label="接口测试" name="apitest">
+      <ElTable :data="apitests" width="100%">
+        <ElTableColumn
           prop="testId"
           label="ID"
           align="center"
-          width="100">
-        </el-table-column>
-        <el-table-column
+          width="60">
+        </ElTableColumn>
+        <ElTableColumn
           prop="testName"
           label="测试名称"
           align="center"
-          width="400">
-        </el-table-column>
-        <el-table-column
-          prop="state"
-          label="状态"
-          align="center"
-          width="100"
-          :filters="[{ text: '进行中', value: '进行中' }, { text: '已完成', value: '已完成' }]"
-          :filter-method="(value, row) => {return row.result === value;}"
-          filter-placement="bottom-end">
-          <template #default="scope">
-            <template v-if="scope.row.state === '进行中'">
-              <el-tag>{{scope.row.state}}<i class="el-icon-loading"></i></el-tag>
-            </template>
-            <template v-else-if="scope.row.state === '完成'">
-              <el-tag type="success">{{scope.row.state}}</el-tag>
-            </template>
-          </template>
-        </el-table-column>
-        <el-table-column
+          width="300">
+        </ElTableColumn>
+        <ElTableColumn
           prop="username"
           label="创建者"
           align="center"
-          width="200">
-        </el-table-column>
-        <el-table-column
+          width="180">
+        </ElTableColumn>
+        <ElTableColumn
           prop="createTime"
           label="创建时间"
           align="center"
           width="250">
-        </el-table-column>
-        <el-table-column
-          prop="executeTime"
-          label="完成时间"
-          align="center"
-          width="250">
+        </ElTableColumn>
+        <ElTableColumn
+          label="详情"
+          align="center">
           <template #default="scope">
-            <template v-if="scope.row.executeTime === null">
-              <span>还未执行</span>
-            </template>
-            <template v-else>
-              <span>{{scope.row.executeTime}}</span>
-            </template>
+            <ElButton
+              @click="handleClick('latest', scope.row.testId)"
+              type="text"
+              size="small">最近执行详情</ElButton>
+            <ElButton @click="handleClick('detail', scope.row.testId)" type="text" size="small">测试任务详情</ElButton>
           </template>
-        </el-table-column>
-        <el-table-column
-          label="操作"
+        </ElTableColumn>
+        <ElTableColumn
           align="center">
+          <template #header>
+            <span>操作</span>
+            <ElButton @click="handleClick('create')" type="text" class="add-button">新建</ElButton>
+          </template>
           <template #default="scope">
-            <template v-if="scope.row.state === '进行中'">
-              <el-button type="primary" size="small" @click="handleClick('trigger', scope.row.testId)">执行测试</el-button>
-            </template>
-            <template v-else-if="scope.row.state === '完成'">
-              <el-button type="primary" size="small" disabled>执行测试</el-button>
-            </template>
-            <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>
+            <ElButton @click="handleClick('trigger', scope.row.testId)" type="text" size="small">触发</ElButton>
+            <ElButton @click="handleClick('delete', scope.row.testId)" type="text" size="small">删除</ElButton>
           </template>
-        </el-table-column>
-      </el-table>
+        </ElTableColumn>
+      </ElTable>
+      <!-- 测试任务详情 -->
+      <ElDrawer
+        v-model="detailDrawer"
+        :size="800">
+        <template #title>
+          <el-row class="entry-row">
+            <el-col :span="2">
+              <div class="node-type">测试</div>
+            </el-col>
+            <el-col :span="2">
+              <template class="entry-row">
+                <span>#{{detailAPIInfo.testId}}</span>
+              </template>
+            </el-col>
+            <el-col :span="4">
+              <template class="entry-row">
+                <span>{{detailAPIInfo.testName}}</span>
+              </template>
+            </el-col>
+          </el-row>
+        </template>
+        <template #default>
+          <el-row type="flex" justify="center">
+            <el-col :span="20">
+              <el-tabs
+                v-model="detailTab">
+                <el-tab-pane label="基本信息" name="basic_info">
+                  <el-row class="entry-row" style="margin-top: 15px">
+                    <el-col :span="4">
+                      <h4>url: </h4>
+                    </el-col>
+                    <el-col :span="18">
+                      <div>{{detailAPIInfo.url}}</div>
+                    </el-col>
+                  </el-row>
+                  <el-row class="entry-row" style="margin-top: 15px">
+                    <el-col :span="4">
+                      <h4>params: </h4>
+                    </el-col>
+                    <el-col :span="18">
+                      <div>
+                        <vue-json-editor
+                          :height="'400px'"
+                          v-model="detailAPIInfo.params"
+                          :show-btns="false"
+                          :mode="'code'"
+                          :modes="['code']"
+                          lang="zh"></vue-json-editor>
+                      </div>
+                    </el-col>
+                  </el-row>
+                  <el-row class="entry-row" style="margin-top: 15px">
+                    <el-col :span="4">
+                      <h4>method: </h4>
+                    </el-col>
+                    <el-col :span="18">
+                      <div>{{detailAPIInfo.method}}</div>
+                    </el-col>
+                  </el-row>
+                  <el-row class="entry-row" style="margin-top: 15px">
+                    <el-col :span="4">
+                      <h4>qps: </h4>
+                    </el-col>
+                    <el-col :span="18">
+                      <div>{{detailAPIInfo.qps}}</div>
+                    </el-col>
+                  </el-row>
+                </el-tab-pane>
+                <el-tab-pane label="执行历史" name="execute_history">
+                  <h5>注：Max、Min、Average的单位均为ms</h5>
+                  <el-table :data="testResults" width="100%">
+                    <el-table-column
+                      prop="id"
+                      label="ID"
+                      align="center"
+                      width="60">
+                    </el-table-column>
+                    <el-table-column
+                      prop="executeTime"
+                      label="执行时间"
+                      align="center">
+                    </el-table-column>
+                    <el-table-column
+                      prop="success"
+                      label="成功"
+                      align="center">
+                    </el-table-column>
+                    <el-table-column
+                      prop="failure"
+                      label="失败"
+                      align="center">
+                      <template #default="scope">
+                        {{scope.row.failure}}
+                        <span v-if="scope.row.success === 0">
+                          <i class="el-icon-warning" title="url/参数有误或者服务器出错！"></i>
+                        </span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column
+                      prop="maxTime"
+                      label="Max"
+                      align="center">
+                    </el-table-column>
+                    <el-table-column
+                      prop="minTime"
+                      label="Min"
+                      align="center">
+                    </el-table-column>
+                    <el-table-column
+                      prop="averageTime"
+                      label="Average"
+                      align="center">
+                    </el-table-column>
+                  </el-table>
+                </el-tab-pane>
+              </el-tabs>
+            </el-col>
+          </el-row>
+        </template>
+      </ElDrawer>
+      <!-- 新建测试任务 -->
       <el-dialog
         v-model="showAPITestCreateModel"
         width="600px"
@@ -131,27 +224,109 @@
           </span>
         </template>
       </el-dialog>
-    </div>
-    <div>
-      <APITestInfoForm ref="apiTestInfoForm" :info="detailedJson"></APITestInfoForm>
-    </div>
-  </div>
+      <ElDrawer
+        v-model="latestDrawer"
+        :size="750">
+        <template #title>
+          <el-row class="entry-row">
+            <el-col :span="3">
+              <div class="node-type">测试结果</div>
+            </el-col>
+            <el-col :span="2">
+              <template class="entry-row">
+                <span>#{{latestResultInfo.id}}</span>
+              </template>
+            </el-col>
+          </el-row>
+        </template>
+        <template #default>
+          <el-row type="flex" justify="center">
+            <el-col :span="22">
+              <el-row class="entry-row" style="margin-top: 15px">
+                <el-col :span="5">
+                  <h4>执行时间：</h4>
+                </el-col>
+                <el-col :span="18">
+                  <div>{{latestResultInfo.executeTime}}</div>
+                </el-col>
+              </el-row>
+              <el-row class="entry-row" style="margin-top: 15px">
+                <el-col :span="5">
+                  <h4>成功：</h4>
+                </el-col>
+                <el-col :span="18">
+                  <div>{{latestResultInfo.success}}</div>
+                </el-col>
+              </el-row>
+              <el-row class="entry-row" style="margin-top: 15px">
+                <el-col :span="5">
+                  <h4>失败：</h4>
+                </el-col>
+                <el-col :span="18">
+                  <div>
+                    {{latestResultInfo.failure}}
+                    <span v-if="latestResultInfo.success === 0" style="color: red">（url/参数输入有误或者服务器出错！）</span>
+                  </div>
+                </el-col>
+              </el-row>
+              <el-row class="entry-row" style="margin-top: 15px">
+                <el-col :span="5">
+                  <h4>maxTime：</h4>
+                </el-col>
+                <el-col :span="18">
+                  <div>{{latestResultInfo.maxTime}} ms</div>
+                </el-col>
+              </el-row>
+              <el-row class="entry-row" style="margin-top: 15px">
+                <el-col :span="5">
+                  <h4>minTime：</h4>
+                </el-col>
+                <el-col :span="18">
+                  <div>{{latestResultInfo.minTime}} ms</div>
+                </el-col>
+              </el-row>
+              <el-row class="entry-row" style="margin-top: 15px">
+                <el-col :span="5">
+                  <h4>averageTime：</h4>
+                </el-col>
+                <el-col :span="18">
+                  <div>{{latestResultInfo.averageTime}} ms</div>
+                </el-col>
+              </el-row>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <div id="chart1" style="height: 500px; width: 350px"></div>
+            </el-col>
+            <el-col :span="12">
+              <div id="chart2" style="height: 500px; width: 350px"></div>
+            </el-col>
+          </el-row>
+        </template>
+      </ElDrawer>
+    </ElTabPane>
+  </ElTabs>
 </template>
 
 <script>
 import vueJsonEditor from 'vue-json-editor';
 import { APITestAPI } from '@/api';
 import { ElMessage } from 'element-plus';
-import APITestInfoForm from '../../components/APITestInfoForm.vue';
+import * as echarts from 'echarts';
 
 export default {
   components: {
     vueJsonEditor,
-    APITestInfoForm,
   },
   data() {
     return {
-      APITests: [],
+      activeTab: 'apitest',
+      apitests: [],
+      detailDrawer: false,
+      detailAPIInfo: [],
+      detailTab: 'basic_info',
+      testResults: [],
       showAPITestCreateModel: false,
       createAPITestForm: {
         testName: '',
@@ -163,33 +338,52 @@ export default {
         username: '',
       },
       methodList: ['GET', 'POST'],
-      detailedJson: {},
       jsonValid: true,
+      latestDrawer: false,
+      latestResultInfo: {},
+      qps: 0,
+      timer: null,
     };
   },
   async mounted() {
-    this.APITests = await APITestAPI.getAPITestInfosByProjectId(this.$store.state.workspace.currentProjectId);
+    this.apitests = await APITestAPI.getAPITestInfosByProjectId(this.$store.state.workspace.currentProjectId);
   },
   methods: {
     async handleClick(action, id) {
       switch (action) {
         case 'create': {
           this.showAPITestCreateModel = true;
-          // console.log(this.$store.state.workspace.currentProjectId);
           break;
         }
-        case 'trigger': {
-          await APITestAPI.executeAPITestByTestId(id);
-          this.APITests = await APITestAPI.getAPITestInfosByProjectId(this.$store.state.workspace.currentProjectId);
+        case 'latest': {
+          this.latestResultInfo = await APITestAPI.getLatestResultByTestId(id);
+          this.apitests.forEach((item) => {
+            if (item.testId === id) {
+              this.qps = item.qps;
+            }
+          });
+          this.latestDrawer = true;
+          const that = this;
+          this.timer = setTimeout(() => {
+            this.$nextTick(() => {
+              that.initChart1();
+              that.initChart2();
+            });
+          }, 1500);
           break;
         }
-        case 'viewDetail': {
-          this.APITests.forEach((item) => {
+        case 'detail': {
+          this.apitests.forEach((item) => {
             if (item.testId === id) {
-              this.detailedJson = item;
+              this.detailAPIInfo = item;
             }
           });
-          this.$refs.apiTestInfoForm.showForm();
+          this.testResults = await APITestAPI.getAPITestResultByTestId(id);
+          this.detailDrawer = true;
+          break;
+        }
+        case 'trigger': {
+          await APITestAPI.executeAPITestByTestId(id);
           break;
         }
         case 'delete': {
@@ -198,11 +392,11 @@ export default {
             message: '删除成功！',
             type: 'success',
           });
-          this.APITests = await APITestAPI.getAPITestInfosByProjectId(this.$store.state.workspace.currentProjectId);
+          this.apitests = await APITestAPI.getAPITestInfosByProjectId(this.$store.state.workspace.currentProjectId);
           break;
         }
         default: {
-          console.log('Unknown type of action');
+          console.warn('Unknown type of action.');
         }
       }
     },
@@ -231,7 +425,7 @@ export default {
             method: this.createAPITestForm.method,
             qps: this.createAPITestForm.qps,
           });
-          this.APITests = await APITestAPI.getAPITestInfosByProjectId(this.$store.state.workspace.currentProjectId);
+          this.apitests = await APITestAPI.getAPITestInfosByProjectId(this.$store.state.workspace.currentProjectId);
           this.$refs.createAPITestForm.resetFields();
           this.showAPITestCreateModel = false;
           ElMessage.success({
@@ -250,32 +444,125 @@ export default {
       const ss = new Date().getSeconds() < 10 ? `0${new Date().getSeconds()}` : new Date().getSeconds();
       return `${yy}-${mm}-${dd} ${hh}:${mf}:${ss}`;
     },
+    async initChart1() {
+      const chart1 = echarts.init(document.getElementById('chart1'));
+      const options1 = {
+        title: {
+          text: `并发数: ${this.qps}`,
+          x: 'center',
+          y: 'center',
+          textStyle: {
+            fontSize: 16,
+          },
+        },
+        tooltip: {
+          trigger: 'item',
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['40%', '50%'],
+            clockwise: true,
+            avoidLabelOverlap: true,
+            hoverOffset: 15,
+            data: [
+              { value: this.latestResultInfo.success, name: '成功', itemStyle: { color: '#CCFF99' } },
+              { value: this.latestResultInfo.failure, name: '失败', itemStyle: { color: '#FF6600' } },
+            ],
+          },
+        ],
+      };
+      chart1.setOption(options1);
+    },
+    async initChart2() {
+      const chart2 = echarts.init(document.getElementById('chart2'));
+      const option2 = {
+        title: {
+          text: '访问时间曲线图',
+          bottom: '5%',
+          left: 'center',
+        },
+        tooltip: {
+          trigger: 'trigger',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985',
+            },
+          },
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+          },
+        ],
+        yAxis: [
+          {
+            name: '执行时间/单位ms',
+            type: 'value',
+            min: 'dataMin',
+            max: 'dataMax',
+          },
+        ],
+        series: [
+          {
+            name: '访问时间',
+            data: this.latestResultInfo.timeList,
+            type: 'line',
+            smooth: true,
+            showSymbol: true,
+            symbolSize: 3,
+            symbol: 'circle',
+            itemStyle: { color: '#8D67FF' },
+            markPoint: {
+              data: [
+                { type: 'max', name: '最大值' },
+                { type: 'min', name: '最小值' },
+              ],
+            },
+            markLine: {
+              data: [
+                { type: 'average', name: '平均值' },
+              ],
+            },
+          },
+        ],
+      };
+      chart2.setOption(option2);
+    },
   },
 };
 </script>
 
-<style>
-.apiTestContainer {
-  margin: 70px 30px 0 30px;
+<style lang="scss" scoped>
+.tabs {
+  width: 80%;
+  margin: auto auto;
 }
-.apiTestHeader {
-  display: flex;
-  justify-content: space-between;
+.add-button {
+  margin-left: 14px;
 }
-.apiTestHeader .title {
-  font-size: 20px;
+.entry-row {
+  width: 100%;
+  margin: 3px 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  h3, h4{
+    color: #172b4d;
+  }
 }
-.apiTestTableContainer {
-  margin-top: 20px;
+.node-type{
+  color: #FFFFFF;
+  border-radius: 3px;
+  font-size: 14px;
+  background-color: #42b983;
+  text-align: center;
 }
 .create-APITest-form {
   width: 80%;
   margin: 0 auto;
 }
-.jsoneditor-vue {
-  height: 100%;
-}
-.jsoneditor-poweredBy {
-  display: none;
-}
 </style>

src/views/Project/APITest1.vue

@@ -1,125 +0,0 @@
-<template>
-  <ElTabs class="tabs" v-model="activeTab">
-    <ElTabPane label="接口测试" name="apitest">
-      <ElTable :data="apitests" width="100%">
-        <ElTableColumn
-          prop="testId"
-          label="ID"
-          align="center"
-          width="60">
-        </ElTableColumn>
-        <ElTableColumn
-          prop="testName"
-          label="测试名称"
-          align="center"
-          width="300">
-        </ElTableColumn>
-        <ElTableColumn
-          prop="username"
-          label="创建者"
-          align="center"
-          width="180">
-        </ElTableColumn>
-        <ElTableColumn
-          prop="createTime"
-          label="创建时间"
-          align="center"
-          width="250">
-        </ElTableColumn>
-        <ElTableColumn
-          label="详情"
-          align="center">
-          <template #default="scope">
-            <ElButton
-              @click="handleClick('detail', scope.row.testId)"
-              type="text"
-              size="small">最近执行详情</ElButton>
-            <ElButton @click="handleClick('detail', scope.row.testId)" type="text" size="small">测试任务详情</ElButton>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn
-          align="center">
-          <template #header>
-            <span>操作</span>
-            <ElButton @click="handleClick('create')" type="text" class="add-button">新建</ElButton>
-          </template>
-          <template #default="scope">
-            <ElButton @click="handleClick('trigger', scope.row.id)" type="text" size="small">触发</ElButton>
-            <ElButton @click="handleClick('delete', scope.row.id)" type="text" size="small">删除</ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-      <ElDrawer
-        v-model="detailDrawer"
-        :size="650">
-        <template #title>
-          <el-row class="entry-row">
-            <el-col :span="2">
-              <div class="node-type">测试</div>
-            </el-col>
-          </el-row>
-        </template>
-      </ElDrawer>
-    </ElTabPane>
-  </ElTabs>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      activeTab: 'apitest',
-      apitests: [
-        {
-          testId: 1,
-          testName: '123',
-          username: 'caoding',
-          createTime: '2021-04-12 12:00:00',
-        },
-      ],
-      detailDrawer: false,
-    };
-  },
-  methods: {
-    async handleClick(action, id) {
-      switch (action) {
-        case 'detail': {
-          this.detailDrawer = true;
-          break;
-        }
-        default: {
-          console.warn('Unknown type of action.');
-        }
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.tabs {
-  width: 80%;
-  margin: auto auto;
-}
-.add-button {
-  margin-left: 14px;
-}
-.entry-row {
-  width: 100%;
-  margin: 3px 20px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  h3, h4{
-    color: #172b4d;
-  }
-}
-.node-type{
-  color: #FFFFFF;
-  border-radius: 3px;
-  font-size: 14px;
-  background-color: #42b983;
-  text-align: center;
-}
-</style>