db模块页面体验优化

zyplayer-doc-ui/db-ui/src/App.vue

@@ -199,7 +199,7 @@ export default {
 					dbName: node.dbName,
 					tableName: node.tableName
 				};
-				this.$router.push({path: '/table/database', query: this.nowClickPath});
+				this.$router.push({path: '/table/database', query: this.nowClickPath}).catch(err => err);
 			} else if (node.type == 2) {
 				this.nowClickPath = {
 					sourceId: this.choiceDatasourceId,
@@ -207,7 +207,7 @@ export default {
 					dbName: node.dbName,
 					tableName: node.tableName
 				};
-				this.$router.push({path: '/table/info', query: this.nowClickPath});
+				this.$router.push({path: '/table/info', query: this.nowClickPath}).catch(err => err);
 			}
 		},
 		handleNodeExpand(nodeData, node) {
@@ -285,7 +285,7 @@ export default {
 							id: host + "_" + result[i].dbName, host: host, dbName: result[i].dbName,
 							name: result[i].dbName, type: 1
 						};
-						item.children = [{label: '', needLoad: true}];// 初始化一个对象，点击展开时重新查询加载
+						item.children = [{id:'1',label: '', needLoad: true}];// 初始化一个对象，点击展开时重新查询加载
 						children.push(item);
 					}
 					pathIndex.push({id: host, host: host, name: host, children: children});
@@ -313,7 +313,8 @@ export default {
 			resize.onmousedown = e =>{
 				let startX = e.clientX;
 				// 颜色改变提醒
-				resize.style.background = "#ccc";
+				resize.style.setProperty("--rightResizeColor", "#ccc");
+				//resize.style.background = "#ccc";
 				//resizeBar.style.background = "#aaa";
 				resize.left = resize.offsetLeft;
 				document.onmousemove = throttle(e2 => {
@@ -330,14 +331,8 @@ export default {
 				},10);
 				document.onmouseup = () => {
 					// 颜色恢复
-					resize.style.background = "#fafafa";
-					resize.addEventListener("mouseover", function() {
-						resize.style.backgroundColor = "#ccc";
-					});
-
-					resize.addEventListener("mouseout", function() {
-						resize.style.backgroundColor = "#fafafa";
-					});
+					resize.style.setProperty("--rightResizeColor", "#fafafa");
+					//resize.style.background = "#fafafa";
 					//resizeBar.style.background = "#ccc";
 					document.onmousemove = null;
 					document.onmouseup = null;
@@ -433,11 +428,15 @@ html, body {
 	display: inline-block;
 }
 
+:root {
+	--rightResizeColor: #fafafa;
+}
+
 .right-resize {
 	width: 5px;
 	height: 100%;
 	cursor: w-resize;
-	background: #fafafa;
+	background: var(--rightResizeColor);
 }
 
 .right-resize:hover{

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

@@ -29,7 +29,7 @@
 
 					<el-button icon="el-icon-refresh-left" size="small" @click="refreshData">重置</el-button>
 					<el-button @click="downloadTableData" type="success" size="small" icon="el-icon-download" plain
-							   style="margin-left: 30px;">导出
+							   style="margin-left: 10px;">导出
 					</el-button>
 				</div>
 			</el-card>
@@ -100,8 +100,8 @@
 											</el-tooltip>
 										</template>
 										<template slot-scope="scope">
-											<textarea readonly :value="scope.row[item.prop]" class="el-textarea__inner"
-													  rows="1"></textarea>
+											<input title="" :value="scope.row[item.prop]" class="el-textarea__inner"
+													  ></input>
 										</template>
 									</ux-table-column>
 								</ux-grid>
@@ -280,16 +280,7 @@ export default {
 		'ace-editor': aceEditor
 	},
 	mounted: function () {
-		this.height = 360;
-		// 延迟设置展开的目录，edit比app先初始化
-		// setTimeout(() => {
-		// 	this.doExecutorSqlCommon();
-		// this.$emit('initLoadDataList', {
-		// 	sourceId: this.vueQueryParam.sourceId,
-		// 	host: this.vueQueryParam.host,
-		// 	dbName: this.vueQueryParam.dbName
-		// });
-		// }, 500);
+		this.height = document.body.clientHeight - 330;
 		let resizeWindow = () => {
 			this.tableMaxHeight = document.body.clientHeight - 420;
 		};
@@ -376,6 +367,7 @@ export default {
 		},
 		doAceEditorShow() {
 			this.aceEditorShow = !this.aceEditorShow
+			this.aceEditorShow?this.height = this.height - 125:this.height = this.height + 125;
 		},
 		doExecutorSqlCommon() {
 			if (!this.pageParam.sourceId) {
@@ -678,6 +670,7 @@ export default {
 	line-height: 26px;
 	padding: 0;
 	resize: none;
+	font-size: 12px;
 }
 
 .data-executor-vue .execute-use-time {

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

@@ -141,8 +141,8 @@
 											</el-tooltip>
 										</template>
 										<template slot-scope="scope">
-											<textarea readonly :value="scope.row[item.prop]" class="el-textarea__inner"
-													  rows="1"></textarea>
+											<input title="" :value="scope.row[item.prop]" class="el-textarea__inner"
+													  ></input>
 										</template>
 									</ux-table-column>
 								</ux-grid>
@@ -529,6 +529,7 @@ export default {
 				this.executeResultInfo = executeResultInfo;
 				this.executeResultList = executeResultList;
 				this.loadHistoryList();
+
 			});
 		},
 		//查看所有数据
@@ -730,7 +731,8 @@ export default {
 			resize.onmousedown = e => {
 				let startY = e.clientY;
 				// 颜色改变提醒
-				resize.style.background = "#ccc";
+				resize.style.setProperty("--topResizeColor", "#ccc");
+				//resize.style.background = "#ccc";
 				//resizeBar.style.background = "#aaa";
 				resize.left = resize.offsetLeft;
 				document.onmousemove = throttle( e2 => {
@@ -751,14 +753,8 @@ export default {
 				},10);
 				document.onmouseup = () => {
 					// 颜色恢复
-					resize.style.background = "#fafafa";
-					resize.addEventListener("mouseover", function() {
-						resize.style.backgroundColor = "#ccc";
-					});
-
-					resize.addEventListener("mouseout", function() {
-						resize.style.backgroundColor = "#fafafa";
-					});
+					resize.style.setProperty("--topResizeColor", "#fafafa");
+					//resize.style.background = "#fafafa";
 					//resizeBar.style.background = "#ccc";
 					document.onmousemove = null;
 					document.onmouseup = null;
@@ -851,6 +847,7 @@ export default {
 	line-height: 26px;
 	padding: 0;
 	resize: none;
+	font-size: 12px;
 }
 
 .data-executor-vue .sql-content-line {
@@ -924,11 +921,15 @@ export default {
 	display: none;
 }
 
+:root {
+	--topResizeColor: #fafafa;
+}
+
 .top-resize {
 	width: 100%;
 	height: 5px;
 	cursor: s-resize;
-	background: #fafafa;
+	background: var(--topResizeColor);
 	display: flex;
 }
 

zyplayer-doc-ui/db-ui/src/views/table/Info.vue

@@ -17,7 +17,7 @@
 							<el-button plain type="primary" @click="showCreateTableDdl" style="margin-left: 10px;" icon="el-icon-magic-stick">DDL</el-button>
 						</el-col>
 					</el-row>
-					<el-table :data="columnList" stripe border style="width: 100%; margin-bottom: 5px;">
+					<el-table :data="columnList" stripe border :height="height" style="width: 100%; margin-bottom: 5px;">
 						<el-table-column prop="name" label="字段名" width="220"></el-table-column>
 						<el-table-column label="自增" width="50">
 							<template slot-scope="scope">{{scope.row.selfIncrement ? '是' : '否'}}</template>
@@ -150,6 +150,7 @@
                 tableDDLInfoDialogVisible: false,
 				// 标签
 				tabActiveName: 'columns',
+				height: document.body.clientHeight - 200
             };
         },
 		mounted: function () {