refactor: 测试计划报告页面优化

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

@@ -4,11 +4,17 @@
       <el-tab-pane v-if="resultEnable" label="测试结果" name="first">
         <api-result :api-result="report.apiResult"/>
       </el-tab-pane>
-      <el-tab-pane v-if="failureEnable" label="失败用例" name="second">
+      <el-tab-pane v-if="failureEnable" name="second">
-        <api-cases :is-db="isDb" :share-id="shareId" :is-share="isShare" :report="report" :is-template="isTemplate" :plan-id="planId"/>
+        <template v-slot:label>
+          <tab-pane-count title="失败用例"  :count="failureSize"/>
+        </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 label="所有用例" name="third" v-if="allEnable">
+      <el-tab-pane name="third" v-if="allEnable">
-        <api-cases :is-db="isDb" :is-all="true" :share-id="shareId" :is-share="isShare" :report="report" :is-template="isTemplate" :plan-id="planId"/>
+        <template v-slot:label>
+          <tab-pane-count title="所有用例" :count="allSize"/>
+        </template>
+        <api-cases :is-db="isDb" :is-all="true" :share-id="shareId" :is-share="isShare" :report="report" :is-template="isTemplate" :plan-id="planId" @setSize="setAllSize"/>
       </el-tab-pane>
     </el-tabs>
   </test-plan-report-container>
@@ -20,12 +26,15 @@ import ApiResult from "@/business/components/track/plan/view/comonents/report/de
 import TestPlanReportContainer
   from "@/business/components/track/plan/view/comonents/report/detail/TestPlanReportContainer";
 import ApiCases from "@/business/components/track/plan/view/comonents/report/detail/component/ApiCases";
+import TabPaneCount from "@/business/components/track/plan/view/comonents/report/detail/component/TabPaneCount";
 export default {
   name: "TestPlanApiReport",
-  components: {ApiCases, TestPlanReportContainer, ApiResult, MsFormDivider},
+  components: {TabPaneCount, ApiCases, TestPlanReportContainer, ApiResult, MsFormDivider},
   data() {
     return {
-      activeName: 'first'
+      activeName: 'first',
+      failureSize: 0,
+      allSize: 0,
     };
   },
   props: [
@@ -69,6 +78,12 @@ export default {
         this.activeName = 'third';
       }
     },
+    setFailureSize(size) {
+      this.failureSize = size;
+    },
+    setAllSize(size) {
+      this.allSize = size;
+    },
     handleClick(tab, event) {
     }
   }

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

@@ -4,14 +4,23 @@
       <el-tab-pane v-if="resultEnable" label="测试结果" name="first">
         <functional-result :function-result="report.functionResult"/>
       </el-tab-pane>
-      <el-tab-pane v-if="failureEnable" label="失败用例" name="second">
+      <el-tab-pane v-if="failureEnable" name="second">
-        <functional-cases :is-db="isDb" :share-id="shareId" :is-share="isShare" :is-template="isTemplate" :report="report" :plan-id="planId"/>
+        <template v-slot:label>
+          <tab-pane-count title="失败用例"  :count="failureSize"/>
+        </template>
+        <functional-cases :is-db="isDb" :share-id="shareId" :is-share="isShare" :is-template="isTemplate" :report="report" :plan-id="planId" @setSize="setFailureSize"/>
       </el-tab-pane>
-      <el-tab-pane v-if="issueEnable" label="缺陷列表" name="third">
+      <el-tab-pane v-if="issueEnable" name="third">
-        <functional-issue-list :is-db="isDb" :share-id="shareId" :is-share="isShare" :is-template="isTemplate" :report="report" :plan-id="planId"/>
+        <template v-slot:label>
+          <tab-pane-count title="缺陷列表" :count="issueSize"/>
+        </template>
+        <functional-issue-list :is-db="isDb" :share-id="shareId" :is-share="isShare" :is-template="isTemplate" :report="report" :plan-id="planId" @setSize="setIssueSize"/>
       </el-tab-pane>
-      <el-tab-pane label="所有用例" name="fourth" v-if="allEnable">
+      <el-tab-pane name="fourth" v-if="allEnable">
-        <functional-cases :is-db="isDb" :is-all="true" :share-id="shareId" :is-share="isShare" :is-template="isTemplate" :report="report" :plan-id="planId"/>
+        <template v-slot:label>
+          <tab-pane-count title="所有用例" :count="allSize"/>
+        </template>
+        <functional-cases :is-db="isDb" :is-all="true" :share-id="shareId" :is-share="isShare" :is-template="isTemplate" :report="report" :plan-id="planId" @setSize="setAllSize"/>
       </el-tab-pane>
     </el-tabs>
   </test-plan-report-container>
@@ -26,12 +35,18 @@ import FunctionalIssueList
   from "@/business/components/track/plan/view/comonents/report/detail/component/FunctionalIssueList";
 import TestPlanReportContainer
   from "@/business/components/track/plan/view/comonents/report/detail/TestPlanReportContainer";
+import TabPaneCount from "@/business/components/track/plan/view/comonents/report/detail/component/TabPaneCount";
 export default {
   name: "TestPlanFunctionalReport",
-  components: {TestPlanReportContainer, FunctionalIssueList, FunctionalCases, FunctionalResult, MsFormDivider},
+  components: {
+    TabPaneCount,
+    TestPlanReportContainer, FunctionalIssueList, FunctionalCases, FunctionalResult, MsFormDivider},
   data() {
     return {
-      activeName: 'first'
+      activeName: 'first',
+      failureSize: 0,
+      issueSize: 0,
+      allSize: 0,
     };
   },
   props: [
@@ -84,6 +99,15 @@ export default {
         this.activeName = 'fourth';
       }
     },
+    setFailureSize(size) {
+      this.failureSize = size;
+    },
+    setIssueSize(size) {
+      this.issueSize = size;
+    },
+    setAllSize(size) {
+      this.allSize = size;
+    },
     handleClick(tab, event) {
     }
   }

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

@@ -4,11 +4,19 @@
       <el-tab-pane v-if="resultEnable" label="测试结果" name="first">
         <load-result :load-result="report.loadResult"/>
       </el-tab-pane>
-      <el-tab-pane v-if="failureEnable" label="失败用例" name="second">
+      <el-tab-pane v-if="failureEnable" name="second">
-        <load-failure-result :share-id="shareId" :is-share="isShare" :is-template="isTemplate" :report="report" :plan-id="planId"/>
+        <template v-slot:label>
+          <tab-pane-count :title="'失败用例'" :count="failureSize"/>
+        </template>
+        <load-failure-result :share-id="shareId" :is-share="isShare" :is-template="isTemplate"
+                             :report="report" :plan-id="planId" @setSize="setFailureSize"/>
       </el-tab-pane>
-      <el-tab-pane label="所有用例" name="third" v-if="allEnable">
+      <el-tab-pane name="third" v-if="allEnable">
-        <load-all-result :is-db="isDb" :share-id="shareId" :is-share="isShare" :is-template="isTemplate" :report="report" :plan-id="planId"/>
+        <template v-slot:label>
+          <tab-pane-count title="所有用例" :count="allSize"/>
+        </template>
+        <load-all-result :is-db="isDb" :share-id="shareId" :is-share="isShare" :is-template="isTemplate"
+                         :report="report" :plan-id="planId" @setSize="setAllSize"/>
       </el-tab-pane>
     </el-tabs>
   </test-plan-report-container>
@@ -22,17 +30,21 @@ import TestPlanReportContainer
 import LoadFailureResult
   from "@/business/components/track/plan/view/comonents/report/detail/component/LoadFailureResult";
 import LoadAllResult from "@/business/components/track/plan/view/comonents/report/detail/component/LoadAllResult";
+import TabPaneCount from "@/business/components/track/plan/view/comonents/report/detail/component/TabPaneCount";
 
 export default {
   name: "TestPlanLoadReport",
   components: {
+    TabPaneCount,
     LoadAllResult,
     LoadFailureResult,
     TestPlanReportContainer,
     LoadResult, MsFormDivider},
   data() {
     return {
-      activeName: 'first'
+      activeName: 'first',
+      failureSize: 0,
+      allSize: 0,
     };
   },
   props: [
@@ -78,6 +90,12 @@ export default {
         this.activeName = 'third';
       }
     },
+    setFailureSize(size) {
+      this.failureSize = size;
+    },
+    setAllSize(size) {
+      this.allSize = size;
+    },
     handleClick(tab, event) {
     }
   }

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

@@ -197,4 +197,9 @@ export default {
   padding-top: 15px;
 }
 
+/deep/ .empty {
+  text-align: center;
+  width: 100%;
+  padding: 40px;
+}
 </style>

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

@@ -48,9 +48,10 @@
         </ms-table>
       </el-col>
       <el-col :span="17" v-if="apiCases.length > 0">
-        <el-card>
+        <el-card v-if="showResponse">
-          <ms-request-result-tail v-if="showResponse" :response="response" ref="debugResult"/>
+          <ms-request-result-tail :response="response" ref="debugResult"/>
         </el-card>
+        <div class="empty" v-else>内容为空</div>
       </el-col>
     </el-row>
   </div>
@@ -90,7 +91,14 @@ export default {
       apiCases:  [],
       result: {},
       response: {},
-      showResponse: true
+      showResponse: false
+    }
+  },
+  watch: {
+    apiCases() {
+      if (this.apiCases) {
+        this.$emit('setSize', this.apiCases.length);
+      }
     }
   },
   mounted() {
@@ -104,61 +112,47 @@ export default {
         } else {
           this.apiCases = this.report.apiFailureCases;
         }
-        this.handleDefaultClick();
       } else if (this.isShare) {
         if (this.isAll) {
           this.result = getSharePlanApiAllCase(this.shareId, this.planId, (data) => {
             this.apiCases = data;
-            this.handleDefaultClick();
           });
         } else {
           this.result = getSharePlanApiFailureCase(this.shareId, this.planId, (data) => {
             this.apiCases = data;
-            this.handleDefaultClick();
           });
         }
       } else {
         if (this.isAll) {
           this.result = getPlanApiAllCase(this.planId, (data) => {
             this.apiCases = data;
-            this.handleDefaultClick();
           });
         } else {
           this.result = getPlanApiFailureCase(this.planId, (data) => {
             this.apiCases = data;
-            this.handleDefaultClick();
           });
         }
       }
     },
-    handleDefaultClick() {
-      let data = this.apiCases;
-      if (data && data.length > 0) {
-        this.rowClick(data[0]);
-      }
-    },
     rowClick(row) {
-      this.showResponse = true;
-      if (this.isTemplate) {
-        if (!row.response) {
       this.showResponse = false;
-        } else {
+      if (this.isTemplate) {
+        if (row.response) {
+          this.showResponse = true;
           this.response = JSON.parse(row.response);
         }
       } else if (this.isShare) {
         getShareApiReport(this.shareId, row.id, (data) => {
-          if (!data || !data.content) {
+          if (data && data.content) {
-            this.showResponse = false;
+            this.showResponse = true;
-          } else {
             this.response = JSON.parse(data.content);
           }
         });
       } else {
         // todo
         getApiReport(row.id, (data) => {
-          if (!data || !data.content) {
+          if (data && data.content) {
-            this.showResponse = false;
+            this.showResponse = true;
-          } else {
             this.response = JSON.parse(data.content);
           }
         });

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

@@ -1,11 +1,19 @@
 <template>
   <div>
     <el-tabs type="card">
-      <el-tab-pane label="接口用例">
+      <el-tab-pane>
-        <api-case-failure-result :is-db="isDb" :is-all="isAll" :share-id="shareId" :is-share="isShare" :report="report" :is-template="isTemplate" :plan-id="planId"/>
+        <template v-slot:label>
+          <tab-pane-count title="接口用例"  :count="apiSize"/>
+        </template>
+        <api-case-failure-result :is-db="isDb" :is-all="isAll" :share-id="shareId" :is-share="isShare"
+                                 :report="report" :is-template="isTemplate" :plan-id="planId" @setSize="setApiSize"/>
       </el-tab-pane>
-      <el-tab-pane label="场景用例">
+      <el-tab-pane>
-        <api-scenario-failure-result :is-db="isDb" :is-all="isAll" :share-id="shareId" :is-share="isShare" :report="report" :is-template="isTemplate" :plan-id="planId"/>
+        <template v-slot:label>
+          <tab-pane-count title="场景用例" :count="scenarioSize"/>
+        </template>
+        <api-scenario-failure-result :is-db="isDb" :is-all="isAll" :share-id="shareId" :is-share="isShare"
+                                     :report="report" :is-template="isTemplate" :plan-id="planId"  @setSize="setScenarioSize"/>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -20,9 +28,11 @@ import ApiScenarioFailureResult
   from "@/business/components/track/plan/view/comonents/report/detail/component/ApiScenarioFailureResult";
 import ApiCaseFailureResult
   from "@/business/components/track/plan/view/comonents/report/detail/component/ApiCaseFailureResult";
+import TabPaneCount from "@/business/components/track/plan/view/comonents/report/detail/component/TabPaneCount";
 export default {
   name: "ApiCases",
   components: {
+    TabPaneCount,
     ApiCaseFailureResult,
     ApiScenarioFailureResult, StatusTableItem, MethodTableItem, TypeTableItem, PriorityTableItem},
   props: {
@@ -36,11 +46,27 @@ export default {
   },
   data() {
     return {
+      apiSize: 0,
+      scenarioSize: 0,
     }
   },
   mounted() {
   },
+  watch: {
+    apiSize() {
+      this.$emit('setSize', this.apiSize + this.scenarioSize);
+    },
+    scenarioSize() {
+      this.$emit('setSize', this.apiSize + this.scenarioSize);
+    },
+  },
   methods: {
+    setApiSize(size) {
+      this.apiSize = size;
+    },
+    setScenarioSize(size) {
+      this.scenarioSize = size;
+    },
   }
 }
 </script>

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

@@ -49,6 +49,7 @@
       </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"/>
+        <div class="empty" v-else>内容为空</div>
       </el-col>
     </el-row>
   </div>
@@ -88,12 +89,19 @@ export default {
       result: {},
       reportId: null,
       response: {},
-      showResponse: true
+      showResponse: false
     }
   },
   mounted() {
     this.getScenarioApiCase();
   },
+  watch: {
+    scenarioCases() {
+      if (this.scenarioCases) {
+        this.$emit('setSize', this.scenarioCases.length);
+      }
+    }
+  },
   methods: {
     getScenarioApiCase() {
       if (this.isTemplate || this.isDb) {
@@ -102,51 +110,38 @@ export default {
         } else {
           this.scenarioCases = this.report.scenarioFailureCases;
         }
-        this.handleDefaultClick();
       } else if (this.isShare) {
         if (this.isAll) {
           this.result = getSharePlanScenarioAllCase(this.shareId, this.planId, (data) => {
             this.scenarioCases = data;
-            this.handleDefaultClick();
           });
         } else {
           this.result = getSharePlanScenarioFailureCase(this.shareId, this.planId, (data) => {
             this.scenarioCases = data;
-            this.handleDefaultClick();
           });
         }
       } else {
         if (this.isAll) {
           this.result = getPlanScenarioAllCase(this.planId, (data) => {
             this.scenarioCases = data;
-            this.handleDefaultClick();
           });
         } else {
           this.result = getPlanScenarioFailureCase(this.planId, (data) => {
             this.scenarioCases = data;
-            this.handleDefaultClick();
           });
         }
       }
     },
-    handleDefaultClick() {
-      let data = this.scenarioCases;
-      if (data && data.length > 0) {
-        this.rowClick(data[0]);
-      }
-    },
     rowClick(row) {
-      this.showResponse = true;
-      if (this.isTemplate) {
-        if (!row.response) {
       this.showResponse = false;
-        } else {
+      if (this.isTemplate) {
+        if (row.response) {
+          this.showResponse = true;
           this.response = row.response;
         }
       } else {
-        if (!row.reportId) {
+        if (row.reportId) {
-          this.showResponse = false;
+          this.showResponse = true;
-        } else {
           this.reportId = row.reportId;
         }
       }

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

@@ -95,6 +95,13 @@ export default {
   mounted() {
     this.getFunctionalTestCase();
   },
+  watch: {
+    testCases() {
+      if (this.testCases) {
+        this.$emit('setSize', this.testCases.length);
+      }
+    }
+  },
   methods: {
     getFunctionalTestCase() {
       if (this.isTemplate || this.isDb) {

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

@@ -77,6 +77,13 @@ export default {
     this.isThirdPart = this.report.isThirdPartIssue;
     this.getIssues();
   },
+  watch: {
+    data() {
+      if (this.data) {
+        this.$emit('setSize', this.data.length);
+      }
+    }
+  },
   methods: {
     getIssues() {
       if (this.isTemplate || this.isDb) {

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

@@ -2,13 +2,15 @@
     <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"/>
+          <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>
+          <el-card v-if="showResponse">
             <load-case-report-view :is-plan-report="true" :share-id="shareId" :is-share="isShare"
-                                   :plan-report-template="response" v-if="showResponse" :report-id="reportId" ref="loadCaseReportView"/>
+                                   :plan-report-template="response" :report-id="reportId" ref="loadCaseReportView"/>
           </el-card>
+          <div class="empty" v-else>内容为空</div>
         </el-col>
       </el-row>
     </div>
@@ -37,7 +39,7 @@ export default {
   data() {
     return {
       failureTestCases:  [],
-      showResponse: true,
+      showResponse: false,
       reportId: "",
       response: null
     }
@@ -46,11 +48,10 @@ export default {
   },
   methods: {
     getReport(row) {
-      this.showResponse = true;
-      if (this.isTemplate) {
-        if (!row.response) {
       this.showResponse = false;
-        } else {
+      if (this.isTemplate) {
+        if (row.response) {
+          this.showResponse = true;
           this.response = row.response;
         }
       } else {
@@ -59,9 +60,9 @@ export default {
           reportId: row.loadReportId
         }
         if (!row.loadReportId) {
-          this.showResponse = false;
           return;
         }
+        this.showResponse = true;
         if (this.isShare) {
           shareCheckoutLoadReport(this.shareId, param, data => {
             this.openReport(data, row.loadReportId);
@@ -80,6 +81,9 @@ export default {
         this.showResponse = false;
         this.$warning(this.$t('test_track.plan.load_case.report_not_found'));
       }
+    },
+    setAllSize(size) {
+      this.$emit('setSize', size);
     }
   }
 }

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

@@ -77,6 +77,13 @@ export default {
   mounted() {
     this.getFailureTestCase();
   },
+  watch: {
+    loadTestCases() {
+      if (this.loadTestCases) {
+        this.$emit('setSize', this.loadTestCases.length);
+      }
+    }
+  },
   methods: {
     getFailureTestCase() {
       if (this.isTemplate || this.isDb) {

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

@@ -0,0 +1,25 @@
+<template>
+  <span>
+    <span>{{title}}</span>
+    <span class="el-step__icon is-text ms-api-col ms-header" v-if="count > 0">
+      <span class="el-step__icon-inner">{{count}}</span>
+    </span>
+  </span>
+</template>
+
+<script>
+export default {
+  name: "TabPaneCount",
+  props: ['title', 'count']
+}
+</script>
+
+<style scoped>
+.ms-header {
+  background: #783887;
+  color: white;
+  height: 20px;
+  border-radius: 42%;
+  margin-left: 4px;
+}
+</style>