数据预览支持修改查询的sql并执行，优化回车事件

zyplayer-doc-ui/console-ui/src/views/user/Login.vue

@@ -1,13 +1,13 @@
 <template>
-    <div style="padding-top: 50px;" @keyup.enter="loginSubmit">
+    <div style="padding-top: 50px;">
         <el-form :model="loginParam" :rules="loginRules" ref="loginParam" label-position="left" label-width="0px"
                  class="demo-ruleForm login-container">
             <h3 class="title">系统登录</h3>
             <el-form-item prop="username">
-                <el-input type="text" v-model="loginParam.username" auto-complete="off" placeholder="账号"></el-input>
+                <el-input type="text" v-model="loginParam.username" auto-complete="off" placeholder="账号" @keyup.enter="loginSubmit"></el-input>
             </el-form-item>
             <el-form-item prop="password">
-                <el-input type="password" v-model="loginParam.password" auto-complete="off" placeholder="密码"></el-input>
+                <el-input type="password" v-model="loginParam.password" auto-complete="off" placeholder="密码" @keyup.enter="loginSubmit"></el-input>
             </el-form-item>
             <el-form-item style="width:100%;">
                 <el-button type="primary" style="width:100%;" @click.native.prevent="loginSubmit" :loading="logining">登录

zyplayer-doc-ui/db-ui/package-lock.json

@@ -3482,6 +3482,11 @@
       "integrity": "sha1-hK5l+n6vsWX922FWauFLrwVmTw8=",
       "dev": true
     },
+    "highlight.js": {
+      "version": "9.18.1",
+      "resolved": "https://registry.npm.taobao.org/highlight.js/download/highlight.js-9.18.1.tgz",
+      "integrity": "sha1-7SGqAB/mJSuxCj121HVzxlOf4Tw="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "http://registry.npm.taobao.org/hmac-drbg/download/hmac-drbg-1.0.1.tgz",
@@ -7196,6 +7201,14 @@
       "resolved": "https://registry.npm.taobao.org/vue-axios/download/vue-axios-2.1.4.tgz",
       "integrity": "sha1-qdKY9+h2+ah/6zNrN63LzjT/n58="
     },
+    "vue-hljs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npm.taobao.org/vue-hljs/download/vue-hljs-1.1.2.tgz",
+      "integrity": "sha1-1mOeMJZNGsyzFvM7TjJm7cHmAS0=",
+      "requires": {
+        "highlight.js": "^9.13.1"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.3",
       "resolved": "http://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.3.tgz",

zyplayer-doc-ui/db-ui/package.json

@@ -14,6 +14,7 @@
     "vue-axios": "^2.1.4",
     "vue-router": "^3.0.6",
     "vuex": "^3.3.0",
+    "vue-hljs": "^1.1.2",
     "wangeditor": "^3.1.1"
   },
   "engines": {

zyplayer-doc-ui/db-ui/src/common/config/apimix.js

@@ -8,11 +8,11 @@ var _fn = {
     // HOST: 'http://local.zyplayer.com:8083/zyplayer-doc-manage',
     // HOST1: 'http://local.zyplayer.com:8083/zyplayer-doc-manage',
     // 也可以直接使用线上的服务调试
-    // HOST: 'http://doc.zyplayer.com/zyplayer-doc-manage',
+    HOST: 'http://doc.zyplayer.com/zyplayer-doc-manage',
-    // HOST1: 'http://doc.zyplayer.com/zyplayer-doc-manage',
+    HOST1: 'http://doc.zyplayer.com/zyplayer-doc-manage',
     // 打包时使用下面这两行，文件就放在根目录下，所以当前路劲就好
-    HOST: './',
+    // HOST: './',
-    HOST1: './',
+    // HOST1: './',
 
     mixUrl: function (host, url) {
         var p;

zyplayer-doc-ui/db-ui/src/main.js

@@ -14,9 +14,13 @@ import store from './store/index'
 import axios from 'axios'
 import VueAxios from 'vue-axios'
 
+import vueHljs from "vue-hljs";
+import "vue-hljs/dist/vue-hljs.min.css";
+
 Vue.use(ElementUI);
 Vue.use(VueRouter);
 Vue.use(VueAxios, axios);
+Vue.use(vueHljs);
 
 // 全局参数
 Vue.prototype.global = global;

zyplayer-doc-ui/db-ui/src/views/data/DataPreview.vue

@@ -1,12 +1,21 @@
 <template>
     <div class="data-executor-vue">
-        <div style="padding: 0 10px;height: 100%;box-sizing: border-box;">
+        <div style="padding: 0 10px 10px;height: 100%;box-sizing: border-box;">
+            <el-card style="margin-bottom: 10px;">
+                <pre id="sqlExecutorEditor" style="width: 100%;height: 500px;margin-top: 0;"></pre>
+                <div>
+                    <el-button v-if="sqlExecuting" v-on:click="cancelExecutorSql" type="primary" plain  size="small" icon="el-icon-video-pause">取消执行</el-button>
+                    <el-tooltip v-else effect="dark" content="Ctrl+R、Ctrl+Enter" placement="top">
+                        <el-button v-on:click="doExecutorClick" type="primary" plain  size="small" icon="el-icon-video-play">执行</el-button>
+                    </el-tooltip>
+                    <el-button size="small" @click="refreshData">重置</el-button>
+                </div>
+            </el-card>
             <el-card>
                 <div v-if="!!executeError" style="color: #f00;">{{executeError}}</div>
                 <div v-else-if="sqlExecuting" v-loading="sqlExecuting" style="padding: 20px 0;">数据加载中...</div>
                 <div v-else-if="executeResultList.length <= 0" v-loading="sqlExecuting" style="padding: 20px 0;">暂无数据</div>
                 <div v-else>
-                    <el-button size="small" @click="refreshData" style="position: absolute;right: 30px;z-index: 1;">刷新</el-button>
                     <el-tabs :value="executeShowTable">
                         <el-tab-pane label="信息" name="table0">
                             <pre>{{executeResultInfo}}</pre>
@@ -30,7 +39,7 @@
 <!--                            </pl-table>-->
                             <el-table v-else :data="resultItem.dataList" stripe border
                                       style="width: 100%; margin-bottom: 5px;"
-                                      class="execute-result-table" :height="tableMaxHeight"
+                                      class="execute-result-table" :max-height="tableMaxHeight"
                                       @sort-change="tableSortChange"
                                       :default-sort="tableSort">
                                 <el-table-column width="60px" v-if="resultItem.dataCols.length > 0">
@@ -43,6 +52,7 @@
                                 </el-table-column>
                             </el-table>
                             <el-pagination
+                                    v-show="needShowPage"
                                     style="margin-top: 10px;"
                                     @size-change="handlePageSizeChange"
                                     @current-change="handleCurrentChange"
@@ -85,16 +95,29 @@
                 tableTotalCount: 0,
                 tableSort: {},
                 tableMaxHeight: 600,
+                needShowPage: true,
             }
         },
-        activated: function () {
+        mounted: function () {
-            this.initQueryParam(this.$route);
+            let that = this;
+            this.sqlExecutorEditor = this.initAceEditor("sqlExecutorEditor", 6);
+            this.sqlExecutorEditor.setFontSize(18);
+            this.sqlExecutorEditor.commands.addCommand({
+                name: "execute-sql",
+                bindKey: {win: "Ctrl-R|Ctrl-Shift-R|Ctrl-Enter", mac: "Command-R|Command-Shift-R|Command-Enter"},
+                exec: function (editor) {
+                    that.doExecutorClick();
+                }
+            });
             // 延迟设置展开的目录，edit比app先初始化
             setTimeout(()=> {
                 this.doExecutorSql();
                 global.vue.$app.initLoadDataList(this.vueQueryParam.sourceId, this.vueQueryParam.host, this.vueQueryParam.dbName);
             }, 500);
         },
+        activated: function () {
+            this.initQueryParam(this.$route);
+        },
         methods: {
             initQueryParam(to) {
                 this.vueQueryParam = to.query;
@@ -125,7 +148,26 @@
                     that.$message.success("取消成功");
                 });
             },
+            doExecutorClick() {
+                let dataSql = this.sqlExecutorEditor.getSelectedText();
+                if (!dataSql) {
+                    dataSql = this.sqlExecutorEditor.getValue();
+                }
+                if (!dataSql) {
+                    this.$message.error("查询SQL不能为空");
+                    return;
+                }
+                this.needShowPage = false;
+                this.doExecutorSqlCommon(dataSql);
+            },
             doExecutorSql() {
+                let dataSql = this.getExecuteSql();
+                let countSql = this.getExecuteCountSql();
+                this.sqlExecutorEditor.setValue(dataSql, 1);
+                this.needShowPage = true;
+                this.doExecutorSqlCommon(dataSql, countSql);
+            },
+            doExecutorSqlCommon(dataSql, countSql) {
                 let that = this;
                 if (!this.vueQueryParam.sourceId) {
                     this.$message.error("请先选择数据源");
@@ -134,18 +176,18 @@
                 this.executeError = "";
                 this.executeUseTime = "";
                 this.executeResultList = [];
-                this.tableMaxHeight = document.body.offsetHeight - 240;
+                this.tableMaxHeight = document.body.clientHeight  - 230;
 
                 this.nowExecutorId = (new Date()).getTime() + Math.ceil(Math.random() * 1000);
                 this.sqlExecuting = true;
                 let param = {
                     sourceId: this.vueQueryParam.sourceId,
                     executeId: this.nowExecutorId,
-                    sql: this.getExecuteCountSql(),
+                    sql: countSql,
                     params: '',
                 };
                 // 第一页才查询总条数
-                if (this.currentPage == 1) {
+                if (!!countSql && this.currentPage == 1) {
                     queryExecuteSql(param).then(res => {
                         if (res.errCode != 200 || !res.data || res.data.length <= 0) return;
                         let objItem = JSON.parse(res.data[0]);
@@ -153,7 +195,7 @@
                         this.tableTotalCount = objItem.result[0].counts || 0;
                     });
                 }
-                param.sql = this.getExecuteSql();
+                param.sql = dataSql;
                 this.common.postNonCheck(this.apilist1.executeSql, param, function (json) {
                     if (json.errCode != 200) {
                         that.executeError = json.errMsg;
@@ -236,6 +278,19 @@
                 resultObj.updateCount = resultData.updateCount;
                 return resultObj;
             },
+            initAceEditor(editor, minLines) {
+                return ace.edit(editor, {
+                    theme: "ace/theme/monokai",
+                    mode: "ace/mode/sql",
+                    wrap: true,
+                    autoScrollEditorIntoView: true,
+                    enableBasicAutocompletion: true,
+                    enableSnippets: true,
+                    enableLiveAutocompletion: true,
+                    minLines: minLines,
+                    maxLines: 50,
+                });
+            },
         }
     }
 </script>

zyplayer-doc-ui/db-ui/src/views/data/Executor.vue

@@ -115,8 +115,9 @@
             this.loadDatasourceList();
             // 下面两行先后顺序不能改
             this.addEditorCompleter();
-            app.sqlExecutorEditor = app.initAceEditor("sqlExecutorEditor", 15);
+            this.sqlExecutorEditor = this.initAceEditor("sqlExecutorEditor", 15);
-            app.sqlExecutorEditor.commands.addCommand({
+            this.sqlExecutorEditor.setFontSize(18);
+            this.sqlExecutorEditor.commands.addCommand({
                 name: "execute-sql",
                 bindKey: {win: "Ctrl-R|Ctrl-Shift-R|Ctrl-Enter", mac: "Command-R|Command-Shift-R|Command-Enter"},
                 exec: function (editor) {

zyplayer-doc-ui/db-ui/src/views/table/Info.vue

@@ -36,8 +36,8 @@
             <el-row class="status-info-row">
                 <el-col :span="24">
                     <span class="label">表注释：</span>
-                    <span v-if="tableInfo.inEdit == 1" @keyup.enter="saveTableDescription">
+                    <span v-if="tableInfo.inEdit == 1">
-                        <el-input v-model="tableInfo.newDesc" placeholder="输入表注释" v-on:blur="saveTableDescription" style="width: 500px;"></el-input>
+                        <el-input v-model="tableInfo.newDesc" placeholder="输入表注释" @keyup.enter="saveTableDescription" v-on:blur="saveTableDescription" style="width: 500px;"></el-input>
                     </span>
                     <span v-else>{{tableInfo.description || '暂无注释'}} <i class="el-icon-edit edit-table-desc" v-on:click="tableInfo.inEdit = 1"></i></span>
                 </el-col>
@@ -69,8 +69,8 @@
                     </el-table-column>
                     <el-table-column label="注释">
                         <template slot-scope="scope">
-                            <div v-if="scope.row.inEdit == 1" @keyup.enter="saveColumnDescription(scope.row)">
+                            <div v-if="scope.row.inEdit == 1">
-                                <el-input v-model="scope.row.newDesc" placeholder="输入字段注释" v-on:blur="saveColumnDescription(scope.row)"></el-input>
+                                <el-input v-model="scope.row.newDesc" placeholder="输入字段注释" @keyup.enter="saveColumnDescription(scope.row)" v-on:blur="saveColumnDescription(scope.row)"></el-input>
                             </div>
                             <div v-else class="description" v-on:click="descBoxClick(scope.row)">{{scope.row.description||'　'}}</div>
                         </template>
@@ -80,7 +80,9 @@
         </el-card>
         <!--增加数据源弹窗-->
         <el-dialog title="DDL" :visible.sync="tableDDLInfoDialogVisible" :footer="null" width="760px">
-            <pre>{{tableDDLInfo}}</pre>
+            <div v-highlight>
+                <pre><code v-html="tableDDLInfo"></code></pre>
+            </div>
         </el-dialog>
     </div>
 </template>

zyplayer-doc-ui/db-ui/src/views/user/Login.vue

@@ -1,17 +1,16 @@
 <template>
-    <div style="padding-top: 50px;" @keyup.enter="loginSubmit">
+    <div style="padding-top: 50px;">
         <el-form :model="loginParam" :rules="loginRules" ref="loginParam" label-position="left" label-width="0px"
                  class="demo-ruleForm login-container">
             <h3 class="title">系统登录</h3>
             <el-form-item prop="username">
-                <el-input type="text" v-model="loginParam.username" auto-complete="off" placeholder="账号"></el-input>
+                <el-input type="text" v-model="loginParam.username" auto-complete="off" placeholder="账号" @keyup.enter="loginSubmit"></el-input>
             </el-form-item>
             <el-form-item prop="password">
-                <el-input type="password" v-model="loginParam.password" auto-complete="off" placeholder="密码"></el-input>
+                <el-input type="password" v-model="loginParam.password" auto-complete="off" placeholder="密码" @keyup.enter="loginSubmit"></el-input>
             </el-form-item>
             <el-form-item style="width:100%;">
-                <el-button type="primary" style="width:100%;" @click.native.prevent="loginSubmit" :loading="logining">登录
+                <el-button type="primary" style="width:100%;" @click.native.prevent="loginSubmit" :loading="logining">登录</el-button>
-                </el-button>
                 <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
             </el-form-item>
         </el-form>

zyplayer-doc-ui/es-ui/src/views/user/Login.vue

@@ -1,13 +1,13 @@
 <template>
-    <div style="padding-top: 50px;" @keyup.enter="loginSubmit">
+    <div style="padding-top: 50px;">
         <el-form :model="loginParam" :rules="loginRules" ref="loginParam" label-position="left" label-width="0px"
                  class="demo-ruleForm login-container">
             <h3 class="title">系统登录</h3>
             <el-form-item prop="username">
-                <el-input type="text" v-model="loginParam.username" auto-complete="off" placeholder="账号"></el-input>
+                <el-input type="text" v-model="loginParam.username" auto-complete="off" placeholder="账号" @keyup.enter="loginSubmit"></el-input>
             </el-form-item>
             <el-form-item prop="password">
-                <el-input type="password" v-model="loginParam.password" auto-complete="off" placeholder="密码"></el-input>
+                <el-input type="password" v-model="loginParam.password" auto-complete="off" placeholder="密码" @keyup.enter="loginSubmit"></el-input>
             </el-form-item>
             <el-form-item style="width:100%;">
                 <el-button type="primary" style="width:100%;" @click.native.prevent="loginSubmit" :loading="logining">登录

zyplayer-doc-ui/wiki-ui/src/views/user/Login.vue

@@ -1,13 +1,13 @@
 <template>
-    <div style="padding-top: 50px;" @keyup.enter="loginSubmit" class="user-login-vue">
+    <div style="padding-top: 50px;" class="user-login-vue">
         <el-form :model="loginParam" :rules="loginRules" ref="loginParam" label-position="left" label-width="0px"
                  class="demo-ruleForm login-container">
             <h3 class="title">系统登录</h3>
             <el-form-item>
-                <el-input type="text" v-model="loginParam.username" auto-complete="off" placeholder="账号"></el-input>
+                <el-input type="text" v-model="loginParam.username" auto-complete="off" placeholder="账号" @keyup.enter="loginSubmit"></el-input>
             </el-form-item>
             <el-form-item>
-                <el-input type="password" v-model="loginParam.password" auto-complete="off" placeholder="密码"></el-input>
+                <el-input type="password" v-model="loginParam.password" auto-complete="off" placeholder="密码" @keyup.enter="loginSubmit"></el-input>
             </el-form-item>
             <el-form-item style="width:100%;">
                 <el-button type="primary" style="width:100%;" @click.native.prevent="loginSubmit" :loading="logining">登录