From fd52e37069f3964e1d9a29d51c4048d5c2ec9b7f Mon Sep 17 00:00:00 2001
From: q4speed <kun@fit2cloud.com>
Date: Mon, 18 May 2020 13:54:21 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/home/ApiReportRecentList.vue          | 59 ++++++++++++++++++
 .../components/api/home/ApiTestHome.vue       | 27 +++++++--
 .../components/api/home/ApiTestRecentList.vue | 60 +++++++++++++++++++
 3 files changed, 140 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/business/components/api/home/ApiReportRecentList.vue
 create mode 100644 frontend/src/business/components/api/home/ApiTestRecentList.vue

diff --git a/frontend/src/business/components/api/home/ApiReportRecentList.vue b/frontend/src/business/components/api/home/ApiReportRecentList.vue
new file mode 100644
index 0000000000..0770d26792
--- /dev/null
+++ b/frontend/src/business/components/api/home/ApiReportRecentList.vue
@@ -0,0 +1,59 @@
+<template>
+  <el-card class="table-card" v-loading="result.loading">
+    <template v-slot:header>
+      <span class="title">{{$t('api_report.title')}}</span>
+    </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 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-card>
+</template>
+
+<script>
+  import MsApiReportStatus from "../report/ApiReportStatus";
+
+  export default {
+    name: "MsApiReportRecentList",
+
+    components: {MsApiReportStatus},
+
+    data() {
+      return {
+        result: {},
+        tableData: [],
+        loading: false
+      }
+    },
+
+    methods: {
+      search() {
+        this.result = this.$get("/api/report/recent/5", response => {
+          this.tableData = response.data;
+        });
+      },
+    },
+
+    created() {
+      this.search();
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/api/home/ApiTestHome.vue b/frontend/src/business/components/api/home/ApiTestHome.vue
index 1b69f2c359..27eaf8292b 100644
--- a/frontend/src/business/components/api/home/ApiTestHome.vue
+++ b/frontend/src/business/components/api/home/ApiTestHome.vue
@@ -1,14 +1,29 @@
 <template>
-  <div>
-    <h1>API测试首页</h1>
-  </div>
+  <ms-container>
+    <ms-main-container>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <ms-api-test-recent-list/>
+        </el-col>
+        <el-col :span="12">
+          <ms-api-report-recent-list/>
+        </el-col>
+      </el-row>
+    </ms-main-container>
+  </ms-container>
 
 </template>
 
 <script>
-    export default {
-        name: "ApiTestHome"
-    }
+  import MsContainer from "../../common/components/MsContainer";
+  import MsMainContainer from "../../common/components/MsMainContainer";
+  import MsApiTestRecentList from "./ApiTestRecentList";
+  import MsApiReportRecentList from "./ApiReportRecentList";
+
+  export default {
+    name: "ApiTestHome",
+    components: {MsApiReportRecentList, MsApiTestRecentList, MsMainContainer, MsContainer}
+  }
 </script>
 
 <style scoped>
diff --git a/frontend/src/business/components/api/home/ApiTestRecentList.vue b/frontend/src/business/components/api/home/ApiTestRecentList.vue
new file mode 100644
index 0000000000..7c8851f560
--- /dev/null
+++ b/frontend/src/business/components/api/home/ApiTestRecentList.vue
@@ -0,0 +1,60 @@
+<template>
+  <el-card class="table-card" v-loading="result.loading">
+    <template v-slot:header>
+      <span class="title">{{$t('api_test.title')}}</span>
+    </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 prop="projectName" :label="$t('load_test.project_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>
+        </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-test-status :row="row"/>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-card>
+</template>
+
+<script>
+  import MsApiTestStatus from "../test/ApiTestStatus";
+
+  export default {
+    name: "MsApiTestRecentList",
+
+    components: {MsApiTestStatus},
+
+    data() {
+      return {
+        result: {},
+        tableData: [],
+        loading: false
+      }
+    },
+
+    methods: {
+      search() {
+        this.result = this.$get("/api/recent/5", response => {
+          this.tableData = response.data;
+        });
+      }
+    },
+
+    created() {
+      this.search();
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>