layui.config({
base: "/js/"
}).use(['form', 'vue', 'ztree', 'layer', 'jquery', 'table', 'droptree', 'hhweb', 'utils'], function () {
var form = layui.form,
layer = layui.layer,
$ = layui.jquery,
areaName = "base",
tableName = "UserSession",
table = layui.table,
hhweb = layui.hhweb;
var app = {
data: {
menusMainElem: $("#menusMain"),
menuElem: $("#menuElem"),
tableMainObj: null,
tableMenus: null,
mainList: "mainList",
menuList: "menuList",
treeElem: $("#tree"),
treeObj: null,
treeSetting: {
view: { selectedMulti: false },
data: {
key: {
name: 'Name',
title: 'Name'
},
simpleData: {
enable: true,
idKey: 'Id',
pIdKey: 'ParentId',
rootPId: 'null'
}
},
callback: {
onClick: function (event, treeId, treeNode) {
app.data.tableMainObj = app.methods.initTableMain({ pId: treeNode.Id, parentId: treeNode.ParentId, cascadeId: treeNode.CascadeId });
}
}
}
},
methods: {
initMenu: () => {
app.data.menusMainElem.loadMenus("SysModule", 1);
app.data.menuElem.loadMenus("SysModule", 2);
},
initTree: (falg = true) => {
$.getJSON(`/${areaName}/${tableName}/GetModules`, function (json) {
app.data.treeObj = $.fn.zTree.init(app.data.treeElem, app.data.treeSetting);
json.push({ Name: "根节点", Id: null, ParentId: "" });
app.data.treeObj.addNodes(null, json);
app.data.treeObj.expandAll(true);
if (falg) app.data.tableMainObj = app.methods.initTableMain({ pId: "" },);
});
app.data.treeElem.height($("div.layui-table-view").height() - 20);
},
initTableMain: (config) => {
let opt = {
url: `/${areaName}/${tableName}/GetModulesTable`,
where: config,
page: { curr: 1 }
}
app.data.tableMainObj = app.methods.initTable(app.data.mainList, opt);
},
initTableMenu: (config) => {
let opt = {
url: `/${areaName}/SysModule/LoadMenus`,
where: config
}
return app.methods.initTable(app.data.menuList, opt);
},
initFrom: () => {
layui.droptree("/base/UserSession/GetModules", "#ParentName", "#ParentId", false);
},
initTable: (elem, opt) => {
var configOpt = {
method: "post"
};
$.extend(configOpt, opt);
table.reload(elem, configOpt);
}
},
init: () => {
app.methods.initTree();
app.methods.initMenu();
app.methods.initFrom();
}
}
app.init();
//新增（编辑）模块对话框
let menuModelApp = null;
var editDlg = function () {
menuModelApp = new Vue({
el: "#formEdit"
});
var update = false; //是否为更新
var show = function (data) {
var title = update ? "编辑" : "新增";
let index = layer.open({
title: title,
area: ["580px", "400px"],
type: 1,
content: $('#divEdit'),
success: function () {
menuModelApp.$set('$data', data);
$(":radio[name='IsShow'][value='" + data.IsShow + "']").prop("checked", "checked");
form.render();
}
});
var url = "/base/SysModule/Add";
if (update) url = "/base/SysModule/Update";
//提交数据
form.on('submit(formSubmit)', function (data) {
$.post(url, data.field, function (data) {
layer.msg(data.Message, { time:5000 });
if ((!update) && data.Code == 200) { //新增成功要刷新左边的树
app.methods.initTree();
}
if (data.Code == 200) {
app.methods.initTableMain();
layer.close(index);
}
}, "json");
return false;
});
}
return {
add: function () { //弹出新增
update = false;
show({
Id: "",
SortNo: 1,
IconName: '',
IsShow: 1
});
},
update: function (data) { //弹出编辑框
update = true;
show(data);
}
};
}();
//新增菜单对话框
let menuApp = null;
var meditDlg = function () {
menuApp = new Vue({
el: "#mfromEdit"
});
var update = false; //是否为更新
var show = function (data) {
var title = update ? "编辑菜单" : "新增菜单";
let index = layer.open({
title: title,
area: ["580px", "550px"],
type: 1,
content: $('#divMenuEdit'),
success: function () {
menuApp.$set('$data', data);
}
});
var moduleId = data.ModuleId
var url = "/base/SysModule/AddMenu";
if (update) url = "/base/SysModule/UpdateMenu";
//提交数据
form.on('submit(mformSubmit)', function (data) {
$.post(url, data.field, function (data) {
if (data.Code == 200) {
layer.msg(data.Message, { time: 4000 });
layer.close(index);
app.methods.initTableMenu({ moduleId: moduleId });
}
else {
layer.alert(data.Message, { icon: 2, shadeClose: true, title: "错误信息" });
}
}, "json");
return false;
});
}
return {
add: function (moduleId) { //弹出新增
update = false;
show({
Id: "",
ModuleId: moduleId,
Sort: 1,
AreaMenus: 1
});
},
update: function (data) { //弹出编辑框
update = true;
show(data);
}
};
}();
//监听模块表格内部按钮
table.on('tool(list)', function (obj) {
var data = obj.data;
if (obj.event === 'detail') { //查看
app.methods.initTableMenu({ moduleId: data.Id });
}
});
//监听页面主按钮操作
var active = {
//删除模块
btnDel: function () {
var checkStatus = table.checkStatus('mainList'),
data = checkStatus.data;
hhweb.del("/base/SysModule/Delete", data.map(function (e) { return e.Id; }), function () {
app.methods.initTree();
});
},
btnDelMenu: function () {
var checkStatus = table.checkStatus('menuList'),
data = checkStatus.data;
hhweb.del("/base/SysModule/DelMenu", data.map(function (e) { return e.Id; }), app.methods.initTableMenu);
},
//新增模块
btnAdd: function () {
editDlg.add();
},
btnAddMenu: function () {
var checkStatus = table.checkStatus('mainList'),
data = checkStatus.data;
if (data.length != 1) {
layer.msg("请选择一个要新增菜单的模块后新增菜单!");
return;
}
meditDlg.add(data[0].Id);
},
//编辑模块
btnEdit: function () {
var checkStatus = table.checkStatus('mainList')
, data = checkStatus.data;
if (data.length != 1) {
layer.alert("请选择编辑的行，且同时只能编辑一行", { icon: 2, shadeClose: true, title: "错误信息" });
return;
}
editDlg.update(data[0]);
},
btnAddCopyMenuModel: function () {
var checkStatus = table.checkStatus('mainList'),
data = checkStatus.data;
if (data.length != 1) {
layer.alert("请选择编辑的行，且同时只能复制一行", { icon: 2, shadeClose: true, title: "错误信息" });
return;
}
editDlg.add();
var dataAll = table.cache["mainList"];
var maxSortNo = Math.max.apply(Math, dataAll.map(function (o) { return o.SortNo; }));
data[0].SortNo = maxSortNo + 10;
setTimeout(() => {
menuModelApp.$set('$data', data[0]);
$(":radio[name='IsShow'][value='" + data.IsShow + "']").prop("checked", "checked");
form.render();
}, 400);
},
btnAddCopyMenu: function () {
var checkStatus = table.checkStatus('menuList'),
data = checkStatus.data;
if (data.length != 1) {
layer.msg("请选择编辑的菜单");
return;
}
meditDlg.add(data[0].ModuleId);
var dataAll = table.cache["menuList"];
var maxSort = Math.max.apply(Math, dataAll.map(function (o) { return o.Sort; }));
setTimeout(() => {
data[0].Sort = maxSort + 10;
data[0].Id = "";
menuApp.$set('$data', data[0]);
}, 400);
},
btnEditMenu: function () {
var checkStatus = table.checkStatus('menuList'),
data = checkStatus.data;
if (data.length != 1) {
layer.msg("请选择编辑的菜单");
return;
}
meditDlg.update(data[0]);
},
//常用按钮
btnCommon: function () {
var checkStatus = table.checkStatus('mainList')
, data = checkStatus.data;
if (data.length != 1) {
layer.alert("请选择编辑的行，且同时只能编辑一行", { icon: 2, shadeClose: true, title: "错误信息" });
return;
}
var menuId = data[0].Id;
//layer.msg('一段提示信息');
layer.open({
type: 2,
title: '常用按钮配置',
shadeClose: true,
area: ['500px', '300px'],
content: `./CommonBtn?moduleId=${menuId}`,
cancel: function (index, layero) {
app.methods.initTableMenu({ moduleId: data.Id });
}
});
},
search: function () { //搜索
app.methods.initTableMain({ key: $('#key').val() });
},
btnRefresh: function () {
app.methods.initTableMain();
}
};
$('.toolList .layui-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
var IconNameindex;
var IconInputObj;
$('.IconName').on('dblclick', function () {
IconInputObj = this;
IconNameindex = layer.open({
maxmin: true,
title: "图标选择",
area: ["500px", "400px"],
type: 1,
content: $('#divIconNameEdit'),
success: function (layero, index) {
layer.full(index);
}
});
});
$('#mfromIconNameEdit .iconfont-list .icon').on('click', function () {
var type = $(this).next().next().html();
$(IconInputObj).val("&" + type.replace("&", ""));
layer.close(IconNameindex);
});
var Classindex;
var ClassInputObj;
$('.Class').on('dblclick', function () {
ClassInputObj = this;
Classindex = layer.open({
maxmin: true,
title: "样式选择",
area: ["500px", "400px"],
type: 1,
content: $('#divClassEdit'),
success: function (layero, index) {
layer.full(index);
}
});
});
$('#mfromClassEdit .iconfont-list .layui-btn').on('click', function () {
var type = $(this).next().html();
$(ClassInputObj).val(type);
layer.close(Classindex);
});
//监听页面主按钮操作 end
})