fix(接口测试): 调试结果返回自动选中mode

frontend/src/business/components/api/report/components/ResponseText.vue

@@ -2,7 +2,7 @@
   <div class="text-container">
     <div @click="active" class="collapse">
       <i class="icon el-icon-arrow-right" :class="{'is-active': isActive}"/>
-      {{$t('api_report.response')}}
+      {{ $t('api_report.response') }}
     </div>
     <el-collapse-transition>
       <el-tabs v-model="activeName" v-show="isActive">
@@ -10,7 +10,7 @@
           <ms-code-edit :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>
+          <pre>{{ response.headers }}</pre>
         </el-tab-pane>
         <el-tab-pane :label="$t('api_report.assertions')" name="assertions" class="pane assertions">
           <ms-assertion-results :assertions="response.assertions"/>
@@ -18,7 +18,7 @@
 
         <el-tab-pane v-if="activeName == 'body'" :disabled="true" name="mode" class="pane assertions">
           <template v-slot:label>
-            <ms-dropdown :commands="modes" @command="modeChange"/>
+            <ms-dropdown :commands="modes" :default-command="mode" @command="modeChange"/>
           </template>
         </el-tab-pane>
 
@@ -28,80 +28,83 @@
 </template>
 
 <script>
-  import MsAssertionResults from "./AssertionResults";
-  import MsCodeEdit from "../../../common/components/MsCodeEdit";
-  import MsDropdown from "../../../common/components/MsDropdown";
-  import {BODY_FORMAT} from "../../test/model/ScenarioModel";
+import MsAssertionResults from "./AssertionResults";
+import MsCodeEdit from "../../../common/components/MsCodeEdit";
+import MsDropdown from "../../../common/components/MsDropdown";
+import {BODY_FORMAT} from "../../test/model/ScenarioModel";
 
-  export default {
-    name: "MsResponseText",
+export default {
+  name: "MsResponseText",
 
-    components: {
-      MsDropdown,
-      MsCodeEdit,
-      MsAssertionResults,
+  components: {
+    MsDropdown,
+    MsCodeEdit,
+    MsAssertionResults,
+  },
+
+  props: {
+    response: Object
+  },
+
+  data() {
+    return {
+      isActive: true,
+      activeName: "body",
+      modes: ['text', 'json', 'xml', 'html'],
+      mode: BODY_FORMAT.TEXT
+    }
+  },
+
+  methods: {
+    active() {
+      this.isActive = !this.isActive;
     },
+    modeChange(mode) {
+      this.mode = mode;
+    }
+  },
 
-    props: {
-      response: Object
-    },
-
-    data() {
-      return {
-        isActive: true,
-        activeName: "body",
-        modes: ['text', 'json', 'xml', 'html'],
-        mode: BODY_FORMAT.TEXT
-      }
-    },
-
-    methods: {
-      active() {
-        this.isActive = !this.isActive;
-      },
-      modeChange(mode) {
-        this.mode = mode;
-      }
-    },
-
-    created() {
-      console.log(this.response.headers);
-      if (this.response.headers.indexOf("Content-Type: application/json") > 0) {
-        this.mode = BODY_FORMAT.JSON;
-      }
+  mounted() {
+    console.log(this.response.headers);
+    if (!this.response.headers) {
+      return;
+    }
+    if (this.response.headers.indexOf("Content-Type: application/json") > 0) {
+      this.mode = BODY_FORMAT.JSON;
     }
   }
+}
 </script>
 
 <style scoped>
-  .text-container .icon {
-    padding: 5px;
-  }
+.text-container .icon {
+  padding: 5px;
+}
 
-  .text-container .collapse {
-    cursor: pointer;
-  }
+.text-container .collapse {
+  cursor: pointer;
+}
 
-  .text-container .collapse:hover {
-    opacity: 0.8;
-  }
+.text-container .collapse:hover {
+  opacity: 0.8;
+}
 
-  .text-container .icon.is-active {
-    transform: rotate(90deg);
-  }
+.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 {
+  background-color: #F5F5F5;
+  padding: 0 10px;
+  height: 250px;
+  overflow-y: auto;
+}
 
-  .text-container .pane.assertions {
-    padding: 0;
-  }
+.text-container .pane.assertions {
+  padding: 0;
+}
 
-  pre {
-    margin: 0;
-  }
+pre {
+  margin: 0;
+}
 </style>