<!--{include file="<!--{$oetplpath}-->block_head.tpl"}-->

<!--{if $a == "run"}-->
<div class="layui-fluid oe_fluid">

  <div class="oe_breadcrumb_box clearfix">
    <div class="layui-breadcrumb fl" lay-filter="breadcrumb" style="visibility:visible;">
      <a href="javascript:;">站点管理</a><span lay-separator="">/</span>
      <a href="javascript:;">系统帐号</a><span lay-separator="">/</span>
      <a><cite>角色管理</cite></a>
    </div>
    <div class="oe_tool_bar ft" style="display:none;">
      <button class="layui-btn layui-btn-sm search" id="but_submit_search" lay-submit lay-filter="searchform2">
        <i class="layui-icon layui-icon-search"></i>
        搜索
        <span class="oe_btn_loading layui-anim layui-icon layui-anim-rotate layui-anim-loop" style="display:none;">&#xe63d;</span>
      </button>
    </div>
  </div>
  <!--//Top End -->
  
  <blockquote class="layui-elem-quote">
    <strong>温馨提示：</strong>
    角色权限：上级可以查看和编辑下级的记录，下级不能查看和编辑上级的记录，同级之间不能互相查看；
    上级不能查看自己同级别的下级角色的记录；
    <br />
    一个用户对应一个角色，一个角色可以对应多个用户；
    通过角色可以控制模块权限，可以新增、编辑、查看和删除模块的记录。
  </blockquote>


  <div class="oe_table_wrap layui-form">
  
    <div class="oe_tbl_tool clearfix">
      <div class="oe_gnbar clearfix">
        <a href="<!--{$oefile}-->&c=<!--{$c}-->&a=add" class="btn add fl del_line">
          <i class="layui-icon layui-icon-add-1"></i>
          <span>添加一级角色</span>
        </a>
      </div>
      <div class="oe_tongji_bar clearfix current">
        <span><b><!--{$total}--></b> 条记录</span>
      </div>
    </div>
    
    
    <table class="layui-table">
      <thead>
        <tr>
          <th width="10%">ID</th>
          <th width="30%">角色名称</th>
          <th>描述</th>
          <th width="10%">排序</th>
          <th width="20%">操作</th>
        </tr> 
      </thead>
      
      <!--{if empty($roles)}-->
      <tr>
        <td colspan="5" class="text_center">没有符合条件的信息</td>
      </tr>
      <!--{else}-->
      <!--{foreach $roles as $volist}-->
      <tr>
        <td class="text_center"><!--{$volist.roleid}--></td>
        <td>
          <!--{if $volist.depth==0}-->
            <b><!--{$volist.tree_node}--></b>
          <!--{else}-->
            <!--{if $volist.depth=='1'}-->
            <font color="green"><!--{$volist.tree_node}--></font>
            <!--{elseif $volist.depth=='2'}-->
            <font color="blue"><!--{$volist.tree_node}--></font>
            <!--{elseif $volist.depth=='3'}-->
            <font color="orange"><!--{$volist.tree_node}--></font>
            <!--{else}-->
            <!--{$volist.tree_node}-->
            <!--{/if}-->
          <!--{/if}-->
        </td>
        <td class="text_center"><!--{$volist.desc}--></td>
        <td class="text_center"><!--{$volist.orders}--></td>
        <td class="text_center">
          <div class="btn_box">
            <a href="<!--{$oefile}-->&c=<!--{$c}-->&a=edit&id=<!--{$volist.roleid}-->" class="layui-btn layui-btn-xs layui-btn-normal">编辑</a>
            <a href="javascript:;" f="handle-one" data-url="<!--{$oefile}-->&c=<!--{$c}-->&a=del&id=<!--{$volist.roleid}-->" class="layui-btn layui-btn-xs layui-btn-danger">删除</a>
            <a href="<!--{$oefile}-->&c=<!--{$c}-->&a=add&sparentid=<!--{$volist.roleid}-->" class="layui-btn layui-btn-xs">添加子角色</a>
          </div>
        </td>
      </tr>
      <!--{/foreach}-->
      <!--{/if}-->
    </table>

  </div>
</div>
<!--{/if}-->


<!--{if $a == "add"}-->
<div class="layui-fluid oe_fluid">

  <div class="oe_breadcrumb_box clearfix">
    <div class="layui-breadcrumb fl" lay-filter="breadcrumb" style="visibility:visible;">
      <a href="javascript:;">站点管理</a><span lay-separator="">/</span>
      <a href="javascript:;">角色管理</a><span lay-separator="">/</span>
      <a><cite>添加角色</cite></a>
    </div>
    <div class="oe_tool_bar ft">
      <button class="layui-btn layui-btn-sm layui-btn-radius" id="but_submit_post2" lay-submit lay-filter="addform">
        添加保存
        <span class="oe_btn_loading layui-anim layui-icon layui-anim-rotate layui-anim-loop" style="display:none;">&#xe63d;</span>
      </button>
      
      <span class="layui-btn layui-btn-sm layui-btn-primary layui-btn-radius">
        <a href="<!--{$oefile}-->&c=<!--{$c}-->">返回列表</a>
      </span>
    </div> 
  </div>
  
  <blockquote class="layui-elem-quote">
    <strong>温馨提示：</strong>
    角色权限：上级可以查看和编辑下级的记录，下级不能查看和编辑上级的记录，同级之间不能互相查看；
    上级不能查看自己同级别的下级角色的记录；
    <br />
    一个用户对应一个角色，一个角色可以对应多个用户；
    通过角色可以控制模块权限，可以新增、编辑、查看和删除模块的记录。
  </blockquote>

  
  
  <form class="layui-form" id="myform" action="<!--{$oefile}-->&c=<!--{$c}-->&<!--{$comeurl}-->" method="post">
  <input type="hidden" name="a" id="a" value="saveadd" />
  <div class="layui-card">
    <div class="layui-card-header">添加角色</div>
    <div class="layui-card-body">
      <table class="oe_tbl_form layui-form">
        <tr>
          <th width="15%"><font color="red"></font>上级角色：</th>
          <td width="85%">
            <div class="input-250">
            <!--{hook mod='roles' type='select' name='parentid' text='=不从属任何角色=' value=$sparentid}-->
            </div>
          </td>
        </tr>
        <tr>
          <th><font color="red">*</font>角色名称：</th>
          <td>
            <input type="text" name="rolename" id="rolename" class="layui-input input-250" />
          </td>
        </tr>
        <tr>
          <th>角色排序：</th>
          <td>
            <input type="text" name="orders" id="orders" class="layui-input input-80" value="<!--{$orders}-->" />
          </td>
        </tr>
        <tr>
          <th>角色描述：</th>
          <td>
            <textarea name="desc" id="desc" class="layui-textarea" style="width:40%;height:60px;"></textarea>
          </td>
        </tr>
      </table>
      <style>
      .border-gray th{border: 1px solid #ebebeb;}
      .border-gray td{border: 1px solid #ebebeb;}
      </style>
      <div class="layui-card-header">角色权限</div>
      <table id="roles-profiles" class="oe_tbl_form layui-form border-gray">
        <tr>
          <th width="20%" style="line-height:35px;text-align:center;">模块 <input lay-skin="primary" type="checkbox" name="allMods" id="allMods" lay-filter="allMods" /><span style="font-size:12px;">(打勾显示)</font></th>
          <th width="10%" style="text-align:center;">查看 <input class="mods_act" lay-skin="primary" type="checkbox" value="item_view" lay-filter="selectItem"></th>
          <th width="10%" style="text-align:center;">添加 <input class="mods_act" lay-skin="primary" type="checkbox" value="item_add" lay-filter="selectItem"></th>
          <th width="10%" style="text-align:center;">修改 <input class="mods_act" lay-skin="primary" type="checkbox" value="item_edit" lay-filter="selectItem"></th>
          <th width="10%" style="text-align:center;">删除 <input class="mods_act" lay-skin="primary" type="checkbox" value="item_del" lay-filter="selectItem"></th>
          <th width="10%" style="text-align:center;">审批 <input class="mods_act" lay-skin="primary" type="checkbox" value="item_approved" lay-filter="selectItem"></th>
          <th style="text-align:center;">其他操作 <input class="mods_act" lay-skin="primary" type="checkbox" value="item_other" lay-filter="selectItem"></th>
        </tr>
        <!--{$rolesvalue}-->
      </table>

    </div>
  </div>
  </form>
  
  <div class="oe_kong"></div>
  <div class="oe_tbl_form_btn current">
    <button class="layui-btn" id="but_submit_post" lay-submit lay-filter="addform">
      添加保存
      <span class="oe_btn_loading layui-anim layui-icon layui-anim-rotate layui-anim-loop" style="display:none;">&#xe63d;</span>
    </button>
  </div>
  
</div>

<script type="text/javascript">
$(function(){

    layui.use('form', function(){
        $form = layui.form;
        //保存...
        $form.on('submit(addform)', function(data){
            $obj_id = data.elem.getAttribute("id");
            if (!$("#"+$obj_id).hasClass("forbid_submit")) {
            
                if ($("#rolename").val().length  == 0) {
                    layer.msg("请填写角色名称");
                    return false;
                }
                
                $("#"+$obj_id).addClass("forbid_submit");
                if ($("#"+$obj_id).find("span").length > 0) {
                    $("#"+$obj_id).find("span").show();
                }
                //...
                $("#myform").submit();
            }
        });

        //全部模块全选、取消
        $form.on('checkbox(allMods)', function(data){
            $a = data.elem.checked;
            if ($a == true){
                $("input[name='mods[]']").prop("checked", true);
                $("input[name='profiles[]']").prop("checked", true);
                $(".mods_act").prop("checked", true);
                $form.render('checkbox');
            }
            else{
                $("input[name='mods[]']").prop("checked", false);
                $("input[name='profiles[]']").prop("checked", false);
                $(".mods_act").prop("checked", false);
                $form.render('checkbox');
            }
        });
        
        //左边单个模块 全选、取消
        $form.on('checkbox(selectMod)', function(data){
            $mod = data.value;
            $a = data.elem.checked;
            if ($a == true){
                $(".mod_"+$mod).prop("checked", true);
                $form.render('checkbox');
            }
            else{
                $(".mod_"+$mod).prop("checked", false);
                $form.render('checkbox');
            }
        });
        
        //列操作 全选、取消
        $form.on('checkbox(selectItem)', function(data){
            $item = data.value;
            $a = data.elem.checked;
            if ($a == true){
                $("."+$item).prop("checked", true);
                $form.render('checkbox');
            }
            else{
                $("."+$item).prop("checked", false);
                $form.render('checkbox');
            }
        });
        
    });
    
});
</script>
<!--{/if}-->

<!--{if $a == "edit"}-->
<div class="layui-fluid oe_fluid">

  <div class="oe_breadcrumb_box clearfix">
    <div class="layui-breadcrumb fl" lay-filter="breadcrumb" style="visibility:visible;">
      <a href="javascript:;">站点管理</a><span lay-separator="">/</span>
      <a href="javascript:;">角色管理</a><span lay-separator="">/</span>
      <a><cite>编辑角色</cite></a>
    </div>
    <div class="oe_tool_bar ft">
      <button class="layui-btn layui-btn-sm layui-btn-radius" id="but_submit_post2" lay-submit lay-filter="editform">
        编辑保存
        <span class="oe_btn_loading layui-anim layui-icon layui-anim-rotate layui-anim-loop" style="display:none;">&#xe63d;</span>
      </button>
      <span class="layui-btn layui-btn-sm layui-btn-primary layui-btn-radius">
        <a href="<!--{$oefile}-->&c=<!--{$c}-->">返回列表</a>
      </span>
    </div> 
  </div>
  
  <form class="layui-form" id="myform" action="<!--{$oefile}-->&c=<!--{$c}-->&<!--{$comeurl}-->" method="post">
  <input type="hidden" name="a" id="a" value="saveedit" />
	<input type="hidden" name="id" id="id" value="<!--{$id}-->" />
  <div class="layui-card">
    <div class="layui-card-header">编辑角色</div>
    <div class="layui-card-body">
      <table class="oe_tbl_form layui-form">
        <tr>
          <th width="15%"><font color="red"></font>上级角色：</th>
          <td width="85%">
            <div class="input-250">
            <!--{hook mod='roles' type='select' name='parentid' text='=不从属任何角色=' value=$roles.parentid}-->
            </div>
          </td>
        </tr>
        <tr>
          <th><font color="red">*</font>角色名称：</th>
          <td>
            <input type="text" name="rolename" id="rolename" class="layui-input input-250" value="<!--{$roles.rolename}-->" />
          </td>
        </tr>
        <tr>
          <th>角色排序：</th>
          <td>
            <input type="text" name="orders" id="orders" class="layui-input input-80" value="<!--{$roles.orders}-->" />
          </td>
        </tr>
        <tr>
          <th>角色描述：</th>
          <td>
            <textarea name="desc" id="desc" class="layui-textarea" style="width:40%;height:60px;"><!--{$roles.desc}--></textarea>
          </td>
        </tr>
      </table>
      <style>
      .border-gray th{border: 1px solid #ebebeb;}
      .border-gray td{border: 1px solid #ebebeb;}
      </style>
      <div class="layui-card-header">角色权限</div>
      <table id="roles-profiles" class="oe_tbl_form layui-form border-gray">
        <tr>
          <th width="20%" style="line-height:35px;text-align:center;">模块 <input lay-skin="primary" type="checkbox" name="allMods" id="allMods" lay-filter="allMods" /><span style="font-size:12px;">(打勾显示)</font></th>
          <th width="10%" style="text-align:center;">查看 <input class="mods_act" lay-skin="primary" type="checkbox" value="item_view" lay-filter="selectItem"></th>
          <th width="10%" style="text-align:center;">添加 <input class="mods_act" lay-skin="primary" type="checkbox" value="item_add" lay-filter="selectItem"></th>
          <th width="10%" style="text-align:center;">修改 <input class="mods_act" lay-skin="primary" type="checkbox" value="item_edit" lay-filter="selectItem"></th>
          <th width="10%" style="text-align:center;">删除 <input class="mods_act" lay-skin="primary" type="checkbox" value="item_del" lay-filter="selectItem"></th>
          <th width="10%" style="text-align:center;">审批 <input class="mods_act" lay-skin="primary" type="checkbox" value="item_approved" lay-filter="selectItem"></th>
          <th style="text-align:center;">其他操作 <input class="mods_act" lay-skin="primary" type="checkbox" value="item_other" lay-filter="selectItem"></th>
        </tr>
        <!--{$rolesvalue}-->
      </table>
      
    </div>
  </div>
  </form>
  
  <div class="oe_kong"></div>
  <div class="oe_tbl_form_btn current">
    <button class="layui-btn" id="but_submit_post" lay-submit lay-filter="editform">
      编辑保存
      <span class="oe_btn_loading layui-anim layui-icon layui-anim-rotate layui-anim-loop" style="display:none;">&#xe63d;</span>
    </button>
  </div>
  
</div>
<script type="text/javascript">
$(function(){

    layui.use('form', function(){
        $form = layui.form;
        //保存...
        $form.on('submit(editform)', function(data){
            $obj_id = data.elem.getAttribute("id");
            if (!$("#"+$obj_id).hasClass("forbid_submit")) {
            
                if ($("#rolename").val().length  == 0) {
                    layer.msg("请填写角色名称");
                    return false;
                }
                
                $("#"+$obj_id).addClass("forbid_submit");
                if ($("#"+$obj_id).find("span").length > 0) {
                    $("#"+$obj_id).find("span").show();
                }
                //...
                $("#myform").submit();
            }
        });
        
        //全部模块全选、取消
        $form.on('checkbox(allMods)', function(data){
            $a = data.elem.checked;
            if ($a == true){
                $("input[name='mods[]']").prop("checked", true);
                $("input[name='profiles[]']").prop("checked", true);
                $(".mods_act").prop("checked", true);
                $form.render('checkbox');
            }
            else{
                $("input[name='mods[]']").prop("checked", false);
                $("input[name='profiles[]']").prop("checked", false);
                $(".mods_act").prop("checked", false);
                $form.render('checkbox');
            }
        });
        
        //左边单个模块 全选、取消
        $form.on('checkbox(selectMod)', function(data){
            $mod = data.value;
            $a = data.elem.checked;
            if ($a == true){
                $(".mod_"+$mod).prop("checked", true);
                $form.render('checkbox');
            }
            else{
                $(".mod_"+$mod).prop("checked", false);
                $form.render('checkbox');
            }
        });
        
        //列操作 全选、取消
        $form.on('checkbox(selectItem)', function(data){
            $item = data.value;
            $a = data.elem.checked;
            if ($a == true){
                $("."+$item).prop("checked", true);
                $form.render('checkbox');
            }
            else{
                $("."+$item).prop("checked", false);
                $form.render('checkbox');
            }
        });

    });
    
});
</script>
<!--{/if}-->
</body>
</html>