Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
ffa16dd4 by 蔡俊立
Options

json编辑器

1 parent 5879ec0e
Inline Side-by-side
Showing 2 changed files with 33 additions and 6 deletions
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
22 "normalize.css": "7.0.0", 22 "normalize.css": "7.0.0",
23 "nprogress": "0.2.0", 23 "nprogress": "0.2.0",
24 "vue": "2.6.10", 24 "vue": "2.6.10",
25 "vue-json-editor": "^1.4.3",
25 "vue-quill-editor": "^3.0.6", 26 "vue-quill-editor": "^3.0.6",
26 "vue-router": "3.0.2", 27 "vue-router": "3.0.2",
27 "vue-seamless-scroll": "^1.1.23", 28 "vue-seamless-scroll": "^1.1.23",
......
1 <template> 1 <template>
2 <dialogBox title="调用接口" @submitForm="submitForm" saveButton="调用" width="50%" :isFullscreen="false" 2 <dialogBox title="调用接口" @submitForm="submitForm" saveButton="调用" width="50%" :isFullscreen="false"
3 @closeDialog="closeDialog" v-model="value"> 3 @closeDialog="closeDialog" v-model="value">
4 <el-descriptions class="margin-top" :column="1" :size="16" border style="height:600px"> 4 <el-descriptions class="margin-top" :column="1" size="16" border style="height:700px">
5 <el-descriptions-item> 5 <el-descriptions-item>
6 <template slot="label" style="width:200px">接口代码</template>{{ruleForm.interfaceCode}} 6 <template slot="label" style="width:200px">接口代码</template>{{ruleForm.interfaceCode}}
7 </el-descriptions-item> 7 </el-descriptions-item>
...@@ -18,7 +18,14 @@ ...@@ -18,7 +18,14 @@
18 <template slot="label">接口类型</template>{{getInterfaceType(ruleForm.interfaceType)}} 18 <template slot="label">接口类型</template>{{getInterfaceType(ruleForm.interfaceType)}}
19 </el-descriptions-item> 19 </el-descriptions-item>
20 <el-descriptions-item> 20 <el-descriptions-item>
21 <template slot="label">接口参数</template><el-input v-model="interfaceParams" type="textarea" :rows="4"></el-input> 21 <template slot="label">接口参数</template>
22 <vue-json-editor
23 v-model="interfaceParams"
24 :showBtns="false"
25 :mode="'code'"
26 @json-change="onJsonChange"
27 @json-save="onJsonSave"
28 @has-error="onError"/>
22 </el-descriptions-item> 29 </el-descriptions-item>
23 <el-descriptions-item> 30 <el-descriptions-item>
24 <template slot="label">调用状态</template> 31 <template slot="label">调用状态</template>
...@@ -36,9 +43,11 @@ ...@@ -36,9 +43,11 @@
36 </template> 43 </template>
37 44
38 <script> 45 <script>
46 import vueJsonEditor from 'vue-json-editor'
39 import {interfaceRetrieve } from "@/api/jkfw.js" 47 import {interfaceRetrieve } from "@/api/jkfw.js"
40 export default { 48 export default {
41 components: { 49 components: {
50 vueJsonEditor
42 }, 51 },
43 computed: { 52 computed: {
44 }, 53 },
...@@ -56,17 +65,23 @@ export default { ...@@ -56,17 +65,23 @@ export default {
56 {'label': '其他第三方平台','value':'4'}, 65 {'label': '其他第三方平台','value':'4'},
57 ], 66 ],
58 ruleForm: {}, 67 ruleForm: {},
59 interfaceParams: '{\n\n}' , 68 interfaceParams: {} ,
60 returnMessage: {}, 69 returnMessage: {},
70 hasJsonFlag: true
61 } 71 }
62 }, 72 },
63 methods: { 73 methods: {
64 //表单提交 74 //表单提交
65 submitForm () { 75 submitForm () {
76 console.log(this.interfaceParams);
77 console.log(this.hasJsonFlag);
78 if(!this.hasJsonFlag){
79 return;
80 }
66 var formdata = new FormData(); 81 var formdata = new FormData();
67 formdata.append("interfaceCode", this.ruleForm.interfaceCode); 82 formdata.append("interfaceCode", this.ruleForm.interfaceCode);
68 formdata.append("interfaceType", this.ruleForm.interfaceType); 83 formdata.append("interfaceType", this.ruleForm.interfaceType);
69 formdata.append("params", this.interfaceParams); 84 formdata.append("params",JSON.stringify(this.interfaceParams));
70 interfaceRetrieve(formdata).then(res => { 85 interfaceRetrieve(formdata).then(res => {
71 if(res.code == 200){ 86 if(res.code == 200){
72 this.returnMessage = res.result 87 this.returnMessage = res.result
...@@ -80,8 +95,9 @@ export default { ...@@ -80,8 +95,9 @@ export default {
80 //关闭弹窗 95 //关闭弹窗
81 closeDialog () { 96 closeDialog () {
82 this.$emit("input", false); 97 this.$emit("input", false);
83 this.interfaceParams = '{\n\n}' 98 this.interfaceParams = {}
84 this.returnMessage = {} 99 this.returnMessage = {}
100 this.hasJsonFlag = true
85 }, 101 },
86 //获取接口类型 102 //获取接口类型
87 getInterfaceType(code){ 103 getInterfaceType(code){
...@@ -93,7 +109,17 @@ export default { ...@@ -93,7 +109,17 @@ export default {
93 } 109 }
94 } 110 }
95 return name; 111 return name;
96 } 112 },
113 onJsonChange(value){
114 this.onJsonSave();
115 },
116 onJsonSave (value) {
117 this.interfaceParams = value
118 this.hasJsonFlag = true
119 },
120 onError(value) {
121 this.hasJsonFlag = false
122 },
97 } 123 }
98 } 124 }
99 </script> 125 </script>
......