379 lines
12 KiB
Plaintext
379 lines
12 KiB
Plaintext
<#assign base=request.contextPath />
|
||
<#import "../common/defaultLayout.ftl" as defaultLayout>
|
||
<@defaultLayout.layout>
|
||
|
||
<div class="admin-content">
|
||
<div class="admin-content-body">
|
||
<div class="am-cf am-padding">
|
||
<div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">系统管理</strong> / <small>后端角色管理</small></div>
|
||
</div>
|
||
<form method="post" class="am-form" id="tmpForm" action="${base}/role/save">
|
||
<!--选项卡（tabs）begin-->
|
||
<div class="am-tabs am-margin" data-am-tabs>
|
||
<ul class="am-tabs-nav am-nav am-nav-tabs">
|
||
<li class="am-active">
|
||
<a href="#tab1">编辑角色信息</a>
|
||
</li>
|
||
</ul>
|
||
<div class="am-tabs-bd">
|
||
<div class="am-tab-panel am-fade am-in am-active" id="tab1">
|
||
<input name="roleID" id="roleID" type="hidden" value="${roleID!}"/>
|
||
<!--验证表单元素（validate) begin-->
|
||
<!--input begin-->
|
||
<div class="am-g am-form-group am-margin-top">
|
||
<div class="am-u-sm-4 am-u-md-2 am-text-right">
|
||
<span style="color: red;">*</span>
|
||
角色名称
|
||
</div>
|
||
<div class="am-u-sm-6 am-u-md-6">
|
||
<input name="roleName" class="js-ajax-validate"
|
||
data-validate-async data-validation-message="请输入角色名称（100字符以内）"
|
||
type="text" id="roleName" value="${roleName!}" minlength="1" maxlength="20"
|
||
placeholder="请输入角色名称（20字符以内）" required onblur="checkRoleName($(this));" onKeyUp="clearValidInfo()" />
|
||
</div>
|
||
<div class="am-u-sm-2 am-u-md-4 input-msg" id="role_name_valid"></div>
|
||
</div>
|
||
|
||
<div class="am-g am-form-group am-margin-top" style="display: flex;">
|
||
<div class="am-u-sm-4 am-u-md-2 am-text-right">
|
||
<span style="color: red;">*</span>角色类型</div>
|
||
<div class="am-u-sm-6 am-u-md-6">
|
||
<select data-am-selected="{btnWidth: '40%', btnSize: 'sm'" id="level" name="level">
|
||
<option value="1" <#if role.level! ==1>selected</#if> >执行董事</option>
|
||
<option value="2" <#if role.level! ==2>selected</#if> >财务总监</option>
|
||
<option value="3" <#if role.level! ==3>selected</#if> >总经理</option>
|
||
<option value="4" <#if role.level! ==4>selected</#if> >工程部主管</option>
|
||
<option value="5" <#if role.level! ==5>selected</#if> >集成部主管(管理员)</option>
|
||
<option value="6" <#if role.level! ==6>selected</#if> >财务人员</option>
|
||
<option value="7" <#if role.level! ==7>selected</#if> >普通员工</option>
|
||
</select>
|
||
</div>
|
||
<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
|
||
</div>
|
||
|
||
<input type="hidden" id="roleLevel" name="roleLevel" value='1' />
|
||
<!--radio begin-->
|
||
<div class="am-g am-form-group am-margin-top">
|
||
<div class="am-u-sm-4 am-u-md-2 am-text-right">
|
||
<span style="color: red;">*</span>
|
||
是否启用
|
||
</div>
|
||
<div class="am-u-sm-6 am-u-md-6">
|
||
<select data-am-selected name="isActive">
|
||
<option value="1" <#if role.isEnable==1 > selected </#if> >是</option>
|
||
<option value="0" <#if role.isEnable==0 > selected </#if> >否</option>
|
||
</select>
|
||
</div>
|
||
<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
|
||
</div>
|
||
<!--radio end-->
|
||
<div class="am-g am-form-group am-margin-top">
|
||
<div class="am-u-sm-4 am-u-md-2 am-text-right">管理权限</div>
|
||
<div class="am-u-sm-8 am-u-md-10">
|
||
<table class="am-table am-table-striped am-table-hover am-table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th width="30%">导航名称</th>
|
||
<th>权限分配</th>
|
||
<th width="10%">全选</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr level="${permnode.level}" class="level-${permnode.level}"
|
||
<#if permnode.hasLeafNode >
|
||
type="file"
|
||
<#else>
|
||
type="folder"
|
||
</#if>
|
||
>
|
||
<td width="30%" class="role-authority-name">
|
||
<#if permnode.hasLeafNode >
|
||
<i class="am-icon-file-text"> </i>
|
||
<#else>
|
||
<i class="am-icon-folder-open"> </i>
|
||
</#if>${permnode.name}
|
||
</td>
|
||
<td class="role-authority-checks">
|
||
</td>
|
||
<td align="center">
|
||
<input class="role-authority-checkall" name="checkAll" type="checkbox" value="${permnode.id}" />
|
||
</td>
|
||
</tr>
|
||
<@bpTree nodes= permnode.subNodes/>
|
||
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--选项卡（tabs）end-->
|
||
<div class="am-margin">
|
||
<button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
|
||
<button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="javascript:history.go(-1);">返回上一级</button>
|
||
</div>
|
||
</form>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</@defaultLayout.layout>
|
||
|
||
<#macro bpTree nodes>
|
||
<#list nodes as node>
|
||
<tr level="${node.level}" class="level-${node.level}"
|
||
<#if node.hasLeafNode >
|
||
type="file"
|
||
<#else>
|
||
type="folder"
|
||
</#if>
|
||
>
|
||
<td width="30%" class="role-authority-name">
|
||
<#if node.level==2 >
|
||
|
||
<#elseif node.level==3 >
|
||
|
||
<#elseif node.level==4 >
|
||
|
||
<#else>
|
||
|
||
</#if>
|
||
<#if node.hasLeafNode >
|
||
<i class="am-icon-file-text"> </i>
|
||
<#else>
|
||
<i class="am-icon-folder-open"> </i>
|
||
</#if>${node.name}
|
||
</td>
|
||
<td class="role-authority-checks">
|
||
<#if node.hasLeafNode >
|
||
<#list node.subNodes as subNode>
|
||
|
||
<input id="rptList_cblActionType_${subNode.id!}" type="checkbox" name="rptList$ctl$cblActionType$${subNode.id!}" value="${subNode.id}" <#if subNode.selected >checked </#if> />${subNode.name}</label>
|
||
|
||
</#list>
|
||
</#if>
|
||
</td>
|
||
<td align="center">
|
||
<input class="role-authority-checkall" name="checkAll" type="checkbox" value="${node.id}" />
|
||
</td>
|
||
</tr>
|
||
<#if (!node.hasLeafNode) && node.subNodes?? && node.subNodes?size gt 0>
|
||
<@bpTree nodes=node.subNodes />
|
||
</#if>
|
||
</#list>
|
||
</#macro>
|
||
|
||
|
||
|
||
</style>
|
||
<script type="text/javascript" src="${base}/admin/js/role.js"></script>
|
||
<script type="text/javascript">
|
||
|
||
/*角色名称检验 start*/
|
||
var urlBase = "${base}";
|
||
var url;
|
||
function checkRoleName(obj){
|
||
var roleName = obj.val();
|
||
var roleID = $("#roleID").val();
|
||
if(roleName.length == 0){
|
||
showRoleNameAlert($("#roleName").date("data-validation-message"));
|
||
return;
|
||
}
|
||
$.ajax({
|
||
url : urlBase + "/role/check",
|
||
type : 'POST',
|
||
dataType : 'json',
|
||
data : {
|
||
role_id : roleID, role_name : roleName
|
||
},
|
||
cache : false
|
||
}).done(function (result) {
|
||
if (result.status==0) {
|
||
showRoleNameAlert(result.msg);
|
||
obj.focus();
|
||
}else{
|
||
showRoleNameAlert(result.msg);
|
||
}
|
||
|
||
}).fail(function (){
|
||
|
||
});
|
||
|
||
}
|
||
|
||
function clearValidInfo(){
|
||
showRoleNameAlert("");
|
||
}
|
||
function showRoleNameAlert(message){
|
||
var $alert = $("#role_name_valid").find('.am-alert');
|
||
if (!$alert.length) {
|
||
$alert = $('<div class="am-alert am-alert-danger"></div>').hide()
|
||
$alert.appendTo($("#role_name_valid"));
|
||
}
|
||
if(message.length==0){
|
||
$alert.hide();
|
||
}else{
|
||
$alert.text(message).show();
|
||
}
|
||
}
|
||
/*角色名称检验 end*/
|
||
|
||
|
||
/*复选框 全选：start*/
|
||
$(".role-authority-checkall").click(function(){
|
||
var $parentNode = $(this).parent().parent();
|
||
var level = Number($parentNode.attr("level"));
|
||
var $allParentNextNode = $parentNode.nextUntil(".level-"+level);
|
||
var isChecked = $(this).is(":checked");
|
||
$allParentNextNode.each(function(){
|
||
var myLevel = Number($(this).attr("level"));
|
||
var $checks = $(this).children().find("input[type='checkbox']");
|
||
if(myLevel > level){
|
||
return changeCheckedStatus($checks,isChecked);
|
||
}else{
|
||
return;
|
||
}
|
||
});
|
||
|
||
var $checks = $(this).parent().prev().find("input[type='checkbox']");
|
||
changeCheckedStatus($checks,isChecked);
|
||
});
|
||
|
||
function changeCheckedStatus(checksObj,isChecked){
|
||
checksObj.each(function(){
|
||
if(isChecked){
|
||
$(this).prop("checked",true);
|
||
}else{
|
||
$(this).prop("checked",false);
|
||
}
|
||
});
|
||
}
|
||
/*复选框 全选：end*/
|
||
|
||
$(function() {
|
||
/*表单验证：begin*/
|
||
//自定义规则，用法：验证元素上加class="js-pattern-sort"
|
||
if ($.AMUI && $.AMUI.validator) {
|
||
$.AMUI.validator.patterns.sort = /^([0-9]+)$/;
|
||
}
|
||
$("#tmpForm").validator({
|
||
// 域通过验证时回调
|
||
onValid: function(validity) {
|
||
$(validity.field).closest('.am-form-group').find('.am-alert').hide();
|
||
},
|
||
// 域验证通过时添加的操作，通过该接口可定义各种验证提示
|
||
markValid: function(validity) {
|
||
// this is Validator instance
|
||
var $field = $(validity.field);
|
||
//add by zxl，只对有required属性的字段进行验证
|
||
if(typeof($field.attr("required"))!="undefined"){
|
||
var options = this.options;
|
||
var $parent = $field.closest('.am-form-group');
|
||
$field.addClass(options.validClass).
|
||
removeClass(options.inValidClass);
|
||
|
||
$parent.addClass('am-form-success').removeClass('am-form-error');
|
||
|
||
options.onValid.call(this, validity);
|
||
}
|
||
},
|
||
// 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
|
||
onInValid: function(validity) {
|
||
var $field = $(validity.field);
|
||
var $group = $field.closest('.am-form-group');
|
||
var $alert = $group.find('.am-alert');
|
||
// 使用自定义的提示信息 或 插件内置的提示信息
|
||
var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
|
||
|
||
if (!$alert.length) {
|
||
$alert = $("<div class='am-alert am-alert-danger'></div>").hide().
|
||
appendTo($group.find(".input-msg"));
|
||
}
|
||
console.log("onInValid : "+$field.val());
|
||
$alert.html(msg).show();
|
||
}
|
||
});
|
||
/*表单验证：end*/
|
||
|
||
/*树形结构 展开折叠效果：start */
|
||
$(".role-authority-name").click(function(){
|
||
var $parentNode = $(this).parent();
|
||
var level = Number($parentNode.attr("level"));
|
||
var $allParentNextNode = $parentNode.nextUntil(".level-"+level);
|
||
var $iNode = $parentNode.find("i");
|
||
var $lastNode = $allParentNextNode.last();
|
||
$allParentNextNode.each(function(){
|
||
var myLevel = Number($(this).attr("level"));
|
||
var $myINode = $(this).find("i");
|
||
var type = $(this).attr("type");
|
||
if(myLevel > level){
|
||
if($iNode.attr("class") == "am-icon-folder-open"){
|
||
$(this).css("display","none");
|
||
if(type == "folder"){
|
||
$myINode.attr("class","am-icon-folder");
|
||
}
|
||
}else if($iNode.attr("class") == "am-icon-folder"){
|
||
if(type == "folder"){
|
||
$myINode.attr("class","am-icon-folder-open");
|
||
}
|
||
$(this).css("display","");
|
||
}
|
||
if($(this).is($lastNode)){
|
||
if($iNode.attr("class") == "am-icon-folder-open"){
|
||
$iNode.attr("class","am-icon-folder");
|
||
}else if($iNode.attr("class") == "am-icon-folder"){
|
||
$iNode.attr("class","am-icon-folder-open");
|
||
}
|
||
}
|
||
}else{
|
||
if($(this).is($lastNode)){
|
||
if($iNode.attr("class") == "am-icon-folder-open"){
|
||
$iNode.attr("class","am-icon-folder");
|
||
}else if($iNode.attr("class") == "am-icon-folder"){
|
||
$iNode.attr("class","am-icon-folder-open");
|
||
}
|
||
}
|
||
return;
|
||
}
|
||
});
|
||
});
|
||
/*树形结构 展开折叠效果：end */
|
||
|
||
});
|
||
|
||
|
||
</script>
|
||
<style type="text/css">
|
||
/*验证：提示信息样式 begin*/
|
||
.am-alert-danger {
|
||
background-color: transparent;
|
||
border-color: transparent;
|
||
color: red;
|
||
}
|
||
.am-alert {
|
||
margin-bottom: 1em;
|
||
padding: .625em;
|
||
background: transparent;
|
||
border: none;
|
||
border-radius: 0;
|
||
}
|
||
/*验证：提示信息样式 end*/
|
||
</style>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|