From 06dde12c7a3b335cdb25797f370be50b18f82814 Mon Sep 17 00:00:00 2001
From: "96607667.zh" <zhengdahan@ccbscf.com>
Date: Sun, 16 Jan 2022 19:40:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/ops/component/Table/CreateTable.vue |   6 +-
 .../Table/{service.js => service.ts}          |   0
 mayfly_go_web/src/views/ops/db/SqlExec.vue    | 182 ++++++++++--------
 3 files changed, 107 insertions(+), 81 deletions(-)
 rename mayfly_go_web/src/views/ops/component/Table/{service.js => service.ts} (100%)

diff --git a/mayfly_go_web/src/views/ops/component/Table/CreateTable.vue b/mayfly_go_web/src/views/ops/component/Table/CreateTable.vue
index 80a17233..e7da228a 100644
--- a/mayfly_go_web/src/views/ops/component/Table/CreateTable.vue
+++ b/mayfly_go_web/src/views/ops/component/Table/CreateTable.vue
@@ -13,7 +13,7 @@
                             <el-input style="width: 80%" v-model="tableData.tableComment" size="mini"></el-input>
                         </el-form-item>
                     </el-col>
-                    <el-col :span="8">
+                    <el-col style="margin-top: 20px" :span="12">
                         <el-form-item prop="characterSet" label="字符集">
                             <el-select filterable style="width: 80%" v-model="tableData.characterSet" size="mini">
                                 <el-option v-for="item in characterSetNameList" :key="item" :label="item" :value="item"> </el-option>
@@ -69,7 +69,7 @@
                             </el-table-column>
                         </el-table>
                         <el-row style="margin-top: 20px">
-                            <el-button @click="addRow()" type="text" icon="el-icon-plus"></el-button>
+                            <el-button @click="addRow()" type="text" icon="plus"></el-button>
                         </el-row>
                     </el-tab-pane>
                 </el-tabs>
@@ -84,7 +84,7 @@
 
 <script lang="ts">
 import { watch, toRefs, reactive, defineComponent, ref, getCurrentInstance } from 'vue';
-import { TYPE_LIST, CHARACTER_SET_NAME_LIST } from './service';
+import { TYPE_LIST, CHARACTER_SET_NAME_LIST } from './service.ts';
 import { dbApi } from '../../db/api';
 import { ElMessage } from 'element-plus';
 export default defineComponent({
diff --git a/mayfly_go_web/src/views/ops/component/Table/service.js b/mayfly_go_web/src/views/ops/component/Table/service.ts
similarity index 100%
rename from mayfly_go_web/src/views/ops/component/Table/service.js
rename to mayfly_go_web/src/views/ops/component/Table/service.ts
diff --git a/mayfly_go_web/src/views/ops/db/SqlExec.vue b/mayfly_go_web/src/views/ops/db/SqlExec.vue
index 78a42e6a..75111443 100644
--- a/mayfly_go_web/src/views/ops/db/SqlExec.vue
+++ b/mayfly_go_web/src/views/ops/db/SqlExec.vue
@@ -15,13 +15,24 @@
                                     </el-option>
                                 </el-select>
                             </el-form-item>
+                            <el-form-item>
+                                <el-button
+                                    type="success"
+                                    size="mini"
+                                    @click="
+                                        newQueryShow = true;
+                                        activeName = 'second';
+                                    "
+                                    >新建查询</el-button
+                                >
+                            </el-form-item>
                         </template>
                     </project-env-select>
                 </el-col>
             </el-row>
         </div>
 
-        <el-container style="border: 1px solid #eee; margin-top: 1px; height: 549px">
+        <el-container style="border: 1px solid #eee; margin-top: 1px; height: 600px">
             <el-container style="margin-left: 2px">
                 <el-header style="text-align: left; height: 45px; font-size: 12px; padding: 0px">
                     <el-select v-model="tableName" placeholder="请选择表" @change="changeTable" filterable style="width: 99%">
@@ -43,87 +54,95 @@
                     </el-table>
                 </el-main>
             </el-container>
-            <el-aside id="sqlcontent" width="75%" style="background-color: rgb(238, 241, 246)">
-                <div class="toolbar">
-                    <div class="fl">
-                        <!-- <el-button v-waves @click="runSql" type="success" icon="video-play"  plain>执行</el-button>
+            <el-tabs style="width: 70%; margin-left: 20px" v-model="activeName" @tab-click="handleClick">
+                <el-tab-pane label="数据信息" name="first">
+                    <el-table
+                        @cell-dblclick="cellClick"
+                        style="margin-top: 1px"
+                        :data="execRes.data"
+                        size="mini"
+                        max-height="500"
+                        :empty-text="execRes.emptyResText"
+                        stripe
+                        border
+                    >
+                        <el-table-column
+                            min-width="100"
+                            :width="flexColumnWidth(item, execRes.data)"
+                            align="center"
+                            v-for="item in execRes.tableColumn"
+                            :key="item"
+                            :prop="item"
+                            :label="item"
+                            show-overflow-tooltip
+                        >
+                        </el-table-column>
+                    </el-table>
+                </el-tab-pane>
+
+                <el-tab-pane label="新建查询" v-if="newQueryShow" name="second">
+                    <el-aside id="sqlcontent" width="75%" style="background-color: rgb(238, 241, 246)">
+                        <div class="toolbar">
+                            <div class="fl">
+                                <!-- <el-button v-waves @click="runSql" type="success" icon="video-play"  plain>执行</el-button>
 
                         <el-button v-waves @click="formatSql" type="primary" icon="magic-stick"  plain>格式化</el-button> -->
 
-                        <el-upload
-                            style="display: inline-block; margin-left: 10px"
-                            :before-upload="beforeUpload"
-                            :on-success="execSqlFileSuccess"
-                            :headers="{ Authorization: token }"
-                            :data="{
-                                dbId: 1,
-                            }"
-                            :action="getUploadSqlFileUrl()"
-                            :show-file-list="false"
-                            name="file"
-                            multiple
-                            :limit="100"
-                        >
-                            <el-button v-waves type="success" icon="video-play" plain>sql脚本执行</el-button>
-                        </el-upload>
-                    </div>
+                                <el-upload
+                                    style="display: inline-block; margin-left: 10px"
+                                    :before-upload="beforeUpload"
+                                    :on-success="execSqlFileSuccess"
+                                    :headers="{ Authorization: token }"
+                                    :data="{
+                                        dbId: 1,
+                                    }"
+                                    :action="getUploadSqlFileUrl()"
+                                    :show-file-list="false"
+                                    name="file"
+                                    multiple
+                                    :limit="100"
+                                >
+                                    <el-button v-waves type="success" icon="video-play" plain>sql脚本执行</el-button>
+                                </el-upload>
+                            </div>
 
-                    <div style="float: right" class="fl">
-                        <el-select
-                            v-model="sqlName"
-                            placeholder="选择or输入SQL模板名"
-                            @change="changeSqlTemplate"
-                            filterable
-                            allow-create
-                            default-first-option
-                            class="mr10"
-                        >
-                            <el-option v-for="item in sqlNames" :key="item" :label="item.database" :value="item">
-                                {{ item }}
-                            </el-option>
-                        </el-select>
+                            <div style="float: right" class="fl">
+                                <el-select
+                                    v-model="sqlName"
+                                    placeholder="选择or输入SQL模板名"
+                                    @change="changeSqlTemplate"
+                                    filterable
+                                    allow-create
+                                    default-first-option
+                                    class="mr10"
+                                >
+                                    <el-option v-for="item in sqlNames" :key="item" :label="item.database" :value="item">
+                                        {{ item }}
+                                    </el-option>
+                                </el-select>
 
-                        <el-button v-waves @click="saveSql" type="primary" icon="document-add" plain>保存</el-button>
-                        <el-button v-waves @click="deleteSql" type="danger" icon="delete" plain>删除</el-button>
-                    </div>
-                </div>
-                <codemirror
-                    @mousemove="listenMouse"
-                    @beforeChange="onBeforeChange"
-                    class="codesql"
-                    ref="cmEditor"
-                    language="sql"
-                    v-model="sql"
-                    :options="cmOptions"
-                />
-                <el-button-group :style="btnStyle">
-                    <el-button v-waves @click="runSql" type="success" icon="video-play" size="small" plain>执行</el-button>
-                    <el-button v-waves @click="formatSql" type="primary" icon="magic-stick" size="small" plain>格式化</el-button>
-                </el-button-group>
-            </el-aside>
+                                <el-button v-waves @click="saveSql" type="primary" icon="document-add" plain>保存</el-button>
+                                <el-button v-waves @click="deleteSql" type="danger" icon="delete" plain>删除</el-button>
+                            </div>
+                        </div>
+                        <codemirror
+                            @mousemove="listenMouse"
+                            @beforeChange="onBeforeChange"
+                            class="codesql"
+                            ref="cmEditor"
+                            language="sql"
+                            v-model="sql"
+                            :options="cmOptions"
+                        />
+                        <el-button-group :style="btnStyle">
+                            <el-button v-waves @click="runSql" type="success" icon="video-play" size="small" plain>执行</el-button>
+                            <el-button v-waves @click="formatSql" type="primary" icon="magic-stick" size="small" plain>格式化</el-button>
+                        </el-button-group>
+                    </el-aside>
+                </el-tab-pane>
+            </el-tabs>
         </el-container>
-        <el-table
-            @cell-dblclick="cellClick"
-            style="margin-top: 1px"
-            :data="execRes.data"
-            size="mini"
-            max-height="300"
-            :empty-text="execRes.emptyResText"
-            stripe
-            border
-        >
-            <el-table-column
-                min-width="100"
-                :width="flexColumnWidth(item, execRes.data)"
-                align="center"
-                v-for="item in execRes.tableColumn"
-                :key="item"
-                :prop="item"
-                :label="item"
-                show-overflow-tooltip
-            >
-            </el-table-column>
-        </el-table>
+
         <!-- <el-row v-if="dbId">
             <el-button @click="addRow" type="text" icon="el-icon-plus"></el-button>
         </el-row> -->
@@ -175,6 +194,8 @@ export default defineComponent({
             sqlName: '',
             sqlNames: [],
             sql: '',
+            newQueryShow: false,
+            activeName: 'first',
             sqlTabs: {
                 tabs: [] as any,
                 active: '',
@@ -275,6 +296,7 @@ export default defineComponent({
             state.execRes.emptyResText = '没有数据';
             state.execRes.tableColumn = res.colNames;
             state.execRes.data = res.res;
+            state.activeName = 'first';
         };
 
         const beforeUpload = (file: File) => {
@@ -561,8 +583,8 @@ export default defineComponent({
             if (temp) {
                 state.btnStyle.display = 'block';
                 if (!state.btnStyle.left) {
-                    state.btnStyle.left = e.target.getBoundingClientRect().left - 150 + 'px';
-                    state.btnStyle.top = e.target.getBoundingClientRect().top - 60 + 'px';
+                    state.btnStyle.left = e.target.getBoundingClientRect().left - 550 + 'px';
+                    state.btnStyle.top = e.target.getBoundingClientRect().top - 160 + 'px';
                 }
             } else {
                 state.btnStyle.display = 'none';
@@ -609,4 +631,8 @@ export default defineComponent({
         height: 300px !important;
     }
 }
+.el-tabs__header {
+    padding: 0 20px;
+    background-color: #fff;
+}
 </style>