v6.1

分支 (2)

标签 (12)

管理

管理

master

docs

v6.3

v6.3-beta

v6.2

6.2

v5.10

v6.0

v6.1

v6.2-beta

6.1

6.0

5.10

5.9

blog
/
src
/
main
/
webapp
/
WEB-INF
/
templates
/
mgr
/
template
/
export.html

<!DOCTYPE HTML>
<html>
<head th:replace="mgr/base/head :: head('模板导入导出')"></head>
<body>
	<nav th:replace="mgr/base/nav :: active('tpl-export')"></nav>
	<div id="page-wrapper" style="padding: 10px">
		<div class="container-fluid">
			<div class="row" style="margin-bottom: 10px">
				<div class="col-md-8 col-md-offset-2">
					<div class="alert alert-danger" th:unless="${error == null}"
						th:text="${messages.getMessage(error)}"></div>
				</div>
			</div>
			<div class="row" style="margin-bottom: 10px">
				<div class="col-md-8 col-md-offset-2">
					<form role="form" th:action="@{/mgr/template/export}" method="post">
						<div class="form-group">
							<label>空间</label> <select class="form-control" name="spaceId">
								<option value="">默认</option>
								<option th:each="space : ${spaces}" th:value="${space.id}"
									th:text="${space.name}"></option>
							</select>
						</div>
						<input type="hidden" th:name="${_csrf.parameterName}"
							th:value="${_csrf.token}" />
						<button type="submit" class="btn btn-default">导出模板</button>
					</form>
				</div>
			</div>

			<div class="row" style="margin-bottom: 10px">
				<div class="col-md-8 col-md-offset-2">
					<form id="fileupload" autocomplete="off" method="POST"
						enctype="multipart/form-data">
						<div class="form-group">
							<label>空间</label> <select class="form-control" id="importSpaceId">
								<option value="">默认</option>
								<option th:each="space : ${spaces}" th:value="${space.id}"
									th:text="${space.name}"></option>
							</select>
						</div>
						<div class="form-group">
							<label>文件</label> <input type="file" class="form-control"
								id="file" />
						</div>
						<button type="button" id="import-btn" class="btn btn-default">导入模板</button>
						<button type="button" id="preview-btn" class="btn btn-default">预览模板</button>
					</form>
				</div>
			</div>

			<div class="row" id="messages">
				<div class="col-md-8 col-md-offset-2">
					<div class="table-responsive">
						<table class="table">
							<tbody id="messageBody">

							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div th:replace="base/foot_source"></div>
	<script type="text/javascript" th:src="@{/static/js/mgr/common.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/jquery-file-upload/js/load-image.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/static/js/canvas-to-blob.min.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/vendor/jquery.ui.widget.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.iframe-transport.js}"></script>
	<script th:src="@{/static/jquery-file-upload/js/jquery.fileupload.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-ui.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-process.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-image.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-audio.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-video.js}"></script>
	<script
		th:src="@{/static/jquery-file-upload/js/jquery.fileupload-validate.js}"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#import-btn").click(function() {
				readFile(function(pages){
					$.ajax({
			            type: "post",
			            url: rootPath + '/mgr/template/import',
			            data: JSON.stringify(pages),
			            dataType: "json",
			            contentType: 'application/json',
			            success: function(data) {
			                if (data.success) {
			                	$("#messages").hide();
			    				var records = data.data;
			    				var html = '';
			    				for (var i = 0; i < records.length; i++) {
			    					var record = records[i];
			    					var clazz = record.success ? 'success' : 'danger';
			    					html += "<tr class='"+clazz+"'><td>" + record.message
			    							+ "</td></tr>";
			    				}
			    				$("#messageBody").html(html);
			    				$("#messages").show();
			                } else {
			                   bootbox.alert(data.message);
			                   $("#messages").hide();
			                }
			            },
			            complete: function() {
			            }
			        });
				})
			});

			$("#preview-btn").click(function() {
				readFile(function(pages){
					$.ajax({
			            type: "post",
			            url: rootPath + '/mgr/template/previewImport',
			            data: JSON.stringify(pages),
			            dataType: "json",
			            contentType: 'application/json',
			            success: function(data) {
			                if (data.success) {
			                	$("#messages").hide();
			    				var pages = data.data.pages;
			    				var html = '';
			    				if(pages.length > 0){
			    					html += '<tr><th>页面名称</th><th>路径</th><th>空间全局</th></tr>';
			    					for (var i = 0; i < pages.length; i++) {
				    					var page = pages[i];
				    					html += "<tr ><td>" + page.name
				    							+ "</td><td>"+page.alias+"</td><td>"+(page.spaceGlobal ? '是': '否')+"</td></tr>";
				    				}
			    				}
			    				var fragments = data.data.fragments;
			    				if(fragments.length > 0){
			    					html += '<tr><th colspan=2>模板片段</th><th>全局</th></tr>';
			    					for (var i = 0; i < fragments.length; i++) {
				    					var fragment = fragments[i];
				    					html += "<tr ><td colspan=2>" + fragment.name
				    							+ "</td><td>"+(fragment.global ? '是': '否')+"</td></tr>";
				    				}
			    				}
			    				$("#messageBody").html(html);
			    				$("#messages").show();
			                } else {
			                   bootbox.alert(data.message);
			                }
			            },
			            complete: function() {
			            }
			        });
				})
			})
		});
		function readFile(callback){
			var file = document.getElementById('file').files[0];
			if(!file){
				bootbox.alert("请选择要导入的文件");
				return ;
			}
			var fileName = document.getElementById('file').files[0].name;
			if (fileName.indexOf('.json') == -1) {
				bootbox.alert("请选择json格式的文件");
				return;
			}
			var reader = new FileReader();
			reader.readAsText(file, 'UTF-8');
			reader.onload = function(event){
				var text = event.target.result;
				var pages = {};
				var spaceId = $("#importSpaceId").val();
				if(spaceId != ''){
					pages.spaceId = spaceId;
				}
				pages.pages = $.parseJSON(text);
				callback(pages);
			};
		}
	</script>
</body>
</html>