1、前端新增json编辑器页面功能

ruoyi-ui/package.json

@@ -47,15 +47,19 @@
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
+    "install": "^0.13.0",
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.2.1",
+    "jsonlint": "^1.6.3",
     "nprogress": "0.2.0",
     "pubsub-js": "^1.9.4",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
+    "script-loader": "^0.7.2",
     "sortablejs": "1.10.2",
     "vue": "2.6.12",
+    "vue-codemirror": "^4.0.6",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-echarts": "^6.0.2",

ruoyi-ui/src/components/JsonEdit/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="json-editor">
+    <textarea ref="textarea"/>
+  </div>
+</template>
+
+<script>
+import CodeMirror from 'codemirror'
+import 'codemirror/addon/lint/lint.css'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/rubyblue.css'
+
+require('script-loader!jsonlint')
+import 'codemirror/mode/javascript/javascript'
+import 'codemirror/addon/lint/lint'
+import 'codemirror/addon/lint/json-lint'
+
+export default {
+  props: ['value'],
+  data() {
+    return {
+      jsonEditor: false,
+      oldValue:undefined,
+    }
+  },
+  watch: {
+    value(value) {
+      const editorValue = this.jsonEditor.getValue()
+      if (value !== editorValue) {
+        this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
+      }
+    }
+  },
+  mounted() {
+    // CodeMirror.fromTextArea()中第一个参数是DOM元素，而且必须是textarea元素；第二个参数是可选配置项
+    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
+      lineNumbers: true,
+      mode: 'application/json',
+      gutters: ['CodeMirror-lint-markers'],
+      theme: 'default',
+      lint: true,
+
+    })
+
+    this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
+    this.jsonEditor.on('change', cm => {
+      this.$emit('changed', cm.getValue())
+      this.$emit('input', cm.getValue())
+    })
+
+    this.$nextTick(function() {
+      this.$on('autoFormat', function(value) {
+        this.autoFormat(value)
+      });
+
+    });
+  },
+
+  created() {
+    this.oldValue=this.value
+  },
+
+  methods: {
+    getValue() {
+      return this.jsonEditor.getValue()
+    },
+
+    //代码格式化
+    autoFormat(newValue) {
+      try {
+        //判断值是否变化，只有变化才需要格式化
+        if (newValue !== this.oldValue) {
+          this.jsonEditor.setValue(JSON.stringify(JSON.parse(this.value), null, 2));
+        }
+      } catch (e) {
+        this.$modal.notifyWarning("格式错误")
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.json-editor {
+  height: 100%;
+  position: relative;
+}
+
+.json-editor >>> .CodeMirror {
+  height: auto;
+  min-height: 750px;
+}
+
+.json-editor >>> .CodeMirror-scroll {
+  min-height: 750px;
+}
+
+.json-editor >>> .cm-s-rubyblue span.cm-string {
+  color: #F08047;
+}
+
+.addbtn {
+  margin-bottom: 15px;
+  margin-left: 30px;
+}
+</style>

ruoyi-ui/src/views/business/tools/json/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="">
+    <el-button type="text" @click="autoFormat" style="margin-left: 60px;margin-bottom: 5px;margin-top: 5px">格式化</el-button>
+    <el-button type="text" @click="clear" style="margin-left: 60px;margin-bottom: 5px;margin-top: 5px">清空</el-button>
+    <div class="editor-container">
+      <json-editor ref="jsonEditor" v-model="value"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import JsonEditor from '@/components/JsonEdit'
+
+
+export default {
+  name: 'JsonEdit',
+  components: {JsonEditor},
+
+  data() {
+    return {
+      value: JSON.parse("{\"jsonData\":\"test\"}")
+    }
+  },
+
+  methods: {
+    //格式化
+    autoFormat() {
+      this.$refs.jsonEditor.$emit("autoFormat",this.value)    //子组件$on中的名字
+    },
+
+    //清空
+    clear() {
+      this.value={}
+    },
+  },
+}
+</script>
+
+<style scoped>
+.editor-container {
+  position: relative;
+  height: 100%;
+}
+</style>
+

ruoyi-ui/src/views/business/tools/yaml/index.vue

@@ -18,7 +18,7 @@ export default {
   data() {
     return {
       height: document.documentElement.clientHeight - 210 + 'px',
-      value: ""
+      value: "spring: "
     }
   },
   mounted() {