<%@ page language="java" contentType="text/html;charset=UTF-8" trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fastboot" prefix="fb"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<fb:ui src="base/main">

	<fb:property name="title">角色管理</fb:property>

	<fb:script type="text/javascript">
		<script>
			layui.use([ 'tool', 'form' ], function() {
				//
				var table_obj;
				//
				var tool = layui.tool, form = layui.form, $ = layui.jquery;
				//
				var options = {
					url : '${base}/role/page',
					toolbar : '#toolbar',
					limit : 20,
					cols : [ [ {
						type : 'checkbox',
					}, {
						field : 'id',
						title : 'ID',
						align : 'center'
					}, {
						field : 'name',
						title : '名称',
						align : 'center',
						templet : '#name'
					}, {
						field : 'description',
						title : '描述',
						align : 'center'
					}, {
						field : 'isSystem',
						title : '状态',
						align : 'center',
						templet : '#isSystem'
					}, {
						field : 'createDate',
						title : '创建时间',
						align : 'center'
					}, {
						field : 'updateDate',
						title : '更新时间',
						align : 'center'
					}, {
						toolbar : '#tool',
						title : '操作',
						align : 'center',
						width : 120
					} ] ],
					search : function() {
						var keyword = $('#keyword').val();
						//执行重载
						table_obj.reload({
							where : {
								keyword : keyword
							}
						});
					},
					info : function(data) {
						tool.dialog('${base}/role/form?id=' + data.id, '95%');
					}
				};
				// 分页
				table_obj = tool.page(options);
			});
		</script>
	</fb:script>

	<fb:layout>

		<script type="text/html" id="isSystem">
    		{{#  if(d.isSystem){ }}
    			<span style="color: #009688;">系统</span>
  		 	{{#  } else { }}
    			<span style="color: #FF5722;">业务</span>
  			{{#  } }}
		</script>

		<script type="text/html" id="tool">
			<a class="layui-btn layui-btn-xs" lay-event="info">编辑</a>
		</script>

		<script type="text/html" id="toolbar">
 		 	<div class="layui-btn-container">
				<div class="layui-inline" title="搜索" lay-event="search"><i class="layui-icon layui-icon-search"></i></div>
  			</div>
		</script>

		<div class="layui-form">
			<div class="layui-inline">
				<div class="layui-input-inline" style="width: 300px;">
					<input type="text" id="keyword" placeholder="ID、名称、描述" autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
		 
		<div class="layui-card">
			<table id="table" class="layui-hide" lay-filter="table" />
		</div>
	</fb:layout>
</fb:ui>