1
This commit is contained in:
@@ -0,0 +1,260 @@
|
||||
define(['table', 'upload','form','template','treegrid','bootstrap-table-treegrid'], function (Table,Upload,Form,Template) {
|
||||
var AdminRule = {
|
||||
//Do setup work hereAction
|
||||
index: function () {
|
||||
this.initTalbe();
|
||||
},
|
||||
initTalbe:function(){
|
||||
|
||||
var apiResults_type = ["目录","菜单","权限"];
|
||||
Table.api.init({
|
||||
extend: {
|
||||
index_url: '/app/admin/UserRule/select',
|
||||
add_url: '/app/admin/UserRule/insert',
|
||||
edit_url: '/app/admin/UserRule/update',
|
||||
del_url: '/app/admin/UserRule/delete',
|
||||
multi_url: '/app/admin/UserRule/multi',
|
||||
dragsort_url: '/app/admin/UserRule/weigh',
|
||||
table: 'UserRule',
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* 选中父项时，同时选中子项
|
||||
* @param datas 所有的数据
|
||||
* @param row 当前数据
|
||||
* @param id id 字段名
|
||||
* @param pid 父id字段名
|
||||
*/
|
||||
function selectChilds(datas,row,id,pid,checked) {
|
||||
for(var i in datas){
|
||||
if(datas[i][pid] == row[id]){
|
||||
datas[i][0]=true;
|
||||
datas[i].check=checked;
|
||||
selectChilds(datas,datas[i],id,pid,checked);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function selectParentChecked(datas,row,id,pid){
|
||||
for(var i in datas){
|
||||
if(datas[i][id] == row[pid]){
|
||||
datas[i].check=true;
|
||||
datas[i][0]=true;
|
||||
selectParentChecked(datas,datas[i],id,pid);
|
||||
};
|
||||
}
|
||||
}
|
||||
var table = $("#table");
|
||||
var tableOptions = {
|
||||
url: $.fn.bootstrapTable.defaults.extend.index_url,
|
||||
pk: 'id',
|
||||
sortName: 'id',
|
||||
pagination: false,
|
||||
commonSearch: false,
|
||||
search: false,
|
||||
treeShowField: 'title',
|
||||
parentIdField: 'pid',
|
||||
idField: 'id',
|
||||
uniqueId: 'id',
|
||||
clickToSelect: false, //是否启用点击选中
|
||||
dblClickToEdit: true, //是否启用双击编辑
|
||||
singleSelect: false, //是否启用单选
|
||||
|
||||
onCheck: function(row) {
|
||||
var datas = table.bootstrapTable('getData');
|
||||
|
||||
selectChilds(datas, row, 'id', 'pid', true); // 选择子类
|
||||
|
||||
selectParentChecked(datas, row, 'id', 'pid'); // 选择父类
|
||||
|
||||
table.bootstrapTable('load', datas);
|
||||
},
|
||||
|
||||
onUncheck: function(row) {
|
||||
var datas = table.bootstrapTable('getData');
|
||||
selectChilds(datas, row, 'id', 'pid', false);
|
||||
table.bootstrapTable('load', datas);
|
||||
},
|
||||
onResetView: function(data) {
|
||||
//console.log($.fn.treegrid)
|
||||
table.treegrid({
|
||||
initialState: 'expanded', // 所有节点都折叠
|
||||
treeColumn: 2,
|
||||
expanderExpandedClass: 'mdi mdi-folder-open', // 可自定义图标样式
|
||||
expanderCollapsedClass: 'mdi mdi-folder',
|
||||
onChange: function() {
|
||||
table.bootstrapTable('resetWidth');
|
||||
}
|
||||
});
|
||||
|
||||
// 只展开树形的第一集节点
|
||||
table.treegrid('getRootNodes').treegrid('expand');
|
||||
},
|
||||
columns: [
|
||||
[
|
||||
{checkbox: true},
|
||||
{
|
||||
field: 'id',
|
||||
title: 'ID',
|
||||
filter: "number",
|
||||
sortable: true // 是否排序
|
||||
},
|
||||
{
|
||||
field: 'title',
|
||||
title: '标题',
|
||||
filter: "string",
|
||||
align:"left"
|
||||
},
|
||||
{
|
||||
title: "图标",
|
||||
field: "icon",
|
||||
formatter: function (v,d) {
|
||||
return '<i class="layui-icon ' + d["icon"] + '"></i>';
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "key",
|
||||
field: "key",
|
||||
},
|
||||
// {
|
||||
// title: "上级菜单",
|
||||
// field: "pid",
|
||||
// hide: true,
|
||||
// formatter: function (v,d) {
|
||||
// let field = "pid";
|
||||
// if (typeof d[field] == "undefined") return "";
|
||||
// let items = [];
|
||||
// $.each((d[field] + "").split(","), function (k , v) {
|
||||
// items.push( v);
|
||||
// });
|
||||
// return items.join(",");
|
||||
// }
|
||||
// },
|
||||
{
|
||||
title: "创建时间",
|
||||
field: "created_at",
|
||||
hide: true,
|
||||
},
|
||||
{
|
||||
title: "更新时间",
|
||||
field: "updated_at",
|
||||
hide: true,
|
||||
},
|
||||
{
|
||||
title: "url",
|
||||
field: "href",
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
field: "type",
|
||||
width: 80,
|
||||
formatter: function (v,d) {
|
||||
let field = "type";
|
||||
let value = apiResults_type[d["type"]] || d["type"];
|
||||
let css = {"目录":"layui-bg-blue", "菜单": "layui-bg-green", "权限": "layui-bg-orange"}[value];
|
||||
return '<span class="layui-badge '+css+'">'+value+'</span>';
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
field: "status",
|
||||
formatter:Table.api.formatter.switch
|
||||
},
|
||||
{
|
||||
title: "排序",
|
||||
field: "weight",
|
||||
width: 80,
|
||||
},
|
||||
{field: 'operate', title: '操作', table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
|
||||
]
|
||||
]
|
||||
};
|
||||
// 初始化表格
|
||||
table.bootstrapTable(tableOptions);
|
||||
// 为表格绑定事件
|
||||
Table.api.bindevent(table);
|
||||
},
|
||||
update:function(){
|
||||
this.bindevent();
|
||||
},
|
||||
insert:function(){
|
||||
this.bindevent();
|
||||
},
|
||||
bindevent:function(){
|
||||
Config['uploadurl'] = '/app/admin/attachment/avatar';
|
||||
var form = $('form');
|
||||
Form.api.bindevent(form)
|
||||
this.getRole();
|
||||
this.initIcoselect();
|
||||
},
|
||||
getRole:function(){
|
||||
Fast.api.ajax({
|
||||
url: "/app/admin/UserRole/select?format=tree",
|
||||
dataType: "json",
|
||||
success: function (res) {
|
||||
Layer.closeAll();
|
||||
var html = "";
|
||||
var selected=$('#roles').data('value');
|
||||
for (let index = 0; index < res.data.length; index++) {
|
||||
const element = res.data[index];
|
||||
if(selected == element.id){
|
||||
html+='<option value="'+element.id+'" selected>'+element.name+'</option>';
|
||||
}else{
|
||||
html+='<option value="'+element.id+'">'+element.name+'</option>';
|
||||
}
|
||||
}
|
||||
$('#roles').append(html);
|
||||
}
|
||||
});
|
||||
},
|
||||
initIcoselect:function(){
|
||||
|
||||
var iconlist = [];
|
||||
var iconfunc = function () {
|
||||
Layer.open({
|
||||
type: 1,
|
||||
area: ['99%', '98%'], //宽高
|
||||
content: Template('chooseicontpl', {iconlist: iconlist})
|
||||
});
|
||||
};
|
||||
|
||||
$(document).on('change keyup', "#icon", function () {
|
||||
$(this).prev().find("i").prop("class", $(this).val());
|
||||
});
|
||||
$(document).on('click', ".btn-search-icon", function () {
|
||||
if (iconlist.length == 0) {
|
||||
$.get(Config.cdnurl + "/app/admin/css/materialdesignicons.min.css", function (ret) {
|
||||
window.iconret = ret;
|
||||
// var exp = /\.mdi-(.*):before/ig;
|
||||
// var result;
|
||||
// while ((result = exp.exec(ret)) != null) {
|
||||
// iconlist.push(result[1]);
|
||||
// }
|
||||
var list = Array.from(iconret.matchAll(/mdi-(.*?):before/g));
|
||||
for (let index = 1; index < list.length; index++) {
|
||||
//const element = list[index];
|
||||
iconlist.push(list[index][1]);
|
||||
|
||||
}
|
||||
iconfunc();
|
||||
});
|
||||
} else {
|
||||
iconfunc();
|
||||
}
|
||||
});
|
||||
$(document).on('click', '#chooseicon ul li', function () {
|
||||
$("input#icon").val('mdi mdi-' + $(this).data("font")).trigger("change");
|
||||
Layer.closeAll();
|
||||
});
|
||||
$(document).on('keyup', 'input.js-icon-search', function () {
|
||||
$("#chooseicon ul li").show();
|
||||
if ($(this).val() != '') {
|
||||
$("#chooseicon ul li:not([data-font*='" + $(this).val() + "'])").hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
return AdminRule
|
||||
});
|
||||
Reference in New Issue
Block a user