feat: 测试计划导出HTML报告

frontend/src/business/components/track/plan/view/comonents/report/statistics/TestCaseStatisticsReportView.vue

@@ -19,6 +19,9 @@
         <el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleExport(report.name)">
           {{$t('test_track.plan_view.export_report')}}
         </el-button>
+        <el-button v-xpack :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleExportHtml(report.name)">
+          {{'导出HTML'}}
+        </el-button>
       </el-col>
     </el-row>
 
@@ -48,6 +51,7 @@
   import html2canvas from "html2canvas";
   import MsTestCaseReportExport from "../../TestCaseReportExport";
   import TestReportTemplateList from "../../TestReportTemplateList";
+  import {Message} from "element-ui";
 
   export default {
     name: "TestCaseStatisticsReportView",
@@ -211,6 +215,14 @@
           }, 1000);
         });
       },
+      handleExportHtml(name) {
+        let config = {
+          url: '/export/template/plan/report/' + this.planId,
+          method: 'get',
+          responseType: 'blob'
+        };
+        this.$download(config, name + '.html');
+      },
       exportReportReset() {
         this.reportExportVisible = false;
         this.result.loading = false;

frontend/src/common/js/ajax.js

@@ -146,6 +146,25 @@ export function fileUpload(url, file, files, param, success, failure) {
   return request(axiosRequestConfig, success, failure);
 }
 
+export function download(config, fileName) {
+  return this.$request(config).then(response => {
+    const content = response.data;
+    const blob = new Blob([content], {type: "application/octet-stream"});
+    if ("download" in document.createElement("a")) {
+      // 非IE下载
+      //  chrome/firefox
+      let aTag = document.createElement('a');
+      aTag.download = fileName;
+      aTag.href = URL.createObjectURL(blob);
+      aTag.click();
+      URL.revokeObjectURL(aTag.href);
+    } else {
+      // IE10+下载
+      navigator.msSaveBlob(blob, this.filename);
+    }
+  });
+}
+
 export function all(array, callback) {
   if (array.length < 1) return;
   axios.all(array).then(axios.spread(callback));
@@ -188,5 +207,7 @@ export default {
     Vue.prototype.$fileDownload = fileDownload;
 
     Vue.prototype.$fileUpload = fileUpload;
+
+    Vue.prototype.$download = download;
   }
 };

frontend/src/template/report/plan/PlanReport.vue

@@ -1,46 +1,33 @@
 <template>
-
-  <div>
-    {{test}}
-    <el-button type="primary" plain size="mini" @click="console.log('aaaa')">sdfds</el-button>
-    <ms-pie-chart/>
+  <div class="container" ref="resume" id="app">
+    <el-main>
+      <div v-for="(item, index) in preview" :key="item.id">
+        <template-component :isReportView="true" :metric="metric" :preview="item" :index="index" ref="templateComponent"/>
+      </div>
+    </el-main>
   </div>
-
-
 </template>
 
 <script>
-
-
-import MsPieChart from "../../../business/components/common/components/MsPieChart";
+import TemplateComponent
+  from "@/business/components/track/plan/view/comonents/report/TemplateComponent/TemplateComponent";
 export default {
-  name: "ApiDocumentsPage",
-  components: {
-    MsPieChart
-
-  },
+  name: "PlanReport",
+  components: {TemplateComponent},
   data() {
     return {
-      test: 'testaaa'
+      preview: [{"name":"基础信息","id":1,"type":"system"},{"name":"测试结果","id":2,"type":"system"},{"name":"测试结果分布","id":3,"type":"system"},{"name":"失败用例","id":4,"type":"system"},{"name":"缺陷列表","id":5,"type":"system"}]
+      ,metric: {"executeResult":{"functionalResult":[{"status":"Failure","count":1},{"status":"Prepare","count":4}],"apiResult":[{"status":"Prepare","count":13}],"scenarioResult":[],"loadResult":[],"executedScenarioIds":null},"moduleExecuteResult":[{"moduleId":"d0785ec7-46b3-441d-a5ff-aff13f055241","moduleName":"默认模块","caseCount":1,"passCount":0,"passRate":0,"issuesCount":0,"prepareCount":1,"skipCount":0,"failureCount":0,"blockingCount":0,"underwayCount":0,"projectName":"Local"},{"moduleId":"2f477110-0976-4d4a-84a5-9b33b82f01e8","moduleName":"a","caseCount":1,"passCount":0,"passRate":0,"issuesCount":0,"prepareCount":1,"skipCount":0,"failureCount":0,"blockingCount":0,"underwayCount":0,"projectName":"jira"},{"moduleId":"8631f33c-222b-4c3e-b4b4-e643dacdfe70","moduleName":"默认模块","caseCount":2,"passCount":0,"passRate":0,"issuesCount":0,"prepareCount":2,"skipCount":0,"failureCount":0,"blockingCount":0,"underwayCount":0,"projectName":"jira"}],"failureTestCases":{"functionalTestCases":[{"id":"0ca40965-e40a-4956-9026-7a3604f71562","nodeId":"root","nodePath":"","projectId":null,"name":"copy_sdfadasa","type":"functional","maintainer":"tests","priority":"P0","method":"","createTime":1626075279957,"updateTime":1626348003718,"testId":"[]","sort":null,"num":null,"otherTestName":null,"reviewStatus":null,"tags":"[]","demandId":null,"demandName":null,"followPeople":null,"status":"Failure","customNum":"100002","stepModel":null,"createUser":null,"originalStatus":null,"deleteTime":null,"deleteUserId":null,"prerequisite":null,"remark":null,"steps":null,"stepDescription":null,"expectedResult":null,"customFields":"[{\"id\":\"0d2b90ec-9c56-4f5d-ae06-522a93f48e93\",\"name\":\"责任人\",\"value\":\"tests\",\"customData\":null},{\"id\":\"661e1e29-c401-43b0-972e-a713b7b90c37\",\"name\":\"用例等级\",\"value\":\"P0\",\"customData\":null},{\"id\":\"f448e8d2-fad1-4c23-a013-3f3ba282bb81\",\"name\":\"用例状态\",\"value\":\"Prepare\",\"customData\":null}]","executor":"admin","executorName":null,"results":null,"planId":"96791ef8-8a75-4335-a48c-832e0ddece5f","planName":null,"caseId":"9883f2f8-5e33-433d-9960-aec6698d167b","issues":"[{\"caseCount\":0,\"createTime\":1625057764241,\"creator\":\"admin\",\"customFields\":\"[{\\\"id\\\":\\\"52f64983-aa06-4bf2-bf7a-1ad6b48ad197\\\",\\\"name\\\":\\\"状态\\\",\\\"value\\\":\\\"resolved\\\",\\\"customData\\\":null}]\",\"description\":\"sdfsdf\",\"id\":\"1133268703001004718\",\"num\":100007,\"platform\":\"Tapd\",\"platformStatus\":\"新\",\"projectId\":\"8fed2fce-d4f0-11eb-a517-dce9941665c4\",\"status\":\"new\",\"title\":\"sdfsd\",\"updateTime\":1625057764241}]","reportId":null,"model":null,"projectName":"默认项目","actualResult":null,"maintainerName":null,"issuesCount":1,"list":null}],"apiTestCases":[],"scenarioTestCases":[],"loadTestCases":[]},"executors":["admin"],"executorNames":["Administrator"],"principal":"admin","principalName":"Administrator","startTime":null,"endTime":null,"projectName":"默认项目","issues":[{"id":"1133268703001004718","title":"sdfsd","status":"new","createTime":1625057764241,"updateTime":1625057764241,"reporter":null,"lastmodify":null,"platform":"Tapd","projectId":"8fed2fce-d4f0-11eb-a517-dce9941665c4","creator":"admin","resourceId":null,"num":100007,"platformStatus":"新","description":"sdfsdf","customFields":"[{\"id\":\"52f64983-aa06-4bf2-bf7a-1ad6b48ad197\",\"name\":\"状态\",\"value\":\"resolved\",\"customData\":null}]","model":"","projectName":"默认项目","creatorName":null,"resourceName":null,"caseCount":0,"caseIds":null}]}
+      // preview: "#preview",
+      // metric: "#metric"
     }
   },
-  props: {
 
-  },
-  created: function () {
-
-  },
-  watch: {
-  },
-  computed: {
-
-  },
   methods: {
 
-  },
+  }
 }
 </script>
 
 <style scoped>
-
 </style>

frontend/src/template/report/plan/plan-report.js

@@ -1,11 +1,12 @@
 import Vue from 'vue';
-import ElementUI, {Button, Col, Form, FormItem, Input, Row} from 'element-ui';
+import ElementUI, {Button, Col, Form, FormItem, Input, Row, Main, Card, Table, TableColumn} from 'element-ui';
 import '@/assets/theme/index.css';
 import '@/common/css/menu-header.css';
 import '@/common/css/main.css';
 import PlanReport from "./PlanReport.vue";
 import i18n from "@/i18n/i18n";
 import chart from "@/common/js/chart";
+import CKEditor from '@ckeditor/ckeditor5-vue';
 
 
 Vue.use(ElementUI, {
@@ -19,6 +20,12 @@ Vue.use(FormItem);
 Vue.use(Input);
 Vue.use(Button);
 Vue.use(chart);
+Vue.use(Main);
+Vue.use(Card);
+Vue.use(TableColumn);
+Vue.use(Table);
+Vue.use(CKEditor);
+
 
 new Vue({
   el: '#planReport',