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

1
zyplayer-doc-db/src/main/resources/dist/css/index.76793363.css vendored
View File

File diff suppressed because one or more lines are too long

1
zyplayer-doc-db/src/main/resources/dist/css/index.b0265f2f.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
zyplayer-doc-db/src/main/resources/dist/doc-db.html vendored
View File

@@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon-db.png"><title>数据库文档管理</title><link href="css/chunk-vendors.2fa4c9b3.css" rel="preload" as="style"><link href="css/index.76793363.css" rel="preload" as="style"><link href="js/chunk-vendors.e736cdfe.js" rel="preload" as="script"><link href="js/index.651e1890.js" rel="preload" as="script"><link href="css/chunk-vendors.2fa4c9b3.css" rel="stylesheet"><link href="css/index.76793363.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zyplayer-db-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.e736cdfe.js"></script><script src="js/index.651e1890.js"></script></body></html> <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon-db.png"><title>数据库文档管理</title><link href="css/chunk-vendors.2fa4c9b3.css" rel="preload" as="style"><link href="css/index.b0265f2f.css" rel="preload" as="style"><link href="js/chunk-vendors.e736cdfe.js" rel="preload" as="script"><link href="js/index.416a165d.js" rel="preload" as="script"><link href="css/chunk-vendors.2fa4c9b3.css" rel="stylesheet"><link href="css/index.b0265f2f.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zyplayer-db-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.e736cdfe.js"></script><script src="js/index.416a165d.js"></script></body></html>

1
zyplayer-doc-db/src/main/resources/dist/js/index.416a165d.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
zyplayer-doc-db/src/main/resources/dist/js/index.651e1890.js vendored
View File

File diff suppressed because one or more lines are too long

1
zyplayer-doc-ui/db-ui/src/App.vue
View File

@@ -312,6 +312,7 @@
} }
#app, .el-container, .el-menu { #app, .el-container, .el-menu {
height: 100%; height: 100%;
font-size: 12px;
} }
.el-header { .el-header {
background-color: #1D4E89 !important; background-color: #1D4E89 !important;

4
zyplayer-doc-ui/db-ui/src/common/lib/ace-editor/index.js
View File

@@ -93,6 +93,10 @@ export default {
// console.log('change content：' + content); // console.log('change content：' + content);
// editor.execCommand("startAutocomplete"); // editor.execCommand("startAutocomplete");
}); });
editor.getSession().selection.on('changeSelection', function (e) {
let sqlValue = editor.session.getTextRange(editor.getSelectionRange());
vm.$emit('cursorSelection',sqlValue)
})
editor.commands.addCommand({ editor.commands.addCommand({
name: "start-autocomplete", name: "start-autocomplete",
bindKey: {win: "Alt-Enter", mac: "Alt-Enter"}, bindKey: {win: "Alt-Enter", mac: "Alt-Enter"},

8
zyplayer-doc-ui/db-ui/src/components/layouts/PageTableView.vue
View File

@@ -89,5 +89,11 @@
</script> </script>
<style scoped> <style scoped>
/deep/ .el-tabs--card>.el-tabs__header{
margin: 0 0 5px;
}
/deep/ .el-tabs--card>.el-tabs__header .el-tabs__item{
height: 30px;
line-height: 30px;
}
</style> </style>

5
zyplayer-doc-ui/db-ui/src/main.js
View File

@@ -17,7 +17,10 @@ import "vue-hljs/dist/vue-hljs.min.css";
import VueClipboard from 'vue-clipboard2'; import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard); Vue.use(VueClipboard);
Vue.use(ElementUI); //Vue.use(ElementUI);
Vue.use(ElementUI,{
size:'mini'
});
Vue.use(UmyUi); Vue.use(UmyUi);
Vue.use(VueRouter); Vue.use(VueRouter);
Vue.use(VueAxios, axios); Vue.use(VueAxios, axios);

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

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