fix: 接口用例页面响应组件优化
This commit is contained in:
chenjianxing
parent
c964785385
commit
f9e2c089ef
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<el-card class="api-component">
|
||||
<div class="header" @click="active">
|
||||
<i class="icon el-icon-arrow-right" :class="{'is-active': isActive}"/>
|
||||
<ms-request-metric :response="response"/>
|
||||
</div>
|
||||
|
||||
<el-collapse-transition>
|
||||
<div v-if="isActive">
|
||||
<el-divider></el-divider>
|
||||
<ms-request-result-tail :show-metric="false" :response="response"/>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
</el-card>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ApiBaseComponent from "../common/ApiBaseComponent";
|
||||
import MsRequestResultTail from "../../../definition/components/response/RequestResultTail";
|
||||
import ElCollapseTransition from "element-ui/src/transitions/collapse-transition";
|
||||
import MsRequestMetric from "../../../definition/components/response/RequestMetric";
|
||||
|
||||
export default {
|
||||
name: "ApiResponseComponent",
|
||||
components: {ElCollapseTransition, MsRequestResultTail, ApiBaseComponent, MsRequestMetric},
|
||||
props: ['apiItem'],
|
||||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
response: {responseResult: {}}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getExecResult() {
|
||||
// 执行结果信息
|
||||
if (this.apiItem) {
|
||||
let url = "/api/definition/report/getReport/" + this.apiItem.id;
|
||||
this.$get(url, response => {
|
||||
if (response.data) {
|
||||
let data = JSON.parse(response.data.content);
|
||||
this.response = data;
|
||||
this.$set(this.apiItem, 'responseData', data);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
active() {
|
||||
this.isActive = !this.isActive;
|
||||
if (this.isActive) {
|
||||
this.getExecResult();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.header {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
/deep/ .el-card__body {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.icon.is-active {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.el-icon-arrow-right {
|
||||
float: left;
|
||||
display: block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.metric-container {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -76,17 +76,10 @@
|
|||
<ms-dubbo-basis-parameters :showScript="true" :request="apiCase.request" v-if="api.protocol==='DUBBO'"/>
|
||||
|
||||
<!-- HTTP 请求返回数据 -->
|
||||
<p class="tip">
|
||||
{{$t('api_test.definition.request.res_param')}}
|
||||
<i class="icon el-icon-arrow-right" :class="{'is-responseActive': apiCase.responseActive}" @click="responseActive(apiCase)"/>
|
||||
</p>
|
||||
<el-collapse-transition>
|
||||
<div v-if="apiCase.responseActive">
|
||||
<ms-request-result-tail :response="responseData"/>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
<p class="tip">{{$t('api_test.definition.request.res_param')}}</p>
|
||||
<api-response-component :api-item="apiCase"/>
|
||||
|
||||
<ms-jmx-step :request="apiCase.request"/>
|
||||
<ms-jmx-step :request="apiCase.request" :response="apiCase.responseData"/>
|
||||
<!-- 保存操作 -->
|
||||
<el-button type="primary" size="small" style="margin: 20px; float: right" @click="saveTestCase(apiCase)" v-tester>
|
||||
{{ $t('commons.save') }}
|
||||
|
|
@ -111,10 +104,12 @@
|
|||
import MsInputTag from "@/business/components/api/automation/scenario/MsInputTag";
|
||||
import MsRequestResultTail from "../response/RequestResultTail";
|
||||
import MsJmxStep from "../step/JmxStep";
|
||||
import ApiResponseComponent from "../../../automation/scenario/component/ApiResponseComponent";
|
||||
|
||||
export default {
|
||||
name: "ApiCaseItem",
|
||||
components: {
|
||||
ApiResponseComponent,
|
||||
MsInputTag,
|
||||
MsTag,
|
||||
MsTipButton,
|
||||
|
|
@ -181,18 +176,6 @@
|
|||
}
|
||||
});
|
||||
},
|
||||
getExecResult() {
|
||||
// 执行结果信息
|
||||
if (this.apiCase) {
|
||||
let url = "/api/definition/report/getReport/" + this.apiCase.id;
|
||||
this.$get(url, response => {
|
||||
if (response.data) {
|
||||
let data = JSON.parse(response.data.content);
|
||||
this.responseData = data;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
singleRun(data) {
|
||||
data.message = true;
|
||||
this.saveTestCase(data);
|
||||
|
|
@ -262,12 +245,6 @@
|
|||
active(item) {
|
||||
item.active = !item.active;
|
||||
},
|
||||
responseActive(item) {
|
||||
item.responseActive = !item.responseActive;
|
||||
if (item.responseActive) {
|
||||
this.getExecResult();
|
||||
}
|
||||
},
|
||||
getResult(data) {
|
||||
if (RESULT_MAP.get(data)) {
|
||||
return RESULT_MAP.get(data);
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
:environment="environment"
|
||||
:is-case-edit="isCaseEdit"
|
||||
:api="api"
|
||||
:api-case="item" :index="index"/>
|
||||
:api-case="item" :index="index" ref="apiCaseItem"/>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
this.visible = false;
|
||||
},
|
||||
|
||||
runRefresh() {
|
||||
runRefresh(data) {
|
||||
this.batchLoadingIds = [];
|
||||
this.singleLoading = false;
|
||||
this.singleRunId = "";
|
||||
|
|
@ -160,7 +160,6 @@
|
|||
}
|
||||
this.$success(this.$t('schedule.event_success'));
|
||||
this.getApiTest();
|
||||
this.$emit('refresh');
|
||||
},
|
||||
|
||||
refresh() {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="request-result">
|
||||
<ms-request-metric :response="response"/>
|
||||
<ms-request-metric v-if="showMetric" :response="response"/>
|
||||
<ms-response-result :currentProtocol="currentProtocol" :response="response"/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -15,6 +15,12 @@
|
|||
props: {
|
||||
response: Object,
|
||||
currentProtocol: String,
|
||||
showMetric: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue