单独页面配置，更加方便，逻辑更清晰

2018-12-09 22:51:36 +08:00
parent 08de8aa709
commit 5f11ab9de0
11 changed files with 455 additions and 265 deletions
--- a/zyplayer-doc-swagger/src/main/resources/webjars/mg-ui/css/mg-ui.css
+++ b/zyplayer-doc-swagger/src/main/resources/webjars/mg-ui/css/mg-ui.css
@@ -38,6 +38,7 @@ label{font-weight: normal;}

 #homePageDashboard{overflow-y: auto;bottom: 0;top: 0;right: 0;left: 0;position: absolute;overflow-x: hidden;padding: 10px;}
 #homePageDashboard .panel-body{padding: 10px;}
+.content.about{line-height: 30px;}

 #homePageLi{margin-top: 5px;}

@@ -75,6 +76,9 @@ label{font-weight: normal;}

 #exportDocumentText{height: 350px;}

+#rightContentMask{background-color: rgba(0, 0, 0, 0);display: none;position: relative;top: 0;bottom: 0;left:0;right: 0;}
+#rightZpages{height: 100%;position: relative;top: 0;bottom: 0;left:0;right: 0;}
+
 /* 在线调试框样式 */
 #tabParamBody .tab-content{padding-top: 10px;}

--- a/zyplayer-doc-swagger/src/main/resources/webjars/mg-ui/js/common.js
+++ b/zyplayer-doc-swagger/src/main/resources/webjars/mg-ui/js/common.js
@@ -266,21 +266,49 @@ String.prototype.startWith = function(str) {
 	return (this.substr(0, str.length) == str);
 };

-var rightContentTabs;
-function changeOpenZpage(id, url, icon, reload){
-	if(reload || $("#tab-"+id).length <= 0) {
-		var newTab = {id: id, url: url, type: 'iframe', icon: icon};
-		rightContentTabs.open(newTab);
-	} else {
-		$("#tab-nav-item-"+id+" .tab-nav-link").click();
-	}
+/**
+ * 获取数据，异步的操作
+ */
+function getStorage(key, success, fail) {
+	var start = (typeof urlBase === 'string') ? urlBase : '';
+	ajaxTemp(start + "swagger-mg-ui/storage/data", "get", "json", {key: key}, function(json){
+		if(json.errCode == 200) {
+			if(typeof success == "function") {
+				var result = deserialize(json.data);
+				success(result);
+			}
+		} else {
+			if(typeof fail == "function") {
+				fail();
+			}
+		}
+	}, function(msg){
+		if(typeof fail == "function") {
+			fail();
+		}
+	});
 }

-window.onload = function () {
-	// 定义标签页
-	var tabsArr = [
-		//{id: 'system-console', url: 'system/console', type: 'iframe', icon: 'icon-home', forbidClose: true},
-	];
-	$('#rightZpages').tabs({tabs: tabsArr});
-	rightContentTabs = $('#rightZpages').data('zui.tabs');
-}
+/**
+ * 存储数据，异步的操作
+ */
+function setStorage(key, value, success, fail) {
+	value = $.zui.store.serialize(value);
+	var start = (typeof urlBase === 'string') ? urlBase : '';
+	ajaxTemp(start + "swagger-mg-ui/storage/data", "post", "json", {key: key, value: value}, function(json){
+		if(json.errCode == 200) {
+			if(typeof success == "function") {
+				success();
+			}
+		} else {
+			if(typeof fail == "function") {
+				fail(getNotEmptyStr(json.errMsg));
+			}
+		}
+	}, function(msg){
+		if(typeof fail == "function") {
+			fail("");
+		}
+		console.log("存储数据到服务器失败，请检查");
+	});
+}
--- a/zyplayer-doc-swagger/src/main/resources/webjars/mg-ui/js/mg-ui-debug.js
+++ b/zyplayer-doc-swagger/src/main/resources/webjars/mg-ui/js/mg-ui-debug.js
@@ -159,7 +159,7 @@ $(document).ready(function(){
 	 * 在线调试管理
 	 */
 	$("#onlineDebugLi").click(function(){
-		$(".tab-page").hide();
+		$(".tab-page,.tab-zpages").hide();
 		$(".tab-online-debug-page").show();
 		createOnlineDebugParamTable();
 	});
--- a/zyplayer-doc-swagger/src/main/resources/webjars/mg-ui/js/mg-ui.js
+++ b/zyplayer-doc-swagger/src/main/resources/webjars/mg-ui/js/mg-ui.js
@@ -47,6 +47,8 @@ var requestParamObjTemp = {
 	}
 };

+var rightContentTabs;
+
 /**
 * 网页加载完毕后的处理
 */
@@ -140,9 +142,11 @@ $("#resizebleLeftRight").mgResizebleWidth({
 	},
 	onstart:function(){
 		$("body").addClass("unselect");
+		$("#rightContentMask").show();
 	},
 	onfinish:function(){
 		$("body").removeClass("unselect");
+		$("#rightContentMask").hide();
 		storeUserSettings();
 	}
 });
@@ -212,18 +216,10 @@ $("#searchDocBt").click(function(){
 	searchDoc();
 });

-/**
- * 增加文档
- */
-$("#addNewDocument").click(function(){
-	$('#addNewDocumentInput').val("");
-	$('#addNewDocumentModal').modal({moveable:true});
-});
-
 /**
 * 导出文档
 */
-$("#exportDocument").click(function(){
+function exportDocument(){
 	// 清空
 	$("#exportDocumentText").val("");
 	$("#exportDocumentUl").show();
@@ -237,7 +233,7 @@ $("#exportDocument").click(function(){
 	}
 	$('#exportDocumentModal').modal({moveable:true, backdrop: 'static'});
 	$('#exportDocumentModal').modal('ajustPosition', 'fit');
-});
+}

 $("#doExportBtn").click(function(){
 	var jsonStrAll = "";
@@ -264,46 +260,30 @@ $("#doExportBtn").click(function(){
 	$('#exportDocumentModal').modal('ajustPosition', 'fit');
 });

+/**
+ * 切换选中和非选中样式
+ */
 $(".choise").on("click", "li", function(){
 	$(this).toggleClass("checked");
 });

 /**
- * 恢复默认
+ * 页面导航切换
 */
-$("#restoreDefault").click(function(){
-	userSettings = defaultUserSettings;
-	$("input[name='treeShowType'][value='"+userSettings.treeShowType+"']").prop("checked",true);
-	$("input[name='catalogShowType'][value='"+userSettings.catalogShowType+"']").prop("checked",true);
-	$("input[name='showParamType'][value='"+userSettings.showParamType+"']").prop("checked",true);
-	storeUserSettings();
-	document.location.reload();
-});
-
-/**
- * 导出配置
- */
-$("#exportSetting").click(function(){
-	$("#exportSettingText").val(JSON.stringify(userSettings));
-	$('#exportSettingModal').modal({moveable:true});
-});
-
-/**
- * 导入配置
- */
-$("#importSetting").click(function(){
-	$("#importSettingText").val("");
-	$('#importSettingModal').modal({moveable:true});
-});
-
-/**
- * 导入配置-确认
- */
-$("#importSettingBtn").click(function(){
-	var exportSettingText = $("#importSettingText").val();
-	userSettings = JSON.parse(exportSettingText);
-	$('#importSettingModal').modal('hide');
-	storeUserSettings();
+$("#tabZpagesNavigationLi").on("click", ".page-nav", function(){
+	var id = $(this).data("id");
+	var href = $(this).data("href");
+	var icon = $(this).data("icon");
+	var reload = $(this).data("reload");
+	$(".tab-page").hide();
+	$(".tab-online-debug-page").hide();
+	$(".tab-zpages").show();
+	if(reload || $("#tab-"+id).length <= 0) {
+		var newTab = {id: id, url: href, type: 'iframe', icon: icon};
+		rightContentTabs.open(newTab);
+	} else {
+		$("#tab-nav-item-"+id+" .tab-nav-link").click();
+	}
 });

 /**
@@ -348,7 +328,7 @@ $("#addNewDocumentBtn").click(function(){
 * 主页li点击事件，展示主页
 */
 $("#homePageLi").click(function(){
-	$(".tab-page").hide();
+	$(".tab-page,.tab-zpages").hide();
 	$(".tab-home-page").show();
 });

@@ -872,7 +852,7 @@ function getRequestParamObj(responsesObj, prevRef) {
 function changeContentWidth(width) {
 	$("#leftContent").css("width", width + 'px');
 	$("#resizebleLeftRight").css("left", width + 'px');
-	$("#rightContent").css("left", width + 'px');
+	$("#rightContent,#rightContentMask").css("left", width + 'px');
 	var logoText = "zyplayer-doc-swagger";
 	if(width < 370 && width > 290){
 		logoText = "zyplayer-doc";
@@ -919,9 +899,9 @@ function addHomePageDashboard(json, fullUrl) {
 				+'<div class="panel-heading">'
 					+'<div class="title">'+info.title+'</div>'
 					+'<div class="panel-actions">'
-						+'<button type="button" class="btn remove-panel" data-placement="bottom">'
-							+'<i class="icon-remove"></i>'
-						+'</button>'
+//						+'<button type="button" class="btn remove-panel" data-placement="bottom">'
+//							+'<i class="icon-remove"></i>'
+//						+'</button>'
 					+'</div>'
 				+'</div>'
 				+'<div class="panel-body">'
@@ -958,11 +938,18 @@ function addHomePageDashboard(json, fullUrl) {
 */
 function documentLoadFinish() {
 	showGlobalLoadingMessage('文档解析完成！', false);
+	// 定义配置的标签页
+	var tabsArr = [
+		{id: 'docShowConfig', url: 'webjars/zpages/docShowConfig.html', type: 'iframe', icon: 'icon-cog', forbidClose: true},
+	];
+	$('#rightZpages').tabs({tabs: tabsArr});
+	rightContentTabs = $('#rightZpages').data('zui.tabs');
+	// 隐藏提示框
 	setTimeout(function() {
 		globalLoadingMessager.hide();
 	}, 1000);
 	$('#apiPathTree .projects').tree();
-	$('#homePageDashboard').dashboard({draggable: true,
+	$('#homePageDashboard').dashboard({draggable: false,
 		// 修改排序
 		afterOrdered:function(newOrders){
 			/*//console.log(newOrders);
@@ -1048,48 +1035,10 @@ function storeUserSettings() {
 }

 /**
- * 获取数据，异步的操作
+ * 更新用户设置
 */
-function getStorage(key, success, fail) {
-	ajaxTemp("swagger-mg-ui/storage/data", "get", "json", {key: key}, function(json){
-		if(json.errCode == 200) {
-			if(typeof success == "function") {
-				var result = deserialize(json.data);
-				success(result);
-			}
-		} else {
-			if(typeof fail == "function") {
-				fail();
-			}
-		}
-	}, function(msg){
-		if(typeof fail == "function") {
-			fail();
-		}
-	});
-}
-
-/**
- * 存储数据，异步的操作
- */
-function setStorage(key, value, success, fail) {
-	value = $.zui.store.serialize(value);
-	ajaxTemp("swagger-mg-ui/storage/data", "post", "json", {key: key, value: value}, function(json){
-		if(json.errCode == 200) {
-			if(typeof success == "function") {
-				success();
-			}
-		} else {
-			if(typeof fail == "function") {
-				fail(getNotEmptyStr(json.errMsg));
-			}
-		}
-	}, function(msg){
-		if(typeof fail == "function") {
-			fail("");
-		}
-		console.log("存储数据到服务器失败，请检查");
-	});
+function updateUserSettings(newSetting) {
+	userSettings = newSetting;
 }

 /**
--- a/zyplayer-doc-swagger/src/main/resources/webjars/mg-ui/js/toast.js
+++ b/zyplayer-doc-swagger/src/main/resources/webjars/mg-ui/js/toast.js
@@ -11,6 +11,13 @@ var Toast = {
 		};
 		this.show(data);
 	},
+	success:function(msg, time){
+		var data = {
+				message:msg,time:time,
+				icon: 'check-circle-o',type:'success',
+		};
+		this.show(data);
+	},
 	warn:function(msg, time){
 		var data = {
 			message:msg,time:time,
--- a/zyplayer-doc-swagger/src/main/resources/webjars/zpages/debugDataConfig.html
+++ b/zyplayer-doc-swagger/src/main/resources/webjars/zpages/debugDataConfig.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>调试数据管理</title>
+<link rel="stylesheet" type="text/css" href="../zui/css/zui.min.css">
+</head>
+
+<body>
+	<div id="app">
+		调试数据管理
+	</div>
+</body>
+<script src="../zui/js/zui.min.js"></script>
+<script src="../mg-ui/js/jquery-3.1.0.min.js"></script>
+<script src="../vue/vue.js"></script>
+
+<script>
+	var app = new Vue({
+		el: '#app',
+		data: {
+			userId: "",
+		},
+		methods: {
+			
+		}
+	});
+</script>
+
+<style>
+	
+</style>
+</html>
+
+
+
--- a/zyplayer-doc-swagger/src/main/resources/webjars/zpages/docShowConfig.html
+++ b/zyplayer-doc-swagger/src/main/resources/webjars/zpages/docShowConfig.html
@@ -9,27 +9,129 @@

 <body>
 	<div id="app">
-		文档展示配置
+		<table class="table table-bordered setting-table">
+			<thead>
+				<tr>
+					<td style="width: 150px;">参数名</td>
+					<td style="width: 300px;">参数值</td>
+					<td>说明</td>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td class="info">目录展示方式</td>
+					<td>
+						<label><input type="radio" name="catalogShowType" value="1" v-model="catalogShowType">分路径展示</label>
+						<label><input type="radio" name="catalogShowType" value="2" v-model="catalogShowType">分标签展示</label>
+					</td>
+					<td>分路径：/api/data/getDataList 分标签：/api└/data└/getDateList└post└get</td>
+				</tr>
+				<tr>
+					<td class="info">树形菜单展示方式</td>
+					<td>
+						<label><input type="radio" name="treeShowType" value="1" v-model="treeShowType">直角</label>
+						<label><input type="radio" name="treeShowType" value="2" v-model="treeShowType">导航</label>
+						<label><input type="radio" name="treeShowType" value="3" v-model="treeShowType">加减</label>
+						<label><input type="radio" name="treeShowType" value="4" v-model="treeShowType">文件夹</label>
+						<label><input type="radio" name="treeShowType" value="5" v-model="treeShowType">V型</label>
+					</td>
+					<td>请自行修改体验</td>
+				</tr>
+				<tr>
+					<td class="info">是否展示字段的类型</td>
+					<td>
+						<label><input type="radio" name="showParamType" value="1" v-model="showParamType">是</label>
+						<label><input type="radio" name="showParamType" value="0" v-model="showParamType">否</label>
+					</td>
+					<td>文档中是否展示类型："reference": "(boolean)"</td>
+				</tr>
+				<tr>
+					<td class="info">仅使用上次请求参数</td>
+					<td>
+						<label><input type="radio" name="onlyUseLastParam" value="1" v-model="onlyUseLastParam">是</label>
+						<label><input type="radio" name="onlyUseLastParam" value="0" v-model="onlyUseLastParam">否</label>
+					</td>
+					<td>每个接口都使用最后一次请求的header、form、body参数，参数列表有但上一次请求没有使用的则不会展示在请求参数里面，从未请求过则展示所有参数</td>
+				</tr>
+				<tr>
+					<td class="info">自动填充请求参数</td>
+					<td>
+						<label><input type="radio" name="autoFillParam" value="0" v-model="autoFillParam">否</label>
+						<label><input type="radio" name="autoFillParam" value="1" v-model="autoFillParam">智能填充</label>
+						<label><input type="radio" name="autoFillParam" value="2" v-model="autoFillParam">全部填充</label>
+					</td>
+					<td>否：不填充，智能填充：只填充flag、time等后缀的参数，全部填充：对应不上类型的使用“我是默认字符串”填充</td>
+				</tr>
+			</tbody>
+		</table>
 	</div>
 </body>
-<script src="../zui/js/zui.min.js"></script>
 <script src="../mg-ui/js/jquery-3.1.0.min.js"></script>
+<script src="../zui/js/zui.min.js"></script>
+<script src="../mg-ui/js/common.js"></script>
 <script src="../vue/vue.js"></script>

 <script>
+	var urlBase = "../../";
 	var app = new Vue({
 		el: '#app',
 		data: {
-			userId: "",
+			catalogShowType: '',
+			treeShowType: '',
+			showParamType:'',
+			onlyUseLastParam: '',
+			autoFillParam: '',
+			userSettings: {}
 		},
 		methods: {
 			
+		},
+		mounted: function(){
+			getStorage('userSettings', function(data){
+				app.userSettings = data;
+				app.catalogShowType = data.catalogShowType;
+				app.treeShowType = data.treeShowType;
+				app.showParamType = data.showParamType;
+				app.onlyUseLastParam = data.onlyUseLastParam;
+				app.autoFillParam = data.autoFillParam;
+			});
+		},
+		watch: {
+			catalogShowType: function(newVal, oldval){
+				app.userSettings.catalogShowType = newVal;
+				storeUserSettings();
+				window.parent.window.regeneratePathTree();
+			},
+			treeShowType: function(newVal, oldval){
+				app.userSettings.treeShowType = newVal;
+				storeUserSettings();
+				window.parent.window.updateTreeShowType();
+			},
+			showParamType: function(newVal, oldval){
+				app.userSettings.showParamType = newVal;
+				storeUserSettings();
+			},
+			onlyUseLastParam: function(newVal, oldval){
+				app.userSettings.onlyUseLastParam = newVal;
+				storeUserSettings();
+			},
+			autoFillParam: function(newVal, oldval){
+				app.userSettings.autoFillParam = newVal;
+				storeUserSettings();
+			},
 		}
 	});
+	
+	// 存储用户的配置信息
+	function storeUserSettings(){
+		setStorage('userSettings', app.userSettings, function(){
+			window.parent.window.updateUserSettings(app.userSettings);
+		});
+	}
 </script>

 <style>
-	
+	#app{padding-top: 10px;}
 </style>
 </html>

--- a/zyplayer-doc-swagger/src/main/resources/webjars/zpages/docUrlConfig.html
+++ b/zyplayer-doc-swagger/src/main/resources/webjars/zpages/docUrlConfig.html
@@ -0,0 +1,140 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>文档地址管理</title>
+<link rel="stylesheet" type="text/css" href="../zui/css/zui.min.css">
+</head>
+
+<body>
+	<div id="app">
+		<table class="table table-bordered setting-table">
+			<thead>
+				<tr>
+					<td style="width: 50px;">序号</td>
+					<td>地址</td>
+					<td>操作</td>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="(item,index) in swaggerResourcesList" :key="item.id" :data-id="item.id" :data-index="index" >
+					<td>{{index+1}}</td>
+					<td>{{item}}</td>
+					<td>
+						<button class="btn btn-danger" type="button" v-on:click="deleteDocUrl($event)">删除</button>
+					</td>
+				</tr>
+				<tr>
+					<td colspan="3" align="center">
+						<button class="btn" type="button" v-on:click="btnRefreshList">　刷新　</button>
+						<button class="btn btn-info" type="button" v-on:click="exportDocument">导出文档</button>
+						<button class="btn btn-primary" type="button" v-on:click="addNewDocument">增加文档</button>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+		<!-- 增加文档弹出框 -->
+		<div class="modal fade" id="addNewDocumentModal">
+			<div class="modal-dialog">
+				<div class="modal-content">
+					<div class="modal-header">
+						<button type="button" class="close" data-dismiss="modal">
+							<span aria-hidden="true">×</span><span class="sr-only">关闭</span>
+						</button>
+						<h4 class="modal-title">输入文档地址</h4>
+					</div>
+					<div class="modal-body">
+						<input v-model="addNewDocumentInput" type="text" class="form-control" placeholder="例：http://192.168.0.172/swagger-resources">
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-primary" v-on:click="addNewDocumentBtn">保存</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</body>
+<script src="../mg-ui/js/jquery-3.1.0.min.js"></script>
+<script src="../zui/js/zui.min.js"></script>
+<script src="../mg-ui/js/common.js"></script>
+<script src="../vue/vue.js"></script>
+<script src="../mg-ui/js/toast.js"></script>
+
+<script>
+	var urlBase = "../../";
+	var app = new Vue({
+		el: '#app',
+		data: {
+			swaggerResourcesList: [],
+			addNewDocumentInput: ''
+		},
+		methods: {
+			btnRefreshList: function(){
+				this.refreshList();
+				Toast.success("刷新成功！");
+			},
+			refreshList: function(){
+				getStorage('swagger-resources-list', function(data){
+					//console.log(data);
+					app.swaggerResourcesList = data;
+				});
+			},
+			addNewDocument: function(){
+				app.addNewDocumentInput = '';
+				$('#addNewDocumentModal').modal({moveable:true});
+			},
+			addNewDocumentBtn: function(){
+				var addNewDocumentInput = app.addNewDocumentInput;
+				if(isEmpty(addNewDocumentInput)) {
+					Toast.error("地址不可以为空");return;
+				}
+				ajaxTemp(urlBase + "swagger-mg-ui/document/addSwaggerResources", "post", "json", {resourcesUrl: addNewDocumentInput}, function(json){
+					if(validateResult(json)) {
+						//window.parent.document.location.reload();
+						app.swaggerResourcesList.push(addNewDocumentInput);
+						$('#addNewDocumentModal').modal('hide');
+						Toast.success("保存成功，刷新后生效！");
+					}
+				});
+			},
+			exportDocument: function(){
+				window.parent.window.exportDocument();
+			},
+			deleteDocUrl: function(event){
+				if(!confirm("确定要删除吗？")) {
+					return;
+				}
+				var tr = $(event.currentTarget).parents("tr");
+				var index = tr.data("index");
+				var newDocList = [];
+				for(var i=0;i<app.swaggerResourcesList.length;i++){
+					if(i != index) {
+						newDocList.push(app.swaggerResourcesList[i]);
+					}
+				}
+				setStorage('swagger-resources-list', newDocList, function(data){
+					app.swaggerResourcesList = newDocList;
+				});
+			}
+		},
+		mounted: function(){
+			this.refreshList();
+		},
+		watch: {
+			catalogShowType: function(newVal, oldval){
+				app.userSettings.catalogShowType = newVal;
+				storeUserSettings();
+				window.parent.window.regeneratePathTree();
+			}
+		}
+	});
+</script>
+
+<style>
+	#app{padding-top: 10px;}
+</style>
+</html>
+
+
+
--- a/zyplayer-doc-swagger/src/main/resources/webjars/zpages/globalParamConfig.html
+++ b/zyplayer-doc-swagger/src/main/resources/webjars/zpages/globalParamConfig.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>全局参数管理</title>
+<link rel="stylesheet" type="text/css" href="../zui/css/zui.min.css">
+</head>
+
+<body>
+	<div id="app">
+		全局参数管理
+	</div>
+</body>
+<script src="../zui/js/zui.min.js"></script>
+<script src="../mg-ui/js/jquery-3.1.0.min.js"></script>
+<script src="../vue/vue.js"></script>
+
+<script>
+	var app = new Vue({
+		el: '#app',
+		data: {
+			userId: "",
+		},
+		methods: {
+			
+		}
+	});
+</script>
+
+<style>
+	
+</style>
+</html>
+
+
+