From 48a6ae395222c455dd5f50b66ff5c02711b02dd2 Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Fri, 8 May 2020 15:59:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95=E6=8A=A5=E5=91=8A=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/router/View.vue         |  2 +-
 .../TemplateComponent/TemplateComponent.vue   | 52 +++++++++++++++++++
 .../TestResultChartComponent.vue              |  1 +
 .../components/TestCaseReportTemplateEdit.vue | 37 +++++--------
 .../view/comonents/TestCaseReportView.vue     |  9 ++--
 5 files changed, 72 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/business/components/settings/workspace/components/TemplateComponent/TemplateComponent.vue

diff --git a/frontend/src/business/components/common/router/View.vue b/frontend/src/business/components/common/router/View.vue
index c96d35a780..1bc5c81520 100644
--- a/frontend/src/business/components/common/router/View.vue
+++ b/frontend/src/business/components/common/router/View.vue
@@ -14,7 +14,7 @@
 <style scoped>
   #body {
     width: 100%;
-    height: calc(100vh - 80px);
+    height: calc(100vh - 40px);
     background-color: #F5F5F5;
   }
 
diff --git a/frontend/src/business/components/settings/workspace/components/TemplateComponent/TemplateComponent.vue b/frontend/src/business/components/settings/workspace/components/TemplateComponent/TemplateComponent.vue
new file mode 100644
index 0000000000..181e8fb898
--- /dev/null
+++ b/frontend/src/business/components/settings/workspace/components/TemplateComponent/TemplateComponent.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+
+    <div v-if="!metric">
+      <base-info-component v-if="preview.id == 1"/>
+      <test-result-component v-if="preview.id == 2"/>
+      <test-result-chart-component v-if="preview.id == 3"/>
+      <rich-text-component :preview="preview" v-if="preview.type != 'system'"/>
+    </div>
+
+    <div v-if="metric">
+      <base-info-component :report-info="metric" v-if="preview.id == 1"/>
+      <test-result-component :test-results="metric.moduleExecuteResult" v-if="preview.id == 2"/>
+      <test-result-chart-component :execute-result="metric.executeResult" v-if="preview.id == 3"/>
+      <rich-text-component :preview="preview" v-if="preview.type != 'system'"/>
+    </div>
+
+  </div>
+</template>
+
+<script>
+    import BaseInfoComponent from "./BaseInfoComponent";
+    import TestResultComponent from "./TestResultComponent";
+    import TestResultChartComponent from "./TestResultChartComponent";
+    import RichTextComponent from "./RichTextComponent";
+    export default {
+      name: "TemplateComponent",
+      components: {RichTextComponent, TestResultChartComponent, TestResultComponent, BaseInfoComponent},
+      props: {
+        preview: {
+          type: Object
+        },
+        metric: {
+          type: Object
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+  .el-card {
+    margin: 5px auto;
+    min-height: 300px;
+    width: 80%;
+  }
+
+  .el-card:hover {
+    box-shadow: 0 0 2px 2px #409EFF;
+  }
+
+</style>
diff --git a/frontend/src/business/components/settings/workspace/components/TemplateComponent/TestResultChartComponent.vue b/frontend/src/business/components/settings/workspace/components/TemplateComponent/TestResultChartComponent.vue
index 9532e7b78c..fa29c364d7 100644
--- a/frontend/src/business/components/settings/workspace/components/TemplateComponent/TestResultChartComponent.vue
+++ b/frontend/src/business/components/settings/workspace/components/TemplateComponent/TestResultChartComponent.vue
@@ -4,6 +4,7 @@
 
     <template>
 
+      {{executeResult}}/{{charData}}
       <ms-pie-chart v-if="isShow" :text="'测试结果统计图'" :name="'测试结果'" :data="charData"/>
 
     </template>
diff --git a/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue b/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue
index 7fa78a3233..2f255998e1 100644
--- a/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue
+++ b/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue
@@ -36,10 +36,7 @@
                 group="component">
             <transition-group>
               <div class="preview" v-for="item in previews" :key="item.id">
-                <base-info-component v-if="item.id == 1"/>
-                <test-result-component v-if="item.id == 2"/>
-                <test-result-chart-component v-if="item.id == 3"/>
-                <rich-text-component :preview="item" v-if="item.type != 'system'"/>
+                <template-component :metric="metric" :preview="item"/>
                 <i class="el-icon-error" @click="handleDelete(item)"/>
               </div>
             </transition-group>
@@ -53,24 +50,18 @@
 <script>
 
   import draggable from 'vuedraggable';
-  import BaseInfoComponent from "./TemplateComponent/BaseInfoComponent";
-  import TestResultComponent from "./TemplateComponent/TestResultComponent";
-  import TestResultChartComponent from "./TemplateComponent/TestResultChartComponent";
   import TemplateComponentBar from "./TemplateComponentBar";
-  import RichTextComponent from "./TemplateComponent/RichTextComponent";
   import TemplateComponentEditHeader from "./TemplateComponentEditHeader";
   import {WORKSPACE_ID} from '../../../../../common/js/constants';
   import {jsonToMap, mapToJson} from "../../../../../common/js/utils";
+  import TemplateComponent from "./TemplateComponent/TemplateComponent";
 
     export default {
       name: "TestCaseReportTemplateEdit",
       components: {
+        TemplateComponent,
         TemplateComponentEditHeader,
-        RichTextComponent,
         TemplateComponentBar,
-        TestResultChartComponent,
-        TestResultComponent,
-        BaseInfoComponent,
         draggable
       },
       data() {
@@ -93,6 +84,11 @@
           isReport: false
         }
       },
+      props: {
+        metric: {
+          type: Object
+        }
+      },
       methods: {
         open(id, isReport) {
           if (isReport) {
@@ -270,16 +266,6 @@
     position: absolute;
   }
 
-  .el-card {
-    margin: 5px auto;
-    min-height: 300px;
-    width: 80%;
-  }
-
-  .el-card:hover {
-    box-shadow: 0 0 2px 2px #409EFF;
-  }
-
   .description > span {
     display: block;
     padding-bottom: 5px;
@@ -312,8 +298,13 @@
     color: red;
   }
 
-  .template-component:hover+i {
+  .preview:hover+i {
     display: inline;
   }
 
+  .preview:hover i{
+    display: inline;
+  }
+
+
 </style>
diff --git a/frontend/src/business/components/track/plan/view/comonents/TestCaseReportView.vue b/frontend/src/business/components/track/plan/view/comonents/TestCaseReportView.vue
index e973666f01..25e81eaf9f 100644
--- a/frontend/src/business/components/track/plan/view/comonents/TestCaseReportView.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/TestCaseReportView.vue
@@ -26,17 +26,14 @@
         <div class="container">
           <el-main>
             <div class="preview" v-for="item in previews" :key="item.id">
-              <base-info-component :report-info="metric" v-if="item.id == 1"/>
-              <test-result-component :test-results="metric.moduleExecuteResult" v-if="item.id == 2"/>
-              <test-result-chart-component :execute-result="metric.executeResult" v-if="item.id == 3"/>
-              <rich-text-component :preview="item" v-if="item.type != 'system'"/>
+              <template-component :metric="metric" :preview="item"/>
             </div>
           </el-main>
         </div>
       </template>
     </el-drawer>
 
-    <test-case-report-template-edit ref="templateEdit" @refresh="getReport"/>
+    <test-case-report-template-edit :metric="metric" ref="templateEdit" @refresh="getReport"/>
 
   </div>
 </template>
@@ -48,10 +45,12 @@
     import TestResultComponent from "../../../../settings/workspace/components/TemplateComponent/TestResultComponent";
     import RichTextComponent from "../../../../settings/workspace/components/TemplateComponent/RichTextComponent";
     import TestCaseReportTemplateEdit from "../../../../settings/workspace/components/TestCaseReportTemplateEdit";
+    import TemplateComponent from "../../../../settings/workspace/components/TemplateComponent/TemplateComponent";
 
     export default {
       name: "TestCaseReportView",
       components: {
+        TemplateComponent,
         TestCaseReportTemplateEdit,
         RichTextComponent, TestResultComponent, TestResultChartComponent, BaseInfoComponent},
       data() {