style(接口自动化): 优化单个步骤执行结果信息显示,支持可复制

This commit is contained in:
fit2-zhao 2021-02-23 10:16:51 +08:00
parent 661274a650
commit 1bc15856cc
1 changed files with 67 additions and 41 deletions

View File

@ -8,18 +8,21 @@
</el-tab-pane>
<el-tab-pane :label="$t('api_test.definition.request.response_header')" name="headers" class="pane">
<div style="width: 400px">
<pre>{{ response.responseResult.headers }}</pre>
</div>
<!--<div style="width: 400px">-->
<!--<pre>{{ response.responseResult.headers }}</pre>-->
<!--</div>-->
<ms-code-edit :mode="'text'" :read-only="true" :data.sync="response.responseResult.headers"/>
</el-tab-pane>
<!--<el-tab-pane label="Cookie" name="cookie" class="pane cookie">-->
<!--<pre>{{response.cookies}}</pre>-->
<!--</el-tab-pane>-->
<el-tab-pane :label="$t('api_test.definition.request.console')" name="console" class="pane">
<div style="width: 400px">
<pre>{{response.responseResult.console}}</pre>
</div>
<!--<div style="width: 400px">-->
<!--<pre>{{response.responseResult.console}}</pre>-->
<!--</div>-->
<ms-code-edit :mode="'text'" :read-only="true" :data.sync="response.responseResult.console"/>
</el-tab-pane>
<el-tab-pane :label="$t('api_report.assertions')" name="assertions" class="pane assertions">
@ -27,29 +30,30 @@
</el-tab-pane>
<el-tab-pane :label="$t('api_test.request.extract.label')" name="label" class="pane">
<div style="width: 400px">
<pre>{{response.responseResult.vars}}</pre>
</div>
<!--<div style="width: 400px">-->
<!--<pre>{{response.responseResult.vars}}</pre>-->
<!--</div>-->
<ms-code-edit :mode="'text'" :read-only="true" :data.sync="response.responseResult.vars"/>
</el-tab-pane>
<el-tab-pane :label="$t('api_report.request_body')" name="request_body" class="pane">
<div class="ms-div">
{{$t('api_test.request.address')}} :
<pre>{{ response.url }}</pre>
</div>
<div class="ms-div">
{{$t('api_test.scenario.headers')}} :
<pre>{{ response.headers }}</pre>
</div>
<div class="ms-div">
Cookies :
<pre>{{response.cookies}}</pre>
</div>
<div class="ms-div">
Body :
<pre>{{response.body ? response.body:""}}</pre>
</div>
<!--<div class="ms-div">-->
<!--{{$t('api_test.request.address')}} :-->
<!--<pre>{{ response.url }}</pre>-->
<!--</div>-->
<!--<div class="ms-div">-->
<!--{{$t('api_test.scenario.headers')}} :-->
<!--<pre>{{ response.headers }}</pre>-->
<!--</div>-->
<!--<div class="ms-div">-->
<!--Cookies :-->
<!--<pre>{{response.cookies}}</pre>-->
<!--</div>-->
<!--<div class="ms-div">-->
<!--Body :-->
<!--<pre>{{response.body ? response.body:""}}</pre>-->
<!--</div>-->
<ms-code-edit :mode="'text'" :read-only="true" :data.sync="reqMessages"/>
</el-tab-pane>
<el-tab-pane v-if="activeName == 'body'" :disabled="true" name="mode" class="pane cookie">
@ -63,23 +67,23 @@
</template>
<script>
import MsAssertionResults from "./AssertionResults";
import MsCodeEdit from "../MsCodeEdit";
import MsDropdown from "../../../../common/components/MsDropdown";
import {BODY_FORMAT} from "../../model/ApiTestModel";
import MsSqlResultTable from "./SqlResultTable";
import MsAssertionResults from "./AssertionResults";
import MsCodeEdit from "../MsCodeEdit";
import MsDropdown from "../../../../common/components/MsDropdown";
import {BODY_FORMAT} from "../../model/ApiTestModel";
import MsSqlResultTable from "./SqlResultTable";
export default {
name: "MsResponseResult",
export default {
name: "MsResponseResult",
components: {
MsDropdown,
MsCodeEdit,
MsAssertionResults,
MsSqlResultTable
},
components: {
MsDropdown,
MsCodeEdit,
MsAssertionResults,
MsSqlResultTable
},
props: {
props: {
response: Object,
currentProtocol: String,
},
@ -91,12 +95,14 @@ export default {
modes: ['text', 'json', 'xml', 'html'],
sqlModes: ['text', 'table'],
mode: BODY_FORMAT.TEXT,
isMsCodeEditShow: true
isMsCodeEditShow: true,
reqMessages: "",
}
},
watch: {
response() {
this.setBodyType();
this.setReqMessage();
}
},
methods: {
@ -126,9 +132,29 @@ export default {
this.isMsCodeEditShow = true;
});
},
setReqMessage() {
if (this.response) {
if (!this.response.url) {
this.response.url = "";
}
if (!this.response.headers) {
this.response.headers = "";
}
if (!this.response.cookies) {
this.response.cookies = "";
}
if (!this.response.body) {
this.response.body = "";
}
this.reqMessages = this.$t('api_test.request.address') + ":\n" + this.response.url + "\n" +
this.$t('api_test.scenario.headers') + ":\n" + this.response.headers + "\n" + "Cookies :\n" +
this.response.cookies + "\n" + "Bpdy:" + "\n" + this.response.body;
}
},
},
mounted() {
this.setBodyType();
this.setReqMessage();
},
computed: {
isSqlType() {