feat(测试报告): 测试报告增加一键展开/收起功能

frontend/src/business/components/api/automation/report/ApiReportDetail.vue

@@ -19,7 +19,8 @@
                     <span class="fail">{{ $t('api_report.fail') }}</span>
                   </template>
                   <ms-scenario-results v-on:requestResult="requestResult" :console="content.console"
-                                       :treeData="fullTreeNodes" ref="failsTree"/>
+                                       :treeData="fullTreeNodes" ref="failsTree"
+                                       :errorReport="content.error"/>
                 </el-tab-pane>
                 <el-tab-pane name="errorReport" v-if="content.errorCode > 0">
                   <template slot="label">

frontend/src/business/components/api/automation/report/components/RequestResult.vue

@@ -2,15 +2,15 @@
   <el-card class="ms-cards" v-if="request && request.responseResult">
     <div class="request-result">
       <div @click="active">
-        <el-row :gutter="10" type="flex" align="middle" class="info">
+        <el-row :gutter="18" type="flex" align="middle" class="info">
-          <el-col class="ms-req-name-col" :span="10" v-if="indexNumber!=undefined">
+          <el-col class="ms-req-name-col" :span="18" v-if="indexNumber!=undefined">
             <el-tooltip :content="getName(request.name)" placement="top">
               <div class="method ms-req-name">
                 <div class="el-step__icon is-text ms-api-col-create">
                   <div class="el-step__icon-inner"> {{ indexNumber }}</div>
                 </div>
                 <i class="icon el-icon-arrow-right" :class="{'is-active': isActive}" @click="active" @click.stop/>
-                {{ getName(request.name) }}
+                <span>{{ getName(request.name) }}</span>
               </div>
             </el-tooltip>
           </el-col>
@@ -103,10 +103,10 @@ export default {
     indexNumber: Number,
     console: String,
     errorCode: String,
+    isActive: Boolean,
   },
   data() {
     return {
-      isActive: false,
       requestType: "",
       color: {
         type: String,
@@ -188,6 +188,10 @@ export default {
   font-weight: 500;
   line-height: 35px;
   padding-left: 5px;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .request-result .url {

frontend/src/business/components/api/automation/report/components/ScenarioResult.vue

@@ -8,7 +8,9 @@
             {{ node.index }}
           </div>
         </div>
-        {{ node.label }}
+        <el-tooltip effect="dark" :content="node.label" placement="top">
+          <span>{{ node.label }}</span>
+        </el-tooltip>
       </el-card>
     </div>
     <div v-else>
@@ -18,6 +20,7 @@
         :error-code="node.errorCode"
         :scenarioName="node.label"
         :console="console"
+        :isActive="isActive"
         v-on:requestResult="requestResult"
       />
     </div>
@@ -35,11 +38,11 @@ export default {
     scenario: Object,
     node: Object,
     console: String,
+    isActive: Boolean,
   },
 
   data() {
     return {
-      isActive: false,
       stepFilter: new STEP,
     }
   },
@@ -75,6 +78,9 @@ export default {
 
 .ms-card >>> .el-card__body {
   padding: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .scenario-result .info {
@@ -98,7 +104,7 @@ export default {
   color: #64666A;
 }
 
-.ms-api-col-create {
+.ms-card .ms-api-col-create {
   background-color: #EBF2F2;
   border-color: #008080;
   margin-right: 10px;
@@ -106,6 +112,7 @@ export default {
   color: #008080;
 }
 
+
 /deep/ .el-step__icon {
   width: 20px;
   height: 20px;

frontend/src/business/components/api/automation/report/components/ScenarioResults.vue

@@ -1,5 +1,13 @@
 <template>
   <el-card class="scenario-results">
+    <div v-if="errorReport > 0">
+      <el-tooltip :content="$t('api_test.automation.open_expansion')" placement="top" effect="light">
+        <i class="el-icon-circle-plus-outline  ms-open-btn ms-open-btn-left" v-prevent-re-click @click="openExpansion"/>
+      </el-tooltip>
+      <el-tooltip :content="$t('api_test.automation.close_expansion')" placement="top" effect="light">
+        <i class="el-icon-remove-outline ms-open-btn" size="mini" @click="closeExpansion"/>
+      </el-tooltip>
+    </div>
     <el-tree :data="treeData"
              :expand-on-click-node="false"
              :default-expand-all="defaultExpand"
@@ -7,7 +15,8 @@
              highlight-current
              class="ms-tree ms-report-tree" ref="resultsTree">
           <span slot-scope="{ node, data}" style="width: 99%" @click="nodeClick(node)">
-            <ms-scenario-result :node="data" :console="console" v-on:requestResult="requestResult"/>
+            <ms-scenario-result :node="data" :console="console" v-on:requestResult="requestResult"
+                                :isActive="isActive"/>
           </span>
     </el-tree>
   </el-card>
@@ -23,11 +32,17 @@ export default {
     scenarios: Array,
     treeData: Array,
     console: String,
+    errorReport: Number,
     defaultExpand: {
       default: false,
       type: Boolean,
     }
   },
+  data() {
+    return {
+      isActive: false
+    }
+  },
   created() {
     if (this.$refs.resultsTree && this.$refs.resultsTree.root) {
       this.$refs.resultsTree.root.expanded = true;
@@ -65,8 +80,31 @@ export default {
     },
     nodeClick(node) {
       node.expanded = !node.expanded;
+    },
+    // 改变节点的状态
+    changeTreeNodeStatus(node) {
+      node.expanded = this.expandAll
+      for (let i = 0; i < node.childNodes.length; i++) {
+        // 改变节点的自身expanded状态
+        node.childNodes[i].expanded = this.expandAll
+        // 遍历子节点
+        if (node.childNodes[i].childNodes.length > 0) {
+          this.changeTreeNodeStatus(node.childNodes[i])
         }
       }
+    },
+    closeExpansion() {
+      this.isActive = false;
+      this.expandAll = false;
+      this.changeTreeNodeStatus(this.$refs.resultsTree.store.root);
+    },
+    openExpansion() {
+      this.isActive = true;
+      this.expandAll = true;
+      // 改变每个节点的状态
+      this.changeTreeNodeStatus(this.$refs.resultsTree.store.root)
+    },
+  }
 }
 </script>
 
@@ -111,4 +149,20 @@ export default {
   padding: 0px 20px;
 }
 
+.ms-open-btn {
+  margin: 5px 5px 0px;
+  color: #6D317C;
+  font-size: 20px;
+}
+
+.ms-open-btn:hover {
+  background-color: #F2F9EE;
+  cursor: pointer;
+  color: #67C23A;
+}
+
+.ms-open-btn-left {
+  margin-left: 30px;
+}
+
 </style>