test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
limin-fit2 2022-02-15 14:17:34 +08:00 committed by jianxing
parent 796121073d
commit 724db7acd6
4 changed files with 76 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/business/components/api/automation/report/ApiReportDetail.vue
View File

@ -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">

12
frontend/src/business/components/api/automation/report/components/RequestResult.vue
View File

@ -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-col class="ms-req-name-col" :span="10" v-if="indexNumber!=undefined">
<el-row :gutter="18" type="flex" align="middle" class="info">
<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 {

13
frontend/src/business/components/api/automation/report/components/ScenarioResult.vue
View File

@ -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;

56
frontend/src/business/components/api/automation/report/components/ScenarioResults.vue
View File

@ -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>