新增万能查询sql代码高亮
This commit is contained in:
20932067@zju.edu.cn
parent
9d4540c7ec
commit
ff0fcf36c0
|
|
@ -3,8 +3,8 @@ ENV = 'development'
|
|||
|
||||
# 宏驰云管理系统/开发环境
|
||||
#VUE_APP_BASE_API = '/dev-api'
|
||||
VUE_APP_BASE_API = 'http://localhost:8085/dev-api'
|
||||
#VUE_APP_BASE_API = 'http://apibase.hchyun.com/dev-api'
|
||||
#VUE_APP_BASE_API = 'http://localhost:8085/dev-api'
|
||||
VUE_APP_BASE_API = 'http://apibase.hchyun.com/dev-api'
|
||||
|
||||
# 路由懒加载
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
|
|
|
|||
|
|
@ -39,23 +39,26 @@
|
|||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"axios": "0.18.1",
|
||||
"clipboard": "2.0.4",
|
||||
"codemirror": "^5.59.2",
|
||||
"core-js": "3.6.5",
|
||||
"diff-match-patch": "^1.0.5",
|
||||
"echarts": "4.2.1",
|
||||
"element-ui": "2.13.2",
|
||||
"file-saver": "2.0.1",
|
||||
"js-beautify": "1.10.2",
|
||||
"fuse.js": "3.4.4",
|
||||
"highlight.js": "9.18.5",
|
||||
"js-beautify": "1.10.2",
|
||||
"js-cookie": "2.2.0",
|
||||
"jsencrypt": "3.0.0-rc.1",
|
||||
"highlight.js": "9.18.5",
|
||||
"normalize.css": "7.0.0",
|
||||
"nprogress": "0.2.0",
|
||||
"path-to-regexp": "2.4.0",
|
||||
"quill": "1.3.7",
|
||||
"screenfull": "4.2.0",
|
||||
"sortablejs": "1.8.4",
|
||||
"stylus-loader": "^4.3.3",
|
||||
"vue": "2.6.10",
|
||||
"vue-count-to": "1.0.13",
|
||||
"quill": "1.3.7",
|
||||
"vue-cropper": "0.4.9",
|
||||
"vue-router": "3.0.2",
|
||||
"vue-splitpane": "1.0.4",
|
||||
|
|
|
|||
|
|
@ -118,6 +118,7 @@ export const constantRoutes = [
|
|||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/query',
|
||||
component: Layout,
|
||||
|
|
@ -131,6 +132,19 @@ export const constantRoutes = [
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/test',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [
|
||||
{
|
||||
path: '/',
|
||||
component: (resolve) => require(['@/views/test/sqltest'], resolve),
|
||||
name: 'sqltest',
|
||||
meta: { title: 'sql语法高亮测试' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/job',
|
||||
component: Layout,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,241 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 操作按钮 -->
|
||||
<el-button @click="handleAdd">代码编辑，高亮补全</el-button>
|
||||
<el-button @click="handleUpdate">代码版本，差异对比</el-button>
|
||||
|
||||
<!-- 代码编辑，高亮补全 对话框内容 -->
|
||||
<el-dialog :title="title" :visible.sync="open">
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-form-item label="脚本内容">
|
||||
<div class="in-coder-panel">
|
||||
<textarea ref="textarea"></textarea>
|
||||
<el-select class="code-mode-select" v-model="mode" @change="changeMode">
|
||||
<el-option v-for="mode in modes" :key="mode.value" :label="mode.label" :value="mode.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 代码版本，差异对比 对话框内容 -->
|
||||
<el-dialog :title="titleBBB" :visible.sync="openBBB">
|
||||
<div id="view"></div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 引入全局实例
|
||||
import CodeMirror from 'codemirror'
|
||||
// 核心样式
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
// 引入主题后还需要在 options 中指定主题才会生效
|
||||
import 'codemirror/theme/idea.css'
|
||||
|
||||
// 需要引入具体的语法高亮库才会有对应的语法高亮效果
|
||||
// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
|
||||
// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
|
||||
import 'codemirror/mode/sql/sql.js'
|
||||
|
||||
//代码补全提示
|
||||
import 'codemirror/addon/hint/show-hint.css';
|
||||
import 'codemirror/addon/hint/show-hint.js';
|
||||
import 'codemirror/addon/hint/sql-hint.js';
|
||||
|
||||
//代码版本差异比较
|
||||
import 'codemirror/addon/merge/merge.js'
|
||||
import 'codemirror/addon/merge/merge.css'
|
||||
import DiffMatchPatch from 'diff-match-patch'
|
||||
|
||||
window.diff_match_patch = DiffMatchPatch
|
||||
window.DIFF_DELETE = -1
|
||||
window.DIFF_INSERT = 1
|
||||
window.DIFF_EQUAL = 0
|
||||
|
||||
export default {
|
||||
name: "Code",
|
||||
|
||||
props: {
|
||||
// 外部传入的内容，用于实现双向绑定
|
||||
value: String,
|
||||
// 外部传入的语法类型
|
||||
language: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
// 内部真实的内容
|
||||
code: '#!/bin/bash\n' +
|
||||
'cd /root/\n' +
|
||||
'list=(`ls`)\n' +
|
||||
' \n' +
|
||||
'for i in ${list[@]}\n' +
|
||||
'do\n' +
|
||||
' if [ -d $i ]\n' +
|
||||
' then\n' +
|
||||
' cp -r $i /tmp/\n' +
|
||||
' fi\n' +
|
||||
'done',
|
||||
// 默认的语法类型
|
||||
mode: 'sql',
|
||||
// 编辑器实例
|
||||
coder: null,
|
||||
// 默认配置
|
||||
options: {
|
||||
// 缩进格式
|
||||
tabSize: 4,
|
||||
// 主题，对应主题库 JS 需要提前引入
|
||||
theme: 'idea',
|
||||
// 显示行号
|
||||
lineNumbers: true,
|
||||
line: true,
|
||||
extraKeys: {"Tab": "autocomplete"},
|
||||
},
|
||||
// 支持切换的语法高亮类型，对应 JS 已经提前引入
|
||||
// 使用的是 MIME-TYPE ，不过作为前缀的 text/ 在后面指定时写死了
|
||||
modes: [{
|
||||
value: 'css',
|
||||
label: 'CSS'
|
||||
}, {
|
||||
value: 'javascript',
|
||||
label: 'Javascript'
|
||||
}, {
|
||||
value: 'html',
|
||||
label: 'XML/HTML'
|
||||
}, {
|
||||
value: 'x-sh',
|
||||
label: 'Shell'
|
||||
}, {
|
||||
value: 'x-sql',
|
||||
label: 'SQL'
|
||||
}],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
titleBBB: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
openBBB: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.handleAdd
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 初始化
|
||||
_initialize() {
|
||||
// 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
|
||||
this.coder = CodeMirror.fromTextArea(this.$refs.textarea, this.options)
|
||||
// 编辑器赋值
|
||||
this.coder.setValue(this.value || this.code)
|
||||
|
||||
// 支持双向绑定
|
||||
this.coder.on('change', (coder) => {
|
||||
this.code = coder.getValue()
|
||||
|
||||
if (this.$emit) {
|
||||
this.$emit('input', this.code)
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
initUI(value, orig) {
|
||||
if (value == null) return;
|
||||
let target = document.getElementById("view");
|
||||
target.innerHTML = "";
|
||||
CodeMirror.MergeView(target, {
|
||||
value: value,//上次内容
|
||||
origLeft: null,
|
||||
orig: orig,//本次内容
|
||||
lineNumbers: true,//显示行号
|
||||
mode: "shell",
|
||||
highlightDifferences: true,
|
||||
styleActiveLine: true,
|
||||
matchBrackets: true,
|
||||
connect: 'align',
|
||||
readOnly: true,//只读 不可修改
|
||||
});
|
||||
},
|
||||
|
||||
/** 按钮操作 */
|
||||
handleAdd() {
|
||||
this.open = true;
|
||||
this.title = "代码编辑，高亮补全";
|
||||
|
||||
this.$nextTick(function () {
|
||||
this._initialize();
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
/** 按钮操作 */
|
||||
handleUpdate() {
|
||||
this.openBBB = true;
|
||||
this.titleBBB = "代码版本，差异对比";
|
||||
|
||||
// 初始化版本差异
|
||||
this.$nextTick(function () {
|
||||
this.initUI("#!/bin/bash\n" +
|
||||
"ip=\"123.21.12.11\"\n" +
|
||||
"email=\"lgx@example\"\n" +
|
||||
" \n" +
|
||||
"while 1\n" +
|
||||
"do\n" +
|
||||
" ping -c10 $ip > /dev/null 2>/dev/null\n" +
|
||||
" if [ $? != \"0\" ]\n" +
|
||||
" then\n" +
|
||||
" # 调用一个用于发邮件的脚本\n" +
|
||||
" python /usr/local/sbin/mail.py $email \"$ip down\" \"$ip is down\"\n" +
|
||||
" fi\n" +
|
||||
" sleep 30\n" +
|
||||
"done", "#!/bin/bash\n" +
|
||||
"ip=\"123.21.12.11\"\n" +
|
||||
"email=\"admin@example\"\n" +
|
||||
" \n" +
|
||||
"while 1\n" +
|
||||
"do\n" +
|
||||
" ping -c10 $ip > /dev/null 2>/dev/null\n" +
|
||||
" if [ $? != \"0\" ]\n" +
|
||||
" then\n" +
|
||||
" # 调用一个用于发邮件的脚本\n" +
|
||||
" python /usr/local/sbin/mail.py $email \"$ip down\" \"$ip is down\"\n" +
|
||||
" fi\n" +
|
||||
"done")
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.in-coder-panel{
|
||||
flex-grow :1;
|
||||
display :flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.CodeMirror{
|
||||
|
||||
flex-grow :1;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.CodeMirror-code{
|
||||
line-height: 19px;
|
||||
}
|
||||
|
||||
.code-mode-select {
|
||||
position :absolute;
|
||||
z-index: 2 ;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
max-width: 130px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,8 +5,8 @@
|
|||
<el-form ref="elForm" :model="info" :rules="rules" size="medium" label-width="100px">
|
||||
<el-col :span="18">
|
||||
<el-form-item label-width="1px" label="">
|
||||
<el-input v-model="info.uqSql" type="textarea" placeholder="请输入sql"
|
||||
:autosize="{minRows: 7, maxRows: 7}" :style="{width: '100%'}"></el-input>
|
||||
<textarea ref="textarea" type="textarea" @change="sqlChang" placeholder="请输入sql"
|
||||
:autosize="{minRows: 7, maxRows: 7}" :style="{width: '100%'}"></textarea>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
|
|
@ -138,6 +138,22 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// 引入全局实例
|
||||
import CodeMirror from 'codemirror'
|
||||
// 核心样式
|
||||
import 'codemirror/lib/codemirror.css'
|
||||
// 引入主题后还需要在 options 中指定主题才会生效
|
||||
import 'codemirror/theme/idea.css'
|
||||
|
||||
// 需要引入具体的语法高亮库才会有对应的语法高亮效果
|
||||
// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
|
||||
// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
|
||||
import 'codemirror/mode/sql/sql.js'
|
||||
|
||||
//代码补全提示
|
||||
import 'codemirror/addon/hint/show-hint.css';
|
||||
import 'codemirror/addon/hint/show-hint.js';
|
||||
import 'codemirror/addon/hint/sql-hint.js';
|
||||
import {getQueryInfo, editQueryInfo, previewQueryData} from '@/api/tool/query'
|
||||
import {Message} from "element-ui";
|
||||
|
||||
|
|
@ -177,6 +193,27 @@ export default {
|
|||
tableHeight: document.documentElement.scrollHeight - 245 + "px",
|
||||
// 表列信息
|
||||
cloumns: [],
|
||||
sqlconfig:{
|
||||
// 默认的语法类型
|
||||
mode: 'sql',
|
||||
// 编辑器实例
|
||||
coder: null,
|
||||
// 默认配置
|
||||
options: {
|
||||
// 缩进格式
|
||||
tabSize: 4,
|
||||
// 主题，对应主题库 JS 需要提前引入
|
||||
theme: 'idea',
|
||||
spellcheck:true,
|
||||
cursorHeight:0.85,
|
||||
// 显示行号
|
||||
lineNumbers: true,
|
||||
line: true,
|
||||
extraKeys: {"Tab": "autocomplete"},
|
||||
lineWrapping: true,//代码折叠
|
||||
matchBrackets: true,//括号匹配
|
||||
},
|
||||
},
|
||||
total: 0,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
|
|
@ -184,7 +221,7 @@ export default {
|
|||
},
|
||||
queryId: null,
|
||||
info: {
|
||||
uqSql: null,
|
||||
uqSql: '',
|
||||
uqName: null,
|
||||
uqDescribe: null,
|
||||
},
|
||||
|
|
@ -208,7 +245,11 @@ export default {
|
|||
this.cloumns = []
|
||||
this.info = res.data.info
|
||||
this.cloumns = JSONparse(res.data.list)
|
||||
this.sqlconfig.coder.setValue(this.info.uqSql)
|
||||
})
|
||||
this.$nextTick(function () {
|
||||
this._initialize();
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
|
|
@ -239,6 +280,25 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
sqlChang(){
|
||||
console.log(this.sqlconfig.coder.getValue())
|
||||
},
|
||||
_initialize() {
|
||||
// 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
|
||||
this.sqlconfig.coder = CodeMirror.fromTextArea(this.$refs.textarea, this.sqlconfig.options)
|
||||
// 编辑器赋值
|
||||
this.sqlconfig.coder.setValue(this.info.uqSql)
|
||||
console.log(this.sqlconfig.coder.cm.defaultCharWidth(1))
|
||||
// 支持双向绑定
|
||||
this.sqlconfig.coder.on('change', (coder) => {
|
||||
this.info.uqSql = coder.getValue()
|
||||
console.log(this.info.uqSql)
|
||||
if (this.$emit) {
|
||||
this.$emit('input', this.info.uqSql)
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
/** 删除按钮 */
|
||||
handleDelete(index) {
|
||||
this.cloumns.splice(index, 1);
|
||||
|
|
@ -301,6 +361,21 @@ export default {
|
|||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
.CodeMirror {
|
||||
border: 1px solid #DCDFE6;
|
||||
height: 150px;
|
||||
}
|
||||
.CodeMirror-line{
|
||||
height: 20px;
|
||||
line-height: 20px !important;
|
||||
}
|
||||
.CodeMirror-linenumber{
|
||||
height: 20px;
|
||||
line-height: 20px !important;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.form-header {
|
||||
margin: 18px 10px 0px 10px !important;
|
||||
|
|
@ -313,4 +388,5 @@ export default {
|
|||
.pagination-container {
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue