Project2024
/
cms-system


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
							<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>原动力 - 内容管理系统</title>
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/resource/js/webuploader-0.1.5/webuploader.css" />
</head>

<body>
<div class="row">
    <div class="col-md-12">
    	<h1 class="panel-heading">编辑栏目</h1>
        <!--breadcrumbs start -->
        <ul class="breadcrumb">
			<li><a href="/admin/dashboard/toIndex"><i class="fa fa-home"></i> 首页</a></li>
			<li class="active">编辑栏目</li>
		</ul>
        <!--breadcrumbs end -->
    </div>
</div>
<section class="panel">
	<header class="panel-heading tab-bg-dark-navy-blue">
        <ul class="nav nav-tabs">
            <li class="active">
                <a data-toggle="tab" href="#baseinfo"><i class="fa fa-cog"></i>基本设置</a>
            </li>
            <li class="">
                <a data-toggle="tab" href="#templates">模版管理</a>
            </li>
            <li class="">
                <a data-toggle="tab" href="#extend">扩展</a>
            </li>
        </ul>
    </header>
    <div class="panel-body">
        <form class="col s12" id="form" enctype="multipart/form-data" th:action="@{/admin/category/edit}" th:object="${category}" onsubmit="return validateForm();" method="post">
            <div class="tab-content">
            	<div id="baseinfo" class="tab-pane active"><!-- 基础信息 -->
               		<input name="id" id="id" th:value="*{id}" type="hidden">
					<input name="parentId" type="hidden" th:value="*{parentId}">
					<input name="level" type="hidden" th:value="*{level}">
					<input name="imagePath" id="filepath" type="hidden" th:value="*{imagePath}">
					<input name="defaultEditor" type="hidden" id="defaultEditor" th:value="*{defaultEditor}" />
					<input name="mdContent" id="mdContent" type="hidden" th:value="*{mdContent}" />
					<input name="htmlContent" id="htmlContent" type="hidden" th:value="*{htmlContent}" />
					<div class="form-group form-control-medium">
						<label for="cnname">栏目中文名称：</label>
						<input id="cnname" name="cnname" type="text" class="form-control" th:value="*{cnname}" placeholder="栏目中文名称" />
					</div>
					<div class="form-group form-control-medium">
						<label for="enname">栏目英文名称：</label>
						<input id="enname" name="enname" type="text" class="form-control" th:value="*{enname}" placeholder="栏目英文名称" />
					</div>
					<div class="form-group form-control-small">
						<label for="arcdir">表单模型：</label>
						<select class="form-control m-b-10" name="formId" id="formId">
							<option>请选择表单模型</option>
                            <option th:each="form : ${forms}" th:text="${form.formName}+' | '+${form.code}" th:value="${form.id}" th:selected="${category.formId eq form.id}"></option>
                        </select>
					</div>
					<div class="form-group form-control-medium">
						<label for="imagePath">栏目图片：</label>
						<div id="uploader" class="wu-example">
						    <!--用来存放文件信息-->
						    <div id="file-priview" class="file-priview">
						    	<img th:src="${system.website} + 'resources/' + ${system.uploaddir} + '/' + *{imagePath}" th:if="*{imagePath} != null and *{imagePath} != ''" />
						    </div>
						    <div class="btns">
						        <div id="picker">选择文件...</div>
						    </div>
						</div>
					</div>
					<div class="form-group form-control-small">
						<label>上级栏目：</label>
						<select class="form-control m-b-10" disabled="disabled">
                            <option th:value="${category.id}" th:text="${category.parentName}"></option>
                        </select>
					</div>
					<div class="form-group form-control-small">
						<label>跳转方式：</label>
						<select class="form-control m-b-10" name="linkTarget">
                            <option value="1" th:selected="${category.linkTarget eq '1'}">当前页（_self）</option>
                            <option value="2" th:selected="${category.linkTarget eq '2'}">新标签页（_blank）</option>
                        </select>
					</div>
					<div class="form-group form-control-small">
						<label for="pageSize">分页大小：</label>
						<input id="pageSize" name="pageSize" type="text" class="form-control" th:value="*{pageSize}" placeholder="分页大小" />
					</div>
					<div class="form-group">
						<label for="description">栏目描述：</label>
						<textarea id="description" name="description" class="form-control" th:text="*{description}" placeholder="栏目描述"></textarea>
					</div>
                	<div class="form-group">
                    	<label>栏目内容：</label>
						<div class="ueeditor">
							<script id="ue-editor" type="text/plain" style="width:100%;height:320px;"></script>
						</div>
					</div>
					<div class="form-group">
						<label>显示/隐藏：</label>
						<div class="checkbox-inline">
                            <input type="radio" name="isShow" id="show" value="1" th:checked="*{isShow}==1" /> 显示
                        </div>
                        <div class="checkbox-inline">
                            <input type="radio" name="isShow" id="hide" value="0" th:checked="*{isShow}==0" /> 隐藏
                        </div>
					</div>
					<div class="form-group">
						<label>是否允许投稿：</label>
						<div class="checkbox-inline">
                            <input type="radio" name="isInput" id="isInput-yes" value="1" th:checked="*{isInput}==1" /> 是
                        </div>
                        <div class="checkbox-inline">
                            <input type="radio" name="isInput" id="isInput-no" value="0" th:checked="*{isInput}==0" /> 否
                        </div>
					</div>
            	</div><!-- 基础信息 -->
                <div id="templates" class="tab-pane">
                	<div class="form-group form-control-small">
						<label for="catModel">栏目模型：</label>
						<select class="form-control m-b-10" name="catModel">
                            <option value="1" th:selected="${category.catModel} == 1">封面</option>
                            <option value="2" th:selected="${category.catModel} == 2">列表</option>
                            <option value="3" th:selected="${category.catModel} == 3">外部链接</option>
                        </select>
					</div>
					<div class="form-group form-control-medium">
						<label for="visitUrl">访问地址：</label>
						<input id="visitUrl" name="visitUrl" type="text" class="form-control" th:value="*{visitUrl}" placeholder="访问地址" />
					</div>
					<div class="form-group form-control-medium">
						<label for="coverTemp">封面模版：</label>
						<input id="coverTemp" name="coverTemp" type="text" class="form-control" th:value="*{coverTemp}" placeholder="封面模版" />
					</div>
					<div class="form-group form-control-medium">
						<label for="listTemp">列表模版：</label>
						<input id="listTemp" name="listTemp" type="text" class="form-control" th:value="*{listTemp}" placeholder="列表模板" />
					</div>
					<div class="form-group form-control-medium">
						<label for="articleTemp">内容页模版：</label>
						<input id="articleTemp" name="articleTemp" type="text" class="form-control" th:value="*{articleTemp}" placeholder="内容页模版" />
					</div>
					<div class="form-group form-control-medium">
						<label for="linkUrl">链接地址：</label>
						<input id="linkUrl" name="linkUrl" type="text" class="form-control" th:value="*{linkUrl}" placeholder="链接地址" />
					</div>
                </div>
                <div id="extend" class="tab-pane">
                	<div class="form-group form-control-medium">
						<label for="ext01">扩展字段1：</label>
						<input id="ext01" name="ext01" type="text" class="form-control" th:value="*{ext01}" placeholder="扩展字段1" />
					</div>
					<div class="form-group form-control-medium">
						<label for="ext02">扩展字段2：</label>
						<input id="ext02" name="ext02" type="text" class="form-control" th:value="*{ext02}" placeholder="扩展字段2" />
					</div>
					<div class="form-group form-control-medium">
						<label for="ext03">扩展字段3：</label>
						<input id="ext03" name="ext03" type="text" class="form-control" th:value="*{ext03}" placeholder="扩展字段3" />
					</div>
					<div class="form-group form-control-medium">
						<label for="ext04">扩展字段4：</label>
						<input id="ext04" name="ext04" type="text" class="form-control" th:value="*{ext04}" placeholder="扩展字段4" />
					</div>
					<div class="form-group form-control-medium">
						<label for="ext05">扩展字段5：</label>
						<input id="ext05" name="ext05" type="text" class="form-control" th:value="*{ext05}" placeholder="扩展字段5" />
					</div>
                </div>
            </div>
			<div class="form-btn-group-left" shiro:hasAnyPermissions="system:category:toedit,system:category:update">
            	<button type="submit" class="btn btn-info">保存</button>
            </div>
		</form>
    </div>
</section>
<script src="/resource/js/jquery.min.js"></script>
<script src="/resource/js/bootstrap.min.js"></script>
<script charset="utf-8" src="/resource/js/ueditor-1.4.3.3/ueditor.config.js"></script>
<script charset="utf-8" src="/resource/js/ueditor-1.4.3.3/ueditor.all.min.js"></script>
<!--<script type="text/javascript" src="/resource/js/UEditorPlus/ueditor.config.js"></script>-->
<!--<script type="text/javascript" src="/resource/js/UEditorPlus/ueditor.all.js"></script>-->
<script src="/resource/js/webuploader-0.1.5/webuploader.js"></script>
<script src="/resource/js/coco-message/coco-message.js"></script>
<script>
	var thumbnailWidth = 178,thumbnailHeight = 178;
    var ueEditor = null;
    var htmlContent = "";
    
    $(document).ready(function () {
		htmlContent = $("#htmlContent").val();
		//初始化UE编辑器
    	ueEditor = UE.getEditor('ue-editor');
    	ueEditor.addListener("ready", function () {
            // editor准备好之后才可以使用
            ueEditor.setContent(htmlContent);
        });
    	
    	initUploader("picker","file-priview","filepath");
    });
    
    function initUploader(picker,el,inputEl){
    	var uploader = WebUploader.create({
    		auto: true,
	        // swf文件路径
	        swf: '/resource/js/webuploader-0.1.5/Uploader.swf',
	        // 文件接收服务端。
	        server: '/upload/uploadFile',
	        // 选择文件的按钮。可选。
	        compress: false,
	        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	        pick: '#' + picker,
	        fileNumLimit: 5,
	        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
	        resize: false,
			duplicate:true
	    });
    	uploader.on('fileQueued', function(file) {
    		$("#"+el).children().remove();
    		$img = $("<img />");
    		uploader.makeThumb( file, function(error, src) {
    	        if ( error ) {
    	            $img.replaceWith('<span>不能预览</span>');
    	            return;
    	        }
    	        $img.attr( 'src', src );
    	    }, thumbnailWidth, thumbnailHeight );
    	    $("#"+el).append($img);
    	});
	    uploader.on('uploadSuccess', function(file, response) {
	    	$("#"+el).children().remove();
	        $("#"+el).append($("<img src='"+response.data.url+"'/>"));
	        $("#"+inputEl).val(response.data.filepath);
	        uploader.reset();
	        cocoMessage.success("上传成功");
	    });
	    uploader.on('uploadError', function( file ) {
			uploader.reset();
	    	cocoMessage.error("上传失败");
	    });
    }
    
    function validateForm(){
		var formId = $("#formId").val();
    	var cnname = $("#cnname").val();
    	if(formId == null || formId==''){
    		cocoMessage.error("表单模型不能为空");
    		return false;
    	}
    	if(cnname == null || cnname==''){
    		cocoMessage.error("栏目名称不能为空");
    		return false;
    	}
    	$("#htmlContent").val(ueEditor.getContent());
    	return true;
    }
</script>
</body>
</html>