From ff0fcf36c030cab5da956fef5d8ff004ff999d15 Mon Sep 17 00:00:00 2001
From: "20932067@zju.edu.cn" <Clay>
Date: Tue, 2 Feb 2021 00:21:40 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=B8=87=E8=83=BD=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2sql=E4=BB=A3=E7=A0=81=E9=AB=98=E4=BA=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hchyun-ui/.env.development                  |   4 +-
 hchyun-ui/package.json                      |   9 +-
 hchyun-ui/src/router/index.js               |  14 ++
 hchyun-ui/src/views/test/sqltest.vue        | 241 ++++++++++++++++++++
 hchyun-ui/src/views/tool/query/uniQuery.vue |  82 ++++++-
 5 files changed, 342 insertions(+), 8 deletions(-)
 create mode 100644 hchyun-ui/src/views/test/sqltest.vue

diff --git a/hchyun-ui/.env.development b/hchyun-ui/.env.development
index 3246ca5..a916e78 100644
--- a/hchyun-ui/.env.development
+++ b/hchyun-ui/.env.development
@@ -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
diff --git a/hchyun-ui/package.json b/hchyun-ui/package.json
index b0200c2..356f7da 100644
--- a/hchyun-ui/package.json
+++ b/hchyun-ui/package.json
@@ -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",
diff --git a/hchyun-ui/src/router/index.js b/hchyun-ui/src/router/index.js
index f7729ae..9f9a668 100644
--- a/hchyun-ui/src/router/index.js
+++ b/hchyun-ui/src/router/index.js
@@ -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,
diff --git a/hchyun-ui/src/views/test/sqltest.vue b/hchyun-ui/src/views/test/sqltest.vue
new file mode 100644
index 0000000..e77748f
--- /dev/null
+++ b/hchyun-ui/src/views/test/sqltest.vue
@@ -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>
diff --git a/hchyun-ui/src/views/tool/query/uniQuery.vue b/hchyun-ui/src/views/tool/query/uniQuery.vue
index aed82cb..e5cf2b8 100644
--- a/hchyun-ui/src/views/tool/query/uniQuery.vue
+++ b/hchyun-ui/src/views/tool/query/uniQuery.vue
@@ -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>