From 1bc15856ccb99f80cd79ba9514d697d1dfec2cfa Mon Sep 17 00:00:00 2001
From: fit2-zhao <yong.zhao@fit2cloud.com>
Date: Tue, 23 Feb 2021 10:16:51 +0800
Subject: [PATCH] =?UTF-8?q?style(=E6=8E=A5=E5=8F=A3=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=8C=96):=20=E4=BC=98=E5=8C=96=E5=8D=95=E4=B8=AA=E6=AD=A5?=
 =?UTF-8?q?=E9=AA=A4=E6=89=A7=E8=A1=8C=E7=BB=93=E6=9E=9C=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=EF=BC=8C=E6=94=AF=E6=8C=81=E5=8F=AF=E5=A4=8D?=
 =?UTF-8?q?=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/response/ResponseResult.vue    | 108 +++++++++++-------
 1 file changed, 67 insertions(+), 41 deletions(-)

diff --git a/frontend/src/business/components/api/definition/components/response/ResponseResult.vue b/frontend/src/business/components/api/definition/components/response/ResponseResult.vue
index 09eb403717..f81bf81c6d 100644
--- a/frontend/src/business/components/api/definition/components/response/ResponseResult.vue
+++ b/frontend/src/business/components/api/definition/components/response/ResponseResult.vue
@@ -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() {