feat

src/api/prefix.ts

@@ -3,4 +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 = '/apitest';
+export const APITEST_PREFIX = '/test';

src/components/APITestInfoForm.vue

@@ -101,7 +101,7 @@ export default {
         that.initChart1();
         that.initChart2();
       });
-    }, 2000);
+    }, 3000);
   },
   methods: {
     showForm() {

src/element-plus.ts

@@ -6,6 +6,7 @@ import {
   ElContainer,
   ElCol,
   ElDivider,
+  ElDrawer,
   ElHeader,
   ElLink,
   ElMain,
@@ -34,6 +35,7 @@ export const Components = [
   ElRow,
   ElContainer,
   ElCol,
+  ElDrawer,
   ElHeader,
   ElMain,
   ElMenu,

src/router/index.ts

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

src/views/Project/APITest.vue

@@ -6,8 +6,7 @@
     </div>
     <div class="apiTestTableContainer">
       <el-table
-        :data="APITests"
-        style="width: 100%">
+        :data="APITests">
         <el-table-column
           prop="testId"
           label="ID"
@@ -223,7 +222,7 @@ export default {
         if (valid) {
           this.createAPITestForm.createTime = this.getCurrentTime();
           await APITestAPI.createAPITest({
-            projectId: 1,
+            projectId: this.$store.state.workspace.currentProjectId,
             createTime: this.createAPITestForm.createTime,
             username: '',
             testName: this.createAPITestForm.testName,

src/views/Project/APITest1.vue

@@ -0,0 +1,125 @@
+<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>