resourcesSetting.html 6.87 KB
<div class="page-head">
    <div class="page-title">
        <h1>分配资源</h1>
    </div>
</div>

<ul class="page-breadcrumb breadcrumb">
    <li><a href="/pages/home.html" data-pjax>首页</a> <i
            class="fa fa-circle"></i></li>
    <li><span class="active">权限管理</span> <i class="fa fa-circle"></i></li>
    <li><a href="list.html" data-pjax>角色管理</a> <i class="fa fa-circle"></i></li>
    <li><span class="active">分配资源</span></li>
</ul>
<br><br>
<div class="row">
    <div class="col-lg-4 col-md-5 col-sm-5 col-md-offset-1">
        <!-- BEGIN PORTLET-->
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-bar-chart font-green"></i>
                    <span class="caption-subject font-green bold uppercase">角色信息</span>
                    <span class="caption-helper">更新于 2016-03-29 16:40</span>
                </div>
            </div>
            <div class="portlet-body">
                <div class="mt-element-list">
                    <div class="mt-list-container list-simple" style="border: none;">
                    </div>
                </div>
            </div>
        </div>
        <!-- END PORTLET-->
    </div>
    <script id="role_detail_temp" type="text/html">
        <ul>
            <li class="mt-list-item" style="border-bottom:none;">
                <div class="list-item-content" >
                    <h5 class="uppercase">
                        <span><i class="fa fa-code"></i> 角色代码:{{codeName}}</span>
                    </h5>
                </div>
            </li>
            <li class="mt-list-item" style="border-bottom:none;">
                <div class="list-item-content">
                    <h5 class="uppercase">
                        <span><i class="fa fa-user"></i> 角色名称:{{roleName}}</span>
                    </h5>
                </div>
            </li>
            <li class="mt-list-item" style="border-bottom:none;">
                <div class="list-item-content">
                    <h5 class="uppercase">
                        <span><i class="fa fa-clock-o"></i> 创建时间:{{createDate}}</span>
                    </h5>
                </div>
            </li>
            <li class="mt-list-item" style="border-bottom:none;">
                <div class="list-item-content">
                    <h5 class="uppercase">
            <span><i class="fa fa-check-circle"></i> 状态
				{{if enable == 1}}
					可用
				{{else}}
					禁用
				{{/if}}
			</span>
                    </h5>
                </div>
            </li>
            <li class="mt-list-item" style="border-bottom:none;">
                <div class="list-item-content">
                    <h5 class="uppercase">
                        <span><i class="fa fa-columns"></i> 模块数:{{modules}}</span>
                    </h5>
                </div>
            </li>
            <li class="mt-list-item" style="border-bottom:none;">
                <div class="list-item-content">
                    <h5 class="uppercase">
                        <span><i class="fa fa-users"></i> 用户:{{userNames}}</span>
                    </h5>
                </div>
            </li>
            <li class="mt-list-item" style="border-bottom:none;">
                <div class="list-item-content">
                    <h5 class="uppercase">
                        <span><i class="fa fa-ambulance"></i> 资源数:{{resources}}</span>
                    </h5>
                </div>
            </li>
            <li class="mt-list-item" style="border-bottom:none;">
                <div class="list-item-content">
                    <h5 class="uppercase">
                        <span><i class="fa fa-text-width"></i> 描述:{{descriptions}}</span>
                    </h5>
                </div>
            </li>
        </ul>
    </script>

    <div style="display: inline-block;">
        <!-- BEGIN PORTLET-->
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <i class="icon-bar-chart font-green"></i>
                    <span class="caption-subject font-green bold uppercase">分配资源</span>
                </div>
                <div class="actions">
                    <button class="btn green btn-circle btn-sm"  disabled="disabled" id="saveResourceSett"><i class="fa fa-check"></i> 保存修改</button>
                    <a href="list.html" data-pjax class="btn grey btn-circle btn-sm"><i class="fa fa-reply"></i> 返回</a>
                </div>
            </div>
            <div class="portlet-body">
                <div class="form-group last" >
                    <div>
                        <select multiple="multiple" class="multi-select" id="resourceSettSelect" ></select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var id = $.url().param('no')
        ,roleObj;

    if(!id){
        alert('缺少主键');
    }
    else{
        $get('/role/roleInfo' ,{id:id}, function(obj){
            $('.caption-helper').text(obj.updateDate);
            var htmlStr = template('role_detail_temp', obj);
            $('.mt-list-container').html(htmlStr);
        });
        $get('/role/' + id ,null, function(obj){
            roleObj = obj;
        });
    }

    $("#saveResourceSett").on('click',function(){
        if($(this).attr('disabled'))
            return;

        var ids = [];
        $.each($('#resourceSettSelect').val(), function(i, rId){
            ids.push(rId);
        });

        if(roleObj){
            $post('/role/settResources', {roleId: roleObj.id,rIds: ids.join(',')}, function(){
                layer.msg('修改成功!');
            });
        }
    })

    //资源下拉框
    getResourceTreeData(function(treeData){
        var options = '';
        for(var i = 0; i < treeData.length; i++){
            //是否被当前角色持有
            var selected = '';
            if(treeData[i].enable){
                selected = 'selected';
            }
            options += '<option value="'+treeData[i].id+'" '+selected+'>'+treeData[i].name+'</option>'
        }
        //初始化multiSelect
        $('#resourceSettSelect').html(options).multiSelect({
            selectableOptgroup: false,
            selectableHeader: "<div class='multi-custom-header-left'>未分配</div>",
            selectionHeader: "<div class='multi-custom-header-right'>已分配</div>",
        }).on('change',function(){
            if($(this).val() != null)
                $('#saveResourceSett').removeAttr('disabled');
            else
                $('#saveResourceSett').attr('disabled', 'disabled');
        });
    });

    function getResourceTreeData(cb){
        $get('/resource/findResource',{roleId:id}, function(arr){
            cb && cb(arr)
        });
    }
</script>