<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="Xenon Boostrap Admin Panel" />
	<meta name="author" content="" />
	<title>系统角色管理</title>
</head>
<body class="page-body">
	<div class="page-container">
		<%@ include file="../../common/menu.jsp"%>
		<div class="main-content">
			<%@ include file="../../common/header.jsp"%>
			<div class="page-title">
				<div class="title-env">
					<h1 class="title">系统角色管理</h1>
				</div>
				<div class="breadcrumb-env">
					<ol class="breadcrumb bc-1">
						<li>
							<a href="#"><i class="fa-home"></i>角色管理</a>
						</li>
						<li class="active">
							<strong>系统角色管理</strong>
						</li>
					</ol>
				</div>
			</div>			
			<!-- Removing search and results count filter -->
			<div class="panel panel-default">
			  <c:if test="${PERMISSION.query}">
				<form class="form-horizontal" role="form" method="post">
					<div class="form-group">
						<label class="col-sm-1 control-label">角色名</label>
						<div class="col-sm-2">
							<input type="text" id="name" name="name" class="form-control" id="field-1">
						</div>
						<button type="button" id="btn_search" class="btn btn-info">查询</button>
						<c:if test="${PERMISSION.add}">
							<button type="button" class="btn btn-add" onclick="toSave();">新增</button>
						</c:if>
					</div>
				</form>
			  </c:if>
				<div class="panel-body">
					<table class="table table-bordered table-striped" id="table-list">
						<thead>
							<tr>
								<th style="text-align: center;">角色名</th>
								<th style="text-align: center;">查询</th>
								<th style="text-align: center;">新增</th>
								<th style="text-align: center;">修改</th>
								<th style="text-align: center;">删除</th>
								<!-- <th style="text-align: center;">数据权限</th> -->
								<th style="text-align: center;">创建人</th>
								<th style="text-align: center;">操作</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<%@ include file="../../common/footer.jsp"%>
		</div>
	</div>
	
	<div class="modal fade" id="modal-delete" data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">删除提示</h4>
				</div>
				<div id="modal-body" class="modal-body">
					确定删除该角色吗？
				</div>
				<form role="form" class="form-horizontal">
					<div class="modal-footer">
						<input type="hidden" name="ids" id="ids">
						<button type="button" id="btn_delete" class="btn btn-info" onclick="deleteInfo();">确定</button>
						<button type="button"  class="btn btn-white" data-dismiss="modal">取消</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	
	<div class="modal fade" id="modal-setting" data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 id="modal-title" class="modal-title">权限设置</h4>
				</div>
				<div id="modal-setting-body" class="modal-body">
				</div>
				<div id="modal-footer" hidden="hidden" class="modal-footer">
					<button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
				</div>
			</div>
		</div>
	</div>
	
	<script type="text/javascript">
		function formReset(){
			setTimeout(function(){
				$('#search').click();
			},100);
	    }
		
		var table;
		$(function() {
			//table
			table = $('#table-list').dataTable({
				"dom": "t" + "<'row'<'col-xs-6'i><'col-xs-6'p>>",
				"aaSorting": [
				//	[7, "desc"]
				], //默认第几个排序
				"ordering": false,
				"aoColumnDefs": [
					//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
					{"orderable":false,"aTargets":[0,1,2,3,4,5,6]} 
				],
				"bStateSave": false, //状态保存
				"bProcessing": false, // 是否显示取数据时的那个等待提示
                "bServerSide": true,//这个用来指明是通过服务端来取数据
                "sAjaxSource": "${ROOT_PATH}/sysRole/findList.do",//这个是请求的地址
                "bLengthChange" : true,// 每行显示记录数  
                "iDisplayLength" : 10,// 每页显示行数  
                "bSort" : true,// 排序
                "bAutoWidth" : false, //是否自适应宽度  
                "oLanguage": {  	// 分页语言
                    "sLengthMenu": "每页显示 _MENU_  条",  
                    "sZeroRecords": "没有找到符合条件的数据",  
                    "sProcessing": "我也是醉了，正在加载数据...",  
                    "sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",  
                    "sInfoEmpty": "没有记录",  
                    "sInfoFiltered": "(从 _MAX_ 条记录中过滤)",  
                    "sSearch": "搜索：",  
                    "oPaginate": {  
                        "sFirst": "首页",  
                        "sPrevious": "前一页",  
                        "sNext": "后一页",  
                        "sLast": "尾页"  
                    }  
        		},
				"aoColumns": [
					 {  
                        "sClass":"center", 
                        "mDataProp" : "name", 
                        "aTargets":[0],  
                        "mData":"name"
                    },
                    {  
                        "sClass":"center", 
                        "mDataProp" : "query_flag", 
                        "aTargets":[1],  
                        "mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象  
                        	var ru = '';
                        	if('${PERMISSION.update}' == 'true'){
                        		ru += '<a href=\"javascript:;\" class=\"btn btn-white btn-sm btn-icon icon-left\" onclick=\"settingTip(\''+ c.id +'\',\'query_flag\');\">配置权限</a>';
                        	}
 						   	return ru;   
                         }  
                    },
                    {  
                        "sClass":"center", 
                        "mDataProp" : "add_flag", 
                        "aTargets":[2],  
                        "mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象  
                        	var ru = '';
                        	if('${PERMISSION.update}' == 'true'){
                        		ru += '<a href=\"javascript:;\" class=\"btn btn-white btn-sm btn-icon icon-left\" onclick=\"settingTip(\''+ c.id +'\',\'add_flag\');\">配置权限</a>';
                        	}
 						   	return ru;   
                         }  
                    },
                    {  
                        "sClass":"center", 
                        "mDataProp" : "update_flag", 
                        "aTargets":[3],  
                        "mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象  
                        	var ru = '';
                        	if('${PERMISSION.update}' == 'true'){
                        		ru += '<a href=\"javascript:;\" class=\"btn btn-white btn-sm btn-icon icon-left\" onclick=\"settingTip(\''+ c.id +'\',\'update_flag\');\">配置权限</a>';
                        	}
 						   	return ru;   
                         }  
                    },
                    {  
                        "sClass":"center", 
                        "mDataProp" : "delete_flag", 
                        "aTargets":[4],  
                        "mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象  
                        	var ru = '';
                        	if('${PERMISSION.update}' == 'true'){
                        		ru += '<a href=\"javascript:;\" class=\"btn btn-white btn-sm btn-icon icon-left\" onclick=\"settingTip(\''+ c.id +'\',\'delete_flag\');\">配置权限</a>';
                        	}
 						    return ru;   
                         }  
                    },
                    /* {  
                        "sClass":"center", 
                        "mDataProp" : "data_level", 
                        "aTargets":[5],  
                        "mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象  
                        	if(c.data_level == 'personal'){
                        		return "仅查看自己相关";
                        	}else if(c.data_level == 'all'){
                        		return "查看所有";
                        	}else{
                        		return "";
                        	}
                         }  
                    }, */
                    {  
                        "sClass":"center", 
                        "mDataProp" : "create_by", 
                        "aTargets":[5],  
                        "mData":"create_by"
                    },
					{  
                    	"sClass":"center",  
                        "aTargets":[6],  
                        "mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象  
							var ru = '';
							if('${PERMISSION.update}' == 'true'){
	                        	ru += '<a href=\"javascript:;\" class=\"btn btn-secondary btn-sm btn-icon icon-left\" onclick=\"toModify(\''+ c.id +'\');\">修改</a>';
								ru += '<a href=\"javascript:;\" class=\"btn btn-white btn-sm btn-icon icon-left\" onclick=\"settingTip(\''+ c.id +'\',\'all\');\">配置菜单</a>';
							}
							if('${PERMISSION.delete}' == 'true'){
								ru += '<a href=\"javascript:;\" class=\"btn btn-danger btn-sm btn-icon icon-left\" onclick=\"deleteTip(\''+ c.id +'\');\">删除</a>';
							}
							if('${PERMISSION.update}' != 'true' && '${PERMISSION.delete}' != 'true'){
								ru = '无权限';
							}
						    return ru;   
                        }  
                    }
				],
				 "fnServerData" : function(sSource, aoData, fnCallback) {  
	                //获取检索参数
					var name = $("#name").val();
					 $.ajax({
			                url : sSource,//这个就是请求地址对应sAjaxSource
			                data : {"aoData":JSON.stringify(aoData),"name":name},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
			                type : 'post',
			                dataType : 'json',
			                async : false,
			                success : function(result) {
			                	fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
			    				//表格数据居中
			    				$("td").attr("style","text-align:center");
			                },
			                error : function(msg) {
			                }
			            });
		           }  
			});
			//检索
			$('#btn_search').click( function() {
			    table.fnDraw();
			});
		});
		
		/** 添加系统角色 */
		function toSave()
		{
			window.location.href='${ROOT_PATH}/sysRole/toSave.do';
		}
		
		/** 修改系统角色 */
		function toModify(id)
		{
			window.location.href='${ROOT_PATH}/sysRole/toEdit.do?id=' + id;
		}
		
		/** 账号删除 */
		function deleteInfo()
		{
			var id = $("#ids").val();
			$("#btn_setting").attr("disabled","disabled");
			$.ajax({
                url : "${ROOT_PATH}/sysRole/delete.do",
                data : {"id":id},
                type : 'post',
                dataType : 'json',
                async : false,
                success : function(data) {
                	window.setTimeout("enableBtn('#btn_setting');",Constants.reloadTime);
                	if(data.result == '01'){
                		$("#modal-delete").modal('hide');
                		table.fnDraw();
	                }
                	else
                	{
                		$("#modal-delete").modal('hide');
                	}
                },
                error : function(msg) {
                	window.setTimeout("enableBtn('#btn_setting');",Constants.reloadTime);
                	$("#modal-delete").modal('hide');
                }
            });
		}
		
		/** 账号删除 */
		function deleteTip(id){
			$("#ids").val(id);
			jQuery('#modal-delete').modal('show', {backdrop: 'static'});
		}
		
		//按钮权限
		function settingTip(id,role){
			var title;
			if(role == "all"){
				title="角色权限设置";
			}else if(role == "query_flag"){
				title="查询权限设置";
			}else if(role == "add_flag"){
				title="新增权限设置";
			}else if(role == "update_flag"){
				title="修改权限设置";
			}else if(role == "delete_flag"){
				title="删除权限设置";
			}
			$.ajax({
                url : "${ROOT_PATH}/sysRole/button.do?ROLE_ID="+id+"&msg="+role,
                data : {"id":id},
                type : 'post',
                dataType : 'html',
                async : false,
                success : function(data) {
                	$("#modal-setting-body").html(data);
                },
                error : function(msg) {
                	$("#modal-setting").modal('hide');
                }
            });
			$("#modal-title").html(title);
			jQuery('#modal-setting').modal('show', {backdrop: 'static'});
		}
	</script>
</body>
</html>