authgroup.jsp 15.9 KB

Raw Blame History Permalink

<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@page import="com.ui.contants.ProjectConstant"%>
<%@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">
							<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="editAuthGroup(0)">添加权限组</a>
						</div>
					</div>
                    </div>
            </div>
            <div id="authGroupTable">

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

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog"  style="width:800px">
        <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">模块权限：</label>
                        <div class="col-sm-10" 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="saveAuthGroup()">提交</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>

<!-- 权限组下的用列表 -->
<div class="modal fade" id="myUserModal" tabindex="-1" role="dialog" aria-labelledby="myUserModalLabel" aria-hidden="true">
    <div class="modal-dialog"  style="width:800px">
        <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="myUserModalLabel"></h4>
            </div>
            <div class="modal-body">
                <div id="userTable"style="overflow-y: auto; overflow-x:hidden;max-height: 600px"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>

<script src="<%=basePath %>script/common/genarate_left_panel.js?v=<%=ProjectConstant.MENU_VERSION %>"></script>
<script>
    $("#li_manager").addClass("active open");
    $("#li_authority").addClass("active");
</script>
<script type="text/javascript">
    $(function () {
    	refreshAuthgroup();

        //加载form
        $("#hostGroupForm").form({
            loadUrl : contextPath + "/user/getAllModuleAndGroup",
            onLoadSuccess : function(data) {
                var groupMap={};
                $.each(data.moduleGroups,function(n,value) {
                    groupMap[value.name]=value.cname;
                });


                var modulesByGroupMap={};
                $.each(data.modules,function(n,value) {
                    var grp=value.moduleGroup;
                    if(!modulesByGroupMap[grp]){
                        modulesByGroupMap[grp] = new Array();
                    }
                    modulesByGroupMap[grp].push(value);
                });

                var contentHtml='';
                for(var groupKey in modulesByGroupMap){
                    contentHtml += '<tr>';

                    contentHtml += '<td width="80px;" align="center">'+groupMap[groupKey]+'</td>';
                    contentHtml += '<td style="padding: 0.3em 1em;">';
                    var arrayModuleUnderGroup=modulesByGroupMap[groupKey];
                    $.each(arrayModuleUnderGroup,function(n,value) {
                        if(n>0&&n%8==0){
                            contentHtml+='</br>';
                        }
                        contentHtml+='<input type="checkbox" name="modulesCheckBox" cnValue="'+value.moduleCName+'"  value="'+value.moduleName+'">' +value.moduleCName+'&nbsp;&nbsp;';
                    });
                    contentHtml += '<td>';
                    contentHtml += '</tr>';
                }
                $("#modules_div").html("<table border=1>"+contentHtml+"</table>");
            }
        });

        //加载表格
        $("#userTable").table({
            columnAutoWidth: false,
            url: contextPath + "/manage/getUsersByAuthGroup",
            striped: true,
            //title: "用户信息列表",
            pagination: false,
            pageSize: 10,
            loadFilter: function (data) {
                return defaultLoadFilter(data);
            },
            columns: [{
                title: "用户名",
                field: "name",
                width: "30%"
            },{
                title: "中文名",
                field: "cname",
                width: "50%"
            },{
                title: "职责",
                field: "role",
                width: "20%"
            }]
        });

    });

    function refreshAuthgroup(){
    	//加载表格
        $("#authGroupTable").table({
            columnAutoWidth: false,
            url: contextPath + "/manage/getAuthorityGroup",
            striped: true,
            title: "权限组列表",
            pagination: false,
            pageSize: 10,
            loadFilter: function (data) {
                return defaultLoadFilter(data);
            },
            columns: [{
                title: "组名",
                field: "name",
                width: "10%"
            },{
                title: "模块",
                field: "modules",
                width: "40%"
            },{
                title: "模块",
                field: "moduleDescr",
                width: "40%"
            },{
                title: "操作",
                width: "15%",
                formatter: function (value, rowData, rowIndex) {
                    var div = $("<div>");
                    $("<button onclick=\"showUserInAuthGroup(\'" + rowData.id + "\',\'" + rowData.name +"\')\">").addClass("btn btn-xs btn-info").html("人员").appendTo(div);
                    div.append("&nbsp;");
                    $("<button onclick=\"editAuthGroup(\'" + rowData.id + "\',\'" + rowData.name + "\',\'" + rowData.modules+"\')\">").addClass("btn btn-xs btn-success").html("修改").appendTo(div);
                    div.append("&nbsp;");
                    $("<button onclick=\"deleteAuthGroup(\'" + rowData.id + "\')\">").addClass("btn btn-xs btn-danger").html("删除").appendTo(div);
                    return div;
                }
            }]
        });
    }

    function showUserInAuthGroup(id, name) {
        $("#userTable").table("loadLoaclData",[]);
        $("#userTable").table("load",{
            id:id
        });
        $("#myUserModal").modal('show');
    }
    //打开新增或修改页面
    function editAuthGroup(id, name,modules) {
        $("#hostGroupForm #messageAlert").hide();
        if (id == 0) {//新增页面
            $("input[name='id']").val(0);
            $("input[name='name']").val("");
            $("[name='modulesCheckBox']").removeAttr("checked");
            $("#myModalLabel").text("新增权限组");
        } else {
            $("#myModalLabel").text("修改权限组");
            $("input[name='id']").val(id);
            $("input[name='name']").val(name);

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

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

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


    //打开新增或修改页面
    function deleteAuthGroup(id) {
        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/deleteAuthGroup",
                        type: 'post',
                        async: false,
                        data: {
                            id: id
                        },
                        dataType: "json",
                        success: function (data) {
                            if (!data || data.code != 200) {
                                localAlert('删除失败', data.message);
                            }
                            $("#authGroupTable").table("load");
                        }
                    });
                }
            }]
        });
    }

    function saveAuthGroup() {
        var id = $("input[name='id']").val();
        var name = $("input[name='name']").val();
        var modules="";
        var moduleDescr="";
        $("input[name='modulesCheckBox']:checked").each(function(){
            modules += $(this).attr('value')+',';
            moduleDescr += $(this).attr("cnValue")+",";
        });


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

        if (modules == null || modules == "") {
            $("#hostGroupForm #messageAlert").alerts({
                content: "请选中模块",
                type: "danger"
            });
            return;
        }

        var param = {
            id:id,
            name: name,
            modules: modules,
            moduleDescr: moduleDescr
        }
        $.ajax({
            url: contextPath + 'manage/saveAuthGroup',
            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');
                    $("#authGroupTable").table("load");
                }
            },
            error: function (data) {
                localAlert('系统异常',data.message);
            }
        });
    }

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