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

2020-05-11 22:37:30 +08:00
parent 713582bebf
commit aeb48e0144
11 changed files with 109 additions and 34 deletions
--- a/zyplayer-doc-ui/console-ui/src/views/user/Login.vue
+++ b/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">登录
--- a/zyplayer-doc-ui/db-ui/package-lock.json
+++ b/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",
--- a/zyplayer-doc-ui/db-ui/package.json
+++ b/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": {
--- a/zyplayer-doc-ui/db-ui/src/common/config/apimix.js
+++ b/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',
-    // HOST1: 'http://doc.zyplayer.com/zyplayer-doc-manage',
+    HOST: 'http://doc.zyplayer.com/zyplayer-doc-manage',
+    HOST1: 'http://doc.zyplayer.com/zyplayer-doc-manage',
    // 打包时使用下面这两行，文件就放在根目录下，所以当前路劲就好
-    HOST: './',
-    HOST1: './',
+    // HOST: './',
+    // HOST1: './',

    mixUrl: function (host, url) {
        var p;
--- a/zyplayer-doc-ui/db-ui/src/main.js
+++ b/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;
--- a/zyplayer-doc-ui/db-ui/src/views/data/DataPreview.vue
+++ b/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 () {
-            this.initQueryParam(this.$route);
+        mounted: function () {
+            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>
--- a/zyplayer-doc-ui/db-ui/src/views/data/Executor.vue
+++ b/zyplayer-doc-ui/db-ui/src/views/data/Executor.vue
@@ -115,8 +115,9 @@
            this.loadDatasourceList();
            // 下面两行先后顺序不能改
            this.addEditorCompleter();
-            app.sqlExecutorEditor = app.initAceEditor("sqlExecutorEditor", 15);
-            app.sqlExecutorEditor.commands.addCommand({
+            this.sqlExecutorEditor = this.initAceEditor("sqlExecutorEditor", 15);
+            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) {
--- a/zyplayer-doc-ui/db-ui/src/views/table/Info.vue
+++ b/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">
-                        <el-input v-model="tableInfo.newDesc" placeholder="输入表注释" v-on:blur="saveTableDescription" style="width: 500px;"></el-input>
+                    <span v-if="tableInfo.inEdit == 1">
+                        <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)">
-                                <el-input v-model="scope.row.newDesc" placeholder="输入字段注释" v-on:blur="saveColumnDescription(scope.row)"></el-input>
+                            <div v-if="scope.row.inEdit == 1">
+                                <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>
--- a/zyplayer-doc-ui/db-ui/src/views/user/Login.vue
+++ b/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>
+                <el-button type="primary" style="width:100%;" @click.native.prevent="loginSubmit" :loading="logining">登录</el-button>
                <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
            </el-form-item>
        </el-form>
--- a/zyplayer-doc-ui/es-ui/src/views/user/Login.vue
+++ b/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">登录
--- a/zyplayer-doc-ui/wiki-ui/src/views/user/Login.vue
+++ b/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">登录