user.jsp 17.7 KB

Raw Blame History Permalink

<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/unicorn.main.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/unicorn.grey.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/bootstrap-responsive.min.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/uniform.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
    <script src="<%=basePath %>js/excanvas.min.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/jquery-ui.custom.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>/js/bootstrap.min.js"></script>
    <script src="<%=basePath %>/js/unicorn.js"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/moment-with-locales.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.pagination.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.table.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.dialog.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.panel.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.alerts.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8"
            type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/layer/layer.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.select.js" charset="UTF-8" type="text/javascript"></script>
    <script src="<%=basePath %>js/jstree/jstree.min.js"></script>
    <script src="<%=basePath %>js/jquery.toaster.js"></script>
    <script>
        var contextPath = '<%=basePath %>';
    </script>
    <title>YOHO!运维</title>
</head>
<body>

<!-- 头部 -->
<div id="head">
</div>
<!-- 右侧具体内容 -->
<div id="content">
    <div id="breadcrumb">
        <a href="#" title="Go to Home" class="tip-bottom"><i
                class="icon-home"></i> Home</a> <a href="#" class="current">管理员</a>
    </div>

    <div class="container-fluid">
        <div class="widget-box">
            <div class="widget-title">
                <h5>用户操作</h5>
            </div>
            <div class="widget-content nopadding">
                <div class="widget-title" style="height: 36px;">
                	<div>
						<div class="form-inline" role="form" id="inBoxQueryDiv">
							<div class="input-group" style="float: left">
	                            <span class="input-group-addon">关键字:</span>
	                            <input type="text" id="user_key" name="user_key" class="form-control" placeholder="" />
							</div>
							<button id="btnSearch" class="btn btn-primary" style="margin-left: 10px" onclick="btnSearch()">
								搜 索
							</button>
							<a href="#" id="toAddUser" class="btn btn-success"
                           style="margin-left: 0px;" onclick="editUser(0,0,0,0,0,0,0)">添加用户</a>
						</div>
					</div>
                    </div>
            </div>
            <div id="userTable">

            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 140%">
            <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">
                <form id="hostGroupForm" class="form-horizontal">
                    <input type="hidden" name="id">
                    <div class="form-group">
                        <label class="col-sm-2 control-label"> <span style="color:red">*</span>用户名：</label>

                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="name" name="name"
                                   placeholder="用户名" maxlength="30" size="40"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"> <span style="color:red">*</span>中文名：</label>

                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="cName" name="cName"
                                   placeholder="中文名" maxlength="30" size="40"/>
                        </div>
                    </div>
                    <%--<div class="form-group">--%>
                        <%--<label class="col-sm-2 control-label"> <span style="color:red">*</span>等级：</label>--%>

                        <%--<div class="col-sm-8">--%>
                            <%--<input type="text" class="form-control" id="level" name="level"--%>
                                   <%--placeholder="等级" maxlength="30" size="40"/>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"> <span style="color:red">*</span>邮箱：</label>

                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="email" name="email"
                                   placeholder="邮箱" maxlength="30" size="40"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"> <span style="color:red">*</span>手机号：</label>

                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="mobile" name="mobile"
                                   placeholder="手机号" maxlength="30" size="40"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"> <span style="color:red">*</span>职责：</label>

                        <div class="col-sm-8">
                            <select id="role" name="role" class="form-control"style="width:295px">
                                <option value="develop" selected="selected">develop</option>
                                <option value="test">test</option>
                                <option value="operator">operator</option>
                                <option value="dba">dba</option>
                                <option value="leader">leader</option>
                                <option value="other">other</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" >
                        <label class="col-sm-2 control-label">模块组权限：</label>
                        <div class="col-sm-8" id="moduleGroups_div">

                        </div>
                    </div>
                    <div class="form-group" >
                        <label class="col-sm-2 control-label">模块权限：</label>
                        <div class="col-sm-8" id="modules_div">

                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label"> </label>

                        <div class="col-sm-8" id="messageAlert"></div>
                    </div>
                    <input type="hidden" name="editGroupId"/>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-success" value="Validate" onclick="saveuser()">提交</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>

<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script>
    $("#li_manager").addClass("active open");
    $("#li_user").addClass("active");
</script>
<script type="text/javascript">
    $(function () {
    	refreshUser();

        //加载form
        $("#hostGroupForm").form({
            loadUrl : contextPath + "/user/getAllModuleAndGroup",
            onLoadSuccess : function(data) {
                var contentHtml='';
                $.each(data.modules,function(n,value) {
                    if(n%6==0){
                        contentHtml+='</br>';
                    }
                    contentHtml+='<input type="checkbox" name="modulesCheckBox"  value="'+value.moduleName+'">' +value.moduleCName+'&nbsp;&nbsp;';
                });
                $("#modules_div").html(contentHtml);

                var groupHtml='';
                $.each(data.moduleGroups,function(n,value) {
                    if(n%6==0){
                        groupHtml+='</br>';
                    }
                    groupHtml+='<input type="checkbox" name="moduleGroupCheckBox"  value="'+value.name+'">' +value.cname+'&nbsp;&nbsp;';
                });
                $("#moduleGroups_div").html(groupHtml);

            }
        });

    });

    function refreshUser(){
    	//加载表格
        $("#userTable").table({
            columnAutoWidth: false,
            url: contextPath + "/manage/getUsers?keys="+ $("#user_key").val().trim(),
            striped: true,
            title: "用户信息列表",
            pagination: true,
            pageSize: 10,
            loadFilter: function (data) {
                return defaultLoadFilter(data);
            },
            columns: [{
                title: "用户名",
                field: "name",
                width: "15%"
            },{
                title: "中文名",
                field: "cname",
                width: "15%"
            }, {
                title: "模块组",
                field: "moduleGroups",
                width: "15%"
            },{
                title: "模块",
                field: "modules",
                width: "10%"
            },{
                title: "邮箱",
                field: "email",
                width: "15%"
            },{
                title: "手机号",
                field: "mobile",
                width: "10%"
            },{
                title: "职责",
                field: "role",
                width: "10%"
            },{
                title: "操作",
                formatter: function (value, rowData, rowIndex) {
                    var div = $("<div>");
                    $("<button onclick=\"editUser(\'" + rowData.id + "\',\'" + rowData.name + "\',\'" + rowData.email + "\',\'" + rowData.mobile + "\',\'" + rowData.cname+ "\',\'" + rowData.role+ "\',\'" + rowData.modules+"\',\'" + rowData.moduleGroups +"\')\">").addClass("btn btn-xs btn-success").html("修改").appendTo(div);
                    div.append("&nbsp;");
                    $("<button onclick=\"deleteUser(\'" + rowData.name + "\')\">").addClass("btn btn-xs btn-danger").html("删除").appendTo(div);
                    return div;
                }
            }]
        });
    }

    //打开新增或修改页面
    function editUser(id, name,email,maobile,cName,role,modules,moduleGroups) {
        $("#hostGroupForm #messageAlert").hide();
        if (id == 0) {//新增页面
            $("input[name='id']").val(0);
            $("input[name='name']").val("");
            $("input[name='cName']").val("");
            $("input[name='email']").val("");
            $("input[name='mobile']").val("");
            $("[name='moduleGroupCheckBox']").removeAttr("checked");
            $("[name='modulesCheckBox']").removeAttr("checked");
            $("input[name='name']").removeAttr("readonly");
            $("#myModalLabel").text("新增用户信息");
        } else {
            $("#myModalLabel").text("修改用户信息");
            $("input[name='id']").val(id);
            $("input[name='name']").val(name);
            $("input[name='name']").attr("readonly","readonly");
            $("input[name='cName']").val(cName);
            $("input[name='email']").val(email);
            $("input[name='mobile']").val(maobile);
            $("#role").val(role);

            $("[name='moduleGroupCheckBox']").removeAttr("checked");
            $("[name='modulesCheckBox']").removeAttr("checked");

            var modulesArr=modules.split(",");
            for(i=0;i<modulesArr.length;i++){
                $("[name='modulesCheckBox'][value='"+modulesArr[i]+"']").prop("checked",true);
            }

            var moduleGroupsArr=moduleGroups.split(",");
            for(i=0;i<moduleGroupsArr.length;i++){
                $("[name='moduleGroupCheckBox'][value='"+moduleGroupsArr[i]+"']").prop("checked",true);
            }

        }
        $("#myModal").modal('show');
    }


    //打开新增或修改页面
    function deleteUser(name) {
        var dialog = $("<div>").appendTo($("body"));
        dialog.dialog({
            title: "你确定删除吗",
            backdrop: "static",
            content: "你确定要删除该用户信息吗？",
            buttons: [{
                text: "否",
                className: "btn-danger",
                onclick: function () {
                    $(dialog).dialog("hide");
                }
            }, {
                text: "是",
                className: "btn-success",
                onclick: function () {
                    $(dialog).dialog("hide");
                    $.ajax({
                        url: contextPath + "/manage/deleteUser",
                        type: 'post',
                        async: false,
                        data: {
                            name: name
                        },
                        dataType: "json",
                        success: function (data) {
                            if (!data || data.code != 200) {
                                localAlert('删除失败', data.message);
                            }
                            $("#userTable").table("load");
                        }
                    });
                }
            }]
        });
    }

    function saveuser() {
        var id = $("input[name='id']").val();
        var name = $("input[name='name']").val();
        var email = $("input[name='email']").val();
        var mobile = $("input[name='mobile']").val();
        var cName = $("input[name='cName']").val();
        var role = $("#role option:selected").val()
        var modules="";
        $("input[name='modulesCheckBox']:checked").each(function(){
            modules += $(this).attr('value')+',';
        });

        var moduleGroups="";
        $("input[name='moduleGroupCheckBox']:checked").each(function(){
            moduleGroups += $(this).attr('value')+',';
        });


        if (name == null || name == "") {
            $("#hostGroupForm #messageAlert").alerts({
                content: "请输入用户名",
                type: "danger"
            });
            return;
        }

        var param = {
            id:id,
            name: name,
            email: email,
            mobile: mobile,
            cname: cName,
            role: role,
            moduleGroups: moduleGroups,
            modules: modules
        }
        $.ajax({
            url: contextPath + 'manage/saveUser',
            type: 'POST',
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(param),
            success: function (data) {
                if (!data || data.code != 200) {
                    $("#hostGroupForm #messageAlert").alerts({
                        content: data.message,
                        type: "danger"
                    });
                    return;
                }else{
                    $("#myModal").modal('hide');
                    $("#userTable").table("load");
                }
            },
            error: function (data) {
                localAlert('系统异常',data.message);
            }
        });
    }

    function btnSearch(){
    	refreshUser();
    }
</script>
</body>
</html>