feat: post 请求支持参数格式化

backend/src/main/java/io/metersphere/api/dto/scenario/Body.java

@@ -8,5 +8,6 @@ import java.util.List;
 public class Body {
     private String type;
     private String raw;
+    private String format;
     private List<KeyValue> kvs;
 }

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

@@ -7,7 +7,7 @@
     <el-collapse-transition>
       <el-tabs v-model="activeName" v-show="isActive">
         <el-tab-pane label="Body" name="body" class="pane">
-          <ms-code-edit :read-only="true" :data="response.body" :modes="modes" ref="codeEdit"/>
+          <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>
@@ -31,6 +31,7 @@
   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",
@@ -50,6 +51,7 @@
         isActive: false,
         activeName: "body",
         modes: ['text', 'json', 'xml', 'html'],
+        mode: BODY_FORMAT.TEXT
       }
     },
 
@@ -58,7 +60,7 @@
         this.isActive = !this.isActive;
       },
       modeChange(mode) {
-        this.$refs.codeEdit.setMode(mode);
+        this.mode = mode;
       }
     },
   }

frontend/src/business/components/api/test/components/ApiBody.vue

@@ -9,20 +9,26 @@
       </el-radio-button>
     </el-radio-group>
 
+    <ms-dropdown :default-command="body.format" v-if="body.type == 'Raw'" :commands="modes" @command="modeChange"/>
+
     <ms-api-key-value :is-read-only="isReadOnly" :items="body.kvs" v-if="body.isKV()"/>
 
-    <el-input :disabled="isReadOnly" class="textarea" type="textarea" v-model="body.raw" :autosize="{ minRows: 10, maxRows: 25}" resize="none"
-              v-else/>
+    <div class="body-raw" v-if="body.type == 'Raw'">
+      <ms-code-edit :mode="body.format" :read-only="isReadOnly" :data.sync="body.raw" :modes="modes" ref="codeEdit"/>
+    </div>
+
   </div>
 </template>
 
 <script>
   import MsApiKeyValue from "./ApiKeyValue";
-  import {Body, BODY_TYPE} from "../model/ScenarioModel";
+  import {Body, BODY_FORMAT, BODY_TYPE} from "../model/ScenarioModel";
+  import MsCodeEdit from "../../../common/components/MsCodeEdit";
+  import MsDropdown from "../../../common/components/MsDropdown";
 
   export default {
     name: "MsApiBody",
-    components: {MsApiKeyValue},
+    components: {MsDropdown, MsCodeEdit, MsApiKeyValue},
     props: {
       body: Body,
       isReadOnly: {
@@ -33,16 +39,24 @@
 
     data() {
       return {
-        type: BODY_TYPE
+        type: BODY_TYPE,
+        modes: ['text', 'json', 'xml', 'html']
       };
     },
 
-    methods: {},
+    methods: {
+      modeChange(mode) {
+        this.body.format = mode;
+      }
+    },
 
     created() {
-      if (this.body.type === null) {
+      if (!this.body.type) {
         this.body.type = BODY_TYPE.KV;
       }
+      if (!this.body.format) {
+        this.body.format = BODY_FORMAT.TEXT;
+      }
     }
   }
 </script>
@@ -51,4 +65,19 @@
   .textarea {
     margin-top: 10px;
   }
+
+  .body-raw {
+    padding: 15px 0;
+    height: 300px;
+  }
+
+  .el-dropdown {
+    margin-left: 20px;
+    line-height: 30px;
+  }
+
+  .ace_editor {
+    border-radius: 5px;
+  }
+
 </style>

frontend/src/business/components/api/test/model/ScenarioModel.js

@@ -37,6 +37,13 @@ export const BODY_TYPE = {
   RAW: "Raw"
 }
 
+export const BODY_FORMAT = {
+  TEXT: "text",
+  JSON: "json",
+  XML: "xml",
+  HTML: "html",
+}
+
 export const ASSERTION_TYPE = {
   TEXT: "Text",
   REGEX: "Regex",
@@ -820,12 +827,42 @@ class JMXGenerator {
 
   addRequestHeader(httpSamplerProxy, request) {
     let name = request.name + " Headers";
+    this.addBodyFormat(request);
     let headers = this.filterKV(request.headers);
     if (headers.length > 0) {
       httpSamplerProxy.put(new HeaderManager(name, headers));
     }
   }
 
+  addBodyFormat(request) {
+    let bodyFormat = request.body.format;
+    if (bodyFormat) {
+      switch (bodyFormat) {
+        case BODY_FORMAT.JSON:
+          this.addContentType(request, 'application/json');
+          break;
+        case BODY_FORMAT.HTML:
+          this.addContentType(request, 'text/html');
+          break;
+        case BODY_FORMAT.XML:
+          this.addContentType(request, 'text/xml');
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  addContentType(request, type) {
+    for (let index in request.headers) {
+      if (request.headers[index].name == 'Content-Type') {
+        request.headers.splice(index, 1);
+        break;
+      }
+    }
+    request.headers.push(new KeyValue('Content-Type', type));
+  }
+
   addRequestArguments(httpSamplerProxy, request) {
     let args = this.filterKV(request.parameters);
     if (args.length > 0) {

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

@@ -8,7 +8,6 @@
       components: { editor: require('vue2-ace-editor')},
       data() {
         return {
-          mode: 'text',
           formatData: ''
         }
       },
@@ -25,6 +24,12 @@
             return false;
           }
         },
+        mode: {
+          type: String,
+          default() {
+            return 'text';
+          }
+        },
         modes: {
           type: Array,
           default() {
@@ -35,6 +40,14 @@
       mounted() {
         this.format();
       },
+      watch: {
+        formatData() {
+          this.$emit('update:data', this.formatData);
+        },
+        mode() {
+          this.format();
+        }
+      },
       methods: {
         editorInit: function (editor) {
           require('brace/ext/language_tools') //language extension prerequsite...
@@ -51,19 +64,19 @@
           }
         },
         format() {
-          if (this.mode === 'json') {
+          if (this.mode === 'json' && this.readOnly) {
             try {
               this.formatData = JSON.stringify(JSON.parse(this.data), null, '\t');
             } catch (e) {
-              this.formatData = this.data;
+              if (this.data) {
+                this.formatData = this.data;
+              }
             }
           } else {
-            this.formatData = this.data;
+            if (this.data) {
+              this.formatData = this.data;
+            }
           }
-        },
-        setMode(mode) {
-          this.mode = mode;
-          this.format();
         }
       }
     }

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

@@ -25,10 +25,15 @@
       props: {
         commands: {
           type: Array
+        },
+        defaultCommand: {
+          type: String
         }
       },
       created() {
-        if (this.commands && this.commands.length > 0) {
+        if (this.defaultCommand) {
+          this.currentCommand = this.defaultCommand;
+        } else if (this.commands && this.commands.length > 0) {
           this.currentCommand = this.commands [0];
         }
       },