|
@@ -1,15 +1,9 @@
|
|
|
<template>
|
|
|
<div class="">
|
|
|
-
|
|
|
<div v-loading="loading" element-loading-text="正在读取">
|
|
|
- <codemirror
|
|
|
- ref="cm"
|
|
|
- v-model="code"
|
|
|
- :options="cmOptions"
|
|
|
- ></codemirror>
|
|
|
-
|
|
|
+ <codemirror ref="cm" v-model="code" :options="cmOptions"></codemirror>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
<el-button @click="cancel()">取消</el-button>
|
|
|
<el-button type="primary" @click="writeCode()">确定</el-button>
|
|
@@ -18,229 +12,201 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
// 全局引入vue-codemirror
|
|
|
- import {codemirror} from 'vue-codemirror';
|
|
|
- // 引入css文件
|
|
|
- import 'codemirror/lib/codemirror.css'
|
|
|
- // 引入主题 可以从 codemirror/theme/ 下引入多个
|
|
|
- import 'codemirror/theme/idea.css'
|
|
|
- // 引入语言模式 可以从 codemirror/mode/ 下引入多个
|
|
|
- import 'codemirror/mode/sql/sql.js';
|
|
|
- import 'codemirror/mode/python/python.js'
|
|
|
- import 'codemirror/mode/javascript/javascript.js'
|
|
|
-
|
|
|
- // 搜索功能
|
|
|
- // find:Ctrl-F (PC), Cmd-F (Mac)
|
|
|
- // findNext:Ctrl-G (PC), Cmd-G (Mac)
|
|
|
- // findPrev:Shift-Ctrl-G (PC), Shift-Cmd-G (Mac)
|
|
|
- // replace:Shift-Ctrl-F (PC), Cmd-Alt-F (Mac)
|
|
|
- // replaceAll:Shift-Ctrl-R (PC), Shift-Cmd-Alt-F (Mac)
|
|
|
- import 'codemirror/addon/dialog/dialog.css'
|
|
|
- import 'codemirror/addon/dialog/dialog'
|
|
|
- import 'codemirror/addon/search/searchcursor'
|
|
|
- import 'codemirror/addon/search/search'
|
|
|
- import 'codemirror/addon/search/jump-to-line'
|
|
|
- import 'codemirror/addon/search/matchesonscrollbar'
|
|
|
- import 'codemirror/addon/search/match-highlighter'
|
|
|
-
|
|
|
-
|
|
|
- // 代码提示功能 具体语言可以从 codemirror/addon/hint/ 下引入多个
|
|
|
- import 'codemirror/addon/hint/show-hint.css';
|
|
|
- import 'codemirror/addon/hint/show-hint';
|
|
|
- import 'codemirror/addon/hint/sql-hint';
|
|
|
- import 'codemirror/addon/hint/anyword-hint';
|
|
|
- import "codemirror/addon/hint/javascript-hint.js";
|
|
|
- import "codemirror/addon/lint/javascript-lint.js";
|
|
|
- import 'codemirror/addon/lint/lint'
|
|
|
- import 'codemirror/addon/lint/lint.css'
|
|
|
-
|
|
|
- // 高亮行功能
|
|
|
- import 'codemirror/addon/selection/active-line'
|
|
|
- import 'codemirror/addon/selection/selection-pointer'
|
|
|
-
|
|
|
- // 调整scrollbar样式功能
|
|
|
- import 'codemirror/addon/scroll/simplescrollbars.css'
|
|
|
- import 'codemirror/addon/scroll/simplescrollbars'
|
|
|
-
|
|
|
- // 自动括号匹配功能
|
|
|
- import 'codemirror/addon/edit/matchbrackets'
|
|
|
- import 'codemirror/addon/edit/closebrackets'
|
|
|
-
|
|
|
- // 全屏功能 由于项目复杂,自带的全屏功能一般不好使
|
|
|
- import 'codemirror/addon/display/fullscreen.css'
|
|
|
- import 'codemirror/addon/display/fullscreen'
|
|
|
-
|
|
|
- // 显示自动刷新
|
|
|
- import 'codemirror/addon/display/autorefresh'
|
|
|
-
|
|
|
- // 多语言支持?
|
|
|
- import 'codemirror/addon/mode/overlay'
|
|
|
- import 'codemirror/addon/mode/multiplex'
|
|
|
-
|
|
|
-
|
|
|
- // 代码段折叠功能
|
|
|
- import 'codemirror/addon/fold/foldcode'
|
|
|
- import 'codemirror/addon/fold/foldgutter'
|
|
|
- import 'codemirror/addon/fold/foldgutter.css'
|
|
|
-
|
|
|
- import 'codemirror/addon/fold/brace-fold.js'
|
|
|
- import 'codemirror/addon/fold/comment-fold.js'
|
|
|
- import 'codemirror/addon/fold/xml-fold.js';
|
|
|
- import 'codemirror/addon/fold/indent-fold.js';
|
|
|
- import 'codemirror/addon/fold/markdown-fold.js';
|
|
|
- import 'codemirror/addon/fold/comment-fold.js';
|
|
|
-
|
|
|
- // merge功能
|
|
|
- import 'codemirror/addon/merge/merge.css'
|
|
|
- import 'codemirror/addon/merge/merge'
|
|
|
- // google DiffMatchPatch
|
|
|
- import DiffMatchPatch from 'diff-match-patch'
|
|
|
- import { Message } from "element-ui"
|
|
|
- // DiffMatchPatch config with global
|
|
|
- window.diff_match_patch = DiffMatchPatch;
|
|
|
- window.DIFF_DELETE = -1;
|
|
|
- window.DIFF_INSERT = 1;
|
|
|
- window.DIFF_EQUAL = 0;
|
|
|
+import { codemirror } from "vue-codemirror";
|
|
|
+// 引入css文件
|
|
|
+import "codemirror/lib/codemirror.css";
|
|
|
+// 引入主题 可以从 codemirror/theme/ 下引入多个
|
|
|
+import "codemirror/theme/idea.css";
|
|
|
+// 引入语言模式 可以从 codemirror/mode/ 下引入多个
|
|
|
+import "codemirror/mode/sql/sql.js";
|
|
|
+import "codemirror/mode/python/python.js";
|
|
|
+import "codemirror/mode/javascript/javascript.js";
|
|
|
+
|
|
|
+// 搜索功能
|
|
|
+// find:Ctrl-F (PC), Cmd-F (Mac)
|
|
|
+// findNext:Ctrl-G (PC), Cmd-G (Mac)
|
|
|
+// findPrev:Shift-Ctrl-G (PC), Shift-Cmd-G (Mac)
|
|
|
+// replace:Shift-Ctrl-F (PC), Cmd-Alt-F (Mac)
|
|
|
+// replaceAll:Shift-Ctrl-R (PC), Shift-Cmd-Alt-F (Mac)
|
|
|
+import "codemirror/addon/dialog/dialog.css";
|
|
|
+import "codemirror/addon/dialog/dialog";
|
|
|
+import "codemirror/addon/search/searchcursor";
|
|
|
+import "codemirror/addon/search/search";
|
|
|
+import "codemirror/addon/search/jump-to-line";
|
|
|
+import "codemirror/addon/search/matchesonscrollbar";
|
|
|
+import "codemirror/addon/search/match-highlighter";
|
|
|
+
|
|
|
+// 代码提示功能 具体语言可以从 codemirror/addon/hint/ 下引入多个
|
|
|
+import "codemirror/addon/hint/show-hint.css";
|
|
|
+import "codemirror/addon/hint/show-hint";
|
|
|
+import "codemirror/addon/hint/sql-hint";
|
|
|
+import "codemirror/addon/hint/anyword-hint";
|
|
|
+import "codemirror/addon/hint/javascript-hint.js";
|
|
|
+import "codemirror/addon/lint/javascript-lint.js";
|
|
|
+import "codemirror/addon/lint/lint";
|
|
|
+import "codemirror/addon/lint/lint.css";
|
|
|
+
|
|
|
+// 高亮行功能
|
|
|
+import "codemirror/addon/selection/active-line";
|
|
|
+import "codemirror/addon/selection/selection-pointer";
|
|
|
+
|
|
|
+// 调整scrollbar样式功能
|
|
|
+import "codemirror/addon/scroll/simplescrollbars.css";
|
|
|
+import "codemirror/addon/scroll/simplescrollbars";
|
|
|
+
|
|
|
+// 自动括号匹配功能
|
|
|
+import "codemirror/addon/edit/matchbrackets";
|
|
|
+import "codemirror/addon/edit/closebrackets";
|
|
|
+
|
|
|
+// 全屏功能 由于项目复杂,自带的全屏功能一般不好使
|
|
|
+import "codemirror/addon/display/fullscreen.css";
|
|
|
+import "codemirror/addon/display/fullscreen";
|
|
|
+
|
|
|
+// 显示自动刷新
|
|
|
+import "codemirror/addon/display/autorefresh";
|
|
|
+
|
|
|
+// 多语言支持?
|
|
|
+import "codemirror/addon/mode/overlay";
|
|
|
+import "codemirror/addon/mode/multiplex";
|
|
|
+
|
|
|
+// 代码段折叠功能
|
|
|
+import "codemirror/addon/fold/foldcode";
|
|
|
+import "codemirror/addon/fold/foldgutter";
|
|
|
+import "codemirror/addon/fold/foldgutter.css";
|
|
|
+
|
|
|
+import "codemirror/addon/fold/brace-fold.js";
|
|
|
+import "codemirror/addon/fold/comment-fold.js";
|
|
|
+import "codemirror/addon/fold/xml-fold.js";
|
|
|
+import "codemirror/addon/fold/indent-fold.js";
|
|
|
+import "codemirror/addon/fold/markdown-fold.js";
|
|
|
+import "codemirror/addon/fold/comment-fold.js";
|
|
|
+
|
|
|
+// merge功能
|
|
|
+import "codemirror/addon/merge/merge.css";
|
|
|
+import "codemirror/addon/merge/merge";
|
|
|
+// google DiffMatchPatch
|
|
|
+import DiffMatchPatch from "diff-match-patch";
|
|
|
+import { Message } from "element-ui";
|
|
|
+// DiffMatchPatch config with global
|
|
|
+window.diff_match_patch = DiffMatchPatch;
|
|
|
+window.DIFF_DELETE = -1;
|
|
|
+window.DIFF_INSERT = 1;
|
|
|
+window.DIFF_EQUAL = 0;
|
|
|
export default {
|
|
|
- name:'Simple',
|
|
|
- components:{
|
|
|
+ name: "Simple",
|
|
|
+ components: {
|
|
|
codemirror
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- code:'',
|
|
|
- bucket:'test0706',
|
|
|
- fileId:'',
|
|
|
- algorithmNameToVersion:null,
|
|
|
- fileName:'',
|
|
|
- loading:true,
|
|
|
+ code: "",
|
|
|
+ bucket: "test0706",
|
|
|
+ fileId: "",
|
|
|
+ algorithmNameToVersion: null,
|
|
|
+ fileName: undefined,
|
|
|
+ loading: true,
|
|
|
cmOptions: {
|
|
|
- // 语言及语法模式
|
|
|
- mode: 'text/x-python',
|
|
|
- // 主题
|
|
|
- theme: 'idea',
|
|
|
- // 显示行数
|
|
|
- line: true,
|
|
|
- lineNumbers: true,
|
|
|
- // 软换行
|
|
|
- lineWrapping: true,
|
|
|
- // tab宽度
|
|
|
- tabSize: 4,
|
|
|
-
|
|
|
- foldGutter: true, // 启用行槽中的代码折叠
|
|
|
-
|
|
|
- autoCloseBrackets: true, // 自动闭合符号
|
|
|
- styleActiveLine: true, // 显示选中行的样式
|
|
|
-
|
|
|
-
|
|
|
- lint: true,
|
|
|
- gutters: [
|
|
|
- "CodeMirror-lint-markers",//代码错误检测
|
|
|
- "CodeMirror-linenumbers",
|
|
|
- "CodeMirror-foldgutter",//展开收起
|
|
|
- ],
|
|
|
- hintOptions: {
|
|
|
- // 避免由于提示列表只有一个提示信息时,自动填充
|
|
|
- completeSingle: false,
|
|
|
- // 不同的语言支持从配置中读取自定义配置 sql语言允许配置表和字段信息,用于代码提示
|
|
|
- tables: {
|
|
|
- "table1": ["c1", "c2"],
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- // 高亮行功能
|
|
|
- styleActiveLine: true,
|
|
|
- // 调整scrollbar样式功能
|
|
|
- scrollbarStyle: 'overlay',
|
|
|
- // 自动括号匹配功能
|
|
|
- matchBrackets: true
|
|
|
- }
|
|
|
+ // 语言及语法模式
|
|
|
+ mode: "text/x-python",
|
|
|
+ // 主题
|
|
|
+ theme: "idea",
|
|
|
+ // 显示行数
|
|
|
+ line: true,
|
|
|
+ lineNumbers: true,
|
|
|
+ // 软换行
|
|
|
+ lineWrapping: true,
|
|
|
+ // tab宽度
|
|
|
+ tabSize: 4,
|
|
|
+
|
|
|
+ foldGutter: true, // 启用行槽中的代码折叠
|
|
|
+
|
|
|
+ autoCloseBrackets: true, // 自动闭合符号
|
|
|
+ styleActiveLine: true, // 显示选中行的样式
|
|
|
+
|
|
|
+ lint: true,
|
|
|
+ gutters: [
|
|
|
+ "CodeMirror-lint-markers", //代码错误检测
|
|
|
+ "CodeMirror-linenumbers",
|
|
|
+ "CodeMirror-foldgutter" //展开收起
|
|
|
+ ],
|
|
|
+ hintOptions: {
|
|
|
+ // 避免由于提示列表只有一个提示信息时,自动填充
|
|
|
+ completeSingle: false,
|
|
|
+ // 不同的语言支持从配置中读取自定义配置 sql语言允许配置表和字段信息,用于代码提示
|
|
|
+ tables: {
|
|
|
+ table1: ["c1", "c2"]
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 高亮行功能
|
|
|
+ styleActiveLine: true,
|
|
|
+ // 调整scrollbar样式功能
|
|
|
+ scrollbarStyle: "overlay",
|
|
|
+ // 自动括号匹配功能
|
|
|
+ matchBrackets: true
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
activated() {
|
|
|
- this.code='';
|
|
|
- this.loading=true;
|
|
|
+ this.$refs.cm.codemirror.setSize("auto", document.documentElement.clientHeight - 200 + "px");
|
|
|
+ this.$nextTick(() => {
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ //监听浏览器窗口大小改变
|
|
|
+ //浏览器变化执行动作
|
|
|
+ this.$refs.cm.codemirror.setSize("auto", document.documentElement.clientHeight - 200 + "px");
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // 代码提示功能 当用户有输入时,显示提示信息
|
|
|
+ this.$refs.cm.codemirror.on("inputRead", (cm) => {
|
|
|
+ cm.showHint();
|
|
|
+ });
|
|
|
// 处理参数,根据参数初始化数据
|
|
|
- let algorithmNameToVersion = this.$route.query.algorithmNameToVersion;
|
|
|
- let fileName=this.$route.query.fileName;
|
|
|
- this.init(algorithmNameToVersion,fileName);
|
|
|
+ this.init(this.$route.query.algorithmNameToVersion, this.$route.query.fileName);
|
|
|
},
|
|
|
methods: {
|
|
|
- init(algorithmNameToVersion,fileName) {
|
|
|
- this.code='';
|
|
|
- this.loading=true;
|
|
|
- this.algorithmNameToVersion=algorithmNameToVersion;
|
|
|
- this.fileName=fileName;
|
|
|
- console.log(this.algorithmNameToVersion)
|
|
|
- console.log(this.fileName)
|
|
|
- this.$http({
|
|
|
- url:this.$http.adornUrl('/minio/readTraUrlContent'),
|
|
|
- method:'get',
|
|
|
- params:this.$http.adornParams({
|
|
|
- algorithmNameToVersion:this.algorithmNameToVersion,
|
|
|
- fileName:this.fileName
|
|
|
- }),
|
|
|
- }).then(({data})=>{
|
|
|
- this.code=data
|
|
|
- this.loading=false;
|
|
|
+ async init(algorithmNameToVersion, fileName) {
|
|
|
+ this.loading = true;
|
|
|
+ this.code = "";
|
|
|
+ this.algorithmNameToVersion = algorithmNameToVersion;
|
|
|
+ this.fileName = fileName.split("/").pop();
|
|
|
+ const { data } = await this.$http({
|
|
|
+ url: this.$http.adornUrl("/minio/readTraUrlContent"),
|
|
|
+ method: "get",
|
|
|
+ params: this.$http.adornParams({
|
|
|
+ algorithmNameToVersion: this.algorithmNameToVersion,
|
|
|
+ fileName: this.fileName
|
|
|
+ })
|
|
|
});
|
|
|
-
|
|
|
+ this.code = data;
|
|
|
+ this.loading = false;
|
|
|
},
|
|
|
|
|
|
//将codemirror中内容写入本地文件
|
|
|
- writeCode(){
|
|
|
- this.$http({
|
|
|
- url:this.$http.adornUrl('/minio/writeTraFile'),
|
|
|
- method:'post',
|
|
|
- data: this.$http.adornData({
|
|
|
- 'algorithmNameToVersion': this.algorithmNameToVersion,
|
|
|
- 'fileName':this.fileName,
|
|
|
- 'content': this.code,
|
|
|
- }),
|
|
|
- }).then(({data})=>{
|
|
|
- Message({
|
|
|
- message: "操作成功",
|
|
|
- type: "success",
|
|
|
- duration: 1500,
|
|
|
- onClose: () => {
|
|
|
- this.visible = false;
|
|
|
-
|
|
|
- },
|
|
|
- });
|
|
|
- this.$router.replace({ name: 'trafilelist',query:{algorithmNameToVersion:this.algorithmNameToVersion} });
|
|
|
+ writeCode() {
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl("/minio/writeTraFile"),
|
|
|
+ method: "post",
|
|
|
+ data: this.$http.adornData({
|
|
|
+ algorithmNameToVersion: this.algorithmNameToVersion,
|
|
|
+ fileName: this.fileName,
|
|
|
+ content: this.code
|
|
|
+ })
|
|
|
+ }).then(({ data }) => {
|
|
|
+ Message({
|
|
|
+ message: "操作成功",
|
|
|
+ type: "success",
|
|
|
+ duration: 1500,
|
|
|
+ onClose: () => {
|
|
|
+ this.visible = false;
|
|
|
+ }
|
|
|
});
|
|
|
-
|
|
|
- },
|
|
|
+ this.$router.replace({ name: "trafilelist", query: { algorithmNameToVersion: this.algorithmNameToVersion } });
|
|
|
+ });
|
|
|
+ },
|
|
|
//点击取消按钮,跳转回原路径
|
|
|
- cancel(){
|
|
|
- this.$router.replace({ name: 'trafilelist',query:{algorithmNameToVersion:this.algorithmNameToVersion} });
|
|
|
+ cancel() {
|
|
|
+ this.$router.replace({ name: "trafilelist", query: { algorithmNameToVersion: this.algorithmNameToVersion } });
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
- mounted(){
|
|
|
- this.$refs.cm.codemirror.setSize("auto", (document.documentElement.clientHeight - 200) + "px")
|
|
|
- this.$nextTick(() => {
|
|
|
- window.addEventListener('resize', () => {
|
|
|
- //监听浏览器窗口大小改变
|
|
|
- //浏览器变化执行动作
|
|
|
- this.$refs.cm.codemirror.setSize("auto", (document.documentElement.clientHeight - 200) + "px")
|
|
|
- });
|
|
|
- });
|
|
|
- // 代码提示功能 当用户有输入时,显示提示信息
|
|
|
- this.$refs.cm.codemirror.on('inputRead', cm => {
|
|
|
- cm.showHint();
|
|
|
- });
|
|
|
- this.$http({
|
|
|
- url:this.$http.adornUrl('/minio/readTraUrlContent'),
|
|
|
- method:'get',
|
|
|
- params:this.$http.adornParams({
|
|
|
- algorithmNameToVersion:this.algorithmNameToVersion,
|
|
|
- verisionToFile:this.verisionToFile,
|
|
|
- fileName:this.fileName
|
|
|
- }),
|
|
|
- }).then(({data})=>{
|
|
|
- this.code=data
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
};
|
|
|
-</script>
|
|
|
+</script>
|