json编辑器

@@ -22,6 +22,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "vue": "2.6.10",
+    "vue-json-editor": "^1.4.3",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.0.2",
     "vue-seamless-scroll": "^1.1.23",

 <template>
   <dialogBox title="调用接口" @submitForm="submitForm" saveButton="调用" width="50%" :isFullscreen="false"
     @closeDialog="closeDialog" v-model="value">
-    <el-descriptions class="margin-top" :column="1" :size="16" border style="height:600px">
+    <el-descriptions class="margin-top" :column="1" size="16" border style="height:700px">
       <el-descriptions-item>
         <template slot="label" style="width:200px">接口代码</template>{{ruleForm.interfaceCode}}
       </el-descriptions-item>
@@ -18,7 +18,14 @@
         <template slot="label">接口类型</template>{{getInterfaceType(ruleForm.interfaceType)}}
       </el-descriptions-item>
       <el-descriptions-item>
-        <template slot="label">接口参数</template><el-input v-model="interfaceParams" type="textarea" :rows="4"></el-input>
+        <template slot="label">接口参数</template>
+        <vue-json-editor
+          v-model="interfaceParams"
+          :showBtns="false"
+          :mode="'code'"
+          @json-change="onJsonChange"
+          @json-save="onJsonSave"
+          @has-error="onError"/>
       </el-descriptions-item>
       <el-descriptions-item>
         <template slot="label">调用状态</template>
@@ -36,9 +43,11 @@
 </template>
 
 <script>
+import vueJsonEditor from 'vue-json-editor'
 import {interfaceRetrieve } from "@/api/jkfw.js"
 export default {
   components: {
+    vueJsonEditor 
   },
   computed: {
   },
@@ -56,17 +65,23 @@ export default {
           {'label': '其他第三方平台','value':'4'},
       ],
       ruleForm: {},
-      interfaceParams: '{\n\n}' ,
+      interfaceParams: {} ,
       returnMessage: {},
+      hasJsonFlag: true
     }
   },
   methods: {
     //表单提交
     submitForm () {
+      console.log(this.interfaceParams);
+      console.log(this.hasJsonFlag);
+      if(!this.hasJsonFlag){
+        return;
+      }
       var formdata = new FormData();
       formdata.append("interfaceCode", this.ruleForm.interfaceCode);
       formdata.append("interfaceType", this.ruleForm.interfaceType);
-      formdata.append("params", this.interfaceParams);
+      formdata.append("params",JSON.stringify(this.interfaceParams));
       interfaceRetrieve(formdata).then(res => {
         if(res.code == 200){
           this.returnMessage = res.result
@@ -80,8 +95,9 @@ export default {
     //关闭弹窗
     closeDialog () {
       this.$emit("input", false);
-      this.interfaceParams = '{\n\n}'
+      this.interfaceParams = {} 
       this.returnMessage = {}
+      this.hasJsonFlag = true
     },
     //获取接口类型
     getInterfaceType(code){
@@ -93,7 +109,17 @@ export default {
         }
       }
       return name;
-    }
+    },
+    onJsonChange(value){
+      this.onJsonSave();
+    },
+    onJsonSave (value) {
+      this.interfaceParams = value
+      this.hasJsonFlag = true
+    },
+    onError(value) {
+      this.hasJsonFlag = false
+    },
   }
 }
 </script>