250 lines
11 KiB
JavaScript
250 lines
11 KiB
JavaScript
$(function () {
|
||
var $dialog = $('#dialogNew');
|
||
var $pickIcon = $('#pickIcon');
|
||
var $iconList = $('#iconTab').find('div.fontawesome-icon-list');
|
||
var $dialogNew = $dialog.find('div.modal-dialog');
|
||
var $dialogIcon = $('#dialogIcon');
|
||
var $dialogMenu = $('#dialogSubMenu').find('.modal-content');
|
||
var $dialogRole = $('#dialogRole');
|
||
var $dialogRoleHeader = $('#myRoleModalLabel');
|
||
var $dialogRoleForm = $('#roleForm');
|
||
var $btnSubmitMenu = $('#btnSubmitMenu');
|
||
var $btnPickIcon = $('#btnIcon');
|
||
var $inputIcon = $('#icon');
|
||
var $nestMenu = $('#nestable_menu');
|
||
var $nestMenuInput = $nestMenu.find('div.dd3-content');
|
||
var $parentMenuID = $('#parentId');
|
||
var $parentMenuName = $('#parentName');
|
||
var $category = $('#category');
|
||
$nestMenuInput.find('label:first').hide();
|
||
|
||
var bsa = new BootstrapAdmin({
|
||
url: '../api/Menus',
|
||
dataEntity: new DataEntity({
|
||
map: {
|
||
ID: "menuID",
|
||
ParentId: "parentId",
|
||
ParentName: "parentName",
|
||
Name: "name",
|
||
Order: "order",
|
||
Icon: "icon",
|
||
Url: "url",
|
||
Category: "category",
|
||
Target: "target"
|
||
}
|
||
}),
|
||
click: {
|
||
assign: [{
|
||
id: 'btn_assignRole',
|
||
click: function (row) {
|
||
$.bc({
|
||
Id: row.ID, url: Role.url, data: { type: "menu" }, swal: false,
|
||
callback: function (result) {
|
||
var htmlTemplate = this.htmlTemplate;
|
||
var html = $.map(result, function (element, index) {
|
||
return $.format(htmlTemplate, element.ID, element.RoleName, element.Checked, element.Description);
|
||
}).join('')
|
||
$dialogRoleHeader.text($.format('{0}-角色授权窗口', row.Name));
|
||
$dialogRoleForm.html(html);
|
||
$dialogRole.modal('show');
|
||
}
|
||
});
|
||
}
|
||
}, {
|
||
id: 'btnSubmitRole',
|
||
click: function (row) {
|
||
var menuId = row.ID;
|
||
var roleIds = $dialogRole.find('input:checked').map(function (index, element) {
|
||
return $(element).val();
|
||
}).toArray().join(',');
|
||
$.bc({ Id: menuId, url: Role.url, method: "PUT", data: { type: "menu", roleIds: roleIds }, title: Role.title, modal: 'dialogRole' });
|
||
}
|
||
}]
|
||
},
|
||
callback: function (result) {
|
||
if (!result.success) return;
|
||
if ((result.oper == "save") || result.oper == "del") {
|
||
$.bc({
|
||
Id: 0, url: Menu.url, data: { type: "user" }, swal: false,
|
||
callback: function (result) {
|
||
var html = "";
|
||
if ($.isArray(result)) html = cascadeMenu(result);
|
||
$nestMenu.find('ol:first').html(html);
|
||
$nestMenuInput = $nestMenu.find('div.dd3-content');
|
||
$nestMenuInput.find('label:first').hide();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
var cascadeMenu = function (menus) {
|
||
var html = "";
|
||
$.each(menus, function (index, menu) {
|
||
if (menu.Menus.length == 0) {
|
||
html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label></div></li>', menu.ID, menu.Icon, menu.Name, menu.Category);
|
||
}
|
||
else {
|
||
html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label></div></li><ol class="dd-list">{4}</ol>', menu.ID, menu.Icon, menu.Name, menu.Category, cascadeSubMenu(menu.Menus));
|
||
}
|
||
});
|
||
return html;
|
||
};
|
||
|
||
var cascadeSubMenu = function (menus) {
|
||
var html = ""
|
||
$.each(menus, function (index, menu) {
|
||
html += $.format('<li class="dd-item dd3-item" data-id="{0}" data-category="{3}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><label><input type="checkbox" value="{0}"><span><i class="{1}"></i>{2}</span></label><label><input type="radio" name="menu" value="{0}"><span><i class="{1}"></i>{2}</span></label></div></li>', menu.ID, menu.Icon, menu.Name, menu.Category);
|
||
});
|
||
return html;
|
||
}
|
||
|
||
$('table').smartTable({
|
||
url: Menu.url, //请求后台的URL（*）
|
||
sortName: 'Order',
|
||
queryParams: function (params) { return $.extend(params, { parentName: $('#txt_parent_menus_name').val(), name: $("#txt_menus_name").val(), category: $('#sel_menus_category').selectval() }); }, //传递参数（*）
|
||
columns: [{ checkbox: true },
|
||
{ title: "Id", field: "ID", events: bsa.idEvents(), formatter: BootstrapAdmin.idFormatter },
|
||
{ title: "父级菜单", field: "ParentName", sortable: true },
|
||
{ title: "菜单名称", field: "Name", sortable: true },
|
||
{ title: "菜单序号", field: "Order", sortable: true },
|
||
{ title: "菜单图标", field: "Icon", sortable: false },
|
||
{ title: "菜单路径", field: "Url", sortable: false },
|
||
{ title: "菜单类别", field: "CategoryName", sortable: true },
|
||
{
|
||
title: "目标", field: "Target", sortable: true, formatter: function (value, row, index) {
|
||
var ret = value;
|
||
switch (value) {
|
||
case "_self":
|
||
ret = "本窗口";
|
||
break;
|
||
case "_blank":
|
||
ret = "新窗口";
|
||
break;
|
||
case "_parent":
|
||
ret = "父级窗口";
|
||
break;
|
||
case "_top":
|
||
ret = "顶级窗口";
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
return ret;
|
||
}
|
||
}
|
||
]
|
||
});
|
||
|
||
// validate
|
||
$('#dataForm').autoValidate({
|
||
name: {
|
||
required: true,
|
||
maxlength: 50
|
||
},
|
||
order: {
|
||
digits: true
|
||
},
|
||
url: {
|
||
required: true
|
||
},
|
||
category: {
|
||
required: true,
|
||
maxlength: 50
|
||
}
|
||
});
|
||
|
||
$iconList.find('ul li').addClass('col-md-3 col-sm-4 col-xs-6');
|
||
$iconList.find('div').addClass('col-xs-6');
|
||
$iconList.on('click', 'div.fa-hover a, ul li', function () {
|
||
$pickIcon.attr('class', $(this).find('i, span:first').attr('class'));
|
||
return false;
|
||
});
|
||
|
||
$btnPickIcon.on('click', function () {
|
||
$dialogIcon.show();
|
||
});
|
||
|
||
$dialogIcon.find('div.modal-header, div.modal-footer').on('click', 'button', function () {
|
||
$dialogIcon.hide();
|
||
});
|
||
|
||
$dialogIcon.find('div.modal-footer').on('click', 'button:last', function () {
|
||
var icon = $pickIcon.attr('class');
|
||
$('#icon').val(icon);
|
||
$('#btnIcon').find('i').attr('class', icon);
|
||
});
|
||
|
||
// 排序按钮
|
||
$('#btnMenuOrder').on('click', function () {
|
||
$dialogNew.hide();
|
||
$btnSubmitMenu.data('type', 'order');
|
||
$nestMenuInput.find('label:last').find('input').hide();
|
||
$nestMenu.find('li.dd-item').hide().remove('[data-id="0"]');
|
||
$nestMenu.find('li[data-category="' + $category.selectval() + '"]').show();
|
||
// handler new menu
|
||
var did = $('#menuID').val();
|
||
if (did == "") did = 0;
|
||
if (did == 0) {
|
||
var menuName = $('#name').val();
|
||
var menuCate = $category.selectval();
|
||
if (menuName == "") menuName = "新建菜单-未命名";
|
||
$nestMenu.find('ol.dd-list:first').append($.format('<li class="dd-item dd3-item" data-id="0" data-category="{1}"><div class="dd-handle dd3-handle"></div><div class="dd3-content"><label><span>{0}</span></label></div></li>', menuName, menuCate));
|
||
}
|
||
$nestMenu.find('li[data-id="' + did + '"] > div.dd3-content span').addClass('active');
|
||
$dialogMenu.show().adjustDialog();
|
||
});
|
||
|
||
// 选择父节点按钮
|
||
$('#btnMenuParent').on('click', function () {
|
||
$dialogNew.hide();
|
||
$btnSubmitMenu.data('type', 'parent');
|
||
$nestMenuInput.find('label:last').find('input').show();
|
||
$nestMenu.find('li.dd-item').hide().remove('[data-id="0"]');
|
||
$nestMenu.find('li[data-category="' + $category.selectval() + '"]').show();
|
||
$dialogMenu.show().adjustDialog();
|
||
});
|
||
|
||
$dialogMenu.find('div.modal-header, div.modal-footer').on('click', 'button', function () {
|
||
// remove active css
|
||
$nestMenu.find('li span').removeClass('active');
|
||
$dialogMenu.hide();
|
||
$dialogNew.show();
|
||
});
|
||
|
||
$('#btnClearIcon, #btnMenuClearParent').on('click', function () {
|
||
$(this).parent().prev().val("");
|
||
});
|
||
|
||
$btnSubmitMenu.on('click', function () {
|
||
var type = $(this).data('type');
|
||
switch (type) {
|
||
case "parent":
|
||
$('#parentId').val($('.dd3-content :radio:checked').val());
|
||
$('#parentName').val($('.dd3-content :radio:checked').next('span').text());
|
||
break;
|
||
case "order":
|
||
var data = $('#nestable_menu').nestable('serialize');
|
||
var mid = $('#menuID').val();
|
||
for (index in data) {
|
||
if (data[index].id == mid || data[index] == 0) {
|
||
$('#order').val(10 + index * 10);
|
||
break;
|
||
}
|
||
}
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
});
|
||
|
||
// Dialog shown event
|
||
$dialog.on('show.bs.modal', function () {
|
||
var icon = $inputIcon.val();
|
||
if (icon == "") icon = "fa fa-dashboard";
|
||
$btnPickIcon.find('i').attr('class', icon);
|
||
});
|
||
$nestMenu.nestable();
|
||
// select
|
||
$('.btn-select').select();
|
||
}); |