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

2021-09-02 11:32:44 +08:00 · 2021-09-02 11:32:44 +08:00 · 58e4307461
parent b3940f0a93
commit 58e4307461
11 changed files with 175 additions and 114 deletions
--- a/frontend/src/business/components/api/automation/report/ApiReportDetail.vue
+++ b/frontend/src/business/components/api/automation/report/ApiReportDetail.vue
@ -3,7 +3,7 @@
    <ms-main-container>
      <el-card>
        <section class="report-container" v-if="this.report.testId">
-          <ms-api-report-view-header :is-template="isTemplate" :debug="debug" :report="report" @reportExport="handleExport" @reportSave="handleSave"/>
+          <ms-api-report-view-header :is-plan="isPlan" :is-template="isTemplate" :debug="debug" :report="report" @reportExport="handleExport" @reportSave="handleSave"/>
          <main v-if="isNotRunning">
            <ms-metric-chart :content="content" :totalTime="totalTime"/>
            <div>
@ -80,7 +80,8 @@ export default {
    isTemplate: Boolean,
    templateReport: Object,
    isShare: Boolean,
-    shareId: String
+    shareId: String,
+    isPlan: Boolean
  },
  watch: {
    reportId() {
@ -422,5 +423,4 @@ export default {
 .scenario-result .icon.is-active {
  transform: rotate(90deg);
 }
-
 </style>
--- a/frontend/src/business/components/api/automation/report/ApiReportViewHeader.vue
+++ b/frontend/src/business/components/api/automation/report/ApiReportViewHeader.vue
@ -21,7 +21,7 @@
          <span style="margin-left: 10px">{{$t('report.test_end_time')}}：</span>
          <span class="time"> {{ report.endTime | timestampFormatDate }}</span>
        </span>
-        <el-button v-if="(!debug || exportFlag) && !isTemplate" v-permission="['PROJECT_API_REPORT:READ+EXPORT']" :disabled="isReadOnly" class="export-button" plain type="primary" size="mini" @click="handleExport(report.name)" style="margin-right: 10px">
+        <el-button v-if="!isPlan && (!debug || exportFlag) && !isTemplate" v-permission="['PROJECT_API_REPORT:READ+EXPORT']" :disabled="isReadOnly" class="export-button" plain type="primary" size="mini" @click="handleExport(report.name)" style="margin-right: 10px">
          {{ $t('test_track.plan_view.export_report') }}
        </el-button>

@ -41,7 +41,8 @@ export default {
    exportFlag: {
      type: Boolean,
      default: false,
-    }
+    },
+    isPlan: Boolean
  },
  computed: {
    path() {
--- a/frontend/src/business/components/common/components/report/MsReportExportTemplate.vue
+++ b/frontend/src/business/components/common/components/report/MsReportExportTemplate.vue
@ -28,4 +28,8 @@
    background: white;
  }

+  @page {
+    margin-bottom: 30px;
+    margin-top: 30px;
+  }
 </style>
--- a/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanApiReport.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanApiReport.vue
@ -10,7 +10,7 @@
        </template>
        <api-cases :is-db="isDb" :share-id="shareId" :is-share="isShare" :report="report" :is-template="isTemplate" :plan-id="planId" @setSize="setFailureSize"/>
      </el-tab-pane>
-      <el-tab-pane style="min-height: 550px" name="third" v-if="allEnable">
+      <el-tab-pane style="min-height: 500px" name="third" v-if="allEnable">
        <template v-slot:label>
          <tab-pane-count title="所有用例" :count="allSize"/>
        </template>
--- a/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanLoadReport.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanLoadReport.vue
@ -8,7 +8,7 @@
        <template v-slot:label>
          <tab-pane-count :title="'失败用例'" :count="failureSize"/>
        </template>
-        <load-failure-result :share-id="shareId" :is-share="isShare" :is-template="isTemplate"
+        <load-failure-result class="container" :share-id="shareId" :is-share="isShare" :is-template="isTemplate"
                             :report="report" :plan-id="planId" @setSize="setFailureSize"/>
      </el-tab-pane>
      <el-tab-pane name="third" v-if="allEnable" style="min-height: 550px">
--- a/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportContent.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportContent.vue
@ -234,4 +234,8 @@ export default {
  width: 100%;
  padding: 40px;
 }
+
+/deep/ .padding-col {
+  padding: 5px;
+}
 </style>
--- a/frontend/src/business/components/track/plan/view/comonents/report/detail/component/ApiCaseFailureResult.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/report/detail/component/ApiCaseFailureResult.vue
@ -1,54 +1,55 @@
 <template>
  <div>
    <el-row class="scenario-info">
-      <el-col :span="7">
+      <el-col class="padding-col" :span="7">
+        <el-card>
+          <ms-table v-loading="result.loading"
+                    :show-select-all="false"
+                    :screen-height="null"
+                    :enable-selection="false"
+                    :highlight-current-row="true"
+                    @refresh="getScenarioApiCase"
+                    @handleRowClick="rowClick"
+                    :data="apiCases">

-        <ms-table v-loading="result.loading"
-                  :show-select-all="false"
-                  :screen-height="null"
-                  :enable-selection="false"
-                  :highlight-current-row="true"
-                  @refresh="getScenarioApiCase"
-                  @handleRowClick="rowClick"
-                  :data="apiCases">
+            <ms-table-column
+              :width="80"
+              :label="$t('commons.id')"
+              prop="num">
+            </ms-table-column>

-          <ms-table-column
-            :width="80"
-            :label="$t('commons.id')"
-            prop="num">
-          </ms-table-column>
+            <ms-table-column
+              :label="$t('commons.name')"
+              prop="name">
+            </ms-table-column>

-          <ms-table-column
-            :label="$t('commons.name')"
-            prop="name">
-          </ms-table-column>
+            <ms-table-column
+              :label="'创建人'"
+              prop="creatorName"/>

-          <ms-table-column
-            :label="'创建人'"
-            prop="creatorName"/>
+            <ms-table-column
+              :label="$t('test_track.case.priority')"
+              :width="80"
+              prop="priority">
+              <template v-slot:default="scope">
+                <priority-table-item :value="scope.row.priority" ref="priority"/>
+              </template>
+            </ms-table-column>

-          <ms-table-column
-            :label="$t('test_track.case.priority')"
-            :width="80"
-            prop="priority">
-            <template v-slot:default="scope">
-              <priority-table-item :value="scope.row.priority" ref="priority"/>
-            </template>
-          </ms-table-column>
-
-          <ms-table-column
-            :width="80"
-            :label="'执行结果'"
-            prop="lastResult">
-            <template v-slot:default="scope">
-              <status-table-item v-if="scope.row.execResult === 'success'" :value="'Pass'"/>
-              <status-table-item v-if="scope.row.execResult === 'error'" :value="'Failure'"/>
-              <status-table-item v-if="scope.row.execResult != 'error' && scope.row.execResult != 'success'" :value="'Prepare'"/>
-            </template>
-          </ms-table-column>
-        </ms-table>
+            <ms-table-column
+              :width="80"
+              :label="'执行结果'"
+              prop="lastResult">
+              <template v-slot:default="scope">
+                <status-table-item v-if="scope.row.execResult === 'success'" :value="'Pass'"/>
+                <status-table-item v-if="scope.row.execResult === 'error'" :value="'Failure'"/>
+                <status-table-item v-if="scope.row.execResult != 'error' && scope.row.execResult != 'success'" :value="'Prepare'"/>
+              </template>
+            </ms-table-column>
+          </ms-table>
+        </el-card>
      </el-col>
-      <el-col :span="17" v-if="apiCases.length > 0">
+      <el-col class="padding-col" :span="17" v-if="apiCases.length > 0">
        <el-card v-if="showResponse">
          <ms-request-result-tail :response="response" ref="debugResult"/>
        </el-card>
--- a/frontend/src/business/components/track/plan/view/comonents/report/detail/component/ApiScenarioFailureResult.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/report/detail/component/ApiScenarioFailureResult.vue
@ -1,9 +1,8 @@
 <template>
-  <div>
-    <el-row class="scenario-info">
-      <el-col :span="8">
-
-        <ms-table v-loading="result.loading"
+  <el-row class="scenario-info">
+      <el-col class="padding-col" :span="8">
+        <el-card>
+          <ms-table v-loading="result.loading"
                  :show-select-all="false"
                  :screen-height="null"
                  :enable-selection="false"
@ -47,13 +46,13 @@
            </template>
          </ms-table-column>
        </ms-table>
+        </el-card>
      </el-col>
      <el-col :span="16" v-if="scenarioCases && scenarioCases.length > 0">
-        <ms-api-report v-if="showResponse" :share-id="shareId" :is-share="isShare" :template-report="response" :is-template="isTemplate" :infoDb="true" :report-id="reportId"/>
+        <ms-api-report v-if="showResponse" :is-plan="true" :share-id="shareId" :is-share="isShare" :template-report="response" :is-template="isTemplate" :infoDb="true" :report-id="reportId"/>
        <div class="empty" v-else>内容为空</div>
      </el-col>
    </el-row>
-  </div>
 </template>

 <script>
@ -152,4 +151,17 @@ export default {
 </script>

 <style scoped>
+
+.padding-col {
+  padding-right: 0px;
+}
+
+
+.scenario-info {
+  height: 625px;
+}
+
+.ms-main-container {
+  height: 612px;
+}
 </style>
--- a/frontend/src/business/components/track/plan/view/comonents/report/detail/component/LoadAllResult.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/report/detail/component/LoadAllResult.vue
@ -1,19 +1,19 @@
 <template>
-    <div class="container">
-      <el-row class="scenario-info">
-        <el-col :span="7">
-          <load-failure-result :is-db="isDb" @rowClick="getReport" :is-all="true" :share-id="shareId" :is-share="isShare" :is-template="isTemplate"
-                               :report="report" :plan-id="planId" @setSize="setAllSize"/>
-        </el-col>
-        <el-col :span="17" >
-          <el-card v-show="showResponse">
-            <load-case-report-view :is-plan-report="true" :share-id="shareId" :is-share="isShare"
-                                   :plan-report-template="response" :report-id="reportId" ref="loadCaseReportView"/>
-          </el-card>
-          <div class="empty" v-show="!showResponse">内容为空</div>
-        </el-col>
-      </el-row>
-    </div>
+  <el-row class="scenario-info">
+    <el-col :span="7" class="padding-col">
+      <el-card>
+        <load-failure-result :is-db="isDb" @rowClick="getReport" :is-all="true" :share-id="shareId" :is-share="isShare" :is-template="isTemplate"
+                           :report="report" :plan-id="planId" @setSize="setAllSize"/>
+      </el-card>
+    </el-col>
+    <el-col :span="17" class="padding-col">
+      <el-card v-show="showResponse">
+        <load-case-report-view :is-plan-report="true" :share-id="shareId" :is-share="isShare"
+                               :plan-report-template="response" :report-id="reportId" ref="loadCaseReportView"/>
+      </el-card>
+      <div class="empty" v-show="!showResponse">内容为空</div>
+    </el-col>
+  </el-row>
 </template>

 <script>
--- a/frontend/src/business/components/track/plan/view/comonents/report/detail/component/LoadFailureResult.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/report/detail/component/LoadFailureResult.vue
@ -1,50 +1,47 @@
 <template>
-    <div class="container">
-      <el-table
-        row-key="id"
-        @row-click="rowClick"
-        :highlight-current-row="true"
-        :data="loadTestCases">
-        <el-table-column
-          prop="num"
-          :label="$t('commons.id')"
-          show-overflow-tooltip>
-          <template v-slot:default="{row}">
-            {{row.isCustomNum ? row.customNum : row.num }}
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="name"
-          :label="$t('commons.name')"
-          show-overflow-tooltip>
-        </el-table-column>
+  <el-table
+      row-key="id"
+      @row-click="rowClick"
+      :highlight-current-row="true"
+      :data="loadTestCases">
+      <el-table-column
+        prop="num"
+        :label="$t('commons.id')"
+        show-overflow-tooltip>
+        <template v-slot:default="{row}">
+          {{row.isCustomNum ? row.customNum : row.num }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        :label="$t('commons.name')"
+        show-overflow-tooltip>
+      </el-table-column>

-        <el-table-column
-          prop="userName"
-          :label="$t('commons.create_user')">
-        </el-table-column>
+      <el-table-column
+        prop="userName"
+        :label="$t('commons.create_user')">
+      </el-table-column>

-        <el-table-column
-          prop="status"
-          column-key="status"
-          :label="$t('test_track.plan_view.execute_result')">
-            <template v-slot:default="{row}">
-              <el-tag size="mini" type="danger" v-if="row.status === 'error'">
-                {{ row.status }}
-              </el-tag>
-              <el-tag size="mini" type="success" v-else-if="row.status === 'success'">
-                {{ row.status }}
-              </el-tag>
-              <el-tag size="mini" v-else-if="row.status === 'run'">
-                {{ row.status }}
-              </el-tag>
-              <span v-else>-</span>
-            </template>
-        </el-table-column>
-
-      </el-table>
-    </div>
+      <el-table-column
+        prop="status"
+        column-key="status"
+        :label="$t('test_track.plan_view.execute_result')">
+        <template v-slot:default="{row}">
+          <el-tag size="mini" type="danger" v-if="row.status === 'error'">
+            {{ row.status }}
+          </el-tag>
+          <el-tag size="mini" type="success" v-else-if="row.status === 'success'">
+            {{ row.status }}
+          </el-tag>
+          <el-tag size="mini" v-else-if="row.status === 'run'">
+            {{ row.status }}
+          </el-tag>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>

+    </el-table>
 </template>

 <script>
--- a/frontend/src/common/js/utils.js
+++ b/frontend/src/common/js/utils.js
@ -375,11 +375,53 @@ export function windowPrint(id, zoom) {
  //把获取的 局部div内容赋给body标签, 相当于重置了 body里的内容
  window.document.body.innerHTML = jubuData;
  //调用打印功能
+  if (getUserAgent() == "IE") {
+    clearPageSetup();
+  }
  window.print();
+  document.getElementsByTagName('body')[0].style.zoom = 1;
  window.document.body.innerHTML = bdhtml;//重新给页面内容赋值；
  return false;
 }

+// 打印时清除页眉页脚及打印链接
+function clearPageSetup(){
+  let hkey_root,hkey_path,hkey_key;
+  hkey_root="HKEY_CURRENT_USER";
+  hkey_path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
+  try{
+    let RegWsh = new ActiveXObject("WScript.Shell");
+    hkey_key="header";
+    RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");
+    hkey_key="footer";
+    RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");
+  }catch(e){}
+}
+
+function getUserAgent() {
+  let explorer = window.navigator.userAgent ;
+  //ie
+  if (explorer.indexOf("MSIE") >= 0) {
+    return "IE";
+  }
+  //firefox
+  else if (explorer.indexOf("Firefox") >= 0) {
+    return "Firefox";
+  }
+  //Chrome
+  else if(explorer.indexOf("Chrome") >= 0){
+    return "Chrome";
+  }
+  //Opera
+  else if(explorer.indexOf("Opera") >= 0){
+    return "Opera";
+  }
+  //Safari
+  else if(explorer.indexOf("Safari") >= 0){
+    return "Safari";
+  }
+}
+
 export function getBodyUploadFiles(obj, runData) {
  let bodyUploadFiles = [];
  obj.bodyUploadIds = [];