fix: 解决修改请求头后 body 显示错位

frontend/src/business/components/api/definition/components/body/ApiBody.vue

@@ -130,12 +130,14 @@
         })
         if (!isType) {
           this.headers.unshift(new KeyValue({name: "Content-Type", value: value}));
+          this.$emit('headersChange');
         }
       },
       removeContentType() {
         for (let index in this.headers) {
           if (this.headers[index].name === "Content-Type") {
             this.headers.splice(index, 1);
+            this.$emit('headersChange');
             return;
           }
         }

frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue

@@ -3,7 +3,7 @@
     <el-col :span="21">
       <!-- HTTP 请求参数 -->
       <div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100%">
-        <el-tabs v-model="activeName" style="margin: 20px;min-height: 200px">
+        <el-tabs v-model="activeName" class="request-tabs">
           <!-- 请求头-->
           <el-tab-pane :label="$t('api_test.request.headers')" name="headers">
             <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.request.headers')" placement="top-start" slot="label">
@@ -43,8 +43,8 @@
           </el-tab-pane>
 
           <!--请求体-->
-          <el-tab-pane :label="$t('api_test.request.body')" name="body">
+          <el-tab-pane v-if="isBodyShow" :label="$t('api_test.request.body')" name="body">
-            <ms-api-body :is-read-only="isReadOnly" :isShowEnable="isShowEnable" :headers="headers" :body="request.body"/>
+            <ms-api-body @headersChange="reloadBody" :is-read-only="isReadOnly" :isShowEnable="isShowEnable" :headers="headers" :body="request.body"/>
           </el-tab-pane>
 
           <!-- 认证配置 -->
@@ -148,6 +148,7 @@
         },
         headerSuggestions: REQUEST_HEADERS,
         isReloadData: false,
+        isBodyShow: true
       }
     },
 
@@ -207,8 +208,15 @@
         if (!this.request.arguments) {
           this.request.arguments = [];
         }
+      },
+      // 解决修改请求头后 body 显示错位
+      reloadBody() {
+        this.isBodyShow = false;
+        this.$nextTick(() => {
+          this.isBodyShow = true;
+        });
       }
-    },
+    }
   }
 </script>
 
@@ -222,7 +230,7 @@
   }
 
   .ms-query {
-    background: #7F7F7F;
+    background: #783887;
     color: white;
     height: 18px;
     border-radius: 42%;
@@ -234,4 +242,9 @@
     height: 18px;
     border-radius: 42%;
   }
+
+  .request-tabs {
+    margin: 20px;
+    min-height: 200px;
+  }
 </style>

frontend/src/business/components/common/components/MsCodeEdit.vue

@@ -54,6 +54,9 @@
         }
       },
       mounted() {
+        if (!this.data) {
+          this.formatData = "";
+        }
         this.format();
       },
       watch: {
@@ -81,20 +84,20 @@
         },
         format() {
           if (this.enableFormat) {
-            switch (this.mode) {
+            if (this.data) {
-              case 'json':
+              switch (this.mode) {
-                this.formatData = formatJson(this.data);
+                case 'json':
-                break;
+                  this.formatData = formatJson(this.data);
-              case 'html':
+                  break;
-                this.formatData = toDiffableHtml(this.data);
+                case 'html':
-                break;
+                  this.formatData = toDiffableHtml(this.data);
-              case 'xml':
+                  break;
-                this.formatData = formatXml(this.data);
+                case 'xml':
-                break;
+                  this.formatData = formatXml(this.data);
-              default:
+                  break;
-                if (this.data) {
+                default:
                   this.formatData = this.data;
-                }
+              }
             }
           } else {
             this.formatData = this.data;