<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>区域管理</title>
	<meta name="decorator" content="default"/>
	<%@include file="/webpage/include/treetable.jsp" %>
	<script type="text/javascript">
		$(document).ready(function() {
			var tpl = $("#treeTableTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
			var data = ${fns:toJson(list)}, rootId = "0";
			addRow("#treeTableList", tpl, data, rootId, true);
			$("#treeTable").treeTable({expandLevel : 5});

            $("a").on("click",addLinkVisied);
		});
		function addRow(list, tpl, data, pid, root){
			for (var i=0; i<data.length; i++){
				var row = data[i];
				if ((${fns:jsGetVal('row.parentId')}) == pid){
					$(list).append(Mustache.render(tpl, {
						dict: {
							type: getDictLabel(${fns:toJson(fns:getDictList('sys_area_type'))}, row.type)
						}, pid: (root?0:pid), row: row
					}));
					addRow(list, tpl, data, row.id);
				}
			}
		}

		function refresh(){//刷新
			
			window.location="${ctx}/sys/area/";
		}
	</script>
	<style>
		body{
			background-color:transparent;
			filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26FFFFFF, endColorstr=#26FFFFFF);
			color:#ffffff;
			background-color:rgba(255,255,255,0);
			height:100%;
		}
	</style>
</head>
<body>
<div class="wrapper wrapper-content">
	<sys:message content="${message}"/>
	<div class="layui-row">
		<div class="full-width fl">
			<div class="layui-row" id="queryDiv">
			</div>
		</div>
		<div class="full-width fl">
			<div class="contentShadow layui-form contentDetails">
				<div class="nav-btns">
					<shiro:hasPermission name="sys:area:add">
						<table:addRow url="${ctx}/sys/area/form" title="区域"></table:addRow><!-- 增加按钮 -->
					</shiro:hasPermission>
					<button class="nav-btn nav-btn-refresh" data-toggle="tooltip" data-placement="left" onclick="sortOrRefresh()" title="刷新"><i class="glyphicon glyphicon-repeat"></i>&nbsp;刷新</button>
					<div style="clear: both;"></div>
				</div>
	
				<table id="treeTable"  class="table table-striped table-bordered table-hover table-condensed dataTables-example dataTable">
					<thead>
						<tr>
							<th style="text-align: center;width: 20%">区域名称</th>
							<th style="text-align: center;width: 10%">区域编码</th>
							<th style="text-align: center;width: 10%">区域类型</th>
							<th style="text-align: center;width: 30%">备注</th>
							<th style="text-align: center;width: 30%">操作</th>
						</tr>
					</thead>
					<tbody id="treeTableList"></tbody>
				</table>
				<script type="text/template" id="treeTableTpl">
					<tr id="{{row.id}}" pId="{{pid}}">
						<td><a class="attention-info" href="javascript:void(0)" onclick="openDialogView('查看区域', '${ctx}/sys/area/form?id={{row.id}}&view=1','95%','95%')">{{row.name}}</a></td>
						<td>{{row.code}}</td>
						<td>{{dict.type}}</td>
						<td>{{row.remarks}}</td>
						<td class="op-td text-center">
							<div class="op-btn-box">
								<shiro:hasPermission name="sys:area:view">
									<a href="javascript:void(0)" onclick="openDialogView('查看区域', '${ctx}/sys/area/form?id={{row.id}}&view=1','95%','95%')" class="op-btn op-btn-view" ><i class="fa fa-search-plus"></i>  查看</a>
								</shiro:hasPermission>
								<shiro:hasPermission name="sys:area:edit">
									<a href="javascript:void(0)" onclick="openDialog('修改区域', '${ctx}/sys/area/form?id={{row.id}}','95%','95%')" class="op-btn op-btn-edit" ><i class="fa fa-edit"></i> 修改</a>
								</shiro:hasPermission>
								<shiro:hasPermission name="sys:area:del">
									<a href="${ctx}/sys/area/delete?id={{row.id}}" onclick="return confirmx('要删除该区域及所有子区域项吗？', this.href)" class="op-btn op-btn-delete" ><i class="fa fa-trash"></i> 删除</a>
								</shiro:hasPermission>
								<shiro:hasPermission name="sys:area:add">
									<a href="javascript:void(0)" onclick="openDialog('添加下级区域', '${ctx}/sys/area/form?parent.id={{row.id}}','95%','95%')" class="op-btn op-btn-add" ><i class="fa fa-plus"></i> 添加下级区域</a>
								</shiro:hasPermission>
							</div>
						</td>
					</tr>
				</script>
			</div>
		</div>
	</div>
</div>
<script>
    resizeListWindow3();
    $(window).resize(function(){
        resizeListWindow3();
    });
</script>
</body>
</html>