mirror of
https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
synced 2024-12-05 05:29:29 +08:00
refactor(接口测试): sql请求结果格式化
This commit is contained in:
parent
319b54ca7e
commit
4aefb1c0ac
@ -23,7 +23,7 @@
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
<el-col :span="16" style="margin-top: 40px;">
|
||||
<ms-request-result-tail v-if="isRequestResult" :request="request" :scenario-name="scenarioName"/>
|
||||
<ms-request-result-tail v-if="isRequestResult" :request-type="requestType" :request="request" :scenario-name="scenarioName"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<ms-api-report-export v-if="reportExportVisible" id="apiTestReport" :title="report.testName" :content="content" :total-time="totalTime"/>
|
||||
@ -47,6 +47,7 @@ import MsApiReportExport from "./ApiReportExport";
|
||||
import {exportPdf} from "../../../../common/js/utils";
|
||||
import html2canvas from "html2canvas";
|
||||
import MsApiReportViewHeader from "./ApiReportViewHeader";
|
||||
import {RequestFactory} from "../test/model/ScenarioModel";
|
||||
|
||||
export default {
|
||||
name: "MsApiReportViewDetail",
|
||||
@ -67,7 +68,8 @@ export default {
|
||||
isRequestResult: false,
|
||||
request: {},
|
||||
scenarioName: null,
|
||||
reportExportVisible: false
|
||||
reportExportVisible: false,
|
||||
requestType: undefined,
|
||||
}
|
||||
},
|
||||
props: ['reportId'],
|
||||
@ -140,6 +142,10 @@ export default {
|
||||
},
|
||||
requestResult(requestResult) {
|
||||
this.isRequestResult = false;
|
||||
this.requestType = undefined;
|
||||
if (requestResult.request.body.indexOf('[Callable Statement]') > -1) {
|
||||
this.requestType = RequestFactory.TYPES.SQL;
|
||||
}
|
||||
this.$nextTick(function () {
|
||||
this.isRequestResult = true;
|
||||
this.request = requestResult.request;
|
||||
|
@ -69,14 +69,14 @@
|
||||
<ms-request-metric :request="request"/>
|
||||
<ms-request-text :request="request"/>
|
||||
<br>
|
||||
<ms-response-text :response="request.responseResult"/>
|
||||
<ms-response-text :request-type="requestType" :response="request.responseResult"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div v-else>
|
||||
<ms-request-metric :request="request"/>
|
||||
<ms-request-text v-if="isCodeEditAlive" :request="request"/>
|
||||
<br>
|
||||
<ms-response-text v-if="isCodeEditAlive" :response="request.responseResult"/>
|
||||
<ms-response-text :request-type="requestType" v-if="isCodeEditAlive" :response="request.responseResult"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
@ -95,7 +95,8 @@
|
||||
components: {MsResponseText, MsRequestText, MsAssertionResults, MsRequestMetric, MsRequestResult},
|
||||
props: {
|
||||
request: Object,
|
||||
scenarioName: String
|
||||
scenarioName: String,
|
||||
requestType: String
|
||||
},
|
||||
|
||||
data() {
|
||||
|
@ -6,8 +6,9 @@
|
||||
</div>
|
||||
<el-collapse-transition>
|
||||
<el-tabs v-model="activeName" v-show="isActive">
|
||||
<el-tab-pane label="Body" name="body" class="pane">
|
||||
<ms-code-edit :mode="mode" :read-only="true" :data="response.body" :modes="modes" ref="codeEdit"/>
|
||||
<el-tab-pane :class="'body-pane'" label="Body" name="body" class="pane">
|
||||
<ms-sql-result-table v-if="isSqlType" :body="response.body"/>
|
||||
<ms-code-edit v-if="!isSqlType" :mode="mode" :read-only="true" :data="response.body" :modes="modes" ref="codeEdit"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Headers" name="headers" class="pane">
|
||||
<pre>{{ response.headers }}</pre>
|
||||
@ -20,7 +21,7 @@
|
||||
<pre>{{response.vars}}</pre>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane v-if="activeName == 'body'" :disabled="true" name="mode" class="pane assertions">
|
||||
<el-tab-pane v-if="activeName == 'body' && !isSqlType" :disabled="true" name="mode" class="pane assertions">
|
||||
<template v-slot:label>
|
||||
<ms-dropdown :commands="modes" :default-command="mode" @command="modeChange"/>
|
||||
</template>
|
||||
@ -35,18 +36,21 @@
|
||||
import MsAssertionResults from "./AssertionResults";
|
||||
import MsCodeEdit from "../../../common/components/MsCodeEdit";
|
||||
import MsDropdown from "../../../common/components/MsDropdown";
|
||||
import {BODY_FORMAT} from "../../test/model/ScenarioModel";
|
||||
import {BODY_FORMAT, RequestFactory, Request, SqlRequest} from "../../test/model/ScenarioModel";
|
||||
import MsSqlResultTable from "./SqlResultTable";
|
||||
|
||||
export default {
|
||||
name: "MsResponseText",
|
||||
|
||||
components: {
|
||||
MsSqlResultTable,
|
||||
MsDropdown,
|
||||
MsCodeEdit,
|
||||
MsAssertionResults,
|
||||
},
|
||||
|
||||
props: {
|
||||
requestType: String,
|
||||
response: Object
|
||||
},
|
||||
|
||||
@ -75,39 +79,52 @@ export default {
|
||||
if (this.response.headers.indexOf("Content-Type: application/json") > 0) {
|
||||
this.mode = BODY_FORMAT.JSON;
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
isSqlType() {
|
||||
return (this.requestType === RequestFactory.TYPES.SQL && this.response.responseCode === '200');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text-container .icon {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.text-container .collapse {
|
||||
cursor: pointer;
|
||||
}
|
||||
.body-pane {
|
||||
padding: 10px !important;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.text-container .collapse:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.text-container .icon {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.text-container .icon.is-active {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.text-container .collapse {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.text-container .pane {
|
||||
background-color: #F5F5F5;
|
||||
padding: 0 10px;
|
||||
height: 250px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.text-container .collapse:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.text-container .pane.assertions {
|
||||
padding: 0;
|
||||
}
|
||||
.text-container .icon.is-active {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.text-container .pane {
|
||||
background-color: #F5F5F5;
|
||||
padding: 0 10px;
|
||||
height: 250px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.text-container .pane.assertions {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
size="mini"
|
||||
highlight-current-row>
|
||||
<el-table-column v-for="(title, index) in titles" :key="index" :label="title" min-width="15%">
|
||||
<template v-slot:default="scope">
|
||||
<el-popover
|
||||
placement="top"
|
||||
trigger="click">
|
||||
<el-container>
|
||||
<div>{{ scope.row[title] }}</div>
|
||||
</el-container>
|
||||
<span class="table-content" slot="reference">{{ scope.row[title] }}</span>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MsSqlResultTable",
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
titles: []
|
||||
}
|
||||
},
|
||||
props: {
|
||||
body: String
|
||||
},
|
||||
created() {
|
||||
if (!this.body) {
|
||||
return;
|
||||
}
|
||||
let rowArry = this.body.split("\n");
|
||||
let title;
|
||||
let result = [];
|
||||
for (let i = 0; i < rowArry.length; i++) {
|
||||
let colArray = rowArry[i].split("\t");
|
||||
if (i === 0) {
|
||||
title = colArray;
|
||||
} else {
|
||||
let item = {};
|
||||
for (let j = 0; j < colArray.length; j++) {
|
||||
item[title[j]] = (colArray[j] ? colArray[j] : "");
|
||||
}
|
||||
result.push(item);
|
||||
}
|
||||
}
|
||||
this.titles = title;
|
||||
this.tableData = result;
|
||||
this.tableData.splice(this.tableData.length - 3, 3);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.el-table >>> .cell {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table-content {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-container {
|
||||
overflow:auto;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
</style>
|
@ -2,7 +2,7 @@
|
||||
<div class="request-form">
|
||||
<component @runDebug="runDebug" :is="component" :is-read-only="isReadOnly" :request="request" :scenario="scenario"/>
|
||||
<el-divider v-if="isCompleted"></el-divider>
|
||||
<ms-request-result-tail v-loading="debugReportLoading" v-if="isCompleted" :request="request.debugRequestResult ? request.debugRequestResult : {responseResult: {}, subRequestResults: []}"
|
||||
<ms-request-result-tail v-loading="debugReportLoading" v-if="isCompleted" :requestType="request.type" :request="request.debugRequestResult ? request.debugRequestResult : {responseResult: {}, subRequestResults: []}"
|
||||
:scenario-name="request.debugScenario ? request.debugScenario.name : ''" ref="msDebugResult"/>
|
||||
</div>
|
||||
</template>
|
||||
|
Loading…
Reference in New Issue
Block a user