测试报告组件编辑

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;
   }
 

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>

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>

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>

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() {