json格式化

src/components/general/codes.vue

@@ -17,12 +17,17 @@ import ace from "ace-builds";
 import "ace-builds/webpack-resolver"; // 在 webpack 环境中使用必须要导入
 import "ace-builds/src-noconflict/mode-json"; // 默认设置的语言模式
 export default {
-  props: ["url","datas",'readOnly'],
+  props: {
+    url: {
+      type: String,
+      default: "",
+    },
+    datas: { type: String, default: "" },
+    readOnly: { type: Boolean, default: false },
+  },
   data() {
     return {
       aceEditor: null,
-      themePath: "ace/theme/monokai", // 不导入 webpack-resolver，该模块路径会报错
-      modePath: this.acemodePath
     };
   },
 
@@ -31,17 +36,18 @@ export default {
       maxLines: 24,
       minLines: 10,
       fontSize: 14,
-      mode: this.acemodePath,
-      wrap: this.wrap,
-      tabSize: 4,
+      wrap: true,
+      tabSize: 2,
       highlightActiveLine: false,
-      readOnly:this.readOnly?this.readOnly:false
+      readOnly: this.readOnly,
     });
     if (this.url) {
       this.getValue();
     }
     if (this.datas) {
-      this.aceEditor.setValue(this.datas);
+      this.aceEditor.setValue(
+        JSON.stringify(JSON.parse(this.datas), null, "\t")
+      );
     }
   },
   watch: {},
@@ -49,10 +55,10 @@ export default {
     getValue() {
       this.$http
         .get(this.url)
-        .then(response => {
+        .then((response) => {
           this.aceEditor.setValue(response.data);
         })
-        .catch(function(response) {
+        .catch(function (response) {
           console.log(response);
         });
     },
@@ -61,8 +67,8 @@ export default {
     },
     getCodesVal() {
       return this.aceEditor.getValue();
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>

src/pages/workbench/fwgl/serviceDetail.vue

@@ -46,7 +46,7 @@
               :stripe="true"
               slot="res_table"
             ></table-um>
-            <v-apaas-code :datas="res_code_arr" slot="res_code"></v-apaas-code>
+            <v-apaas-code :datas="res_code_arr" slot="res_code" :readOnly="true"></v-apaas-code>
           </info-list>
           <p v-if="now_service == 1&&workflows_id">
             流程服务接口说明见文档中心流程服务接口文档