<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jspf/common.jspf" %>
<%@ include file="/WEB-INF/jspf/confirmJsp.jspf" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>菜单管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="${path}/static/zTree_v3-master/css/demo.css" type="text/css">
    <link rel="stylesheet" href="${path}/static/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script src="${path}/static/zTree_v3-master/js/jquery.ztree.all.js"></script>
    <script src="${path}/static/zTree_v3-master/js/jquery.ztree.exhide.js"></script>
    <script>
            var path = "${path}";
    </script>
    <style type="text/css">
        .searcDiv{
            margin-top:2%;
        }
        .searchTreeInput{
            margin: 0 auto;
            width:80%;
        }
        .treeBtn{
            margin-top:-3%;
            padding-left:19%;
        }
        .treeOperBtn{
            margin-left:20px;
        }
        div#rMenu {
            width: 60px;
            position:absolute;
            visibility:hidden; top:0;
            background-color: #555;
            text-align:left;
            padding: 2px;
        }
        div#rMenu ul li{
            margin: 1px 0;
            padding: 0 5px;
            cursor: pointer;
            background-color: #fff;
            list-style: none outside none;
            text-align: center;
        }
        .widget-header{
            height:26px;
            background-color: #1D9ED7;
            font-size: 16px!important;
            color: #fff;
            font-weight: bold;
         }
        .ztree{
            border: 0px!important;
            background-color: #fff!important;
            overflow: auto!important;
            font-size: 14rem!important;
            height:75%!important;
            width: 100%!important;
        }
        .zTreeDemo{
            margin-left:10%;
        }
        .treeBtn{
            margin-top:-3%;
            padding-left:19%;
        }
        .iconSpan{
            font-size:40px;
        }
        .restore{
            float:right;
            width:100px!important;
        }
    </style>
</head>
<body>
    <input type="hidden" id="currentTreeId"/>
    <div>
        <div class="row">
            <div class="col-sm-4">
                <div class="">
                    <div class="widget-header">
                            <h2>&nbsp;</h2>
                    </div>
                    <div class="searcDiv">
                        <input type="text" id="key" value="" class="form-control searchTreeInput input-sm"
                    placeholder="菜单名称" maxlength="16"/><br/>
                    </div>
                    <div class="treeBtn">
                        <button type="button" class="btn btn-primary btn-sm treeOperBtn" onclick="expandAll();">全部展开</button>
                        <button type="button" class="btn btn-primary btn-sm treeOperBtn" onclick="collapseAll();">全部折叠</button>
                    </div>
                    <div id="zTreeDemo" class="zTreeDemo">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                    <div id="rMenu">
                        <ul>
                        <pm:myPermissions permissions="/menu/add">
                            <li id="m_add" onclick="addTreeNode();">增加</li>
                        </pm:myPermissions>
                        <pm:myPermissions permissions="/menu/delete">
                            <li id="m_del" onclick="removeTreeNode();">删除</li>
                        </pm:myPermissions>
                        <pm:myPermissions permissions="/menu/update">
                            <li id="m_reset" onclick="updateTree();">修改</li>
                        </pm:myPermissions>
                        </ul>
                    </div>
                </div>
            </div><!-- /span -->
            <!--子节点的名称-->
            <input type="hidden" id="childrenNodeNames">
            <!--相邻节点的名称-->
            <input type="hidden" id="nearNodeNames">
            <!--子节点的功能方法-->
            <input type="hidden" id="childrenNodeMethods">
            <!--相邻节点的功能方法-->
            <input type="hidden" id="nearNodeMethods">
                <div class="col-sm-4" id="menuDiv" style="display: none">
                    <div class="">
                        <div class="widget-header">
                            <font>菜单信息</font>
                        </div>
                        <div class="widget-body">
                            <div class="widget-main">
                                <div>
                                    <form class="form-horizontal" id="form1">
                                            <input type="hidden" name="menuId" id="menuId">
                                            <div class="box-body" style="padding-top:10px">
                                                <div class="form-group" >
                                                    <label  class="col-sm-4 control-label">菜单名:</label>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control input-sm" id="menuName" name="menuName" required maxlength="16">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label  class="col-sm-4 control-label">菜单图标:</label>
                                                    <div class="col-sm-4">
                                                        <input type="text" class="form-control input-sm" name="menuIcon" id="menuIcon" readonly>
                                                    </div>
                                                    <div class="col-sm-2">
                                                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">浏览</button>
                                                    </div>
                                                    <div class="col-sm-2">
                                                        <span id="iconSpan"></span>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-4 control-label">菜单地址:</label>
                                                    <div class="col-sm-8">
                                                         <input type="text" class="form-control input-sm" id="menuUrl" name="menuUrl" required maxlength="500">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label  class="col-sm-4 control-label">所属系统:</label>
                                                    <div class="col-sm-8">
                                                        <select class="form-control input-sm" name="sysFlag" id="sysFlag" required>
                                                        </select>
                                                    </div>
                                                    <input type="hidden" id="sysName" name="sysName">
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-4 control-label">菜单父节点:</label>
                                                    <div class="col-sm-8">
                                                        <input type="text" class="form-control input-sm" readonly id="parentName" required>
                                                        <input type="hidden" class="form-control"  name="parentId" id="parentId" value="0" required>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label  class="col-sm-4 control-label">排序:</label>
                                                    <div class="col-sm-8">
                                                        <input type="number" class="form-control input-sm"  id="sort" name="sort" oninput="if(value.length>9)value=value.slice(0,9)">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label  class="col-sm-4 control-label">有效否:</label>
                                                    <div class="col-sm-8">
                                                        <select class="form-control input-sm" name="effective" id="effective">
                                                            <option value="1">是</option>
                                                            <option value="0">否</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label  class="col-sm-4 control-label">备注:</label>
                                                    <div class="col-sm-8">
                                                        <textarea class="form-control input-sm" name="remark" id="remark" maxlength="50"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="box-footer">
                                                <pm:myPermissions permissions="/menu/update">
                                                    <button type="button" class="btn btn-primary restore" onclick="addMenu()">保存</button>
                                                </pm:myPermissions>
                                            </div>
                                    </form>
                                    <!-- 模态框（Modal） -->
                                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                    <h4 class="modal-title" id="myModalLabel">选择菜单图标</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <input type="radio" name="icon" value="fa fa-dashboard"><span class="glyphicon fa fa-dashboard iconSpan"></span>
                                                    <input type="radio" name="icon" value="fa fa-circle-o"><span class="glyphicon fa fa-circle-o iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-user"><span class="glyphicon glyphicon-user iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-asterisk"><span class="glyphicon glyphicon-asterisk iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-cloud"><span class="glyphicon glyphicon-cloud iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-envelope"><span class="glyphicon glyphicon-envelope iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-plus"><span class="glyphicon glyphicon-plus iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-pencil"><span class="glyphicon glyphicon-pencil iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-search"><span class="glyphicon glyphicon-search iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-star"><span class="glyphicon glyphicon-star iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-th"><span class="glyphicon glyphicon-th iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-th-list"><span class="glyphicon glyphicon-th-list iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-off"><span class="glyphicon glyphicon-off iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-signal"><span class="glyphicon glyphicon-signal iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-cog"><span class="glyphicon glyphicon-cog iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-home"><span class="glyphicon glyphicon-home iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-list-alt"><span class="glyphicon glyphicon-list-alt iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-flag"><span class="glyphicon glyphicon-flag iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-tag"><span class="glyphicon glyphicon-tag iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-tags"><span class="glyphicon glyphicon-tags iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-book"><span class="glyphicon glyphicon-book iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-bookmark"><span class="glyphicon glyphicon-bookmark iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-dashboard"><span class="glyphicon glyphicon-dashboard iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-wrench"><span class="glyphicon glyphicon-wrench iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-tasks"><span class="glyphicon glyphicon-tasks iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-education"><span class="glyphicon glyphicon-education iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-duplicate"><span class="glyphicon glyphicon-duplicate iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-tree-deciduous"><span class="glyphicon glyphicon-tree-deciduous iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-tree-conifer"><span class="glyphicon glyphicon-tree-conifer iconSpan"></span>
                                                    <input type="radio" name="icon" value="glyphicon glyphicon-briefcase"><span class="glyphicon glyphicon-briefcase iconSpan"></span>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                                    <button type="button" class="btn btn-primary" onclick="tijiao()">提交更改</button>
                                                </div>
                                            </div><!-- /.modal-content -->
                                        </div><!-- /.modal -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /span -->

                <div class="col-md-4 left" id="methodDiv"  style="width:33%;display:none;">
                    <div class="">
                        <div class="widget-header">
                            <font>功能信息</font>
                        </div>
                    <div class="widget-body">
                        <div class="widget-main">
                            <div>
                                <form class="form-horizontal" id="form2">
                                    <input type="hidden" name="menuId" id="menuId1">
                                    <input type="hidden" name="sysId" id="sysId1">
                                    <input type="hidden" name="sysFlag" id="sysFlag1">
                                    <div class="box-body" style="padding-top:10px">
                                        <div class="form-group" >
                                            <label  class="col-sm-4 control-label">功能名称:</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control input-sm"  name="menuName" id="menuName1" required maxlength="16">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label  class="col-sm-4 control-label">功能方法:</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control input-sm" name="method" id="method" maxlength="30">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label  class="col-sm-4 control-label">方法类别:</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control input-sm" name="functionType" id="functionType" maxlength="16">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label  class="col-sm-4 control-label">功能分类:</label>
                                            <div class="col-sm-8">
                                                <select class="form-control input-sm" name="methodType" id="methodType">
                                                    <option vlaue="基本类">基本类</option>
                                                    <option vlaue="文档类">文档类</option>
                                                    <option vlaue="业务类">业务类</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-4 control-label">菜单父节点:</label>
                                            <div class="col-sm-8">
                                                <input type="text" class="form-control input-sm" readonly id="parentName1" required>
                                                <input type="hidden" class="form-control"  name="parentId" id="parentId1" required>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label  class="col-sm-4 control-label">排序:</label>
                                            <div class="col-sm-8">
                                                <input type="number" class="form-control input-sm" name="sort" id="sort1" oninput="if(value.length>9)value=value.slice(0,9)">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label  class="col-sm-4 control-label">有效否:</label>
                                            <div class="col-sm-8">
                                                <select class="form-control input-sm" name="effective" id="effective1">
                                                    <option value="1">是</option>
                                                    <option value="0">否</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label  class="col-sm-4 control-label">备注:</label>
                                            <div class="col-sm-8">
                                                <textarea class="form-control input-sm" name="remark" id="remark1" maxlength="50"></textarea>
                                            </div>
                                        </div>
                                    <div class="box-footer">
                                    <pm:myPermissions permissions="/menu/update">
                                        <button type="button" class="btn btn-primary restore"  onclick="addMethod()">保存</button>
                                    </pm:myPermissions>
                                    </div>
                                <!-- /.box-footer -->
                                </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- /span -->
        </div>
    </div><!-- /.main-container -->
    <script src="${path}/static/js/menu/menuList.js"></script>
    <script src="${path}/static/js/menu/fuzzysearch.js"></script>
    <%@ include file="/WEB-INF/jspf/loading.jspf" %>
</body>
</html>
