<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jspf/common.jspf" %>
<%@ include file="/WEB-INF/jspf/confirmJsp.jspf" %>
<html>
<head>
    <title>用户管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link rel="stylesheet" href="${path}/static/css/comm.css">
    <link rel="stylesheet" href="${path}/static/zTree_v3-master/css/zTreeStyle/zTreeStyle.css">
    <link href="${path}/static/select2/select2.css" rel="stylesheet">
    <script src="${path}/static/select2/select.js"></script>
    <style type="text/css">
        /*页头*/
        .panel-heading{
            padding: 0 16px;

        }
        hr{
            margin:0;
        }
        .form-group{
            margin-left:15px;
        }
        /*模态框表单*/
        .formDiv{
            width:100%;
            height:30px;
        }
        .searchDiv{
            margin-bottom:0px!important;
        }
        .control-label{
            width:30%;
            text-align: right;
            padding-top:2px;
        }
        .input{
            width:50%;
            float:left;
        }
        /*按钮组*/
        .btns{
            margin-top:5px;
            text-align: right;
            margin-bottom: 5px;
        }
        /*模态框*/
        .modal-header{
            text-align: center;
        }
        .modal-title{
            font-weight: bold;
        }
        .modelBtns{
            text-align: center;
        }
        .modelBtn{
            width: 74px;
            margin-left: 38px;
            margin-bottom: 16px;
        }
        .operBtns{
            margin-left:10px;
        }
        .tableDiv{
            margin-left:14px;
        }
        .shortInput{
            width:80px;
        }
        .sexInput{
            width:70px;
        }
        .warningLabel{
            margin-left:102px;
        }
        .warningDiv{
            margin-left: 134px;
            margin-top: -20px;
        }
        .hidden-xs{
            max-width: 250px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .form-group{
            padding-top: 5px;
        }
        /*.dropdown {
            width:50%!important;
        }*/
    </style>
</head>
<body>
<div style="width: 100%">
    <input type="hidden" id="checks">
    <input type="hidden" id="userNames">
    <div class="row">
        <div class="col-md-12">
            <div class="panel-heading"><h4>基本管理/用户管理</h4></div>
            <hr>
            <form class="form-inline searchDiv" role="form">
                <div class="">
                    <div class="form-group">
                        <label for="user_name">账号:</label>
                        <input type="text" class="form-control input-sm" id="user_name" maxlength="16"/>
                    </div>
		    <div class="form-group">
                        <label for="searchName">姓名:</label>
                        <input type="text" class="form-control input-sm" id="searchName" maxlength="16"/>
                    </div>
                    <div class="form-group">
                        <label for="user_position">用户职位:</label>
                        <select class=" form-control input-sm" style="width:106px" id="user_position">
                            <option value="">全部</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>所属角色:</label>
                        <div class=" form-group form-inline">
                            <select class=" form-control input-sm" style="width:106px" id="roleId">
                                <option value="">全部</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="dept_id">所属部门:</label>
                        <div class=" form-group form-inline">
                            <select class="form-control input-sm" style="width:106px" id="dept_id">
                                <option value="">全部</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="effective">是否有效:</label>
                        <div class=" form-group form-inline">
                            <select class=" form-control input-sm" id="effective">
                                <option value="">全部</option>
                                <option value="1">是</option>
                                <option value="0">否</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <button type="button" id="queryBtn" class="btn btn-primary btn-sm form-group">查询</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="btns">
        <pm:myPermissions permissions="/user/resetPassword">
            <button type="button" onclick="resetPassword()" class="btn btn-info btn-sm">重置密码</button>
        </pm:myPermissions>
        <pm:myPermissions permissions="/user/add">
            <button type="button" onclick="add()" class="btn btn-warning btn-sm">增加</button>
        </pm:myPermissions>
        <pm:myPermissions permissions="/user/importExcel">
            <button type="button" class="btn btn-success btn-sm" onclick="importBtn()">导入Excel</button>
        </pm:myPermissions>
        <pm:myPermissions permissions="/user/export">
            <button type="button" class="btn btn-primary btn-sm" onclick="exportExcel()">导出Excel</button>
        </pm:myPermissions>
    </div>
    <div class="tableDiv">
        <table id="bootstrapTable" class="table text-nowrap table-bordered"></table>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">用户信息</h4>
            </div>
            <div class="modal-body" style="height:auto">
                <form id="updateaddform">
                    <div class="formDiv">
                        <label class="control-label left">账号：</label>
                        <input type="hidden" id="userId" name="userId">
                        <input type="text" class="form-control input input-sm" id="re_userName" name="userName" maxlength="15">
                    </div>
                    <div class="formDiv" id="passwordDiv">
                        <label  class="control-label left">密码：</label>
                        <input type="password" class="form-control input input-sm" readonly onfocus="this.removeAttribute('readonly');" id="re_userPwd" name="userPwd" maxlength="15" autocomplete="new-password">
                    </div>
                    <div class="formDiv">
                        <label class="control-label left">姓名：</label>
                        <input type="text" class="form-control input input-sm" id="name" name="name" maxlength="15">
                    </div>
                    <div class="formDiv">
                        <label  class="control-label left">性别：</label>
                        <select class="form-control input input-sm sexInput" id="re_userSex" name="userSex">
                            <option value="1" selected="selected">女</option>
                            <option value="0">男</option>
                        </select>
                    </div>
                    <div class="formDiv">
                        <label  class="control-label left">年龄：</label>
                        <input type="number" class="form-control input input-sm sexInput" id="re_userAge" name="userAge" oninput="if(value.length>3)value=value.slice(0,3)">
                    </div>
                    <div class="formDiv">
                        <label  class="control-label left">移动电话：</label>
                        <input type="text" class="form-control input input-sm" id="re_userTel" name="userTel" oninput="if(value.length>11)value=value.slice(0,11)">
                    </div>
                    <div class="formDiv">
                        <label  class="control-label left">邮箱地址：</label>
                        <input type="text" class="form-control input input-sm" id="re_userEmail" name="userEmail" maxlength="25">
                    </div>
                    <div class="formDiv">
                        <label  class="control-label left">职位：</label>
                        <input type="text" class="form-control input input-sm" id="re_userPosition" name="userPosition" maxlength="25">
                    </div>
                    <div class="formDiv">
                        <label class="control-label left">所属部门：</label>
                        <div style="width:100%">
                            <select class="selectpicker" multiple id="deptId" name="deptId" style="max-height:400px!important;overflow:scroll;" data-live-search="true" data-actions-box="true">
                                <c:forEach items="${depts}" var="dept">
                                    <option value="${dept.deptId}" <c:if test="${deptId == dept.deptId}">selected</c:if>>${dept.deptName}</option>
                                </c:forEach>
                            </select>
                           <%-- <input id="txtTreeSelect1" type="text" onclick="showMenu1(); return false;"
                                   class="form-control input-sm input" placeholder="所属科室"
                                   name="parentId1"
                                   data-id=""
                                   readonly="readonly"
                            />
                            <input type="hidden" id="deptIds" name="deptId">--%>
                        </div>
                    </div>
                    <%--<div id="menuContent1" class="menuContent" style="display:none;background: #f9f9f9;
                                             position:static;z-index:10;width:288px;margin-left:170px">
                        <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 178px;">
                        </ul>
                    </div>--%>
                    <div class="formDiv">
                        <label  class="control-label left">所属角色：</label>
                        <select class="form-control input input-sm" id="re_roleId" name="roleId">

                        </select>
                    </div>
                    <div class="formDiv">
                        <label  class="control-label left">有效否：</label>
                        <select class="form-control input input-sm shortInput" id="re_effective" name="effective">
                            <option value="1">是</option>
                            <option value="0">否</option>
                        </select>
                    </div>
                    <div class="formDiv">
                        <label  class="control-label left">备注：</label>
                        <textarea id="re_remark" class="form-control input input-sm" name="remark" maxlength="50"></textarea>
                    </div>

                </form>
            </div>
            <div class="modelBtns">
                <button type="button" class="btn btn-primary btn-sm modelBtn" id="btn_submit">提交</button>
                <button type="button" class="btn btn-default btn-sm modelBtn" onclick="clearForm()">清空</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- 模态框（Modal1） 导入-->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel1">导入信息</h4>
            </div>
            <div class="modal-body" style="height:380px">
                <form  method="POST" enctype="multipart/form-data"
                       id="form1">
                    <div class="formDiv">
                        <label class="control-label left">下载模板：</label>
                        <input class="btn btn-primary btn-sm" onclick="window.open('${path }/static/template/用户列表导入模板(脐血库).xls');" type="button" value="下载模板">
                    </div>
                    <div class="formDiv">
                        <label for="re_effective" class="control-label left">选择文件：</label>
                        <input id="upfile" type="file" name="upfile" calss="layui-btn">
                    </div>
                    <div class="modelBtns">
                        <input class="btn btn-primary btn-sm" type="button" value="批量导入Excel数据"
                               onclick="importExcel('/user/importExcel','用户')">
                    </div>
                    <div class="formDiv">
                        <label class="warningLabel">友情提醒:</label>
                        <div class="warningDiv">
                            <span style="color: red"></br>1、用户名不能为空,不能重复,内容最多16个字</span></br>
                            <span style="color: red">2、密码不能为空,内容最多20个字</span></br>
                            <span style="color: red">3、性别不能为空,内容最多9个字</span></br>
                            <span style="color: red">4、年龄必须为正整数0-150,可为空,内容最多3个字</span></br>
                            <span style="color: red">5、手机号可为空,内容最多11个字</span></br>
                            <span style="color: red">6、邮箱可为空,内容最多25个字</span></br>
                            <span style="color: red">7、角色名不能为空</span></br>
                            <span style="color: red">8、部门名不能为空,可多个,"@"符号隔开。</span></br>
                            <span style="color: red">9、是否有效不能为空,内容最多9个字</span></br>
                            <span style="color: red">10、备注可为空,内容最多50个字</span></br>
                            <span style="color: red">11、值包含逗号必须单元格设置为文本类型。</span></br>
                        </div>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<script>
    $(function () {
        $(".modal-dialog").draggable();//为模态对话框添加拖拽
        $("#dept_id").select2()
    })
</script>
<script src="${path}/static/zTree_v3-master/js/jquery.ztree.core.js"></script>
<script src="${path}/static/zTree_v3-master/js/jquery.ztree.excheck.js"></script>
<script src="${path}/static/js/user1.js?t=1"></script>
<%@ include file="/WEB-INF/jspf/importExcelJsp.jspf" %>
</body>
</html>