fix:修改数据操作布局

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({

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,6 +54,33 @@
                     </el-table>
                 </el-main>
             </el-container>
+            <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">
@@ -101,29 +139,10 @@
                             <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.left = e.target.getBoundingClientRect().left - 550 + 'px';
-                    state.btnStyle.top = e.target.getBoundingClientRect().top - 60 + '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>