SQL工作台：将结果区改成选项卡展示方式，用于支持添加SQL查询结果卡片

datagear-web/src/main/webapp/WEB-INF/view/main.ftl

@@ -27,7 +27,7 @@
 		var schemaId = schema.id;
 		
 		var mainTabs = po.element("#mainTabs");
-		var uiTabsNav = mainTabs.find(".ui-tabs-nav");
+		var uiTabsNav = mainTabs.find("> .ui-tabs-nav");
 		
 	    var prelia = $("> li > a[href='#"+tabId+"']", uiTabsNav);
 	    if(prelia.length > 0)

datagear-web/src/main/webapp/WEB-INF/view/sqlpad/sqlpad.ftl

@@ -84,12 +84,22 @@ select count(*) from t_order where id = 3 and name = 'jack';
 				</div>
 			</div>
 		</div>
-		<div id="${pageId}-sql-result" class="content-result">
-			<div class="result-head button-operation">
+		<div class="content-result">
+			<div id="sqlResultTabs" class="result-tabs">
+				<ul>
+					<li><a href="#${pageId}-resultMessage">消息</a></li>
+					<li><a href="#${pageId}-resultMessage">消息</a></li>
+					<li><a href="#${pageId}-resultMessage">消息</a></li>
+				</ul>
+				<div id="${pageId}-resultMessage" class="result-message">
+					
+				</div>
+			</div>
+			<div class="result-operations button-operation">
 				<button id="toggleAutoClearResultButton" class="ui-button ui-corner-all ui-widget ui-button-icon-only stated-active" title="<@spring.message code='sqlpad.keepResult' />"><span class="ui-button-icon ui-icon ui-icon-pin-s"></span><span class="ui-button-icon-space"> </span><@spring.message code='sqlpad.keepResult' /></button>
 				<button id="clearResultButton" class="ui-button ui-corner-all ui-widget ui-button-icon-only" title="<@spring.message code='sqlpad.clearSqlResult' />"><span class="ui-button-icon ui-icon ui-icon-trash"></span><span class="ui-button-icon-space"> </span><@spring.message code='sqlpad.clearSqlResult' /></button>
 			</div>
-			<div class="result-content ui-widget ui-widget-content"></div>
+			
 		</div>
 	</div>
 	<div class="foot">
@@ -112,7 +122,7 @@ select count(*) from t_order where id = 3 and name = 'jack';
 	po.sqlpadId = "${sqlpadId}";
 	po.sqlpadChannelId = "${sqlpadChannelId}";
 	
-	po.sqlResultContentElement = po.element("#${pageId}-sql-result > .result-content");
+	po.resultMessageElement = po.element("#${pageId}-resultMessage");
 	
 	$.initButtons(po.element(".head"));
 	po.element("#sqlCommitModeSet").buttonset();
@@ -185,7 +195,7 @@ select count(*) from t_order where id = 3 and name = 'jack';
 	po.requestExecuteSql = function(sql, sqlStartRow, sqlStartColumn, commitMode, exceptionHandleMode, overTimeThreashold)
 	{
 		if(!po.element("#toggleAutoClearResultButton").hasClass("ui-state-active"))
-			po.sqlResultContentElement.empty();
+			po.resultMessageElement.empty();
 		
 		$.ajax(
 		{
@@ -365,7 +375,7 @@ select count(*) from t_order where id = 3 and name = 'jack';
 						$("<pre />").text($this.next(".sql-exception-detail").text()).appendTo($seDetailContent);
 						
 						//XXX "of: $this"如果$this很长的话，$seDetailPanel定位不对
-						$seDetailPanel.show().position({ my : "center bottom", at : "center top", of : po.sqlResultContentElement});
+						$seDetailPanel.show().position({ my : "center bottom", at : "center top", of : po.resultMessageElement});
 					}
 				});
 			}
@@ -421,8 +431,8 @@ select count(*) from t_order where id = 3 and name = 'jack';
 		
 		if($msgDiv)
 		{
-			$msgDiv.appendTo(po.sqlResultContentElement);
-			po.sqlResultContentElement.scrollTop(po.sqlResultContentElement.prop("scrollHeight"));
+			$msgDiv.appendTo(po.resultMessageElement);
+			po.resultMessageElement.scrollTop(po.resultMessageElement.prop("scrollHeight"));
 		}
 	},
 	
@@ -607,7 +617,7 @@ select count(*) from t_order where id = 3 and name = 'jack';
 	
 	po.element("#clearResultButton").click(function()
 	{
-		po.sqlResultContentElement.empty();
+		po.resultMessageElement.empty();
 	});
 	
 	po.element("#moreOperationForm").validate(
@@ -645,6 +655,11 @@ select count(*) from t_order where id = 3 and name = 'jack';
 		$(this).hide();
 	});
 	
+	po.element("#sqlResultTabs").tabs(
+	{
+		event: "click",
+	});
+	
 	po.element("input[name='sqlCommitMode'][value='AUTO']").click();
 })
 (${pageId});

datagear-web/src/main/webapp/static/theme/common.css

@@ -1317,77 +1317,99 @@ table.dataTable tbody tr .column-check .row-data-state .ui-icon{
 	-moz-box-sizing: border-box;
 	-webkit-box-sizing: border-box;
 }
-.page-sqlpad .content .content-result .result-head{
-	width: 100%;
-	height: 1.1em;
-	text-align: right;
-}
-.page-sqlpad .content .content-result .result-head.button-operation button.ui-button-icon-only{
-	height: 1em;
-}
-.page-sqlpad .content .content-result .result-head.button-operation{
-	opacity: 0.7;
-	filter: Alpha(Opacity=70);
-}
-.page-sqlpad .content .content-result .result-content{
+.page-sqlpad .content .content-result .result-tabs{
 	position: absolute;
-	top: 1.1em;
-	bottom: 0px;
-	left:0px;
-	right: 0px;
-	overflow: auto;
-	border-width: 0px;
-	border-top-width: 1px;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
 	box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	-webkit-box-sizing: border-box;
 }
-.page-sqlpad .content .content-result .execution-message{
+.page-sqlpad .content .content-result .result-tabs.ui-tabs{
+	margin: 0 0;
+	padding: 0 0;
+	border-width: 0;
+}
+.page-sqlpad .content .content-result .result-tabs.ui-tabs .ui-tabs-nav{
+	margin: 0 0;
+	padding: 0 0;
+	height: 1.4em;
+	background: none;
+	border-width: 0;
+	border-bottom-width: 1px;
+	opacity: 0.7;
+	filter: Alpha(Opacity=70);
+}
+.page-sqlpad .content .content-result .result-tabs.ui-tabs .ui-tabs-nav li{
+	margin: 0 0.1em;
+	padding: 0 0;
+}
+.page-sqlpad .content .content-result .result-tabs.ui-tabs .ui-tabs-nav .ui-tabs-anchor{
+	padding: 1px 0.8em;
+}
+.page-sqlpad .content .content-result .result-operations{
+	float: right;
+	text-align: right;
+}
+.page-sqlpad .content .content-result .button-operation{
+	opacity: 0.7;
+	filter: Alpha(Opacity=70);
+}
+.page-sqlpad .content .content-result .ui-tabs-panel{
+	position: absolute;
+	top: 1.6em;
+	bottom: 0px;
+	left:0px;
+	right: 0px;
+	border-width: 0px;
+	padding: 0 0;
+	box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+}
+.page-sqlpad .content .content-result .result-message{
+	overflow: auto;
+}
+.page-sqlpad .content .content-result .result-message .execution-message{
 	padding-left: 0.41em;
 	margin-top: 0.2em;
 	margin-bottom: 0.1em;
 	white-space: nowrap;
 }
-.page-sqlpad .content .content-result .execution-message .message-time,
-.page-sqlpad .content .content-result .execution-message .message-content{
+.page-sqlpad .content .content-result .result-message .execution-message .message-time,
+.page-sqlpad .content .content-result .result-message .execution-message .message-content{
 	display: inline-block;
 	opacity: 0.7;
 	filter: Alpha(Opacity=70);
 	white-space: nowrap;
 }
-.page-sqlpad .content .content-result .execution-message .message-time{
+.page-sqlpad .content .content-result .result-message .execution-message .message-time{
 	margin-right: 0.5em;
 }
-.page-sqlpad .content .content-result .execution-message.execution-exception .message-content,
-.page-sqlpad .content .content-result .execution-message .message-content.message-content-highlight{
+.page-sqlpad .content .content-result .result-message .execution-message.execution-exception .message-content,
+.page-sqlpad .content .content-result .result-message .execution-message .message-content.message-content-highlight{
 	opacity: 0.9;
 	filter: Alpha(Opacity=90);
 }
-.page-sqlpad .content .content-result .execution-message .message-content div{
+.page-sqlpad .content .content-result .result-message .execution-message .message-content div{
 	display: inline-block;
 	margin-right: 0.41em;
 }
-.page-sqlpad .content .content-result .execution-message .message-content .sql-value{
+.page-sqlpad .content .content-result .result-message .execution-message .message-content .sql-value{
 	display: inline-block;
-    width: 30em;
+    width: 25em;
     overflow: hidden;
     white-space: nowrap;
     vertical-align: bottom;
 }
-.page-sqlpad .content .content-result .execution-message .message-content .sql-exception-summary.has-detail{
+.page-sqlpad .content .content-result .result-message .execution-message .message-content .sql-exception-summary.has-detail{
 	cursor: pointer;
 }
-.page-sqlpad .content .content-result .execution-message .message-content .sql-exception-detail{
+.page-sqlpad .content .content-result .result-message .execution-message .message-content .sql-exception-detail{
 	display: none;
 }
-.page-sqlpad .foot{
-	position: absolute;
-	width: 100%;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	height: 0;
-}
 .page-sqlpad .sql-exception-detail-panel{
 	position: absolute;
 	z-index: 99;
@@ -1410,4 +1432,12 @@ table.dataTable tbody tr .column-check .row-data-state .ui-icon{
 	left: 1em;
 	right: 1em;
 	overflow: auto;
+}
+.page-sqlpad .foot{
+	position: absolute;
+	width: 100%;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	height: 0;
 }