manager/zyplayer-doc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sql执行器页面易用性优化

Browse Source 
一些页面美化
This commit is contained in:
diant
2023-05-16 18:38:42 +08:00
parent aaaa8b4e4d
commit 98aa22f6a6
10 changed files with 72 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,27 +1,27 @@
<template>
<div class="data-executor-vue">
<div style="padding: 0 10px 10px;height: 100%;box-sizing: border-box;">
<el-card style="margin-bottom: 10px;">
<el-card style="margin-bottom: 5px;">
<ace-editor v-model="sqlExecutorContent" ref="sqlEditor" @init="sqlExecutorInit" lang="sql" theme="monokai"
width="100%" height="500" :options="sqlEditorConfig" :source="executorSource"
style="margin-bottom: 10px;"></ace-editor>
width="100%" height="20" :options="sqlEditorConfig" :source="executorSource"
@cursorSelection="cursorSelection" style="margin-bottom: 5px;"></ace-editor>
<div>
<el-button v-if="sqlExecuting" v-on:click="cancelExecutorSql" type="primary" plain size="small"
<el-button v-if="sqlExecuting" v-on:click="cancelExecutorSql" type="primary" plain size="mini"
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="doExecutorSql" type="primary" plain size="small" icon="el-icon-video-play">执行
<el-button v-on:click="doExecutorSql" type="primary" plain size="mini" icon="el-icon-video-play">{{executeButtonText}}
</el-button>
</el-tooltip>
<el-button icon="el-icon-brush" size="small" @click="formatterSql">SQL美化</el-button>
<el-button v-on:click="addFavorite('')" plain size="small" icon="el-icon-star-off">收藏</el-button>
<el-button icon="el-icon-brush" size="mini" @click="formatterSql">SQL美化</el-button>
<el-button v-on:click="addFavorite('')" plain size="mini" icon="el-icon-star-off">收藏</el-button>
<div style="float: right;">
<el-select v-model="choiceDatasourceId" @change="datasourceChangeEvents" size="small" filterable
<el-select v-model="choiceDatasourceId" @change="datasourceChangeEvents" size="mini" filterable
placeholder="请选择数据源" style="width: 300px;margin-left: 10px;">
<el-option v-for="item in datasourceOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
<el-select v-model="choiceDatabase" @change="databaseChangeEvents" size="small" filterable
<el-select v-model="choiceDatabase" @change="databaseChangeEvents" size="mini" filterable
placeholder="请选择数据库" style="width: 200px;margin-left: 10px;">
<el-option v-for="item in databaseList" :key="item.dbName" :label="item.dbName"
:value="item.dbName"></el-option>
@@ -50,7 +50,7 @@
</el-dropdown-menu>
</el-dropdown>
</div>
<el-tabs v-model="executeShowTable" @tab-click="tabHandleClick">
<el-tabs v-model="executeShowTable" type="border-card" @tab-click="tabHandleClick">
<el-tab-pane label="执行历史" name="tabHistory">
<el-table :data="myHistoryListList" stripe border style="width: 100%; margin-bottom: 5px;">
<el-table-column prop="createTime" label="执行时间" width="160px"></el-table-column>
@@ -102,6 +102,8 @@
<ux-grid v-else :data="resultItem.dataList"
@table-body-scroll="scroll"
@selection-change="handleSelectionChange"
@cell-click="mouseOnFocus"
@cell-mouse-leave="mouseLeave"
:checkboxConfig="{checkMethod: selectable, highlight: true}"
stripe border :height="height" max-height="600"
style="width: 100%; margin-bottom: 5px;" class="execute-result-table">
@@ -110,13 +112,12 @@
<ux-table-column v-for="item in resultItem.dataCols" :prop="item.prop" :title="item.label"
:width="item.width">
<template slot-scope="scope">
<textarea readonly :value="scope.row[item.prop]" class="el-textarea__inner" rows="1"></textarea>
<textarea readonly :value="scope.row[item.prop]" ref="tabletextarea" class="el-textarea__inner" rows="1"></textarea>
</template>
</ux-table-column>
</ux-grid>
<el-pagination
v-if="resultItem.selectCount"
style="margin-top: 10px;"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
@@ -173,6 +174,9 @@ export default {
editorDbTableInfo: {},
editorColumnInfo: {},
//选中的单元格
uxGridCell: "",
pageSize: 1000,
currentPage: 1,
@@ -192,6 +196,8 @@ export default {
exportConditionVisible: false,
conditionDataCols: [],
conditionDataColsChoice: [],
//执行按钮文本
executeButtonText: '执行',
// 编辑器
sqlExecutorContent: '',
sqlEditorConfig: {
@@ -200,8 +206,8 @@ export default {
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
minLines: 10,
maxLines: 10,
minLines: 15,
maxLines: 15,
},
executorSource: {},
// sql参数
@@ -214,7 +220,7 @@ export default {
'ace-editor': aceEditor
},
mounted: function () {
this.height = 270;
this.height = 200;
this.loadDatasourceList();
},
methods: {
@@ -246,6 +252,13 @@ export default {
}
});
},
cursorSelection(sqlValue){
if(sqlValue){
this.executeButtonText = '执行已选择的'
}else{
this.executeButtonText = '执行'
}
},
scroll({scrollTop, scrollLeft}) {
this.scrollTop = scrollTop
},
@@ -414,7 +427,7 @@ export default {
resIndex++;
//动态设置表格高度,尽量避免出现滚动条
if(result.selectCount){
this.height = 235;
this.height = 170;
}
});
//多个结果情况下,且点击分页
@@ -563,6 +576,20 @@ export default {
err => this.$message.error("抱歉，复制失败！")
);
}
},
//表格单元格鼠标焦点事件
mouseOnFocus(row, column, cell, event){
if(this.uxGridCell){
this.uxGridCell.style.border = 'none'
}
cell.style.border = '2px solid #0078d7'
this.uxGridCell = cell;
},
//表格单元格 hover 退出
mouseLeave(row, column, cell, event){
// if(this.uxGridCell){
// this.uxGridCell.style.border = 'none'
// }
}
}
}
@@ -574,7 +601,7 @@ export default {
}
.data-executor-vue .el-card__body {
padding: 10px;
padding: 5px;
}
.data-executor-vue .sql-params {
@@ -645,14 +672,20 @@ export default {
}
/deep/ .elx-table .elx-body--column.col--ellipsis {
height: 38px;
height: 20px;
}
/deep/ .elx-table .elx-header--column.col--ellipsis {
height: 38px;
height: 20px;
}
.el-textarea__inner{
border: none;
background-color: #f0f8ff00;
}
.el-textarea__inner::-webkit-scrollbar {
display: none;
}
/deep/ .el-tabs--border-card>.el-tabs__content {
padding: 5px;
}
</style>