refactor: 测试计划报告样式优化

frontend/src/business/components/common/components/MsFormDivider.vue

@@ -1,5 +1,12 @@
 <template>
-  <p> {{title}} </p>
+  <p>
+    <span>
+      {{title}}
+    </span>
+    <span>
+      <slot></slot>
+    </span>
+  </p>
 </template>
 
 <script>

frontend/src/business/components/track/case/components/MsRichText.vue

@@ -22,7 +22,7 @@
           return '';
         },
         set: function (val) {
-          this.$emit('updateRichText', val);
+          this.$emit('update:content', val);
         }
       }
     },

frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanOverviewReport.vue

@@ -21,40 +21,20 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-form-item :label="'报告总结'">
-        <el-link v-if="!isTemplate && !isShare" @click="isEdit = true">
-          编辑
-        </el-link>
-      </el-form-item>
-      <div v-if="!isEdit">
-        {{report.summary}}
-      </div>
-      <div v-else>
-        <el-input
-          type="textarea"
-          :autosize="{ minRows: 2, maxRows: 4}"
-          placeholder="请输入内容"
-          v-model="report.summary" @blur="saveSummary"/>
-      </div>
     </el-form>
   </test-plan-report-container>
-
 </template>
 
 <script>
 import MsFormDivider from "@/business/components/common/components/MsFormDivider";
-import {editPlanReport} from "@/network/test-plan";
 import TestPlanReportContainer
   from "@/business/components/track/plan/view/comonents/report/detail/TestPlanReportContainer";
 import {timestampFormatDate} from "@/common/js/filter";
 export default {
-  name: "TestPlanReportHeader",
+  name: "TestPlanOverviewReport",
   components: {TestPlanReportContainer, MsFormDivider},
   props: {
-    planId: String,
     report: Object,
-    isTemplate: Boolean,
-    isShare: Boolean
   },
   data() {
     return {
@@ -75,25 +55,10 @@ export default {
       return startTime + ' ~ ' + endTime;
     }
   },
-  methods: {
-    saveSummary() {
-      editPlanReport({
-        id: this.planId,
-        reportSummary: this.report.summary ? this.report.summary : ''
-      });
-      this.isEdit = false;
-    }
-  }
 }
 </script>
 
 <style scoped>
-.el-link >>> .el-link--inner {
-  line-height: 40px;
-  font-size: 14px;
-  height: 42.8px;
-}
-
 .form-info {
   padding: 20px;
 }

frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportButtons.vue

@@ -0,0 +1,110 @@
+<template>
+  <div v-loading="result ? result.loading : false" class="head-bar head-right">
+    <el-row>
+      <el-popover
+        placement="right"
+        width="300">
+        <p>{{shareUrl}}</p>
+        <div style="text-align: right; margin: 0">
+          <el-button type="primary" size="mini" :disabled="!shareUrl"
+                     v-clipboard:copy="shareUrl">{{ $t("commons.copy") }}</el-button>
+        </div>
+        <el-button icon="el-icon-share" slot="reference" :disabled="!isTestManagerOrTestUser"
+                   plain size="mini" @click="handleShare()">
+          {{'分享'}}
+        </el-button>
+      </el-popover>
+    </el-row>
+    <el-row>
+      <el-button icon="el-icon-download" :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleExportHtml()">
+        {{'导出'}}
+      </el-button>
+    </el-row>
+    <el-row>
+      <el-button icon="el-icon-setting" :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleEditTemplate()">
+        {{'配置'}}
+      </el-button>
+    </el-row>
+    <test-plan-report-edit ref="reportEdit"/>
+  </div>
+</template>
+
+<script>
+
+import TestPlanApiReport from "@/business/components/track/plan/view/comonents/report/detail/TestPlanApiReport";
+import {generateShareInfo} from "@/network/share";
+import TestPlanReportEdit
+  from "@/business/components/track/plan/view/comonents/report/detail/component/TestPlanReportEdit";
+export default {
+  name: "TestPlanReportButtons",
+  components: {
+    TestPlanReportEdit,
+    TestPlanApiReport,
+    },
+  props: {
+    planId:String,
+    isShare: Boolean,
+    report: Object
+  },
+  data() {
+    return {
+      result: {},
+      isTestManagerOrTestUser: true,
+      shareUrl: ''
+    };
+  },
+  methods: {
+    handleEditTemplate() {
+      this.$refs.reportEdit.open();
+    },
+    handleShare(){
+      let pram = {};
+      pram.customData = this.planId;
+      pram.shareType = 'PLAN_REPORT';
+      generateShareInfo(pram, (data) => {
+        let thisHost = window.location.host;
+        this.shareUrl = thisHost + "/sharePlanReport" + data.shareUrl;
+      });
+    },
+    handleExportHtml() {
+      let config = {
+        url: '/test/plan/report/export/' + this.planId,
+        method: 'get',
+        responseType: 'blob'
+      };
+      if (this.isShare) {
+        config.url = '/share' + config.url;
+      }
+      this.result = this.$download(config, this.report.name + '.html');
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.head-right {
+  text-align: right;
+  float: right;
+}
+
+.head-bar .el-button {
+  position: relative;
+  z-index: 99;
+  margin-bottom: 10px;
+  width: 80px;
+  margin-right: 10px;
+  display: block;
+}
+
+.el-button+.el-button {
+  margin-left: 0px;
+}
+
+/*.head-bar {*/
+/*  position: fixed;*/
+/*  right: 10px;*/
+/*  padding: 20px;*/
+/*}*/
+
+</style>

frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportContainer.vue

@@ -1,6 +1,8 @@
 <template>
-  <div>
-    <ms-form-divider :title="title"/>
+  <div class="report-container">
+    <ms-form-divider :title="title">
+      <slot name="title"></slot>
+    </ms-form-divider>
 <!--    <el-main>-->
       <slot/>
 <!--    </el-main>-->

frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportContent.vue

@@ -2,50 +2,43 @@
   <div class="container">
     <el-main>
       <el-card v-loading="result ? result.loading : false">
-
-          <div v-if="!isTemplate && !isShare" class="head-bar head-right">
-
-            <ms-share-button :share-url="shareUrl" @click="shareApiDocument"/>
-
-            <el-row>
-              <el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleExportHtml()">
-                {{'导出HTML'}}
-              </el-button>
-            </el-row>
-            <el-row>
-              <el-button :disabled="!isTestManagerOrTestUser" plain size="mini" @click="handleEditTemplate()">
-                {{'编辑模板'}}
-              </el-button>
-            </el-row>
-          </div>
-
-        <test-plan-report-header :is-template="isTemplate" :is-share="isShare" :report="report" :plan-id="planId"/>
+        <test-plan-report-buttons :plan-id="planId" :is-share="isShare" :report="report"
+                                  v-if="!isTemplate && !isShare"/>
+        <test-plan-overview-report :report="report"/>
+        <test-plan-summary-report :is-template="isTemplate" :is-share="isShare" :report="report" :plan-id="planId"/>
         <test-plan-functional-report :share-id="shareId" :is-share="isShare" :is-template="isTemplate" v-if="functionalEnable" :plan-id="planId" :report="report"/>
         <test-plan-api-report :share-id="shareId" :is-share="isShare" :is-template="isTemplate" v-if="apiEnable" :report="report" :plan-id="planId"/>
         <test-plan-load-report :share-id="shareId" :is-share="isShare" :is-template="isTemplate" v-if="loadEnable" :report="report" :plan-id="planId"/>
 
+        <test-plan-report-edit ref="reportEdit"/>
       </el-card>
     </el-main>
   </div>
 </template>
 
 <script>
-import TestPlanReportHeader from "@/business/components/track/plan/view/comonents/report/detail/TestPlanReportHeader";
 import TestPlanFunctionalReport
   from "@/business/components/track/plan/view/comonents/report/detail/TestPlanFunctionalReport";
 import {getShareTestPlanReport, getTestPlanReport} from "@/network/test-plan";
 import TestPlanApiReport from "@/business/components/track/plan/view/comonents/report/detail/TestPlanApiReport";
 import TestPlanLoadReport from "@/business/components/track/plan/view/comonents/report/detail/TestPlanLoadReport";
-import {generateShareInfo} from "@/network/share";
-import MsShareButton from "@/business/components/common/components/MsShareButton";
+import TestPlanReportContainer
+  from "@/business/components/track/plan/view/comonents/report/detail/TestPlanReportContainer";
+import TestPlanOverviewReport
+  from "@/business/components/track/plan/view/comonents/report/detail/TestPlanOverviewReport";
+import TestPlanSummaryReport from "@/business/components/track/plan/view/comonents/report/detail/TestPlanSummaryReport";
+import TestPlanReportButtons from "@/business/components/track/plan/view/comonents/report/detail/TestPlanReportButtons";
 export default {
   name: "TestPlanReportContent",
   components: {
-    MsShareButton,
+    TestPlanReportButtons,
+    TestPlanSummaryReport,
+    TestPlanOverviewReport,
+    TestPlanReportContainer,
     TestPlanLoadReport,
     TestPlanApiReport,
     TestPlanFunctionalReport,
-    TestPlanReportHeader},
+    },
   props: {
     planId:String,
     isTemplate: Boolean,
@@ -56,7 +49,6 @@ export default {
     return {
       report: {},
       result: {},
-      isTestManagerOrTestUser: false,
       shareUrl: ''
     };
   },
@@ -66,7 +58,6 @@ export default {
     }
   },
   created() {
-    this.isTestManagerOrTestUser = true;
     this.getReport();
   },
   computed: {
@@ -94,39 +85,6 @@ export default {
         });
       }
     },
-    handleEditTemplate() {
-
-    },
-    shareApiDocument(){
-      let pram = {};
-      pram.customData = this.planId;
-      pram.shareType = 'PLAN_REPORT';
-      generateShareInfo(pram, (data) => {
-        let thisHost = window.location.host;
-          this.shareUrl = thisHost + "/sharePlanReport" + data.shareUrl;
-      });
-    },
-    handleExportHtml() {
-      let config = {
-        url: '/test/plan/report/export/' + this.planId,
-        method: 'get',
-        responseType: 'blob'
-      };
-      if (this.isShare) {
-        config.url = '/share' + config.url;
-      }
-      this.result = this.$download(config, this.report.name + '.html');
-    },
-    handleShare()  {
-      let param = {
-        customData: this.planId,
-        shareType: 'PLAN_REPORT'
-      };
-      generateShareInfo(param, (data) => {
-        let thisHost = window.location.host;
-        let shareUrl = thisHost + "/sharePlanReport" + data.shareUrl;
-      });
-    }
   }
 }
 </script>
@@ -137,34 +95,10 @@ export default {
   padding: 15px;
 }
 
-
 /deep/ .el-tabs .el-tabs__header {
   padding-left: 15px;
   padding-right: 15px;
   padding-top: 15px;
 }
 
-
-.head-right {
-  text-align: right;
-  float: right;
-}
-
-.head-bar .el-button {
-  margin-bottom: 10px;
-  width: 80px;
-  margin-right: 10px;
-  display: block;
-}
-
-.el-button+.el-button {
-  margin-left: 0px;
-}
-
-/*.head-bar {*/
-/*  position: fixed;*/
-/*  right: 10px;*/
-/*  padding: 20px;*/
-/*}*/
-
 </style>

frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanSummaryReport.vue

@@ -0,0 +1,76 @@
+<template>
+  <test-plan-report-container :title="'报告总结'">
+    <template v-slot:title>
+      <el-link class="edit-link" v-if="!isTemplate && !isShare && !isEdit" @click="isEdit = true">
+        编辑
+      </el-link>
+      <el-link class="edit-link" v-if="!isTemplate && !isShare && isEdit" @click="saveSummary">
+        保存
+      </el-link>
+    </template>
+    <el-form class="form-info" v-loading="result.loading">
+      <div v-if="!isEdit">
+        <div class="rich-text-content" v-html="report.summary"></div>
+      </div>
+      <div v-else>
+        <ms-rich-text :content.sync="report.summary"/>
+      </div>
+    </el-form>
+  </test-plan-report-container>
+
+</template>
+
+<script>
+import MsFormDivider from "@/business/components/common/components/MsFormDivider";
+import {editPlanReport} from "@/network/test-plan";
+import TestPlanReportContainer
+  from "@/business/components/track/plan/view/comonents/report/detail/TestPlanReportContainer";
+import MsRichText from "@/business/components/track/case/components/MsRichText";
+export default {
+  name: "TestPlanSummaryReport",
+  components: {MsRichText, TestPlanReportContainer, MsFormDivider},
+  props: {
+    planId: String,
+    report: Object,
+    isTemplate: Boolean,
+    isShare: Boolean
+  },
+  data() {
+    return {
+      result: {},
+      isEdit: false
+    }
+  },
+  methods: {
+    saveSummary() {
+      editPlanReport({
+        id: this.planId,
+        reportSummary: this.report.summary ? this.report.summary : ''
+      });
+      this.isEdit = false;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-link >>> .el-link--inner {
+  line-height: 40px;
+  font-size: 14px;
+  height: 42.8px;
+}
+
+.form-info {
+  padding: 25px;
+}
+
+.edit-link {
+  margin-left: 10px;
+}
+
+.rich-text-content >>> .table td {
+  border: solid 1px #e6e6e6;
+  min-width: 2em;
+  padding: .4em;
+}
+</style>

frontend/src/business/components/track/plan/view/comonents/report/detail/component/TestPlanReportEdit.vue

@@ -0,0 +1,52 @@
+<template>
+  <ms-edit-dialog
+    width="60%"
+    :visible.sync="visible"
+    @confirm="confirm"
+    :title="'模板配置'"
+    append-to-body
+    ref="msEditDialog">
+
+  </ms-edit-dialog>
+</template>
+<script>
+
+
+import MsEditDialog from "@/business/components/common/components/MsEditDialog";
+import {getCurrentProjectID} from "@/common/js/utils";
+export default {
+  name: "TestPlanReportEdit",
+  components: {MsEditDialog},
+  data() {
+    return {
+      visible: false,
+      config: {
+        api: {
+
+        }
+      }
+    }
+  },
+  computed: {
+    projectId() {
+      return getCurrentProjectID();
+    }
+  },
+  props: ['caseId', 'planId'],
+  methods: {
+    open(data) {
+      this.visible = true;
+    },
+    handleClose() {
+      this.visible = false;
+    },
+    confirm() {
+      this.$refs.issueEditDetail.save();
+    }
+  }
+};
+</script>
+
+<style scoped>
+
+</style>