添加json 文件修改功能

package.json

@@ -44,6 +44,8 @@
     "file-saver": "^2.0.5",
     "jsencrypt": "^3.2.1",
     "lodash.pick": "^4.4.0",
+    "monaco-editor": "^0.34.0",
+    "monaco-editor-webpack-plugin": "^7.0.1",
     "node-sass": "^4.14.1",
     "script-ext-html-webpack-plugin": "^2.1.5",
     "svg-sprite-loader": "^6.0.11",

src/main.js

@@ -10,7 +10,9 @@ import store from './store'
 import Antd from 'ant-design-vue';
 import 'ant-design-vue/dist/antd.css';
 import JInput from '@/components/hcomponents/JInput'
+//json 编辑器
 
+//ruoyi
 import { parseTime, resetForm,selectDictLabel, selectDictLabels,addDateRange } from "@/utils/ruoyi";
 //topology 
 //注册图标

src/views/configuration/ParamsConfig.vue

@@ -146,6 +146,13 @@
                     @click="removeTopology(scope.row.id)"
                     >删除</el-button
                   >
+                  <el-button
+                    size="mini"
+                    type="text"
+                    icon="el-icon-s-tools"
+                    @click="updateJsonTopology(scope.row)"
+                    >修改JSON</el-button
+                  >
                 </template>
               </el-table-column>
             </el-table>
@@ -162,12 +169,14 @@
     </el-card>
     <add-params ref="addParams" @ok="paramsSet"></add-params>
     <add-mutual ref="addMutual" @ok="mutualSet"></add-mutual>
+    <topology-json ref="topologyJson" @ok="init"></topology-json>
   </div>
 </template>
 
 <script>
 import AddParams from "./modules/AddParams.vue";
 import AddMutual from "./modules/AddMutual.vue";
+import TopologyJson from "./modules/TopologyJson.vue";
 import PreviewToImg from "@/components/topology/PreviewToImg.vue";
 import { deleteTopologyHandle, list, deleteTopology } from "@/api/topology.js";
 export default {
@@ -190,6 +199,7 @@ export default {
     AddParams,
     PreviewToImg,
     AddMutual,
+    TopologyJson
   },
   data() {
     return {
@@ -262,6 +272,9 @@ export default {
         },
       });
     },
+    updateJsonTopology(row){
+      this.$refs.topologyJson.init(row)
+    },
     addTopology() {
       this.$router.push({
         path: this.editorUrl,

src/views/configuration/modules/MonacoeditorView.vue

+<template>
+  <div
+    ref="container"
+    class="monaco-editor"
+    :style="`height: ${height}px`"
+  ></div>
+</template>
+
+<script>
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
+import "monaco-editor/esm/vs/editor/contrib/find/browser/findController"; // 引入查找控件
+import "monaco-editor/esm/vs/editor/contrib/format/browser/format"
+export default {
+  name: "MonacoeditorView",
+  props: {
+    opts: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    height: {
+      type: Number,
+      default: 300,
+    },
+    isDiff: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      // 主要配置
+      defaultOpts: {
+        value: "", // 编辑器的值
+        theme: "vs-dark",
+        language: "json",
+        links: false,
+        readOnly: true,
+        cursorStyle: true ? "underline-thin" : "line",
+        lineNumbers: "on",
+        contextmenu: false,
+        // set fontsize and family to avoid cursor offset
+        fontSize: 14,
+        showFoldingControls: "always",
+        // auto layout, performance cost
+        automaticLayout: true,
+        wordWrap: "on",
+        // long text indent when wrapped
+        wrappingIndent: "indent",
+        // cursor line highlight
+        renderLineHighlight: "none",
+        // highlight word when cursor in
+        occurrencesHighlight: false,
+        // disable scroll one page at last line
+        scrollBeyondLastLine: false,
+        // hide scroll sign of current line
+        hideCursorInOverviewRuler: true,
+        minimap: {
+          enabled: false,
+        },
+        // vertical line
+        guides: {
+          indentation: false,
+          highlightActiveIndentation: false,
+        },
+        scrollbar: {
+          useShadows: false,
+          verticalScrollbarSize: "9px",
+          horizontalScrollbarSize: "9px",
+        },
+      },
+      // 编辑器对象
+      monacoEditor: {},
+      oldValue: "",
+      newValue: "",
+    };
+  },
+  watch: {
+    opts: {
+      handler() {
+        this.reload();
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    reload() {
+      if (this.monacoEditor) {
+        this.monacoEditor.updateOptions(Object.assign(this.defaultOpts, this.opts))
+      }
+    },
+    edit(val){
+        this.init();
+        this.monacoEditor.setValue(val)
+    },
+    init() {
+      // 初始化container的内容，销毁之前生成的编辑器
+      this.$refs.container.innerHTML = "";
+      // 生成编辑器配置
+      let editorOptions = Object.assign(this.defaultOpts, this.opts);
+      // 初始化编辑器实例
+      this.monacoEditor = monaco.editor.create(
+        this.$refs.container,
+        editorOptions
+      );
+      // 编辑器内容发生改变时触发
+      this.monacoEditor.onDidChangeModelContent(() => {
+        this.$emit("change", this.monacoEditor.getValue());
+      });
+    },
+    upDateDiff(val) {
+      this.monacoDiffInstance.updateOptions({
+        renderSideBySide: !val,
+      });
+    },
+    // 供父组件调用手动获取值
+    getVal() {
+      return this.monacoEditor.getValue();
+    },
+  },
+};
+</script>
+<style scoped>
+.text-formated-container .monaco-editor-con {
+  min-height: 150px;
+  height: calc(100vh - 730px);
+  clear: both;
+  overflow: hidden;
+  background: none;
+}
+/*recovery collapse icon font in monaco*/
+.text-formated-container .monaco-editor .codicon {
+  font-family: codicon !important;
+}
+
+/*change default scrollbar style*/
+.text-formated-container .monaco-editor .scrollbar {
+  background: #eaeaea;
+  border-radius: 4px;
+}
+.dark-mode .text-formated-container .monaco-editor .scrollbar {
+  background: #475156;
+}
+.text-formated-container .monaco-editor .scrollbar:hover {
+  background: #e0e0dd;
+}
+.dark-mode .text-formated-container .monaco-editor .scrollbar:hover {
+  background: #565656;
+}
+
+.text-formated-container .monaco-editor-con .monaco-editor .slider {
+  border-radius: 4px;
+  background: #c1c1c1;
+}
+.dark-mode .text-formated-container .monaco-editor-con .monaco-editor .slider {
+  background: #5d676d;
+}
+.text-formated-container .monaco-editor-con .monaco-editor .slider:hover {
+  background: #7d7d7d;
+}
+
+/*remove background color*/
+.text-formated-container .monaco-editor .margin {
+  background-color: inherit;
+}
+.monaco-editor-con .monaco-editor,
+.monaco-editor-con .monaco-editor-background,
+.monaco-editor-con .monaco-editor .inputarea.ime-input {
+  background-color: inherit;
+}
+
+/*json key color*/
+.monaco-editor-con .mtk4 {
+  color: #111111;
+}
+.dark-mode .monaco-editor-con .mtk4 {
+  color: #ebebec;
+}
+/*json val string color*/
+.monaco-editor-con .mtk5 {
+  color: #42b983;
+}
+/*json val number color*/
+.monaco-editor-con .mtk6 {
+  color: #fc1e70;
+}
+/*json bracket color*/
+.monaco-editor-con .mtk9 {
+  color: #111111;
+}
+/*json bracket color*/
+.dark-mode .monaco-editor-con .mtk9 {
+  color: #b6b6b9;
+}
+
+/* common string in json editor*/
+.monaco-editor-con .mtk1 {
+  color: #606266;
+}
+.dark-mode .monaco-editor-con .mtk1 {
+  color: #f3f3f4;
+}
+</style>
+

src/views/configuration/modules/TopologyJson.vue

+<template>
+  <div class="app-container">
+    <el-dialog :title="title" :visible.sync="open" fullscreen @close="cancel">
+      <el-row>
+        <el-col>
+          <el-card>
+            语言：
+            <el-select
+              v-model="opts.language"
+              placeholder="请选择"
+              size="mini"
+              @change="changeLanguage"
+            >
+              <el-option
+                v-for="item in sets.language"
+                :key="item"
+                :label="item"
+                :value="item"
+              >
+              </el-option>
+            </el-select>
+          </el-card>
+        </el-col>
+        <el-col>
+          <el-card>
+            <MonacoeditorView
+              ref="monacoeditorView"
+              :opts="opts"
+              @change="changeValue"
+              :isDiff="isDiff"
+              :height="600"
+            ></MonacoeditorView>
+          </el-card>
+        </el-col>
+      </el-row>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import MonacoeditorView from "./MonacoeditorView.vue";
+import { getTopologyId, save } from "@/api/topology.js";
+export default {
+  components: {
+    MonacoeditorView,
+  },
+  data() {
+    return {
+      loading: false,
+      title: "JSON编辑",
+      open: false,
+      sets: {
+        language: {
+          apex: "apex",
+          azcli: "azcli",
+          bat: "bat",
+          c: "c",
+          clojure: "clojure",
+          coffeescript: "coffeescript",
+          cpp: "cpp",
+          csharp: "csharp",
+          csp: "csp",
+          css: "css",
+          dockerfile: "dockerfile",
+          fsharp: "fsharp",
+          go: "go",
+          graphql: "graphql",
+          handlebars: "handlebars",
+          html: "html",
+          ini: "ini",
+          java: "java",
+          javascript: "javascript",
+          json: "json",
+          kotlin: "kotlin",
+          less: "less",
+          lua: "lua",
+          markdown: "markdown",
+          msdax: "msdax",
+          mysql: "mysql",
+          "objective-c": "objective-c",
+          pascal: "pascal",
+          perl: "perl",
+          pgsql: "pgsql",
+          php: "php",
+          plaintext: "plaintext",
+          postiats: "postiats",
+          powerquery: "powerquery",
+          powershell: "powershell",
+          pug: "pug",
+          python: "python",
+          r: "r",
+          razor: "razor",
+          redis: "redis",
+          redshift: "redshift",
+          ruby: "ruby",
+          rust: "rust",
+          sb: "sb",
+          scheme: "scheme",
+          scss: "scss",
+          shell: "shell",
+          sol: "sol",
+          sql: "sql",
+          st: "st",
+          swift: "swift",
+          tcl: "tcl",
+          typescript: "typescript",
+          vb: "vb",
+          xml: "xml",
+          yaml: "yaml",
+        },
+        theme: {
+          vs: "vs",
+          "vs-dark": "vs-dark",
+          "hc-black": "hc-black",
+        },
+      },
+      opts: {
+        theme: "vs-dark",
+        language: "json",
+        links: false,
+        readOnly: false,
+        cursorStyle: false ? "underline-thin" : "line",
+        lineNumbers: "on",
+        folding: true,
+        position: true,
+        formatOnPaste: true,
+        formatOnType: true,
+        contextmenu: false,
+        fontSize: 14,
+        showFoldingControls: "always",
+        automaticLayout: true,
+        wordWrap: "on",
+        wrappingIndent: "indent",
+        renderLineHighlight: "none",
+        occurrencesHighlight: false,
+        scrollBeyondLastLine: false,
+        hideCursorInOverviewRuler: true,
+        minimap: {
+          enabled: false,
+        },
+        guides: {
+          indentation: false,
+          highlightActiveIndentation: false,
+        },
+        scrollbar: {
+          useShadows: false,
+          verticalScrollbarSize: "9px",
+          horizontalScrollbarSize: "9px",
+        },
+      },
+      isDiff: true,
+      inlineDiff: false,
+      containerReload: true,
+      jsonStr: "",
+      value: {},
+    };
+  },
+  methods: {
+    init(row) {
+      this.open = true;
+      if (row.data) {
+        this.value = Object.assign({}, row);
+        this.$nextTick(() => {
+          this.$refs.monacoeditorView.edit(row.data);
+        });
+      }
+    },
+    submitForm() {
+      if (this.$refs.monacoeditorView.getVal()) {
+        let params = {};
+        params = Object.assign({}, this.value);
+        params.data = JSON.parse(this.$refs.monacoeditorView.getVal());
+        save(params).then((res) => {
+          if (res.code === 200) {
+            this.$message.success("保存成功");
+            this.cancel();
+          }
+        });
+      }
+    },
+    cancel() {
+      this.value = {};
+      this.open = false;
+      this.$emit("ok");
+    },
+    changeLanguage(val) {
+      this.opts.language = val;
+    },
+    changeTheme(val) {
+      this.opts.theme = val;
+    },
+    // 手动获取值
+    getValue() {
+      // this.$message.info("代码已输出至控制台");
+      // console.log("输出代码:" + this.$refs.monacoeditorView.getVal());
+    },
+    // 内容改变自动获取值
+    changeValue(val) {
+      
+    },
+    inlineDiffChange(val) {
+      this.$refs.monaco.upDateDiff(val);
+    },
+  },
+};
+</script>
+<style scoped>
+.monaco-editor {
+  width: 100%;
+  height: 500px;
+}
+</style>
\ No newline at end of file

vue.config.js

+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 //项目名称
 const name = "组态"
 const port = 8079 // 端口
@@ -8,7 +9,10 @@ function resolve(dir) {
 module.exports = {
   lintOnSave: false,
   configureWebpack: {
-    name: name
+    name: name,
+    plugins: [
+      new MonacoWebpackPlugin()
+    ]
   },
   publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
   // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）

yarn.lock

@@ -5807,7 +5807,7 @@ loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
-loader-utils@^2.0.0:
+loader-utils@^2.0.0, loader-utils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129"
   integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==
@@ -6230,6 +6230,18 @@ moment@^2.21.0:
   resolved "https://registry.npmmirror.com/moment/-/moment-2.29.3.tgz#edd47411c322413999f7a5940d526de183c031f3"
   integrity sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw==
 
+monaco-editor-webpack-plugin@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.npmmirror.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-7.0.1.tgz#ba19c60aba990184e36ad8722b1ed6a564527c7c"
+  integrity sha512-M8qIqizltrPlIbrb73cZdTWfU9sIsUVFvAZkL3KGjAHmVWEJ0hZKa/uad14JuOckc0GwnCaoGHvMoYtJjVyCzw==
+  dependencies:
+    loader-utils "^2.0.2"
+
+monaco-editor@^0.34.0:
+  version "0.34.0"
+  resolved "https://registry.npmmirror.com/monaco-editor/-/monaco-editor-0.34.0.tgz#b1749870a1f795dbfc4dc03d8e9b646ddcbeefa7"
+  integrity sha512-VF+S5zG8wxfinLKLrWcl4WUizMx+LeJrG4PM/M78OhcwocpV0jiyhX/pG6Q9jIOhrb/ckYi6nHnaR5OojlOZCQ==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"