renren/web/themes/default/extension/menu.html

{template 'common/header-gw'}
<style>
	.pad-left {padding-left:50px;height:30px;line-height:30px;background:url('./resource/images/bg_repno.gif') no-repeat -245px -545px;}
	.pad-bottom {padding-left:50px;height:30px;line-height:30px;background:url('./resource/images/bg_repno.gif') no-repeat -245px -595px;}
	.add{cursor:pointer;padding-top:5px}
	.system{cursor:pointer}
</style>
<ol class="breadcrumb">
	<li><a href="./?refresh"><i class="fa fa-home"></i></a></li>
	<li><a href="{url 'system/welcome'}">系统</a></li>
	<li class="active">{if $do == 'display'}菜单列表{elseif $do == 'module'}模块权限{/if}</li>
</ol>
<ul class="nav nav-tabs">
	<li{if $do == 'display'} class="active"{/if}><a href="{php echo url('extension/menu');}">菜单列表</a></li>
	<li{if $do == 'module'} class="active"{/if}><a href="{php echo url('extension/menu/module');}">模块菜单</a></li>
</ul>
<div class="clearfix template">
	<h5 class="page-header">菜单列表</h5>
	<form action="" method="post" class="form-horizontal">
	<div class="alert alert-info">
		<i class="fa fa-info-circle"></i>
		系统内置的菜单不允许修改 "链接地址"，不允许切换 "显示状态", 不允许 "删除"
	</div>
	<div class="panel">
		<div class="panel-body table-responsive">
			<table class="table">
				<thead>
				<th width="80">排序</th>
				<th width="250">名称</th>
				<th width="100">标识</th>
				<th width="80">类型</th>
				<th width="180">权限标识</th>
				<th width="80">显示</th>
				<th width="100">系统</th>
				<th width="350">链接地址</th>
				<th width="160" style="text-align:center">子标题</th>
				<th width="300">子链接</th>
				<th width="120">操作</th>
				</thead>
				<tbody>
					{loop $menus $k $v}
						<input type="hidden" name="id[]" value="{$v['id']}">
						<input type="hidden" name="url[]" value="">
						<input type="hidden" name="append_url[]" value="">
						<input type="hidden" name="is_system[]" value="{$v['is_system']}">
						<input type="hidden" name="permission_name[]" value="{$v['permission_name']}">
						<tr>
							<td><input type="text" name="displayorder[]" value="{$v['displayorder']}" class="form-control"></td>
							<td>
								<div class=""><input type="text" class="form-control" style="width:120px;display:inline-block" name="title[]" value="{$v['title']}">&nbsp;<i class="fa fa-chevron-down" data-id="{$v['id']}"> </i></div>
							</td>
							<td>{$v['name']}</td>
							<td></td>
							<td align="center">
								<div class="input-group" style="display:none">
									<input type="text" class="form-control" name="append_title[]" value="{$v['append_title']}"/>
									<span class="input-group-addon"><i class="{$v['append_title']}"></i></span>
									<span class="input-group-btn">
										<button class="btn btn-default showIconDialog" type="button">图标</button>
									</span>
								</div>
							</td>
							<td>
								{if $v['is_display']}
								<span class="btn btn-success system" data-system="{$v['is_system']}" data-id="{$v['id']}" data-value="{$v['is_display']}" title="点击切换">显示</span>
								{else}
								<span class="btn btn-danger system" data-system="{$v['is_system']}" data-id="{$v['id']}" data-value="{$v['is_display']}" title="点击切换">隐藏</span>
								{/if}
							</td>
							<td>
								{if $v['is_system']} <span class="label label-danger">系统内置</span>{else} <span class="label label-success">自定义</span>{/if}
							</td>
							<td></td><td></td><td></td>
							<td>
								{if !$v['is_system']}
									<a title="删除" href="{php echo url('extension/menu/del', array('id' => $v['id']))}" onclick="if(!confirm('删除后不可恢复，确定删除?')) return false;" class="btn btn-danger">删除</a>
								{/if}
							</td>
						</tr>
						{if !empty($v['child'])}
							{loop $v['child'] $k1 $v1}
							<input type="hidden" name="id[]" value="{$v1['id']}"/>
							<input type="hidden" name="url[]" value="">
							<input type="hidden" name="append_url[]" value="">
							<input type="hidden" name="append_title[]" value="">
							<input type="hidden" name="is_system[]" value="{$v1['is_system']}">
							<input type="hidden" name="permission_name[]" value="{$v1['permission_name']}">
							<tr class="level1 p_{$v1['pid']}" style="display: none">
								<td><input type="text" name="displayorder[]" value="{$v1['displayorder']}" class="form-control"></td>
								<td>
									<div class="pad-left">&nbsp; <input type="text" style="width:120px;display:inline-block" name="title[]" value="{$v1['title']}" class="form-control"> <i class="fa fa-chevron-down" data-id="{$v1['id']}"> </i></div>
								</td>
								<td>{$v1['name']}</td>
								<td></td>
								<td></td>
								<td>
									{if $v1['is_display']}
									<span class="btn btn-success system" data-system="{$v1['is_system']}" data-id="{$v1['id']}" data-value="{$v1['is_display']}" title="点击切换">显示</span>
									{else}
									<span class="btn btn-danger system" data-system="{$v1['is_system']}" data-id="{$v1['id']}" data-value="{$v1['is_display']}" title="点击切换">隐藏</span>
									{/if}
								</td>
								<td>
									{if $v1['is_system']} <span class="label label-danger">系统内置</span>{else} <span class="label label-success">自定义</span>{/if}
								</td>
								<td></td><td></td><td></td>
								<td>
									{if !$v1['is_system']}
									<a title="删除" href="{php echo url('extension/menu/del', array('id' => $v1['id']))}" onclick="if(!confirm('删除后不可恢复，确定删除?')) return false;" class="btn btn-danger">删除</a>
									{/if}
								</td>
							</tr>
							{if !empty($v1['grandchild'])}
								{loop $v1['grandchild'] $k2 $v2}
								<input type="hidden" name="id[]" value="{$v2['id']}"/>
								<input type="hidden" name="is_system[]" value="{$v2['is_system']}">
								<input type="hidden" name="permission_name[]" value="{$v2['permission_name']}">
								<tr class="p_{$v2['pid']} p_{$v['id']}" style="display: none">
									<td><input type="text" name="displayorder[]" value="{$v2['displayorder']}" class="form-control"></td>
									<td><div class="pad-left" style="margin-left:30px"> &nbsp; <input type="text" style="width:120px;display:inline-block" name="title[]" value="{$v2['title']}" class="form-control"></div></td>
									<td>{$v2['name']}</td>
									<td>
										{if $v2['type'] == 'url'}
										<span class="label label-success">菜单</span>
										{else}
										<span class="label label-danger">权限验证</span>
										{/if}
									</td>
									<td>{$v2['permission_name']}</td>
									<td>
										{if $v2['is_display']}
										<span class="btn btn-success system" data-system="{$v2['is_system']}" data-type="{$v2['type']}" data-id="{$v2['id']}" data-value="{$v2['is_display']}" title="点击切换">显示</span>
										{else}
										<span class="btn btn-danger system" data-system="{$v2['is_system']}" data-type="{$v2['type']}" data-id="{$v2['id']}" data-value="{$v2['is_display']}" title="点击切换">隐藏</span>
										{/if}
									</td>
									<td>
										{if $v2['is_system']} <span class="label label-danger">系统内置</span>{else} <span class="label label-success">自定义</span>{/if}
									</td>
									{if !$v2['is_system'] && $v2['type'] == 'url'}
										<td><input type="text" name="url[]" value="{$v2['url']}" class="form-control"></td>
										<td align="center">
											<div class="input-group">
												<input type="text" class="form-control" name="append_title[]" value="{$v2['append_title']}"/>
												<span class="input-group-addon"><i class="{$v2['append_title']}"></i></span>
												<span class="input-group-btn">
													<button class="btn btn-default showIconDialog" type="button">图标</button>
												</span>
											</div>
										</td>
										<td><input type="text" name="append_url[]" value="{$v2['append_url']}" class="form-control"></td>
									{else}
										<td colspan="3">
											<input type="hidden" name="url[]" value="{$v2['url']}">
											<input type="hidden" name="append_url[]" value="{$v2['append_url']}">
											<input type="hidden" name="append_title[]" value="{$v2['append_title']}">
										</td>
									{/if}
									<td>
										{if !$v2['is_system']}
										<a title="删除" href="{php echo url('extension/menu/del', array('id' => $v2['id']))}" onclick="if(!confirm('删除后不可恢复，确定删除?')) return false;" class="btn btn-danger">删除</a>
										{/if}
									</td>
								</tr>
								{/loop}
							{/if}
							<tr class="p_{$v1['id']} p_{$v['id']}" style="display: none">
								<td colspan="11">
									<div class="pad-bottom pull-left" style="margin-left:110px"></div>
									<div class="pull-left add add_level2" data-pid="{$v1['id']}" data-name="{$v['name']}"> &nbsp;&nbsp;<i class="fa fa-plus-circle"></i> 添加菜单</div>
									<div class="hide pull-left add add_permission" data-pid="{$v1['id']}" data-name="{$v['name']}"> &nbsp;&nbsp;<i class="fa fa-plus-circle"></i> 添加权限验证</div>
								</td>
							</tr>
						{/loop}
					{/if}
					<tr class="level1 p_{$v['id']}" style="display: none">
						<td></td>
						<td colspan="10"><div class="pad-bottom pull-left"></div> <div class="pull-left add add_level1" data-pid="{$v['id']}" data-name="{$v['name']}"> &nbsp;&nbsp;<i class="fa fa-plus-circle"></i> 添加菜单组</div></td>
					</tr>
					{/loop}
					<tr>
						<td></td>
						<td colspan="9"><div class="add add_level0"><i class="fa fa-plus-circle"></i> 添加顶级分类</div></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-12">
			<input name="submit" type="submit" value="提交" class="btn btn-primary col-lg-1" />
			<input type="hidden" name="token" value="{$_W['token']}" />
		</div>
	</div>
	</form>
</div>
<script>
	$(function(){
		$('.fa-chevron-down').click(function(){
			var id = $(this).attr('data-id');
			var display = $('tr.p_' + id).eq(0).css('display');
			var clas = $(this).attr('class');
			$(this).attr('class', clas == 'fa fa-chevron-down' ? 'fa fa-chevron-right' : 'fa fa-chevron-down');
			if (display == 'none') {
				$('tr.p_' + id).slideDown('fast');
			} else {
				$('tr.p_' + id).slideUp('fast');
			}
		});
		$('.add_level0').click(function(){
			var pid = $(this).attr('data-pid');
			var name = $(this).attr('data-name');
			var html = '<tr>' +
					'<td><input type="text" name="add_parent_displayorder[]" value="0" class="form-control"></td>' +
					'<td> <input style="width:120px;" placeholder="名称" type="text" name="add_parent_title[]" value="" class="form-control"></td>' +
					'<td> <input style="width:80px;" placeholder="标识" type="text" name="add_parent_name[]" value="" class="form-control"></td>' +
					'<td></td>' +
					'<td>' +
						'<div class="input-group">' +
							'<input type="text" class="form-control" name="add_parent_append_title[]" value="fa fa-link"/>' +
							'<span class="input-group-addon"><i class="fa fa-link"></i></span>' +
							'<span class="input-group-btn">' +
								'<button class="btn btn-default showIconDialog" type="button">图标</button>' +
							'</span>' +
						'</div>' +
					'</td>' +
					'<td><i class="fa fa-times-circle" onclick="$(this).parents(\'tr\').remove()"></i></td>' +
					'<td colspan="5"></td>' +
					'</tr>';
			$(this).parents('tr').before(html)
		});

		$('.add_level1').click(function(){
			var pid = $(this).attr('data-pid');
			var name = $(this).attr('data-name');
			var html = '<tr class="level1 p_'+pid+'">' +
					'<td><input type="text" name="add_displayorder[]" value="0" class="form-control"></td>' +
					'<input type="hidden" name="add_pid[]" value="'+pid+'">' +
					'<input type="hidden" name="add_name[]" value="'+name+'">' +
					'<td><div class="pad-left"> &nbsp;&nbsp;<input style="width:120px;display:inline-block" type="text" name="add_title[]" value="" placeholder="菜单组名称" class="form-control"></div></td>' +
					'<td>'+name+'</td>' +
					'<td><i class="fa fa-times-circle" onclick="$(this).parents(\'tr\').remove()"></i></td><td></td><td></td>' +
					'<td colspan="5"></td>' +
					'</tr>';
			$(this).parents('tr').before(html)
		});
		var count = 0;
		$('.add_level2').click(function(){
			var pid = $(this).attr('data-pid');
			var name = $(this).attr('data-name');
			var html = '<tr class="level1 p_'+pid+'">' +
					'<input type="hidden" name="add_child_pid[]" value="'+pid+'">' +
					'<input type="hidden" name="add_child_name[]" value="'+name+'">' +
					'<td><input type="text" name="add_child_displayorder[]" value="0" class="form-control"></td>' +
					'<td><div class="pad-left" style="margin-left:30px"> &nbsp;&nbsp;<input style="width:120px;display:inline-block" type="text" name="add_child_title[]" value="" placeholder="菜单名称" class="form-control" data-num="'+count+++'"></div></td>' +
					'<td>'+name+'</td>' +
					'<td></td>' +
					'<td><input type="text" name="add_child_permission[]" value="" class="form-control" placeholder="权限标识"></td>' +
					'<td colspan="2"></td>' +
					'<td><input type="text" name="add_child_url[]" value="" class="form-control" placeholder="菜单链接" data-num="'+count+++'"></td>' +
					'<td>' +
						'<div class="input-group">' +
							'<input type="text" class="form-control" name="add_child_append_title[]" value="fa fa-link"/>' +
							'<span class="input-group-addon"><i class="fa fa-link"></i></span>' +
							'<span class="input-group-btn">' +
								'<button class="btn btn-default showIconDialog" type="button">图标</button>' +
							'</span>' +
						'</div>' +
					'</td>' +
					'<td><input type="text" name="add_child_append_url[]" value="" class="form-control" placeholder="子菜单链接"></td>' +
					'<td><i class="fa fa-times-circle" onclick="$(this).parents(\'tr\').remove()"></i></td>' +
					'</tr>';
			$(this).parents('tr').before(html)
		});

		$('.add_permission').click(function(){
			var pid = $(this).attr('data-pid');
			var name = $(this).attr('data-name');
			var html = '<tr class="level1 p_'+pid+'">' +
					'<input type="hidden" name="add_permission_pid[]" value="'+pid+'">' +
					'<input type="hidden" name="add_permission_flag[]" value="'+name+'">' +
					'<td><div class="pad-left" style="margin-left:30px"> &nbsp;&nbsp;<input style="width:120px;display:inline-block" type="text" name="add_permission_title[]" value="" placeholder="权限名称" class="form-control"></div></td>' +
					'<td>'+name+'</td>' +
					'<td><input type="text" name="add_permission_name[]" value="" placeholder="权限标识" class="form-control"></td>' +
					'<td><input type="text" name="add_permission_displayorder[]" value="" placeholder="排序" class="form-control"></td>' +
					'<td><i class="fa fa-times-circle" onclick="$(this).parents(\'tr\').remove()"></i></td><td></td><td></td>' +
					'<td colspan="4"></td>' +
					'</tr>';
			$(this).parents('tr').before(html)
		});


		require(['util'], function(u){
			$('.table').on('click', '.showIconDialog', function(){
				var btn = $(this);
				var spview = btn.parent().prev();
				var ipt = spview.prev();
				if(!ipt.val()){
					spview.css("display", "none");
				}
				u.iconBrowser(function(ico){
					ipt.val(ico);
					spview.show();
					spview.find("i").attr("class","");
					spview.find("i").addClass("fa").addClass(ico);
				});
			});
		});

		$('.system').click(function(){
			var id = $(this).attr('data-id');
			var value = $(this).attr('data-value');
			var system = $(this).attr('data-system');
			var type = $(this).attr('data-type');
			if(system == 1) {
				util.message('系统菜单不允许切换显示状态');
				return false;
			}
			if(type && type == 'permission') {
				util.message('权限标识只能隐藏');
				return false;
			}
			$.post("{php echo url('extension/menu/ajax')}", {'id' : id, 'value' : value}, function(){
				location.reload();
				return false;
			});
		});
		$('form').submit(function() {
			for (var i=0;i<count;i++) {
				if ($('[data-num='+i+']').val() == '') {
					var message = i%2 == 0 ? '请填写菜单名称' : '请填写链接地址';
					util.message(message);
					$('[data-num='+i+']').focus();
					return false;
				}
			}
		}
		);
	});
</script>
{template 'common/footer-gw'}