<!DOCTYPE html>
<html lang="en" style="background-color: #f2f2f2;">

	<head>
		<meta charset="UTF-8">
		<title>功能权限</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<script src="../../../admin/index.js" door type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			link(['layui/css/eleTree.css', 'css/systemTree.css']);
		</script>
		<script type="text/javascript">
			require('js/common.js')
		</script>
		<style>
			.role-forbid{
            margin-left: 15px;
        }
        .role-forbid i{
            font-size: 16px;
            color: red;
            font-weight: bold
        }
    </style>

		<!--角色模板-->
		<script type="text/html" id="roleTpl">
			{{#  layui.each(d.data, function(index, item){ }}
        <li class="li-item" roleId="{{item.id}}">
            <div class="li-item-left" style="flex: 1">
                <h4>{{item.name}}</h4>
                <p>{{item.description}}</p>
            </div>
            <ul class="bot-btn-group li-item-right">
                <li><i class="iconfont" id="roleEdit">&#xe62e;</i></li>
                <li><i class="iconfont" id="roleDel">&#xe658;</i></li>
                <li><i class="iconfont" id="roleForbid">&#xe650;</i></li>
            </ul>
            {{#  if(item.status === 2){ }}
            <div class="role-forbid"><i class="iconfont" id="roleEnable">&#xe650;</i></div>
            {{#  } }} 
        </li>
        {{#  }); }}
    </script>
		<!--权限模板-->
		<script type="text/html" id="systemTpl">
			{{#  layui.each(d.data, function(index, item){ }}
        <li class="group" id="{{item.sysId}}" opened="{{item.open}}">
            <div class="li-group-top">
                <h4>{{item.sysName}}</h4>
                <form class="layui-form">
                    <input type="checkbox" name="open" value="{{item.open}}" lay-skin="switch" lay-filter="switchTest"
                        lay-text="ON|OFF" {{ item.open == 1 ? 'checked' : '' }}>
                </form>
            </div>
            <div class="eleTree" id="system{{item.sysId}}" lay-filter="system{{item.sysId}}"></div>
        </li>
        {{#  }); }}
    </script>

	</head>

	<body class="main-container">
		<div class="layui-fluid">
			<div class="layui-row layui-col-space1">
				<div class="layui-col-xs12 layui-col-sm12 layui-col-md5">
					<div class="role layui-card">
						<div class="layui-card-header">
							<button class="layui-btn layui-btn-sm layui-btn-normal" id="addRole" layid='add_role'>添加角色</button>
						</div>
						<div class="layui-card-body">
							<ul class="layui-bot-ul" id="roleInfo">
								<!-- <li class="li-item" ids="1">
                                <div class="li-item-left" style="flex: 1">
                                    <h4>贵阳市权限</h4>
                                    <p>角色说明</p>
                                </div>
                                <ul class="bot-btn-group li-item-right">
                                    <li><i class="iconfont">&#xe62e;</i></li>
                                    <li><i class="iconfont">&#xe658;</i></li>
                                    <li><i class="iconfont">&#xe650;</i></li>
                                </ul>
                            </li> -->
							</ul>
						</div>
					</div>
				</div>
				<div class="layui-col-xs12 layui-col-sm12 layui-col-md7">
					<div class="system layui-card">
						<div class="layui-card-header">
							<button class="layui-btn layui-btn-sm layui-btn-normal" id="saveMenus">保 存</button>
						</div>
						<div class="layui-card-body">
							<ul class="layui-bot-ul" id="systemInfo">
								<!-- <li class="group">
                                <div class="li-group-top">
                                    <h4>A系统</h4>
                                    <form class="layui-form">
                                        <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest"
                                            lay-text="ON|OFF">
                                    </form>
                                </div>
                                <div class="eleTree system1" lay-filter="system1"></div>
                            </li> -->
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="index.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>
