Skip to content

T
topology-ui
提交 2ca29564 authored 作者: jianglw's avatar jianglw
浏览文件
操作

添加json 文件修改功能

上级 7076c62b
隐藏空白字符变更
内嵌 并排
正在显示 包含 458 行增加 和 5 行删除
src/main.js
浏览文件 @ 2ca29564
...@@ -10,7 +10,9 @@ import store from './store' ...@@ -10,7 +10,9 @@ import store from './store'
import Antd from 'ant-design-vue'; import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css'; import 'ant-design-vue/dist/antd.css';
import JInput from '@/components/hcomponents/JInput' import JInput from '@/components/hcomponents/JInput'
//json 编辑器
//ruoyi
import { parseTime, resetForm,selectDictLabel, selectDictLabels,addDateRange } from "@/utils/ruoyi"; import { parseTime, resetForm,selectDictLabel, selectDictLabels,addDateRange } from "@/utils/ruoyi";
//topology //topology
//注册图标 //注册图标
......
src/views/configuration/ParamsConfig.vue
浏览文件 @ 2ca29564
...@@ -146,6 +146,13 @@ ...@@ -146,6 +146,13 @@
@click="removeTopology(scope.row.id)" @click="removeTopology(scope.row.id)"
>删除</el-button >删除</el-button
> >
<el-button
size="mini"
type="text"
icon="el-icon-s-tools"
@click="updateJsonTopology(scope.row)"
>修改JSON</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -162,12 +169,14 @@ ...@@ -162,12 +169,14 @@
</el-card> </el-card>
<add-params ref="addParams" @ok="paramsSet"></add-params> <add-params ref="addParams" @ok="paramsSet"></add-params>
<add-mutual ref="addMutual" @ok="mutualSet"></add-mutual> <add-mutual ref="addMutual" @ok="mutualSet"></add-mutual>
<topology-json ref="topologyJson" @ok="init"></topology-json>
</div> </div>
</template> </template>
<script> <script>
import AddParams from "./modules/AddParams.vue"; import AddParams from "./modules/AddParams.vue";
import AddMutual from "./modules/AddMutual.vue"; import AddMutual from "./modules/AddMutual.vue";
import TopologyJson from "./modules/TopologyJson.vue";
import PreviewToImg from "@/components/topology/PreviewToImg.vue"; import PreviewToImg from "@/components/topology/PreviewToImg.vue";
import { deleteTopologyHandle, list, deleteTopology } from "@/api/topology.js"; import { deleteTopologyHandle, list, deleteTopology } from "@/api/topology.js";
export default { export default {
...@@ -190,6 +199,7 @@ export default { ...@@ -190,6 +199,7 @@ export default {
AddParams, AddParams,
PreviewToImg, PreviewToImg,
AddMutual, AddMutual,
TopologyJson
}, },
data() { data() {
return { return {
...@@ -262,6 +272,9 @@ export default { ...@@ -262,6 +272,9 @@ export default {
}, },
}); });
}, },
updateJsonTopology(row){
this.$refs.topologyJson.init(row)
},
addTopology() { addTopology() {
this.$router.push({ this.$router.push({
path: this.editorUrl, path: this.editorUrl,
......
src/views/configuration/modules/MonacoeditorView.vue 0 → 100644
浏览文件 @ 2ca29564
<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 0 → 100644
浏览文件 @ 2ca29564
<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
浏览文件 @ 2ca29564
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
//项目名称 //项目名称
const name = "组态" const name = "组态"
const port = 8079 // 端口 const port = 8079 // 端口
...@@ -8,7 +9,10 @@ function resolve(dir) { ...@@ -8,7 +9,10 @@ function resolve(dir) {
module.exports = { module.exports = {
lintOnSave: false, lintOnSave: false,
configureWebpack: { configureWebpack: {
name: name name: name,
plugins: [
new MonacoWebpackPlugin()
]
}, },
publicPath: process.env.NODE_ENV === "production" ? "/" : "/", publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
// 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist） // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
...@@ -72,7 +76,7 @@ module.exports = { ...@@ -72,7 +76,7 @@ module.exports = {
.plugin('ScriptExtHtmlWebpackPlugin') .plugin('ScriptExtHtmlWebpackPlugin')
.after('html') .after('html')
.use('script-ext-html-webpack-plugin', [{ .use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime` // `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/ inline: /runtime\..*\.js$/
}]) }])
.end() .end()
...@@ -102,8 +106,8 @@ module.exports = { ...@@ -102,8 +106,8 @@ module.exports = {
}) })
config.optimization.runtimeChunk('single'), config.optimization.runtimeChunk('single'),
{ {
from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件 from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
to: './', //到根目录下 to: './', //到根目录下
} }
} }
) )
......
yarn.lock
浏览文件 @ 2ca29564
...@@ -5807,7 +5807,7 @@ loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3: ...@@ -5807,7 +5807,7 @@ loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
emojis-list "^3.0.0" emojis-list "^3.0.0"
json5 "^1.0.1" json5 "^1.0.1"
loader-utils@^2.0.0: loader-utils@^2.0.0, loader-utils@^2.0.2:
version "2.0.2" version "2.0.2"
resolved "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129" resolved "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.2.tgz#d6e3b4fb81870721ae4e0868ab11dd638368c129"
integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A== integrity sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==
...@@ -6230,6 +6230,18 @@ moment@^2.21.0: ...@@ -6230,6 +6230,18 @@ moment@^2.21.0:
resolved "https://registry.npmmirror.com/moment/-/moment-2.29.3.tgz#edd47411c322413999f7a5940d526de183c031f3" resolved "https://registry.npmmirror.com/moment/-/moment-2.29.3.tgz#edd47411c322413999f7a5940d526de183c031f3"
integrity sha512-c6YRvhEo//6T2Jz/vVtYzqBzwvPT95JBQ+smCytzf7c50oMZRsR/a4w88aD34I+/QVSfnoAnSBFPJHItlOMJVw== 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: move-concurrently@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.npmmirror.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92" resolved "https://registry.npmmirror.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论