layui.use([ 'laypage', 'layer', 'table', 'element','form', 'transfer', 'util'], function(){ var laypage = layui.laypage //分页 ,layer = layui.layer //弹层 ,table = layui.table //表格 ,transfer = layui.transfer ,util = layui.util ,element = layui.element //元素操作 ,form = layui.form; //第一个实例 table.render({ elem: '#rolelist' ,url: '/auth/rolelistfrom' //数据接口 ,where:{token:csrfToken} ,method:'post' ,id:'tablerReload' ,page: true //开启分页 ,text:'数据加载中' ,cols: [[ //表头 // {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left',align:'center'}, {type:'numbers',title:'序号'} ,{field: 'name', title: '角色名称', width:200,align:'center'} ,{field: 'describe', title: '描述', align:'center'} ,{field: 'state', title: '状态', width:100,align:'center', templet: function (d) { if (d.state == 2) { return '' } else { return '' } }} ,{field: 'create_at', title: '添加时间', width:200,align:'center'} ,{field: 'update_at', title: '更新时间', width:200,align:'center'} ,{fixed: 'right',title:'操作', width: 300, align:'center', toolbar: '#operate'} ]] }); table.reload('tablerReload'); //重新加载 //列表操作 table.on('tool(rolelist)', function(obj){ var layEvent = obj.event, data = obj.data; if(layEvent === 'edit'){ layer.open({ type: 2, title: '编辑节点', closeBtn: 1, //不显示关闭按钮 // shade: [0], area: ['600px', '500px'], anim: 2, content: ['/auth/editrole?id='+data.id, 'yes'], //iframe的url,no代表不显示滚动条 }); } else if(layEvent === 'del') { layer.confirm('您确定要删除这条数据吗?',{btn:['确定','取消']},function () { $.post('/auth/roledel',{'token':csrfToken,'id':data.id},function (data) { if(data.code == 200){ layer.msg(data.msg); table.reload('nodelist'); return ; } layer.msg(data.msg); }) table.reload('rolelist'); }) } else if(layEvent === 'addnode') { layer.open({ type: 2, title: '为角色添加节点权限', closeBtn: 1, //不显示关闭按钮 // shade: [0], area: ['60%', '75%'], anim: 2, content: ['/auth/addrolenode?id='+data.id, 'yes'], //iframe的url,no代表不显示滚动条 }); } else if(layEvent === 'addmenu') { var index = layui.layer.open({ title : '['+data.name+"]角色添加菜单权限", type : 2, closeBtn: 1, //不显示关闭按钮 area: ['60%', '75%'], // maxmin: true, content:'/auth/addrolemenu?id='+data.id, }) // layui.layer.full(index); // // // //改变窗口大小时,重置弹窗的宽高,防止超出可视区域(如F12调出debug的操作) // $(window).on("resize",function(){ // layui.layer.full(index); // }) } }); //监听指定开关 form.on('switch(switchTest3)', function (data) { var id = data.value; var state = $(this).data('state'); layer.confirm('确定要修改此操作吗?', {btn: ['确定', '取消']}, function () { $.post('/auth/roledelstate', {id:id, state: state}, function (data) { layer.msg(data.msg); table.reload('tablerReload'); }) }, function (aa) { table.reload('tablerReload'); //重新加载 }) }); var $ = layui.$, active = { addData: function(){ //获取选中数据 layer.open({ type: 2, title: '添加角色', closeBtn: 1, //不显示关闭按钮 shade: [0], area: ['600px', '500px'], anim: 2, content: ['/auth/addrole', 'no'], //iframe的url,no代表不显示滚动条 // end: function(){ //此处用于演示 // layer.open({ // type: 2, // title: '很多时候,我们想最大化看,比如像这个页面。', // shadeClose: true, // shade: false, // maxmin: true, //开启最大化最小化按钮 // area: ['893px', '600px'], // content: '//fly.layui.com/' // }); // } }); // var checkStatus = table.checkStatus('idTest') // ,data = checkStatus.data; // layer.alert(JSON.stringify(data)); } }; $('.demoTable .layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); /** * 2020.6.24 lyy 权限管理之添加节点 *begin * ****/ var data1 = []; var data2 = []; $('#userrolelist .y_role').each(function () { let t = {"value": $(this).data('id'), "title": $(this).data('name')}; data1.push(t); }) $('#userrolelist .c_role').each(function () { data2.push($(this).data('id')) }) //显示搜索框 transfer.render({ elem: '#test4' , data: data1 , value: data2 ,width:400 ,height:550 , title: ['未赋予', '已赋予'] , showSearch: true , id: "keyuserrole" }) util.event('lay-demoTransferActive', { getData: function (othis) { var getData = transfer.getData('keyuserrole'); //获取右侧数据 var nid = []; for(var v of getData){ nid.push(v.value); } var index = top.layer.msg('数据提交中,请稍候', {icon: 16, time: false, shade: 0.8}); //数据提交提示 $.post('/auth/addroleandnodefrom', {nid:nid,rid:$(this).data('id'),type:$(this).data('type')}, function (data) { if (data.code == 200) { top.layer.close(index); //关闭数据提交信息 layer.msg(data.msg); parent.layui.table.reload('userlist'); TableClose(); } else if (data.code == 300) { top.layer.close(index); //关闭数据提交信息 layer.msg(data.msg); } }) } , reload: function () { //实例重载 transfer.reload('keyuserrole', { title: ['未赋予', '已赋予'] , data: data1 , value: data2 , showSearch: true }) } }); //添加 form.on('submit(rolesubmit)', function(data){ $.post('/auth/addrolefrom',{'data':data.field},function (data) { if(data.code == 200) { layer.msg(data.msg); parent.layui.table.reload('rolelist'); TableClose(); } else if(data.code == 300 ) { layer.msg(data.msg); } }) return false; }); //修改 form.on('submit(editsubmit)', function(data){ $.post('/auth/editrolefrom',{'data':data.field},function (data) { if(data.code == 200) { layer.msg(data.msg); parent.layui.table.reload('rolelist'); TableClose(); } else if(data.code == 300 ) { layer.msg(data.msg); } }) return false; }); //给角色添加菜单栏 form.on('submit(add_Role_Menu)', function(data){ var index = layer.msg('数据提交中,请稍候',{icon: 16,time:false,shade:0.8}); //数据提交提示 var oCks = xtree1.GetChecked(); //这是方法 var formData = new FormData($('#menuListform')[0]); for (var i = 0; i < oCks.length; i++) { formData.append('nid[]',oCks[i].value); // nodeArr.push(oCks[i].value); } $.ajax({ cache : true, type : "post", url : "/auth/addroleandnodefrom", data : formData, // 你的formid // async : false, //async 默认为true异步,修改为false为同步 contentType: false, //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件 processData: false, //当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data error : function(request) { layer.close(index); //关闭数据提交信息 layer.alert("网络超时"); }, success : function(data) { if (data.code == 200) { layer.msg(data.msg); TableClose(); } else { layer.msg(data.msg); } } }); return false; }); //1、最基础的用法 - 直接绑定json // 判断是否存在才进行以下操作 2019-1-2 添加判断 if($('#xtree1').length > 0){ var xtree1 = new layuiXtree({ elem: 'xtree1' //(必填) 放置xtree的容器,样式参照 .xtree_contianer , form: form //(必填) layui 的 from , data: '/auth/addrolemenuform?id='+$("input[name='id']").val() //(必填) json数据 , isopen: false //加载完毕后的展开状态,默认值:true , ckall: true //启用全选功能,默认值:false , ckallback: function () { } //全选框状态改变后执行的回调函数 , icon: { //三种图标样式,更改几个都可以,用的是layui的图标 open: "" //节点打开的图标 , close: "" //节点关闭的图标 , end: "" //末尾节点的图标 } , color: { //三种图标颜色,独立配色,更改几个都可以 open: "#229905" //节点图标打开的颜色 , close: "#229905" //节点图标关闭的颜色 , end: "#009688" //末级节点图标的颜色 } , click: function (data) { //节点选中状态改变事件监听,全选框有自己的监听事件 // console.log(data.elem); //得到checkbox原始DOM对象 // console.log(data.elem.checked); //开关是否开启,true或者false // console.log(data.value); //开关value值,也可以通过data.elem.value得到 // console.log(data.othis); //得到美化后的DOM对象 } }); } //获取全部[选中的][末级节点]原checkbox DOM对象,返回Array // 判断是否存在才进行以下操作 2019-1-2 添加判断 if($('#btn1').length > 0){ document.getElementById('btn1').onclick = function () { var oCks = xtree1.GetChecked(); //这是方法 for (var i = 0; i < oCks.length; i++) { console.log(oCks[i].value); } } } });