fix(接口测试): 修复设置多个cookie显示错误问题

--bug=1020689 --user=赵勇 【接口测试】github#20467，环境配置里面的请求头Cookie和单个接口里面请求头冲突 https://www.tapd.cn/55049933/s/1313765

api-test/frontend/src/business/automation/report/components/ResponseText.vue

@@ -40,7 +40,7 @@
             <pre>{{ request.headers }}</pre>
           </div>
           <div class="ms-div" v-if="request.url && request.url !== ''">
-            Cookies :
+            Cookie :
             <pre>{{ request.cookies }}</pre>
           </div>
           <div class="ms-div">

api-test/frontend/src/business/definition/components/esb/EsbResponseResult.vue

@@ -214,7 +214,7 @@ export default {
           ':\n' +
           this.response.headers +
           '\n' +
-          'Cookies :\n' +
+          'Cookie :' +
           this.response.cookies +
           '\n' +
           'Body:' +

api-test/frontend/src/business/definition/components/mock/Components/MockResponseParam.vue

@@ -234,7 +234,7 @@ export default {
           ':\n' +
           this.response.headers +
           '\n' +
-          'Cookies :\n' +
+          'Cookie :' +
           this.response.cookies +
           '\n' +
           'Body:' +

api-test/frontend/src/business/definition/components/response/ResponseResult.vue

@@ -166,7 +166,7 @@ export default {
         }
 
         if (this.response.cookies) {
-          this.reqMessages += 'Cookies :\n' + this.response.cookies + '\n';
+          this.reqMessages += 'Cookie :' + this.response.cookies + '\n';
         }
         this.reqMessages += 'Body:' + '\n' + this.response.body;
       }

test-track/frontend/src/business/plan/view/comonents/report/detail/api/ResponseResult.vue

@@ -1,43 +1,124 @@
 <template>
   <div class="text-container" v-if="responseResult">
     <el-tabs v-model="activeName" v-show="isActive">
-      <el-tab-pane :label="$t('api_test.definition.request.response_body')" name="body" class="pane">
+      <el-tab-pane
-        <ms-sql-result-table v-if="isSqlType && activeName === 'body'" :body="responseResult.body"/>
+        :label="$t('api_test.definition.request.response_body')"
-        <ms-code-edit v-if="!isSqlType && isMsCodeEditShow && activeName === 'body'" :mode="mode" :read-only="true"
+        name="body"
-                      :modes="modes" :data.sync="responseResult.body" ref="codeEdit"/>
+        class="pane"
+      >
+        <ms-sql-result-table
+          v-if="isSqlType && activeName === 'body'"
+          :body="responseResult.body"
+        />
+        <ms-code-edit
+          v-if="!isSqlType && isMsCodeEditShow && activeName === 'body'"
+          :mode="mode"
+          :read-only="true"
+          :modes="modes"
+          :data.sync="responseResult.body"
+          ref="codeEdit"
+        />
       </el-tab-pane>
 
-      <el-tab-pane :label="$t('api_test.definition.request.response_header')" name="headers" class="pane">
+      <el-tab-pane
-        <ms-code-edit :mode="'text'" :read-only="true" :data.sync="responseResult.headers"
+        :label="$t('api_test.definition.request.response_header')"
-                      v-if="activeName === 'headers'"/>
+        name="headers"
+        class="pane"
+      >
+        <ms-code-edit
+          :mode="'text'"
+          :read-only="true"
+          :data.sync="responseResult.headers"
+          v-if="activeName === 'headers'"
+        />
       </el-tab-pane>
 
-      <el-tab-pane v-if="isTestPlan" :label="$t('api_test.definition.request.console')" name="console" class="pane">
+      <el-tab-pane
-        <ms-code-edit :mode="'text'" :read-only="true" :data.sync="responseResult.console"
+        v-if="isTestPlan"
-                      v-if="activeName === 'console'" height="calc(100vh - 300px)"/>
+        :label="$t('api_test.definition.request.console')"
+        name="console"
+        class="pane"
+      >
+        <ms-code-edit
+          :mode="'text'"
+          :read-only="true"
+          :data.sync="responseResult.console"
+          v-if="activeName === 'console'"
+          height="calc(100vh - 300px)"
+        />
       </el-tab-pane>
 
-      <el-tab-pane v-if="!isTestPlan" :label="$t('api_test.definition.request.console')" name="console" class="pane">
+      <el-tab-pane
-        <ms-code-edit :mode="'text'" :read-only="true" :data.sync="responseResult.console"
+        v-if="!isTestPlan"
-                      v-if="activeName === 'console'"/>
+        :label="$t('api_test.definition.request.console')"
+        name="console"
+        class="pane"
+      >
+        <ms-code-edit
+          :mode="'text'"
+          :read-only="true"
+          :data.sync="responseResult.console"
+          v-if="activeName === 'console'"
+        />
       </el-tab-pane>
 
-      <el-tab-pane :label="$t('api_report.assertions')" name="assertions" class="pane assertions">
+      <el-tab-pane
-        <ms-assertion-results :assertions="responseResult.assertions" v-if="activeName === 'assertions'"/>
+        :label="$t('api_report.assertions')"
+        name="assertions"
+        class="pane assertions"
+      >
+        <ms-assertion-results
+          :assertions="responseResult.assertions"
+          v-if="activeName === 'assertions'"
+        />
       </el-tab-pane>
 
-      <el-tab-pane :label="$t('api_test.request.extract.label')" name="label" class="pane">
+      <el-tab-pane
-        <ms-code-edit :mode="'text'" :read-only="true" :data.sync="responseResult.vars" v-if="activeName === 'label'"/>
+        :label="$t('api_test.request.extract.label')"
+        name="label"
+        class="pane"
+      >
+        <ms-code-edit
+          :mode="'text'"
+          :read-only="true"
+          :data.sync="responseResult.vars"
+          v-if="activeName === 'label'"
+        />
       </el-tab-pane>
 
-      <el-tab-pane :label="$t('api_report.request_body')" name="request_body" class="pane">
+      <el-tab-pane
-        <ms-code-edit :mode="'text'" :read-only="true" :data.sync="reqMessages" v-if="activeName === 'request_body'"/>
+        :label="$t('api_report.request_body')"
+        name="request_body"
+        class="pane"
+      >
+        <ms-code-edit
+          :mode="'text'"
+          :read-only="true"
+          :data.sync="reqMessages"
+          v-if="activeName === 'request_body'"
+        />
       </el-tab-pane>
 
-      <el-tab-pane v-if="activeName == 'body'" :disabled="true" name="mode" class="pane cookie">
+      <el-tab-pane
+        v-if="activeName == 'body'"
+        :disabled="true"
+        name="mode"
+        class="pane cookie"
+      >
         <template v-slot:label>
-          <ms-dropdown v-if="currentProtocol==='SQL'" :commands="sqlModes" :default-command="mode" @command="sqlModeChange"/>
+          <ms-dropdown
-          <ms-dropdown v-else :commands="modes" :default-command="mode" @command="modeChange" ref="modeDropdown"/>
+            v-if="currentProtocol === 'SQL'"
+            :commands="sqlModes"
+            :default-command="mode"
+            @command="sqlModeChange"
+          />
+          <ms-dropdown
+            v-else
+            :commands="modes"
+            :default-command="mode"
+            @command="modeChange"
+            ref="modeDropdown"
+          />
         </template>
       </el-tab-pane>
     </el-tabs>
@@ -48,7 +129,7 @@
 import MsAssertionResults from "../ui/AssertionResults";
 import MsCodeEdit from "metersphere-frontend/src/components/MsCodeEdit";
 import MsDropdown from "metersphere-frontend/src/components/MsDropdown";
-import {BODY_FORMAT} from "metersphere-frontend/src/model/ApiTestModel";
+import { BODY_FORMAT } from "metersphere-frontend/src/model/ApiTestModel";
 import MsSqlResultTable from "./SqlResultTable";
 
 export default {
@@ -58,7 +139,7 @@ export default {
     MsDropdown,
     MsCodeEdit,
     MsAssertionResults,
-    MsSqlResultTable
+    MsSqlResultTable,
   },
 
   props: {
@@ -68,26 +149,26 @@ export default {
       type: Boolean,
       default() {
         return false;
-      }
+      },
-    }
+    },
   },
 
   data() {
     return {
       isActive: true,
       activeName: "body",
-      modes: ['text', 'json', 'xml', 'html'],
+      modes: ["text", "json", "xml", "html"],
-      sqlModes: ['text', 'table'],
+      sqlModes: ["text", "table"],
       mode: BODY_FORMAT.TEXT,
       isMsCodeEditShow: true,
       reqMessages: "",
-    }
+    };
   },
   watch: {
     response() {
       this.setBodyType();
       this.setReqMessage();
-    }
+    },
   },
   methods: {
     modeChange(mode) {
@@ -97,15 +178,21 @@ export default {
       this.mode = mode;
     },
     setBodyType() {
-      if (this.response && this.response.responseResult && this.response.responseResult.headers
+      if (
-        && this.response.responseResult.headers.indexOf("Content-Type: application/json") > 0) {
+        this.response &&
+        this.response.responseResult &&
+        this.response.responseResult.headers &&
+        this.response.responseResult.headers.indexOf(
+          "Content-Type: application/json"
+        ) > 0
+      ) {
         this.mode = BODY_FORMAT.JSON;
         this.$nextTick(() => {
           if (this.$refs.modeDropdown) {
             this.$refs.modeDropdown.handleCommand(BODY_FORMAT.JSON);
             this.msCodeReload();
           }
-        })
+        });
       }
     },
     msCodeReload() {
@@ -134,9 +221,21 @@ export default {
         if (!this.response.responseResult.vars) {
           this.response.responseResult.vars = "";
         }
-        this.reqMessages = this.$t('api_test.request.address') + ":\n" + this.response.url + "\n" +
+        this.reqMessages =
-          this.$t('api_test.scenario.headers') + ":\n" + this.response.headers + "\n" + "Cookies :\n" +
+          this.$t("api_test.request.address") +
-          this.response.cookies + "\n" + "Body:" + "\n" + this.response.body;
+          ":\n" +
+          this.response.url +
+          "\n" +
+          this.$t("api_test.scenario.headers") +
+          ":\n" +
+          this.response.headers +
+          "\n" +
+          "Cookie :\n" +
+          this.response.cookies +
+          "\n" +
+          "Body:" +
+          "\n" +
+          this.response.body;
       }
     },
   },
@@ -146,13 +245,19 @@ export default {
   },
   computed: {
     isSqlType() {
-      return (this.currentProtocol === "SQL" && this.response.responseResult.responseCode === '200' && this.mode === 'table');
+      return (
+        this.currentProtocol === "SQL" &&
+        this.response.responseResult.responseCode === "200" &&
+        this.mode === "table"
+      );
     },
     responseResult() {
-      return this.response && this.response.responseResult ? this.response.responseResult : {};
+      return this.response && this.response.responseResult
-    }
+        ? this.response.responseResult
-  }
+        : {};
-}
+    },
+  },
+};
 </script>
 
 <style scoped>
@@ -173,7 +278,7 @@ export default {
 }
 
 .text-container .pane {
-  background-color: #F5F5F5;
+  background-color: #f5f5f5;
   padding: 1px 0;
   height: 250px;
   overflow-y: auto;