TRKJ/mayfly-go
2
0
Fork 0
mirror of https://gitee.com/dromara/mayfly-go synced 2025-11-17 23:00:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix:修改数据操作布局

Browse Source
This commit is contained in:
96607667.zh
2022-01-16 19:40:20 +08:00
parent 38e9fecfbf
commit 06dde12c7a
3 changed files with 107 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
mayfly_go_web/src/views/ops/component/Table/CreateTable.vue
View File

@@ -13,7 +13,7 @@
<el-input style="width: 80%" v-model="tableData.tableComment" size="mini"></el-input> <el-input style="width: 80%" v-model="tableData.tableComment" size="mini"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col style="margin-top: 20px" :span="12">
<el-form-item prop="characterSet" label="字符集"> <el-form-item prop="characterSet" label="字符集">
<el-select filterable style="width: 80%" v-model="tableData.characterSet" size="mini"> <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> <el-option v-for="item in characterSetNameList" :key="item" :label="item" :value="item"> </el-option>
@@ -69,7 +69,7 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-row style="margin-top: 20px"> <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-row>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
@@ -84,7 +84,7 @@
<script lang="ts"> <script lang="ts">
import { watch, toRefs, reactive, defineComponent, ref, getCurrentInstance } from 'vue'; 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 { dbApi } from '../../db/api';
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
export default defineComponent({ export default defineComponent({

0
mayfly_go_web/src/views/ops/component/Table/service.js → mayfly_go_web/src/views/ops/component/Table/service.ts
View File

182
mayfly_go_web/src/views/ops/db/SqlExec.vue
View File

@@ -15,13 +15,24 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item>
<el-button
type="success"
size="mini"
@click="
newQueryShow = true;
activeName = 'second';
"
>新建查询</el-button
>
</el-form-item>
</template> </template>
</project-env-select> </project-env-select>
</el-col> </el-col>
</el-row> </el-row>
</div> </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-container style="margin-left: 2px">
<el-header style="text-align: left; height: 45px; font-size: 12px; padding: 0px"> <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%"> <el-select v-model="tableName" placeholder="请选择表" @change="changeTable" filterable style="width: 99%">
@@ -43,87 +54,95 @@
</el-table> </el-table>
</el-main> </el-main>
</el-container> </el-container>
<el-aside id="sqlcontent" width="75%" style="background-color: rgb(238, 241, 246)"> <el-tabs style="width: 70%; margin-left: 20px" v-model="activeName" @tab-click="handleClick">
<div class="toolbar"> <el-tab-pane label="数据信息" name="first">
<div class="fl"> <el-table
<!-- <el-button v-waves @click="runSql" type="success" icon="video-play" plain>执行</el-button> @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-button v-waves @click="formatSql" type="primary" icon="magic-stick" plain>格式化</el-button> -->
<el-upload <el-upload
style="display: inline-block; margin-left: 10px" style="display: inline-block; margin-left: 10px"
:before-upload="beforeUpload" :before-upload="beforeUpload"
:on-success="execSqlFileSuccess" :on-success="execSqlFileSuccess"
:headers="{ Authorization: token }" :headers="{ Authorization: token }"
:data="{ :data="{
dbId: 1, dbId: 1,
}" }"
:action="getUploadSqlFileUrl()" :action="getUploadSqlFileUrl()"
:show-file-list="false" :show-file-list="false"
name="file" name="file"
multiple multiple
:limit="100" :limit="100"
> >
<el-button v-waves type="success" icon="video-play" plain>sql脚本执行</el-button> <el-button v-waves type="success" icon="video-play" plain>sql脚本执行</el-button>
</el-upload> </el-upload>
</div> </div>
<div style="float: right" class="fl"> <div style="float: right" class="fl">
<el-select <el-select
v-model="sqlName" v-model="sqlName"
placeholder="选择or输入SQL模板名" placeholder="选择or输入SQL模板名"
@change="changeSqlTemplate" @change="changeSqlTemplate"
filterable filterable
allow-create allow-create
default-first-option default-first-option
class="mr10" class="mr10"
> >
<el-option v-for="item in sqlNames" :key="item" :label="item.database" :value="item"> <el-option v-for="item in sqlNames" :key="item" :label="item.database" :value="item">
{{ item }} {{ item }}
</el-option> </el-option>
</el-select> </el-select>
<el-button v-waves @click="saveSql" type="primary" icon="document-add" plain>保存</el-button> <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> <el-button v-waves @click="deleteSql" type="danger" icon="delete" plain>删除</el-button>
</div> </div>
</div> </div>
<codemirror <codemirror
@mousemove="listenMouse" @mousemove="listenMouse"
@beforeChange="onBeforeChange" @beforeChange="onBeforeChange"
class="codesql" class="codesql"
ref="cmEditor" ref="cmEditor"
language="sql" language="sql"
v-model="sql" v-model="sql"
:options="cmOptions" :options="cmOptions"
/> />
<el-button-group :style="btnStyle"> <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="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 v-waves @click="formatSql" type="primary" icon="magic-stick" size="small" plain>格式化</el-button>
</el-button-group> </el-button-group>
</el-aside> </el-aside>
</el-tab-pane>
</el-tabs>
</el-container> </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-row v-if="dbId">
<el-button @click="addRow" type="text" icon="el-icon-plus"></el-button> <el-button @click="addRow" type="text" icon="el-icon-plus"></el-button>
</el-row> --> </el-row> -->
@@ -175,6 +194,8 @@ export default defineComponent({
sqlName: '', sqlName: '',
sqlNames: [], sqlNames: [],
sql: '', sql: '',
newQueryShow: false,
activeName: 'first',
sqlTabs: { sqlTabs: {
tabs: [] as any, tabs: [] as any,
active: '', active: '',
@@ -275,6 +296,7 @@ export default defineComponent({
state.execRes.emptyResText = '没有数据'; state.execRes.emptyResText = '没有数据';
state.execRes.tableColumn = res.colNames; state.execRes.tableColumn = res.colNames;
state.execRes.data = res.res; state.execRes.data = res.res;
state.activeName = 'first';
}; };
const beforeUpload = (file: File) => { const beforeUpload = (file: File) => {
@@ -561,8 +583,8 @@ export default defineComponent({
if (temp) { if (temp) {
state.btnStyle.display = 'block'; state.btnStyle.display = 'block';
if (!state.btnStyle.left) { 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 { } else {
state.btnStyle.display = 'none'; state.btnStyle.display = 'none';
@@ -609,4 +631,8 @@ export default defineComponent({
height: 300px !important; height: 300px !important;
} }
} }
.el-tabs__header {
padding: 0 20px;
background-color: #fff;
}
</style> </style>