You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

232 lines
12 KiB
HTML

{extend name="$_admin_base_layout" /}
{block name="style"}
<link href="__LIBS__/jstree/themes/default/style.min.css" rel="stylesheet" />
{/block}
{block name="content"}
<div class="row">
<div class="col-md-12">
<div class="block">
<ul class="nav nav-tabs" data-toggle="tabs">
<li class="active">
<a href="#tab1">角色信息</a>
</li>
<li>
<a href="#tab2">访问授权</a>
</li>
<li class="pull-right">
<ul class="block-options push-10-t push-10-r">
<li>
<button type="button" data-toggle="block-option" data-action="fullscreen_toggle"></button>
</li>
<li>
<button type="button" data-toggle="block-option" data-action="refresh_toggle" data-action-mode="demo"><i class="si si-refresh"></i></button>
</li>
<li>
<button type="button" data-toggle="block-option" data-action="content_toggle"></button>
</li>
<li>
<button type="button" data-toggle="block-option" data-action="close"><i class="si si-close"></i></button>
</li>
</ul>
</li>
</ul>
<form name="form-builder" id="form" class="form-horizontal form-builder">
<input type="hidden" name="id" value="{$info.id}">
<div class="block-content tab-content">
<div class="tab-pane fade in active push-20" id="tab1">
<div class="form-group">
<label class="col-xs-12" for="pid">所属角色</label>
<div class="col-sm-12">
<select class="form-control" id="pid" name="pid">
<option value="">请选择:</option>
{volist name="role_list" id="role"}
<option value="{$key}" {eq name="$info['pid']" value="$key"}selected{/eq}>{$role|raw}</option>
{/volist}
</select>
</div>
</div>
<div class="form-group">
<label class="col-xs-12" for="title">角色名称</label>
<div class="col-sm-12">
<input class="form-control" type="text" id="title" name="name" value="{$info.name}" placeholder="请输入角色名称">
</div>
</div>
<div class="form-group">
<label class="col-xs-12" for="description">角色描述</label>
<div class="col-xs-12">
<textarea class="form-control" id="description" rows="7" name="description" placeholder="请输入角色描述">{$info.description}</textarea>
</div>
</div>
<div class="form-group">
<label class="col-xs-12" for="pid">默认模块</label>
<div class="col-sm-12">
<select class="form-control" id="default_module" name="default_module">
{volist name="module_list" id="module"}
<option value="{$key}" {eq name="$info['default_module']" value="$key"}selected{/eq}>{$module|raw}</option>
{/volist}
</select>
<div class="help-block">该角色登录后,默认跳转的模块。注意,该角色必须有该模块的节点访问权限。</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-12">是否可登录后台</label>
<div class="col-xs-12">
<label class="css-input css-radio css-radio-primary css-radio-sm push-10-r">
<input type="radio" name="access" id="access1" value="0" {eq name="$info['access']" value="0"}checked{/eq}>
<span></span></label>
<label class="css-input css-radio css-radio-primary css-radio-sm push-10-r">
<input type="radio" name="access" id="access2" value="1" {eq name="$info['access']" value="1"}checked{/eq}>
<span></span></label>
</div>
</div>
<div class="form-group">
<label class="col-xs-12" for="sort">排序</label>
<div class="col-sm-12">
<input class="form-control" type="text" id="sort" name="sort" value="{$info.sort}" placeholder="请输入排序">
</div>
</div>
</div>
<div class="tab-pane fade auth-node" id="tab2">
<div class="row data-table-toolbar">
<div class="col-sm-12">
<div class="toolbar-btn-action">
<button title="全选" type="button" class="btn btn-info" id="check-all"><i class="fa fa-check-circle-o"></i> 全选</button>
<button title="取消全选" type="button" class="btn btn-danger" id="uncheck-all"><i class="fa fa-ban"></i> 取消全选</button>
<button title="展开所有节点" type="button" class="btn btn-success" id="expand-all"><i class="fa fa-plus"></i> 展开所有节点</button>
<button title="收起所有节点" type="button" class="btn btn-warning" id="collapse-all"><i class="fa fa-minus"></i> 收起所有节点</button>
<span class="form-inline">
<input class="form-control" id="search-auth" onkeydown="if(event.keyCode === 13){return false;}" type="text" value="" placeholder="输入关键字搜索">
</span>
</div>
</div>
</div>
{notempty name="menus"}
<div class="block">
<ul class="nav nav-tabs nav-tabs-alt" data-toggle="tabs" id="menu-tab">
{volist name="menus" id="vo"}
<li class="{$curr_tab == $key ?= 'active'}">
<a href="#{$key}" data-tab="{$key}">{$vo.title}</a>
</li>
{/volist}
</ul>
<div class="block-content tab-content">
{volist name="menus" id="vo"}
<div class="tab-pane {$curr_tab == $key ?= 'active'}" id="{$key}">
<div class="push js-tree" data-tab="{$key}">{$vo.menus|raw|default=''}</div>
</div>
{/volist}
</div>
</div>
{else/}
<p class="text-center text-muted">暂无可分配节点</p>
{/notempty}
</div>
<div class="push-20">
<button class="btn btn-minw btn-primary" type="submit">
确定
</button>
<button class="btn btn-default" type="button" onclick="javascript:history.back(-1);return false;">
返回
</button>
</div>
</div>
</form>
</div>
</div>
</div>
{/block}
{block name="script"}
<script src="__LIBS__/jstree/jstree.min.js"></script>
<script>
$(document).ready(function(){
const $tree_list = {};
const $key_auth = {};
let curr_tab = '{$curr_tab}';
// 切换节点tab
$('#menu-tab > li > a').click(function () {
curr_tab = $(this).data('tab');
$('#search-auth').val($key_auth[curr_tab]);
});
// 初始化节点
$('.js-tree').each(function () {
const $tree = $(this);
const tab = $(this).data('tab');
$key_auth[tab] = '';
$tree.jstree({
plugins: ["checkbox", "search"],
"checkbox" : {
"keep_selected_style" : false,
"three_state" : false,
"cascade" : 'down+up'
},
"search" : {
'show_only_matches' : true,
'show_only_matches_children' : true
}
});
$tree_list[tab] = $tree;
});
// 全选
$('#check-all').click(function () {
$tree_list[curr_tab].jstree(true).check_all();
});
// 取消全选
$('#uncheck-all').click(function () {
$tree_list[curr_tab].jstree(true).uncheck_all();
});
// 展开所有
$('#expand-all').click(function () {
$tree_list[curr_tab].jstree(true).open_all();
});
// 收起所有
$('#collapse-all').click(function () {
$tree_list[curr_tab].jstree(true).close_all();
});
var to = false;
$('#search-auth').keyup(function (event) {
if(to) { clearTimeout(to); }
to = setTimeout(function () {
var v = $('#search-auth').val();
$key_auth[curr_tab] = v;
$tree_list[curr_tab].jstree(true).search(v);
}, 250);
});
// 提交表单
$('#form').submit(function () {
var form_data = $(this).serialize();
var auth_node = [];
$.each($tree_list, function () {
auth_node.push.apply(auth_node, $(this).jstree(true).get_checked());
});
if (auth_node.length) {
form_data += '&menu_auth='+auth_node.join(',');
}
$.post("{:url('')}", form_data).success(function (res) {
if (res.code) {
Dolphin.notify(res.msg, 'success');
setTimeout(function () {
location.href = res.url;
}, 1500);
} else {
Dolphin.notify(res.msg, 'danger');
}
}).fail(function () {
Dolphin.notify('服务器发生错误~', 'danger');
});
return false;
});
});
</script>
{/block}