@extends('admin/layout') @section('header') <link rel="stylesheet" href="{{asset('js/plugins/zTree_v3-master/css/zTreeStyle/zTreeStyle.css')}}"> <style type="text/css"> .ztree li span.button.add { margin-left: 2px; margin-right: -1px; background-position: -144px 0; vertical-align: top; *vertical-align: middle } .ztree li span.button.reset { margin-right: 2px; background-position: -110px -48px; vertical-align: top; *vertical-align: middle } </style> @endsection @section('content') <body class="gray-bg"> <div class="wrapper wrapper-content animated fadeInRight"> <div class="row"> <div class="col-sm-3"> <div class="ibox float-e-margins"> <div class="ibox-title"> 菜单配置 </div> <div class="ibox-content"> <button class="btn btn-info btn-sm" type="button" onclick="units.saveView(0,1)">添加一级菜单</button> <ul id="treeDemo" class="ztree"></ul> </div> </div> </div> <div class="col-sm-9"> <div class="ibox float-e-margins"> <div class="ibox-title">权限配置 <button class="btn btn-info" type="button" style="float: right;margin: 0 5px;padding: 4px 12px" onclick="units.batchDelete()">删除 </button> <button class="btn btn-info" type="button" style="float: right;margin: 0 5px;padding: 4px 12px" onclick="units.saveView(0)">添加 </button> </div> <div class="ibox-content"> <table id="table" class="table table-condensed" data-mobile-responsive="true"></table> </div> </div> </div> </div> </div> </body> @endsection @section('footer') <script src="{{asset('js/plugins/zTree_v3-master/js/jquery.ztree.core.min.js')}}"></script> <script src="{{asset('js/plugins/zTree_v3-master/js/jquery.ztree.exedit.min.js')}}"></script> <script> var units = { search: function () { tips.selectPage(); }, getIdsBySelections: function () { var selections = $("#table").bootstrapTable('getSelections'); var ids = []; $.each(selections, function (inx, val) { ids.push(val.id); }); return ids; }, saveView: function (id, type) { //功能权限添加修改 带 type的 是菜单权限添加一级菜单 if (id === 0 && type !== 1) { var nodes = zTreeObj.getSelectedNodes(); // console.log(nodes); if (nodes.length === 0) { layer.alert('请先在左侧菜单选择你要添加的位置', {icon: 0}); return; } } var url = '/admin/system/permissions/' + id + '?type=2'; if (type === 1) { url = '/admin/system/permissions/' + id + '?type=1'; } layer.open({ type: 2, content: url, area: ['60%', '50%'], title: '保存', btn: ['确认', '取消'], yes: function (index, layero) { var son = $(layero).find('iframe')[0].contentWindow; var data = son.tips.getFormValues('#form'); layer.close(index); data.type = 2; if (type === 1) { // 菜单权限添加一级菜单 data.type = 1; data.parent_id = 0; } else { if (id === 0) { data.parent_id= nodes[0].id } } var config = { type: 'PUT', url: url, data: data, success: function (result) { if (type === 1) { zTreeObj.addNodes(null, { id: result.data.id, pId: result.data.parent_id, name: result.data.title }); } else { layer.msg(result.message, {icon: 6, time: 1500}, function () { tips.tableRefresh('#table'); }); } } }; tips.ajax(config); } }); }, batchDelete: function () { var ids = units.getIdsBySelections(); if (ids.length === 0) { layer.alert('请先选择您所要操作的对象'); return; } layer.confirm('您确定要删除吗?', {icon: 3, title: '删除信息'}, function () { tips.ajax({url: '/admin/system/permissions', type: 'delete', data: {ids: ids}}); tips.tableRefresh('#table'); }); }, addHoverDom: function (treeId, treeNode) { var sObj = $("#" + treeNode.tId + "_span"); var addBtn = "#addBtn_" + treeNode.tId; // if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return; if (treeNode.editNameFlag || $(addBtn).length > 0) return; var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='add node' onfocus='this.blur();'></span>" + "<span class='button reset' id='resetBtn_" + treeNode.tId + "' title='reset node' onfocus='this.blur();'></span>"; sObj.after(addStr); var btn = $(addBtn); if (btn) btn.bind("click", function () { //菜单权限添加 layer.open({ type: 2, content: ['/admin/system/permissions/0?type=1'], area: ['60%', '60%'], title: '保存', btn: ['确认', '取消'], yes: function (index, layero) { var son = $(layero).find('iframe')[0].contentWindow; var data = son.tips.getFormValues('#form'); data.type = 1; data.parent_id = treeNode.id; var config = { type: 'PUT', url: '/admin/system/permissions/0', data: data, success: function (result) { layer.msg(result.message, {icon: 6, time: 1500}, function () { layer.close(index); }); zTreeObj.addNodes(treeNode, { id: result.data.id, pId: result.data.parent_id, name: result.data.title }); } }; tips.ajax(config); } }); return false; }); var resetBtn = $("#resetBtn_" + treeNode.tId); if (resetBtn) resetBtn.bind("click", function () { //菜单权限修改 layer.open({ type: 2, content: ['/admin/system/permissions/' + treeNode.id + '?type=1'], area: ['60%', '60%'], title: '保存', btn: ['确认', '取消'], yes: function (index, layero) { var son = $(layero).find('iframe')[0].contentWindow; var data = son.tips.getFormValues('#form'); data.type = 1; var config = { type: 'PUT', url: '/admin/system/permissions/' + treeNode.id, data: data, success: function (result) { layer.msg(result.message, {icon: 6, time: 1500}, function () { layer.close(index); }); treeNode.name = result.data.title; zTreeObj.updateNode(treeNode); } }; tips.ajax(config); } }); return false; }); } }; var zTreeObj; // zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解) var setting = { callback: { onClick: function (event, treeId, treeNode) { config.otherParams = {parentId: treeNode.id}; tips.tableRefresh(); }, beforeRemove: function (treeId, treeNode) { zTreeObj.selectNode(treeNode); layer.confirm('是否删除所有选中的数据?', {icon: 3, title: '提示'}, function (index) { layer.close(index); var config = { type: 'delete', url: '/admin/system/permissions/' + treeNode.id, success: function (result) { layer.msg(result.message, {icon: 6, time: 1500}, function () { layer.close(index); }); zTreeObj.removeNode(treeNode); } }; tips.ajax(config); }); return false; } }, edit: { enable: true, showRenameBtn: false, showRemoveBtn: true }, view: { addHoverDom: units.addHoverDom, removeHoverDom: function (treeId, treeNode) { $("#addBtn_" + treeNode.tId).unbind().remove(); $("#resetBtn_" + treeNode.tId).unbind().remove(); }, selectedMulti: false } }; // zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解) var trees = JSON.parse('{!! json_encode($trees) !!}'); $(document).ready(function () { zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, trees); }); var config = {}; config.url = '/admin/system/permissions'; config.columns = [ //字段 /*{checkbox: true},*/ { title: '序号', align: 'center', formatter: function (value, item, index) { return index + 1; } }, {title: '名称', field: 'title', align: 'center'}, {title: '规则', field: 'rule', align: 'center'}, {title: '创建时间', field: 'created_at', align: 'center'}, { title: '操作', field: 'id', align: 'center', formatter: function (value) { return ( '<button onclick="units.saveView(' + value + ')" class="btn btn-xs"><span class="glyphicon glyphicon-edit"></span>编辑</button>' // '<button onclick="units.detail(' + value + ')" class="btn btn-xs"><span class="glyphicon glyphicon-menu-hamburger"></span>详情</button>' ); } } ]; tips.bootstrapTable(config); $(document).on('click', '#on', function () { var ids = units.getIdsBySelections(); if (ids.length === 0) { layer.alert('请先选择您所要操作的对象'); return; } tips.ajax({url: '/admin/system/users/on', type: 'put', data: {ids: ids}}); tips.tableRefresh('#table'); }); $(document).on('click', '#off', function () { var ids = units.getIdsBySelections(); if (ids.length === 0) { layer.alert('请先选择您所要操作的对象'); return; } tips.ajax({url: '/admin/system/users/off', type: 'put', data: {ids: ids}}); tips.tableRefresh('#table'); }); $(document).on('click', '#add', function () { layer.open({ type: 2, content: ['/admin/system/user/show/0'], area: ['60%', '70%'], title: '添加用户' }); }); </script> @endsection