优化文档存储，展示文档选择

2019-01-27 22:28:35 +08:00
parent 1083d05803
commit c32fc3f05d
11 changed files with 797 additions and 215 deletions
--- a/zyplayer-doc-swagger/src/main/resources/document.html
+++ b/zyplayer-doc-swagger/src/main/resources/document.html
@@ -17,6 +17,12 @@
 			<i class="icon icon-bars" id="changeContentWidth"></i>
 		</div>
 		<div class="scrollbar-hover left-container">
+			<div class="btn-group choice-location-list" id="choiceLocationList">
+				<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+					<span class="choice-text"></span> <span class="caret"></span>
+				</button>
+				<ul class="dropdown-menu" role="menu"></ul>
+			</div>
 			<!-- 样式类可选：tree-menu tree-folders tree-chevrons tree-angles -->
 			<ul class="tree tree-lines tree-menu projects" data-ride="tree">
 				<li>
@@ -34,6 +40,7 @@
 						<li id="onlineDebugLi1" class="local-storage"><a href="javascript:void(0)" path=""><i class="icon-bug"></i> 在线调试管理</a></li>
 						<li><a href="#" class="page-nav" data-id="docShowConfig" data-href="webjars/zpages/docShowConfig.html" data-icon="icon-cog" data-reload="0"><i class="icon-cog"></i> 文档展示配置</a></li>
 						<li><a href="#" class="page-nav" data-id="docUrlConfig" data-href="webjars/zpages/docUrlConfig.html" data-icon="icon-list-ul" data-reload="1"><i class="icon-list-ul"></i> 文档地址管理</a></li>
+						<li><a href="#" class="page-nav" data-id="docUrlDetailConfig" data-href="webjars/zpages/docUrlDetailConfig.html" data-icon="icon-list-ul" data-reload="1"><i class="icon-list-ul"></i> 详细地址管理</a></li>
 						<li><a href="#" class="page-nav" data-id="globalParamConfig" data-href="webjars/zpages/globalParamConfig.html" data-icon="icon-globe" data-reload="1"><i class="icon-globe"></i> 全局参数管理</a></li>
 						<li><a href="#" class="page-nav" data-id="debugDataConfig" data-href="webjars/zpages/debugDataConfig.html" data-icon="icon-bug" data-reload="1"><i class="icon-bug"></i> 调试数据管理</a></li>
 					</ul>
@@ -48,7 +55,10 @@
 	<div class="right-container" id="rightContent">
 		<div class="right-container" id="rightContentMask"></div>
 		<div class="tab-page tab-home-page">
-			<div id="homePageDashboard" class="dashboard" data-height="320">
+			<div id="homePageDashboard">
+				<div class="dashboard" data-height="320"></div>
+			</div>
+			<div id="homePageDashboardTemplate" class="hidden">
 				<section class="row">
 					<div class="col-md-6 col-sm-6">
 						<div class="panel" data-id="1">
--- 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
@@ -18,6 +18,11 @@ ul{list-style: none;list-style-type: none;}

 .local-storage{display: none;}

+.choice-location-list{margin-bottom: 10px; width: 100%;}
+.choice-location-list .btn.dropdown-toggle{width: 100%; text-align: left;}
+.choice-location-list .dropdown-menu{width: 100%;}
+.choice-location-list .caret{float: right;margin-top: 8px;}
+
 /**lable的覆盖样式*/
 .label{font-size: 100%;}
 .label-warning {background-color: #f9f5ee; color: #f1a325;}
--- a/zyplayer-doc-swagger/src/main/resources/webjars/mg-ui/js/mg-ui-cache-keys.js
+++ b/zyplayer-doc-swagger/src/main/resources/webjars/mg-ui/js/mg-ui-cache-keys.js
@@ -4,6 +4,7 @@
 var cacheKeys = {
    userSettings: 'userSettings',
    swaggerResourcesList: 'swagger-resources-list',
+    swaggerLocationList: 'swagger-location-list',
    globalParamList: 'zyplayer-doc-global-param-list',
    pRequestObjStart: 'p-request-obj-',
    pSimulationResponse: 'p-simulation-response',
--- 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
@@ -49,13 +49,13 @@ $(document).ready(function(){
 	ajaxTemp("swagger-mg-ui/storage/checkConfig", "post", "json", {
 		}, function(json){
 		}, function(msg){
-		}, function(xhr){
+		}, function (xhr) {
 			showGlobalLoadingMessage('服务检查完成，请稍候...', true);
 			var serverStorage = false;
-			if(!isEmptyObject(xhr.responseJSON)) {
+			if (!isEmptyObject(xhr.responseJSON)) {
 				serverStorage = (xhr.responseJSON.errCode == 200);
 			}
-			if(!serverStorage) {
+			if (!serverStorage) {
 				Toast.error("服务器端能力配置有误，新版本必须开启才能使用", 999999);
 				documentLoadFinish();
 			} else {
@@ -63,6 +63,12 @@ $(document).ready(function(){
 			}
 		}
 	);
+	// 定义配置的标签页
+	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');
 });

 /**
@@ -72,16 +78,28 @@ $(document).ready(function(){
 function getDocumentListByService() {
 	$("#choiseDocListUl").empty();
 	showGlobalLoadingMessage('获取文档列表中，请稍候...', true);
-	ajaxTemp("swagger-mg-ui/document/resourcesList", "post", "json", {}, function(json){
-		if(validateResult(json) && json.data.length > 1) {
-			showGlobalLoadingMessage('等待选择需展示的文档，请选择...', true);
+	// ajaxTemp("swagger-mg-ui/document/resourcesList", "post", "json", {}, function(json){
+	// 	if(validateResult(json) && json.data.length > 1) {
+	// 		showGlobalLoadingMessage('等待选择需展示的文档，请选择...', true);
+	// 		for (var i = 0; i < json.data.length; i++) {
+	// 			var item = json.data[i];
+	// 			$("#choiseDocListUl").append('<li value="'+item.url+'">'+item.url+'</li>');
+	// 		}
+	// 		$('#choiseDocModal').modal({moveable:true, backdrop:'static', keyboard: false});
+	// 	} else {
+	// 		addDocumentByService();
+	// 	}
+	// });
+	ajaxTemp("swagger-mg-ui/document/getLocationList", "post", "json", {}, function (json) {
+		if (validateResult(json) && json.data.length >= 1) {
 			for (var i = 0; i < json.data.length; i++) {
 				var item = json.data[i];
-				$("#choiseDocListUl").append('<li value="'+item.url+'">'+item.url+'</li>');
+				$("#choiceLocationList .dropdown-menu").append('<li><a href="javascript:void(0);" data-location="' + item.location + '">' + item.name + '</a></li>');
 			}
-			$('#choiseDocModal').modal({moveable:true, backdrop:'static', keyboard: false});
+			$("#choiceLocationList .choice-text").text(json.data[0].name);
+			addDocumentByLocationService(json.data[0].location);
 		} else {
-			addDocumentByService();
+			addDocumentByLocationService();
 		}
 	});
 }
@@ -90,13 +108,13 @@ function getDocumentListByService() {
 * 增加文档-通过服务器接口
 * @returns
 */
-function addDocumentByService(choiseDocList) {
+function addDocumentByService(choiceDocList) {
 	// 获取原始的swagger的json对象
 	showGlobalLoadingMessage('通过服务器端获取文档中，请稍候...', true);
-	ajaxTemp("swagger-mg-ui/document/docs", "post", "json", {choiseDocList: choiseDocList}, function(json){
+	ajaxTemp("swagger-mg-ui/document/docs", "post", "json", {choiceDocList: choiceDocList}, function(json){
 		//console.log(json);
 		showGlobalLoadingMessage('文档获取成功，解析中，请稍候...', true);
-		if(isEmptyObject(json) || json.errCode != 200) {
+		if(isEmptyObject(json) || json.errCode !== 200) {
 			Toast.error("获取文档错误，请检查！");
 			return;
 		}
@@ -121,6 +139,48 @@ function addDocumentByService(choiseDocList) {
 	});
 }

+/**
+ * 增加文档-通过服务器接口
+ * @returns
+ */
+function addDocumentByLocationService(choiceDocList) {
+	// 获取原始的swagger的json对象
+	globalLoadingMessager.show();
+	showGlobalLoadingMessage('通过服务器端获取文档中，请稍候...', true);
+	ajaxTemp("swagger-mg-ui/document/docs", "post", "json", {choiceLocationList: choiceDocList}, function(json){
+		//console.log(json);
+		showGlobalLoadingMessage('文档获取成功，解析中，请稍候...', true);
+		if(isEmptyObject(json) || json.errCode !== 200) {
+			Toast.error("获取文档错误，请检查！");
+			return;
+		}
+		documentJsonArr = [];
+		var template = $('#homePageDashboardTemplate').html();
+		$('#homePageDashboard').empty();
+		$('#homePageDashboard').append('<div class="dashboard" data-height="320"></div>');
+		$('#homePageDashboard .dashboard').append(template);
+
+		for (var i = 0; i < json.data.length; i++) {
+			showGlobalLoadingMessage('解析第' + (i + 1) + '份文档，请稍候...', true);
+			var tempDoc = deserialize(json.data[i]);
+			console.log(tempDoc);
+			documentJsonArr.push(tempDoc);// 加到所有文档
+			addHomePageDashboard(tempDoc, tempDoc.fullUrl);
+			createDefinitionsMapByJson(tempDoc);
+			if (userSettings.catalogShowType == 1) {
+				createTreeViewByTree(tempDoc);// url分成一层一层的展示
+			} else if (userSettings.catalogShowType == 2) {
+				createTreeViewByTag(tempDoc);// tag方式，整个url显示为一层
+			} else {
+				createTreeViewByTree(tempDoc);// url分成一层一层的展示
+			}
+		}
+		documentLoadFinish();
+	}, function(msg){
+		Toast.error("获取文档失败，请检查！");
+	});
+}
+
 /**
 * 自由拖动改变左右框架的宽度
 */
@@ -150,6 +210,17 @@ $("#changeContentWidth").click(function(){
 	changeContentWidth(isMinWidth ? 360 : 120);
 });

+/**
+ * 切换文档
+ */
+$("#choiceLocationList").on("click", ".dropdown-menu li", function(){
+	var text = $(this).find("a").text();
+	var location = $(this).find("a").data("location");
+	$("#choiceLocationList .choice-text").text(text);
+	// 切换文档
+	addDocumentByLocationService(location);
+});
+
 /**
 * 搜索框回车事件
 */
@@ -344,7 +415,7 @@ $("#apiPathTree").on("click", ".show-doc", function(){
 	$("#simulationResultText").val("");
 	getStorage('p-simulation-response-' + docUrl, function(data){
 		var resultText = getNotEmptyStr(data);
-		resultText = (typeof resultText === 'string') ? resultText : JSON.stringify(resultText, null, 4);
+		resultText = (typeof resultText == 'string') ? resultText : JSON.stringify(resultText, null, 4);
 		$("#simulationResultText").val(resultText);
 	});
 	// 处理在线文档
@@ -885,30 +956,9 @@ function addHomePageDashboard(json, fullUrl) {
 	);
 }

-/**
- * 初始化用户的设置
- * @param 
- * @returns
- */
-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: false});
-}
-
 /**
 * 修改树形菜单展示类型
- * @param 
+ * @param
 * @returns
 */
 function updateTreeShowType() {
@@ -935,6 +985,22 @@ function updateTreeShowType() {
 	}
 }

+/**
+ * 初始化用户的设置
+ * @param
+ * @returns
+ */
+function documentLoadFinish() {
+	showGlobalLoadingMessage('文档解析完成！', false);
+	// 隐藏提示框
+	setTimeout(function() {
+		globalLoadingMessager.hide();
+	}, 1000);
+	regeneratePathTree();
+	//$('#apiPathTree .projects').tree();
+	$('#homePageDashboard .dashboard').dashboard({draggable: false});
+}
+
 /**
 * 存储用户设置
 */
--- a/zyplayer-doc-swagger/src/main/resources/webjars/zpages/docUrlDetailConfig.html
+++ b/zyplayer-doc-swagger/src/main/resources/webjars/zpages/docUrlDetailConfig.html
@@ -0,0 +1,202 @@
+<!doctype html>
+<html xmlns:v-on="http://www.w3.org/1999/xhtml">
+<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>
+					<td>操作</td>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="(item,index) in swaggerLocationList" :key="item.id" :data-id="item.id" :data-index="index" >
+					<td>{{index+1}}</td>
+					<td>{{item.location}}</td>
+					<td>{{item.rewriteDomainUrl}}</td>
+					<td>
+						<button class="btn btn-danger" type="button" v-on:click="deleteDocUrl($event)">删除</button>
+						<button class="btn btn-info" type="button" v-on:click="editDocUrl($event)">编辑</button>
+						<!--<button class="btn btn-danger" type="button" v-on:click="syncDocData($event)">持久化</button>-->
+					</td>
+				</tr>
+				<tr>
+					<td colspan="4" 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">
+						<div class="input-line">
+							地址：
+							<input v-model="addNewDocumentInput" type="text" class="form-control" placeholder="例：http://192.168.0.172/swagger-resources 或 http://192.168.0.172/v2/api-docs">
+						</div>
+						<div class="input-line">
+							重写域名地址：
+							<input v-model="rewriteDomainUrl" type="text" name="rewriteDomainUrl" class="form-control" placeholder="文档展示配置页 勾选“重写域名”重写的地址">
+						</div>
+					</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="../mg-ui/js/mg-ui-cache-keys.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: {
+			swaggerLocationList: [],
+			addNewDocumentInput: '',
+			rewriteDomainUrl: '',
+			oldLocation: ''
+		},
+		methods: {
+			btnRefreshList: function(){
+				this.refreshList();
+				Toast.success("刷新成功！");
+			},
+			refreshList: function () {
+				getStorage(cacheKeys.swaggerLocationList, function (data) {
+					//console.log(data);
+					var swaggerLocationList = data;
+					for (var i = 0; i < swaggerLocationList.length; i++) {
+						swaggerLocationList[i].location = decodeURI(swaggerLocationList[i].location);
+					}
+					app.swaggerLocationList = swaggerLocationList;
+				});
+			},
+			editDocUrl: function (event) {
+				var tr = $(event.currentTarget).parents("tr");
+				var index = tr.data("index");
+				var item = app.swaggerLocationList[index];
+				app.oldLocation = item.location;
+				app.addNewDocumentInput = item.location;
+				app.rewriteDomainUrl = item.rewriteDomainUrl;
+				$('#addNewDocumentModal').modal({moveable: true});
+			},
+			addNewDocument: function(){
+				app.oldLocation = '';
+				app.addNewDocumentInput = '';
+				$('#addNewDocumentModal').modal({moveable:true});
+			},
+			addNewDocumentBtn: function(){
+				var addNewDocumentInput = app.addNewDocumentInput;
+				if(isEmpty(addNewDocumentInput)) {
+					Toast.error("地址不可以为空");return;
+				}
+				var param = {
+					resourcesUrl: addNewDocumentInput,
+					rewriteDomainUrl: app.rewriteDomainUrl,
+					oldUrl: app.oldLocation
+				};
+				ajaxTemp(urlBase + "swagger-mg-ui/document/addSwaggerResources", "post", "json", param, function(json){
+					if(validateResult(json)) {
+						//window.parent.document.location.reload();
+						//app.swaggerLocationList.push(addNewDocumentInput);
+						app.refreshList();
+						$('#addNewDocumentModal').modal('hide');
+						Toast.success("保存成功，刷新后生效！");
+					}
+				});
+			},
+			exportDocument: function () {
+				getExport().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.swaggerLocationList.length; i++) {
+					if (i !== index) {
+						newDocList.push(app.swaggerLocationList[i]);
+					}
+				}
+				setStorage(cacheKeys.swaggerLocationList, newDocList, function () {
+					app.swaggerLocationList = newDocList;
+				});
+			},
+			syncDocData: function (event) {
+				var tr = $(event.currentTarget).parents("tr");
+				var index = tr.data("index");
+				var newDocUrl = app.swaggerLocationList[index].location;
+				ajaxTemp(urlBase + "swagger-mg-ui/document/syncDocData", "post", "json", {resourcesUrl: newDocUrl}, function (json) {
+					if (validateResult(json)) {
+						app.refreshList();
+						Toast.success("持久化成功！");
+					}
+				});
+			},
+			encodeUrlParam: function(resourcesUrl) {
+				var indexOf = resourcesUrl.indexOf("?");
+				if (indexOf < 0) {
+					return resourcesUrl;
+				}
+				var baseUrl = resourcesUrl.substring(0, indexOf + 1);
+				var paramArr = resourcesUrl.substring(indexOf + 1).split("&");
+				for (var i = 0; i < paramArr.length; i++) {
+					var param = paramArr[i];
+					var split = param.split("=");
+					if (i > 0) {
+						baseUrl.append("&");
+					}
+					if (split.length === 2) {
+						baseUrl += split[0] + "=" + encodeURI(split[1]);
+					} else {
+						baseUrl += param;
+					}
+				}
+				return baseUrl.toString();
+			}
+		},
+		mounted: function(){
+			this.refreshList();
+		},
+		watch: {
+		}
+	});
+</script>
+
+<style>
+	#app{padding-top: 10px;}
+	.input-line{margin-bottom: 15px;}
+</style>
+</html>
+
+
+