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

表数据页面优化

Browse Source 
已知问题修复
This commit is contained in:
diant
2023-05-17 23:48:26 +08:00
parent 98aa22f6a6
commit f74e53c7ea
11 changed files with 219 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
zyplayer-doc-db/src/main/java/com/zyplayer/doc/db/controller/DbSqlExecutorController.java
View File

@@ -1,5 +1,6 @@
package com.zyplayer.doc.db.controller; package com.zyplayer.doc.db.controller;
import cn.hutool.core.util.StrUtil;
import com.alibaba.druid.DbType; import com.alibaba.druid.DbType;
import com.alibaba.druid.sql.ast.SQLStatement; import com.alibaba.druid.sql.ast.SQLStatement;
import com.alibaba.druid.sql.ast.statement.SQLSelectStatement; import com.alibaba.druid.sql.ast.statement.SQLSelectStatement;
@@ -54,8 +55,20 @@ public class DbSqlExecutorController {
@Resource @Resource
DatabaseServiceFactory databaseServiceFactory; DatabaseServiceFactory databaseServiceFactory;
/**
* sql执行器
* @param sourceId
* @param executeId
* @param dbName
* @param sql
* @param params
* @param pageSize
* @param pageNum
* @param type noPage:无分页 其他:有分页
* @return
*/
@PostMapping(value = "/execute") @PostMapping(value = "/execute")
public DocDbResponseJson execute(Long sourceId, String executeId, String dbName, String sql, String params,Integer pageSize,Integer pageNum) { public DocDbResponseJson execute(Long sourceId, String executeId, String dbName, String sql, String params,Integer pageSize,Integer pageNum,String type) {
if (StringUtils.isBlank(sql)) { if (StringUtils.isBlank(sql)) {
return DocDbResponseJson.warn("执行的SQL不能为空"); return DocDbResponseJson.warn("执行的SQL不能为空");
} }
@@ -118,9 +131,17 @@ public class DbSqlExecutorController {
executeParam.setExecuteId(executeId); executeParam.setExecuteId(executeId);
executeParam.setExecuteType(executeType); executeParam.setExecuteType(executeType);
executeParam.setPrefixSql(useDbSql); executeParam.setPrefixSql(useDbSql);
if(!StrUtil.equals(type,"noPage")){
executeParam.setMaxRows(1000); executeParam.setMaxRows(1000);
}
//sql解析类型为select //sql解析类型为select
if(map.get("sqlType").equals("select")){ if(map.get("sqlType").equals("select")){
if(StrUtil.equals(type,"noPage")){
executeParam = SqlParseUtil.getSingleExecuteParam(executeParam,originalSql, paramMap);
executeResult = columnSqlExecutor.execute(executeParam);
resultList.add(executeResult);
continue;
}
//获取总数据量sql //获取总数据量sql
String getAllCountSql = map.get("getAllCountSql").toString(); String getAllCountSql = map.get("getAllCountSql").toString();
executeParam = SqlParseUtil.getSingleExecuteParam(executeParam,getAllCountSql, paramMap); executeParam = SqlParseUtil.getSingleExecuteParam(executeParam,getAllCountSql, paramMap);

2
zyplayer-doc-db/src/main/java/com/zyplayer/doc/db/service/database/OracleServiceImpl.java
View File

@@ -73,7 +73,7 @@ public class OracleServiceImpl extends DbBaseService {
StringBuilder sqlSbFinal = new StringBuilder(); StringBuilder sqlSbFinal = new StringBuilder();
Integer pageSize = dataViewParam.getPageSize() * dataViewParam.getPageNum(); Integer pageSize = dataViewParam.getPageSize() * dataViewParam.getPageNum();
Integer pageNum = dataViewParam.getPageSize() * (dataViewParam.getPageNum() - 1) + 1; Integer pageNum = dataViewParam.getPageSize() * (dataViewParam.getPageNum() - 1) + 1;
sqlSbFinal.append(String.format("select * from ( select %s from %s", queryColumns + ",rownum rn", "(" + sqlSb + ") where rownum<=" + pageSize + " ) t2 where t2.rn >=" + pageNum)); sqlSbFinal.append(String.format("select %s from ( select %s from %s",queryColumns, queryColumns + ",rownum rn", "(" + sqlSb + ") where rownum<=" + pageSize + " ) t2 where t2.rn >=" + pageNum));
return sqlSbFinal.toString(); return sqlSbFinal.toString();
} }

1
zyplayer-doc-db/src/main/resources/dist/css/index.b0265f2f.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.dae5507e.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.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> <!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.dae5507e.css" rel="preload" as="style"><link href="js/chunk-vendors.3d6daf5c.js" rel="preload" as="script"><link href="js/index.f05f599e.js" rel="preload" as="script"><link href="css/chunk-vendors.2fa4c9b3.css" rel="stylesheet"><link href="css/index.dae5507e.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.3d6daf5c.js"></script><script src="js/index.f05f599e.js"></script></body></html>

2
zyplayer-doc-db/src/main/resources/dist/js/chunk-vendors.e736cdfe.js → zyplayer-doc-db/src/main/resources/dist/js/chunk-vendors.3d6daf5c.js vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@@ -19,7 +19,7 @@ import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard); Vue.use(VueClipboard);
//Vue.use(ElementUI); //Vue.use(ElementUI);
Vue.use(ElementUI,{ Vue.use(ElementUI,{
size:'mini' size:'small'
}); });
Vue.use(UmyUi); Vue.use(UmyUi);
Vue.use(VueRouter); Vue.use(VueRouter);

47
zyplayer-doc-ui/db-ui/src/views/data/DataPreview.vue
View File

@@ -63,24 +63,27 @@
<pre class="xxpre">{{ executeResultInfo }}</pre> <pre class="xxpre">{{ executeResultInfo }}</pre>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="'结果'+resultItem.index" :name="resultItem.name" <el-tab-pane :label="'结果'+resultItem.index" :name="resultItem.name"
v-for="resultItem in executeResultList" v-if="!!resultItem.index"> v-for="(resultItem,index) in executeResultList" :key="index" v-if="!!resultItem.index">
<div v-if="!!resultItem.errMsg" style="color: #f00;">{{ resultItem.errMsg }}</div> <div v-if="!!resultItem.errMsg" style="color: #f00;">{{ resultItem.errMsg }}</div>
<div v-else-if="resultItem.dataList.length <= 0" <div v-else-if="resultItem.dataList.length <= 0"
style="text-align: center; color: #aaa; padding: 20px 0;">暂无数据 style="text-align: center; color: #aaa; padding: 20px 0;">暂无数据
</div> </div>
<template v-else> <template v-else>
<ux-grid <ux-grid
v-clickoutside="handleClickOutside"
:data="resultItem.dataList" :data="resultItem.dataList"
stripe stripe
border border
:height="height" :height="height"
style="width: 100%; margin-bottom: 5px;" class="execute-result-table" :max-height="tableMaxHeight" style="width: 100%; margin-bottom: 5px;" class="execute-result-table" :max-height="tableMaxHeight"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
@cell-click="mouseOnFocus"
@cell-mouse-leave="mouseLeave"
@sort-change="tableSortChange" @sort-change="tableSortChange"
:default-sort="tableSort"> :default-sort="tableSort">
<ux-table-column type="checkbox" width="55"></ux-table-column> <ux-table-column type="checkbox" width="55"></ux-table-column>
<ux-table-column type="index" width="50" title=" "></ux-table-column> <ux-table-column type="index" width="50" title=" "></ux-table-column>
<ux-table-column v-for="item in resultItem.dataCols" :prop="item.prop" :title="item.prop" <ux-table-column v-for="(item,index) in resultItem.dataCols" :key="index" :prop="item.prop" :title="item.prop"
:width="item.width" sortable> :width="item.width" sortable>
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<el-tooltip effect="dark" :content="item.desc" placement="top"> <el-tooltip effect="dark" :content="item.desc" placement="top">
@@ -191,9 +194,11 @@ import copyFormatter from './copy/index'
import sqlFormatter from "sql-formatter"; import sqlFormatter from "sql-formatter";
import aceEditor from "../../common/lib/ace-editor"; import aceEditor from "../../common/lib/ace-editor";
import storageUtil from "../../common/lib/zyplayer/storageUtil"; import storageUtil from "../../common/lib/zyplayer/storageUtil";
import Clickoutside from 'element-ui/src/utils/clickoutside'
export default { export default {
name: 'dataPreview', name: 'dataPreview',
directives: { Clickoutside },
data() { data() {
return { return {
executorDesc: "", executorDesc: "",
@@ -457,6 +462,26 @@ export default {
handleSelectionChange(val) { handleSelectionChange(val) {
this.$set(this.choiceResultObj, this.executeShowTable, val); this.$set(this.choiceResultObj, this.executeShowTable, val);
}, },
//表格单元格鼠标焦点事件
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'
// }
},
// 点击区域外
handleClickOutside() {
if(this.uxGridCell){
this.uxGridCell.style.border = 'none'
}
},
doCopyCheckLineUpdate() { doCopyCheckLineUpdate() {
let choiceData = this.choiceResultObj[this.executeShowTable] || []; let choiceData = this.choiceResultObj[this.executeShowTable] || [];
if (choiceData.length > 0) { if (choiceData.length > 0) {
@@ -630,10 +655,10 @@ export default {
} }
.data-executor-vue .execute-result-table .el-textarea__inner { .data-executor-vue .execute-result-table .el-textarea__inner {
height: 27px; height: 26px;
min-height: 27px; min-height: 26px;
line-height: 25px; line-height: 26px;
padding: 0 5px; padding: 0;
resize: none; resize: none;
} }
@@ -656,17 +681,21 @@ export default {
} }
/deep/ .elx-table .elx-body--column.col--ellipsis { /deep/ .elx-table .elx-body--column.col--ellipsis {
height: 38px; height: 30px;
} }
/deep/ .elx-table .elx-header--column.col--ellipsis { /deep/ .elx-table .elx-header--column.col--ellipsis {
height: 38px; height: 30px;
//padding-left: 5px;
} }
.xxpre{ .xxpre{
overflow: auto; overflow: auto;
} }
.el-textarea__inner{
border: none;
background-color: #f0f8ff00;
}
.el-textarea__inner::-webkit-scrollbar { .el-textarea__inner::-webkit-scrollbar {
display: none; display: none;
} }

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

@@ -29,7 +29,7 @@
</div> </div>
</div> </div>
<div v-if="sqlParams.length > 0" class="sql-params"> <div v-if="sqlParams.length > 0" class="sql-params">
<el-input :placeholder="'请输入'+param.key+'的值'" v-model="param.value" v-for="param in sqlParams"> <el-input :placeholder="'请输入'+param.key+'的值'" v-model="param.value" v-for="(param,index) in sqlParams" :key="index">
<template slot="prepend">{{ param.key }}</template> <template slot="prepend">{{ param.key }}</template>
</el-input> </el-input>
</div> </div>
@@ -96,10 +96,12 @@
<div style="color: #f00;">{{ executeError }}</div> <div style="color: #f00;">{{ executeError }}</div>
</el-tab-pane> </el-tab-pane>
<template v-else> <template v-else>
<el-tab-pane :label="resultItem.label" :name="resultItem.name" v-for="resultItem in executeResultList" <el-tab-pane :label="resultItem.label" :name="resultItem.name" v-for="(resultItem,index) in executeResultList" :key="index"
lazy> lazy>
<div v-if="!!resultItem.errMsg" style="color: #f00;">{{ resultItem.errMsg }}</div> <div v-if="!!resultItem.errMsg" style="color: #f00;">{{ resultItem.errMsg }}</div>
<ux-grid v-else :data="resultItem.dataList" <ux-grid v-else
v-clickoutside="handleClickOutside"
:data="resultItem.dataList"
@table-body-scroll="scroll" @table-body-scroll="scroll"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
@cell-click="mouseOnFocus" @cell-click="mouseOnFocus"
@@ -108,11 +110,11 @@
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">
<ux-table-column type="checkbox" width="55"></ux-table-column> <ux-table-column type="checkbox" width="55"></ux-table-column>
<ux-table-column type="index" width="50" title=" "></ux-table-column> <ux-table-column type="index" width="55" title=" "></ux-table-column>
<ux-table-column v-for="item in resultItem.dataCols" :prop="item.prop" :title="item.label" <ux-table-column v-for="(item,index) in resultItem.dataCols" :key="index" :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]" ref="tabletextarea" class="el-textarea__inner" rows="1"></textarea> <textarea readonly :value="scope.row[item.prop]" class="el-textarea__inner" rows="1"></textarea>
</template> </template>
</ux-table-column> </ux-table-column>
</ux-grid> </ux-grid>
@@ -125,8 +127,18 @@
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="resultItem.selectCount"> :total="resultItem.selectCount">
</el-pagination> </el-pagination>
<div v-if="resultItem.selectCount" style="position: absolute;right: 5px;bottom: 5px;">
<el-button type="primary" plain v-on:click="viewAllData()">查看所有</el-button>
</div>
<div></div>
</el-tab-pane> </el-tab-pane>
</template> </template>
<el-main v-loading="loadingAll"
v-show="loadingAll"
element-loading-text="正在加载中"
element-loading-spinner="el-icon-loading"
style="height: 175px;">
</el-main>
</el-tabs> </el-tabs>
</div> </div>
</el-card> </el-card>
@@ -155,10 +167,15 @@ import sqlFormatter from "sql-formatter"
import datasourceApi from '../../common/api/datasource' import datasourceApi from '../../common/api/datasource'
import aceEditor from "../../common/lib/ace-editor"; import aceEditor from "../../common/lib/ace-editor";
import sqlParser from "./parser/SqlParser"; import sqlParser from "./parser/SqlParser";
import Clickoutside from 'element-ui/src/utils/clickoutside'
export default { export default {
directives: { Clickoutside },
data() { data() {
return { return {
//遮罩层
loadingAll: false,
height: 0, height: 0,
scrollTop: 0, scrollTop: 0,
datasourceList: [], datasourceList: [],
@@ -439,6 +456,112 @@ export default {
this.loadHistoryList(); this.loadHistoryList();
}); });
}, },
//查看所有数据
viewAllData(init){
this.loadingAll = true;
if (!this.choiceDatasourceId) {
this.$message.error("请先选择数据源");
return;
}
this.executeError = "";
this.executeUseTime = "";
this.executeResultList = [];
let sqlParamObj = {};
this.sqlParams.forEach(item => {
if (!!item.value) {
sqlParamObj[item.key] = item.value;
this.sqlParamHistory[item.key] = item.value;
}
});
this.nowExecutorId = (new Date()).getTime() + Math.ceil(Math.random() * 1000);
let sqlValue = this.sqlExecutorEditor.getSelectedText();
if (!sqlValue) {
sqlValue = this.sqlExecutorEditor.getValue();
}
this.sqlExecuting = true;
datasourceApi.queryExecuteSql({
sourceId: this.choiceDatasourceId,
dbName: this.choiceDatabase,
executeId: this.nowExecutorId,
pageNum: this.currentPage,
pageSize: this.pageSize,
sql: sqlValue,
type: 'noPage',
params: JSON.stringify(sqlParamObj),
}).then(response => {
this.sqlExecuting = false;
this.loadingAll = false;
if (response.errCode != 200) {
this.executeShowTable = 'tabError';
this.executeError = response.errMsg;
return;
}
let resIndex = 1;
let executeResultList = [];
let resData = response.data || [];
let executeResultInfo = "";
resData.forEach(result => {
let dataListRes = [];
let previewColumns = [];
executeResultInfo += this.getExecuteInfoStr(result);
if (result.errCode === 0) {
let dataListTemp = result.data || [];
let headerList = result.header || [];
// 组装表头
let columnSet = {};
if (headerList.length > 0) {
let headerIndex = 0;
headerList.forEach(item => {
let key = 'value_' + (headerIndex++);
columnSet[key] = item;
previewColumns.push({prop: key, label: item});
});
dataListTemp.forEach(item => {
let dataItem = {}, dataIndex = 0;
previewColumns.forEach(column => {
let key = column.prop;
dataItem[key] = item[dataIndex++];
if ((dataItem[key] + '').length > columnSet[key].length) {
columnSet[key] = dataItem[key] + '';
}
});
dataListRes.push(dataItem);
});
previewColumns.forEach(item => {
// 动态计算宽度~自己想的一个方法，666
document.getElementById("widthCalculate").innerText = columnSet[item.prop];
let width = document.getElementById("widthCalculate").offsetWidth;
width = width + (columnSet[item.prop] === item.label ? 35 : 55);
width = (width < 50) ? 50 : width;
item.width = (width > 200) ? 200 : width;
});
}
}
executeResultList.push({
label: '结果' + resIndex,
name: 'result_' + resIndex,
errMsg: result.errMsg,
errCode: result.errCode,
queryTime: result.queryTime,
selectCount: result.selectCount,
dataCols: previewColumns,
dataList: dataListRes
});
resIndex++;
//动态设置表格高度,尽量避免出现滚动条
if(result.selectCount){
this.height = 170;
}
});
//多个结果情况下,且点击分页
if(init!=1){
this.executeShowTable = (resIndex === 1) ? "tabInfo" : "result_1";
}
this.executeResultInfo = executeResultInfo;
this.executeResultList = executeResultList;
this.loadHistoryList();
});
},
handleCurrentChange(to) { handleCurrentChange(to) {
this.currentPage = to; this.currentPage = to;
let init = 1; let init = 1;
@@ -590,7 +713,13 @@ export default {
// if(this.uxGridCell){ // if(this.uxGridCell){
// this.uxGridCell.style.border = 'none' // this.uxGridCell.style.border = 'none'
// } // }
},
// 点击区域外
handleClickOutside() {
if(this.uxGridCell){
this.uxGridCell.style.border = 'none'
} }
},
} }
} }
</script> </script>
@@ -627,10 +756,10 @@ export default {
} }
.data-executor-vue .execute-result-table .el-textarea__inner { .data-executor-vue .execute-result-table .el-textarea__inner {
height: 27px; height: 26px;
min-height: 27px; min-height: 26px;
line-height: 25px; line-height: 26px;
padding: 0 5px; padding: 0;
resize: none; resize: none;
} }
@@ -672,11 +801,12 @@ export default {
} }
/deep/ .elx-table .elx-body--column.col--ellipsis { /deep/ .elx-table .elx-body--column.col--ellipsis {
height: 20px; height: 30px;
} }
/deep/ .elx-table .elx-header--column.col--ellipsis { /deep/ .elx-table .elx-header--column.col--ellipsis {
height: 20px; height: 30px;
//padding-left: 5px;
} }
.el-textarea__inner{ .el-textarea__inner{
border: none; border: none;
@@ -688,4 +818,13 @@ export default {
/deep/ .el-tabs--border-card>.el-tabs__content { /deep/ .el-tabs--border-card>.el-tabs__content {
padding: 5px; padding: 5px;
} }
/deep/ .elx-table .elx-body--column.col--ellipsis>.elx-cell,
.elx-table .elx-footer--column.col--ellipsis>.elx-cell,
.elx-table .elx-header--column.col--ellipsis>.elx-cell{
overflow: auto;
text-overflow: unset;
}
/deep/ .elx-table .elx-body--column.col--ellipsis>.elx-cell::-webkit-scrollbar {
display: none;
}
</style> </style>