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-06-02 11:21:19 +08:00
parent 6e4b226a46
commit 9dfabe54ce
5 changed files with 71 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
zyplayer-doc-db/src/main/resources/dist/css/index.4edbcddf.css → zyplayer-doc-db/src/main/resources/dist/css/index.0b546ad4.css vendored
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.4edbcddf.css" rel="preload" as="style"><link href="js/chunk-vendors.6270548d.js" rel="preload" as="script"><link href="js/index.8babff14.js" rel="preload" as="script"><link href="css/chunk-vendors.2fa4c9b3.css" rel="stylesheet"><link href="css/index.4edbcddf.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.6270548d.js"></script><script src="js/index.8babff14.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.0b546ad4.css" rel="preload" as="style"><link href="js/chunk-vendors.6270548d.js" rel="preload" as="script"><link href="js/index.76574511.js" rel="preload" as="script"><link href="css/chunk-vendors.2fa4c9b3.css" rel="stylesheet"><link href="css/index.0b546ad4.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.6270548d.js"></script><script src="js/index.76574511.js"></script></body></html>

1
zyplayer-doc-db/src/main/resources/dist/js/index.76574511.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.8babff14.js vendored
View File

File diff suppressed because one or more lines are too long

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

@@ -7,7 +7,7 @@
theme="monokai" theme="monokai"
width="100%" :height="aceEditorHeight" :options="sqlEditorConfig" :source="executorSource" width="100%" :height="aceEditorHeight" :options="sqlEditorConfig" :source="executorSource"
@cursorSelection="cursorSelection"></ace-editor> @cursorSelection="cursorSelection"></ace-editor>
<div style="margin-top: 5px;"> <div :style="{ height: aceEditorButtonHeight + 'px','margin-top': '5px' }" >
<el-button v-if="sqlExecuting" v-on:click="cancelExecutorSql" type="primary" plain size="mini" <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>
@@ -211,6 +211,11 @@ export default {
aceEditorHeight: 0, aceEditorHeight: 0,
rightBodyButtomTabsHeight: 0, rightBodyButtomTabsHeight: 0,
rightBodyButtomTabsContentHeight: 0, rightBodyButtomTabsContentHeight: 0,
aceEditorButtonHeight: 0,
changeFlag: true,
changeFlag2: true,
//遮罩层 //遮罩层
loadingAll: false, loadingAll: false,
@@ -276,14 +281,7 @@ export default {
this.loadDatasourceList(); this.loadDatasourceList();
this.dragChangeTopHeight(); this.dragChangeTopHeight();
//计算高度 //计算高度
this.elementHeightCalculation(); this.elementHeightCalculationInit();
setTimeout(() => {
//主体上半部分高度
let bodyTopHeight = document.getElementById('maintopcard').offsetHeight;
this.aceEditorHeight = bodyTopHeight - 50;
}, 100)
}, },
activated() { activated() {
this.loadDatasourceList(); this.loadDatasourceList();
@@ -312,8 +310,23 @@ export default {
paramArr.forEach(item => { paramArr.forEach(item => {
this.sqlParams.push({key: item, value: this.sqlParamHistory[item] || ''}); this.sqlParams.push({key: item, value: this.sqlParamHistory[item] || ''});
}); });
if (this.sqlParams.length > 0) {
let aceEditorButtonHeight = this.aceEditorButtonHeight;
let aceEditorHeight = this.aceEditorHeight;
if (this.sqlParams.length > 0) {
if(this.changeFlag){
this.rightBodyTopHeight = aceEditorButtonHeight + aceEditorHeight + 35 +20;
this.elementHeightCalculation();
this.changeFlag = false;
this.changeFlag2 = true;
}
}else{
if(!this.changeFlag&&this.changeFlag2){
this.rightBodyTopHeight = aceEditorButtonHeight + aceEditorHeight + 20 ;
this.elementHeightCalculation();
this.changeFlag2 = false;
this.changeFlag = true;
}
} }
this.sqlParamWaiting = false; this.sqlParamWaiting = false;
}, 300); }, 300);
@@ -405,7 +418,8 @@ export default {
this.sqlExecutorEditor.insert(dataSql); this.sqlExecutorEditor.insert(dataSql);
} }
}, },
doExecutorSql(init) { //执行sql（type=noPage查看所有）
doExecutorSql(init,type) {
if (!this.choiceDatasourceId) { if (!this.choiceDatasourceId) {
this.$message.error("请先选择数据源"); this.$message.error("请先选择数据源");
return; return;
@@ -414,111 +428,7 @@ export default {
this.$message.error("请先选择数据库"); this.$message.error("请先选择数据库");
return; 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,
params: JSON.stringify(sqlParamObj),
}).then(response => {
this.sqlExecuting = 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, desc: 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,
totalCount: dataListRes.length,
dataCols: previewColumns,
dataList: dataListRes
});
resIndex++;
//动态设置表格高度,尽量避免出现滚动条
if (result.selectCount) {
this.height = this.rightBodyButtomTabsContentHeight - 40;
}
});
//多个结果情况下,且点击分页
if (init != 1) {
this.executeShowTable = (resIndex === 1) ? "tabInfo" : "result_1";
}
this.executeResultInfo = executeResultInfo;
this.executeResultList = executeResultList;
this.loadHistoryList();
});
},
//查看所有数据
viewAllData(init) {
this.loadingAll = true; this.loadingAll = true;
if (!this.choiceDatasourceId) {
this.$message.error("请先选择数据源");
return;
}
this.executeError = ""; this.executeError = "";
this.executeUseTime = ""; this.executeUseTime = "";
this.executeResultList = []; this.executeResultList = [];
@@ -541,8 +451,8 @@ export default {
executeId: this.nowExecutorId, executeId: this.nowExecutorId,
pageNum: this.currentPage, pageNum: this.currentPage,
pageSize: this.pageSize, pageSize: this.pageSize,
type: type,
sql: sqlValue, sql: sqlValue,
type: 'noPage',
params: JSON.stringify(sqlParamObj), params: JSON.stringify(sqlParamObj),
}).then(response => { }).then(response => {
this.sqlExecuting = false; this.sqlExecuting = false;
@@ -605,11 +515,11 @@ export default {
dataList: dataListRes dataList: dataListRes
}); });
resIndex++; resIndex++;
//动态设置表格高度,尽量避免出现滚动条 //动态设置表格高度
if (result.selectCount) { if (result.selectCount) {
this.height = this.rightBodyButtomTabsContentHeight -40; this.height = this.rightBodyButtomTabsContentHeight - 40;
}else{ }else{
this.height = this.rightBodyButtomTabsContentHeight -20; this.height = this.rightBodyButtomTabsContentHeight - 20;
} }
}); });
//多个结果情况下,且点击分页 //多个结果情况下,且点击分页
@@ -621,6 +531,10 @@ export default {
this.loadHistoryList(); this.loadHistoryList();
}); });
}, },
//查看所有数据
viewAllData(init) {
this.doExecutorSql(init,'noPage');
},
handleCurrentChange(to) { handleCurrentChange(to) {
this.currentPage = to; this.currentPage = to;
let init = 1; let init = 1;
@@ -817,28 +731,16 @@ export default {
// 计算并应用位移量 // 计算并应用位移量
let endY = e2.clientY; let endY = e2.clientY;
let moveLen = startY - endY; let moveLen = startY - endY;
if ((moveLen < 0 && this.rightBodyTopHeight < 450) || (moveLen > 0 && this.rightBodyTopHeight > 100)) { if ((moveLen < 0 && this.rightBodyTopHeight < 480) || (moveLen > 0 && this.rightBodyTopHeight > 100)) {
startY = endY; startY = endY;
this.rightBodyTopHeight -= moveLen; this.rightBodyTopHeight -= moveLen;
if (this.rightBodyTopHeight < 100) { if (this.rightBodyTopHeight < 100) {
this.rightBodyTopHeight = 100; this.rightBodyTopHeight = 100;
} }
if (this.rightBodyTopHeight > 450) { if (this.rightBodyTopHeight > 480) {
this.rightBodyTopHeight = 450; this.rightBodyTopHeight = 480;
} }
//浏览器页面高度 this.elementHeightCalculation();
let winHeight = window.innerHeight;
//主体高度
let bodyHeight = winHeight - 82;
this.rightBodyHeight = bodyHeight;
let bodyButtomHeight = bodyHeight - this.rightBodyTopHeight - 10;
this.rightBodyButtomHeight = bodyButtomHeight;
this.rightBodyButtomTabsHeight = bodyButtomHeight - 20;
this.rightBodyButtomTabsContentHeight = this.rightBodyButtomTabsHeight - 50
//虚拟表格高度
this.height = this.rightBodyButtomTabsContentHeight-40;
//触发编辑器高度变化监听
this.aceEditorHeight = this.rightBodyTopHeight - 50;
} }
}; };
document.onmouseup = () => { document.onmouseup = () => {
@@ -851,7 +753,8 @@ export default {
return false; return false;
}; };
}, },
elementHeightCalculation(){ //高度计算初始化
elementHeightCalculationInit(){
//浏览器页面高度 //浏览器页面高度
let winHeight = window.innerHeight; let winHeight = window.innerHeight;
//主体高度 //主体高度
@@ -865,6 +768,32 @@ export default {
this.rightBodyButtomTabsContentHeight = this.rightBodyButtomTabsHeight - 50; this.rightBodyButtomTabsContentHeight = this.rightBodyButtomTabsHeight - 50;
//虚拟表格高度 //虚拟表格高度
this.height = this.rightBodyButtomTabsContentHeight; this.height = this.rightBodyButtomTabsContentHeight;
setTimeout(() => {
this.aceEditorButtonHeight = 30;
//主体上半部分高度
let bodyTopHeight = document.getElementById('maintopcard').offsetHeight;
this.aceEditorHeight = bodyTopHeight - this.aceEditorButtonHeight-20 -10;
}, 500)
},
//高度实时计算
elementHeightCalculation(){
//浏览器页面高度
let winHeight = window.innerHeight;
//主体高度
let bodyHeight = winHeight - 82;
this.rightBodyHeight = bodyHeight;
let bodyButtomHeight = bodyHeight - this.rightBodyTopHeight - 10;
this.rightBodyButtomHeight = bodyButtomHeight;
this.rightBodyButtomTabsHeight = bodyButtomHeight - 20;
this.rightBodyButtomTabsContentHeight = this.rightBodyButtomTabsHeight - 50
//虚拟表格高度
this.height = this.rightBodyButtomTabsContentHeight-40;
//触发编辑器高度变化监听
this.aceEditorHeight = this.rightBodyTopHeight - this.aceEditorButtonHeight - 20 - 10;
if (this.sqlParams.length > 0) {
//触发编辑器高度变化监听
this.aceEditorHeight = this.rightBodyTopHeight - this.aceEditorButtonHeight - 20 - 10 -35;
}
} }
} }
} }
@@ -880,11 +809,13 @@ export default {
} }
.data-executor-vue .sql-params { .data-executor-vue .sql-params {
height: 50px;
overflow: auto;
} }
.data-executor-vue .sql-params .el-input-group { .data-executor-vue .sql-params .el-input-group {
width: auto; width: auto;
margin: 10px 10px 0 0; margin: 3px 3px 0 0;
} }
.data-executor-vue .sql-params .el-input__inner { .data-executor-vue .sql-params .el-input__inner {