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

25
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;
import cn.hutool.core.util.StrUtil;
import com.alibaba.druid.DbType;
import com.alibaba.druid.sql.ast.SQLStatement;
import com.alibaba.druid.sql.ast.statement.SQLSelectStatement;
@@ -54,8 +55,20 @@ public class DbSqlExecutorController {
@Resource
DatabaseServiceFactory databaseServiceFactory;
/**
* sql执行器
* @param sourceId
* @param executeId
* @param dbName
* @param sql
* @param params
* @param pageSize
* @param pageNum
* @param type noPage:无分页 其他:有分页
* @return
*/
@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)) {
return DocDbResponseJson.warn("执行的SQL不能为空");
}
@@ -118,9 +131,17 @@ public class DbSqlExecutorController {
executeParam.setExecuteId(executeId);
executeParam.setExecuteType(executeType);
executeParam.setPrefixSql(useDbSql);
executeParam.setMaxRows(1000);
if(!StrUtil.equals(type,"noPage")){
executeParam.setMaxRows(1000);
}
//sql解析类型为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
String getAllCountSql = map.get("getAllCountSql").toString();
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();
Integer pageSize = dataViewParam.getPageSize() * dataViewParam.getPageNum();
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();
}

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(ElementUI);
Vue.use(ElementUI,{
size:'mini'
size:'small'
});
Vue.use(UmyUi);
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>
</el-tab-pane>
<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-else-if="resultItem.dataList.length <= 0"
style="text-align: center; color: #aaa; padding: 20px 0;">暂无数据
</div>
<template v-else>
<ux-grid
v-clickoutside="handleClickOutside"
:data="resultItem.dataList"
stripe
border
:height="height"
style="width: 100%; margin-bottom: 5px;" class="execute-result-table" :max-height="tableMaxHeight"
@selection-change="handleSelectionChange"
@cell-click="mouseOnFocus"
@cell-mouse-leave="mouseLeave"
@sort-change="tableSortChange"
:default-sort="tableSort">
<ux-table-column type="checkbox" width="55"></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>
<template slot="header" slot-scope="scope">
<el-tooltip effect="dark" :content="item.desc" placement="top">
@@ -191,9 +194,11 @@ import copyFormatter from './copy/index'
import sqlFormatter from "sql-formatter";
import aceEditor from "../../common/lib/ace-editor";
import storageUtil from "../../common/lib/zyplayer/storageUtil";
import Clickoutside from 'element-ui/src/utils/clickoutside'
export default {
name: 'dataPreview',
directives: { Clickoutside },
data() {
return {
executorDesc: "",
@@ -457,6 +462,26 @@ export default {
handleSelectionChange(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() {
let choiceData = this.choiceResultObj[this.executeShowTable] || [];
if (choiceData.length > 0) {
@@ -630,10 +655,10 @@ export default {
}
.data-executor-vue .execute-result-table .el-textarea__inner {
height: 27px;
min-height: 27px;
line-height: 25px;
padding: 0 5px;
height: 26px;
min-height: 26px;
line-height: 26px;
padding: 0;
resize: none;
}
@@ -656,17 +681,21 @@ export default {
}
/deep/ .elx-table .elx-body--column.col--ellipsis {
height: 38px;
height: 30px;
}
/deep/ .elx-table .elx-header--column.col--ellipsis {
height: 38px;
height: 30px;
//padding-left: 5px;
}
.xxpre{
overflow: auto;
}
.el-textarea__inner{
border: none;
background-color: #f0f8ff00;
}
.el-textarea__inner::-webkit-scrollbar {
display: none;
}

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

@@ -29,7 +29,7 @@
</div>
</div>
<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>
</el-input>
</div>
@@ -96,10 +96,12 @@
<div style="color: #f00;">{{ executeError }}</div>
</el-tab-pane>
<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>
<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"
@selection-change="handleSelectionChange"
@cell-click="mouseOnFocus"
@@ -108,11 +110,11 @@
stripe border :height="height" max-height="600"
style="width: 100%; margin-bottom: 5px;" class="execute-result-table">
<ux-table-column type="checkbox" width="55"></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.label"
<ux-table-column type="index" width="55" title=" "></ux-table-column>
<ux-table-column v-for="(item,index) in resultItem.dataCols" :key="index" :prop="item.prop" :title="item.label"
:width="item.width">
<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>
</ux-table-column>
</ux-grid>
@@ -125,8 +127,18 @@
layout="total, sizes, prev, pager, next, jumper"
:total="resultItem.selectCount">
</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>
</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>
</div>
</el-card>
@@ -155,10 +167,15 @@ import sqlFormatter from "sql-formatter"
import datasourceApi from '../../common/api/datasource'
import aceEditor from "../../common/lib/ace-editor";
import sqlParser from "./parser/SqlParser";
import Clickoutside from 'element-ui/src/utils/clickoutside'
export default {
directives: { Clickoutside },
data() {
return {
//遮罩层
loadingAll: false,
height: 0,
scrollTop: 0,
datasourceList: [],
@@ -439,6 +456,112 @@ export default {
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) {
this.currentPage = to;
let init = 1;
@@ -590,7 +713,13 @@ export default {
// if(this.uxGridCell){
// this.uxGridCell.style.border = 'none'
// }
}
},
// 点击区域外
handleClickOutside() {
if(this.uxGridCell){
this.uxGridCell.style.border = 'none'
}
},
}
}
</script>
@@ -627,10 +756,10 @@ export default {
}
.data-executor-vue .execute-result-table .el-textarea__inner {
height: 27px;
min-height: 27px;
line-height: 25px;
padding: 0 5px;
height: 26px;
min-height: 26px;
line-height: 26px;
padding: 0;
resize: none;
}
@@ -672,11 +801,12 @@ export default {
}
/deep/ .elx-table .elx-body--column.col--ellipsis {
height: 20px;
height: 30px;
}
/deep/ .elx-table .elx-header--column.col--ellipsis {
height: 20px;
height: 30px;
//padding-left: 5px;
}
.el-textarea__inner{
border: none;
@@ -688,4 +818,13 @@ export default {
/deep/ .el-tabs--border-card>.el-tabs__content {
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>