246 lines
7.7 KiB
JavaScript
246 lines
7.7 KiB
JavaScript
layui.use(['laytpl', 'treeTable', 'jquery', 'iconPickerFa', 'form', 'miniTab', 'xmSelect'], function () {
|
||
let $ = layui.jquery,
|
||
form = layui.form,
|
||
treeTable = layui.treeTable,
|
||
iconPickerFa = layui.iconPickerFa,
|
||
layer = layui.layer,
|
||
miniTab = layui.miniTab,
|
||
xmSelect = layui.xmSelect;
|
||
|
||
let modifyUrl = '/manager/menu/modify';
|
||
|
||
/**** index begin ***/
|
||
//index页面
|
||
if ($('.location-index-page').length > 0) {
|
||
miniTab.listen();
|
||
|
||
// 渲染表格
|
||
let listUrl = $('#menu-table').data('url');
|
||
let insTb = treeTable.render({
|
||
elem: '#menu-table',
|
||
toolbar: '#toolbar-tpl',
|
||
defaultToolbar: [],
|
||
method: 'POST',
|
||
url: listUrl,
|
||
page: false,
|
||
tree: {
|
||
iconIndex: 1, // 折叠图标显示在第几列
|
||
isPidData: true, // 是否是id、pid形式数据
|
||
idName: 'id', // id字段名称
|
||
pidName: 'pid' // pid字段名称
|
||
},
|
||
cols: [[
|
||
{type: 'checkbox'},
|
||
{field: 'title', title: '菜单名称', minWidth: 150, singleLine: true},
|
||
{title: '图标', width: 50, templet: '<div><i class="fa {{ d.icon }}"></i></div>',align: 'center'},
|
||
{field: 'name', title: '路由标识'},
|
||
{field: 'sort', width: 80, align: 'center', title: '排序', edit: 'text'},
|
||
{templet: '#menu-operate', minWidth: 250, fixed: 'right', align: 'center', title: '操作'}
|
||
]],
|
||
done: function () {
|
||
}
|
||
});
|
||
|
||
//监听单元格编辑
|
||
treeTable.on('edit(menu-table)', function (obj) {
|
||
// console.log(obj.value); //得到修改后的值
|
||
// console.log(obj.field); //当前编辑的字段名
|
||
// console.log(obj.data); //所在行的所有相关数据
|
||
$.post(modifyUrl, {id: obj.data.id, field: obj.field, value: obj.value}, function (res) {
|
||
layer.msg(res.msg)
|
||
if (res.code === 0) {
|
||
insTb.refresh();
|
||
}
|
||
})
|
||
|
||
});
|
||
|
||
//监听工具条 注意区别toolbar和tool toolbar是表头上的工具条 tool是行中的工具条
|
||
treeTable.on('toolbar(menu-table)', function (obj) {
|
||
let layEvent = obj.event;
|
||
|
||
//全部展开
|
||
if (layEvent === 'expand') {
|
||
insTb.expandAll();
|
||
return false;
|
||
}
|
||
|
||
//全部折叠
|
||
if (layEvent === 'fold') {
|
||
insTb.foldAll();
|
||
return false;
|
||
}
|
||
|
||
//删除
|
||
if (layEvent === 'del') {
|
||
let selected = insTb.checkStatus(false);
|
||
let ids = [];
|
||
let url = $(obj.elem.context).data('href')
|
||
$.each(selected, function (index, val) {
|
||
ids.push(val.id);
|
||
})
|
||
|
||
del(url, ids);
|
||
return false;
|
||
}
|
||
|
||
//添加
|
||
if (layEvent === 'add') {
|
||
let url = $(obj.elem.context).data('href');
|
||
let index = layer.open({
|
||
title: '添加菜单',
|
||
type: 2,
|
||
shade: 0.2,
|
||
maxmin: true,
|
||
shadeClose: true,
|
||
area: ['100%', '100%'],
|
||
content: url,
|
||
});
|
||
$(window).on("resize", function () {
|
||
layer.full(index);
|
||
});
|
||
return false;
|
||
}
|
||
});
|
||
|
||
//刷新
|
||
$('body').on('click', '[data-table-refresh]', function () {
|
||
insTb.refresh();
|
||
});
|
||
|
||
//删除
|
||
function del(url, ids) {
|
||
let index = layer.confirm('确认删除吗？', {
|
||
btn: ['确认', '取消'], //按钮
|
||
title: '操作提示',
|
||
}, function () {
|
||
$.post(url, {ids: ids}, function (res) {
|
||
layer.msg(res.msg)
|
||
if (res.code === 0) {
|
||
insTb.refresh();
|
||
}
|
||
})
|
||
}, function () {
|
||
layer.close(index)
|
||
return false;
|
||
});
|
||
}
|
||
|
||
// 常规权限生成
|
||
function generate(url, id) {
|
||
let index = layer.confirm('确认生成吗，此操作将删除已有常规权限？', {
|
||
btn: ['确认', '取消'], //按钮
|
||
title: '操作提示',
|
||
}, function () {
|
||
let idx = layer.load(2);
|
||
$.post(url, {id: id}, function (res) {
|
||
layer.close(idx);
|
||
layer.msg(res.msg)
|
||
if (res.code === 0) {
|
||
insTb.refresh();
|
||
}
|
||
})
|
||
}, function () {
|
||
layer.close(index)
|
||
return false;
|
||
});
|
||
}
|
||
|
||
//监听行工具条
|
||
treeTable.on('tool(menu-table)', function (obj) {
|
||
let data = obj.data;
|
||
let layEvent = obj.event;
|
||
let url = $(obj.tr.context).data('href');
|
||
|
||
if (layEvent === 'del') {
|
||
let ids = [data.id];
|
||
del(url, ids);
|
||
return false;
|
||
}
|
||
|
||
//生成常规权限
|
||
if (layEvent === 'generate') {
|
||
let id = data.id;
|
||
generate(url, id);
|
||
return false;
|
||
}
|
||
|
||
//编辑
|
||
if (layEvent === 'edit') {
|
||
let title = $(obj.tr.context).data('title');
|
||
let index = layer.open({
|
||
title: title,
|
||
type: 2,
|
||
shade: 0.2,
|
||
maxmin: true,
|
||
shadeClose: true,
|
||
area: ['100%', '100%'],
|
||
content: url,
|
||
});
|
||
|
||
$(window).on("resize", function () {
|
||
layer.full(index);
|
||
});
|
||
return false;
|
||
}
|
||
});
|
||
}
|
||
/*** index end ***/
|
||
|
||
|
||
// add和edit页面
|
||
if ($('.location-operate-page').length > 0) {
|
||
let parentMenu = $('#parent-menu');
|
||
let menuList = parentMenu.data('menu') ? parentMenu.data('menu') : [];
|
||
xmSelect.render({
|
||
el: '#parent-menu',
|
||
paging: false,
|
||
autoRow: true,
|
||
radio: true,
|
||
clickClose: true,
|
||
name: 'pid',
|
||
tips: '请选择上级菜单',
|
||
direction: 'auto',
|
||
height: 'auto',
|
||
model: {
|
||
icon: 'hidden',
|
||
},
|
||
prop: {
|
||
name: 'title',
|
||
value: 'id',
|
||
},
|
||
tree: {
|
||
show: true,
|
||
strict: false,
|
||
clickCheck: true,
|
||
expandedKeys: true,
|
||
clickExpand: false
|
||
},
|
||
theme: {
|
||
color: '#1e84ff',
|
||
},
|
||
data: menuList
|
||
});
|
||
}
|
||
|
||
iconPickerFa.render({
|
||
// 选择器，推荐使用input
|
||
elem: '.iconPicker',
|
||
// fa 图标接口
|
||
url: "/static/layuimini/lib/font-awesome-4.7.0/less/variables.less",
|
||
// 是否开启搜索：true/false，默认true
|
||
search: true,
|
||
// 是否开启分页：true/false，默认true
|
||
page: true,
|
||
// 每页显示数量，默认12
|
||
limit: 12,
|
||
// 点击回调
|
||
click: function (data) {
|
||
// console.log(data);
|
||
},
|
||
// 渲染成功后的回调
|
||
success: function (d) {
|
||
// console.log(d);
|
||
}
|
||
});
|
||
}); |