index.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. {extend name="../../base/view/common/base" /}
  2. <!-- 主体 -->
  3. {block name="body"}
  4. <div class="p-page">
  5. <div class="gg-form-bar border-t border-x" style="padding-bottom:12px;">
  6. <button class="layui-btn layui-btn-sm add-menu">+ 添加部门</button>
  7. </div>
  8. <div>
  9. <table class="layui-hide" id="treeTable" lay-filter="treeTable"></table>
  10. </div>
  11. </div>
  12. {/block}
  13. <!-- /主体 -->
  14. <!-- 脚本 -->
  15. {block name="script"}
  16. <script>
  17. const moduleInit = ['tool'];
  18. function gouguInit() {
  19. var treeTable = layui.treeTable, tool = layui.tool;
  20. layui.pageTable = treeTable.render({
  21. elem: '#treeTable'
  22. ,id: 'treeTable'
  23. ,url: "/user/department/index"
  24. ,tree: { // treeTable 特定属性集
  25. customName: {name:'title'},
  26. data: {},
  27. view: {showIcon:false},
  28. async: {},
  29. callback: {}
  30. }
  31. ,done:function(){
  32. treeTable.expandAll('treeTable', true); // 关闭全部节点
  33. }
  34. , cols: [[
  35. { field: 'id', width: 80, title: 'ID号', align: 'center' }
  36. , { field: 'pid', title: '上级部门ID',width: 90, align: 'center'}
  37. , { field: 'title', title: '部门名称'}
  38. , { field: 'sort', title: '排序',width: 60, align: 'center'}
  39. , { field: 'leader', title: '部门负责人',width: 200}
  40. , { field: 'phone', title: '部门电话',width: 136,}
  41. , { width:168, title: '操作', align: 'center', templet: function (d) {
  42. var html = '<span class="layui-btn-group"><button class="layui-btn layui-btn-xs" lay-event="add">添加下级部门</button><button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</button><button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button></span>';
  43. return html;
  44. }
  45. }
  46. ]]
  47. , page: false
  48. });
  49. //表头工具栏事件
  50. $('body').on('click','.add-menu', function(){
  51. tool.side("/user/department/add");
  52. return;
  53. });
  54. //操作按钮
  55. treeTable.on('tool(treeTable)', function (obj) {
  56. if (obj.event === 'add') {
  57. tool.side("/user/department/add?pid="+obj.data.id);
  58. return;
  59. }
  60. if (obj.event === 'edit') {
  61. tool.side("/user/department/add?id="+obj.data.id);
  62. return;
  63. }
  64. if (obj.event === 'del') {
  65. layer.confirm('确定要删除吗?', {icon: 3, title:'提示'}, function(index){
  66. let callback = function (e) {
  67. layer.msg(e.msg);
  68. if (e.code == 0) {
  69. obj.del();
  70. }
  71. }
  72. tool.delete("/user/department/delete", { id: obj.data.id }, callback);
  73. layer.close(index);
  74. });
  75. }
  76. });
  77. }
  78. </script>
  79. {/block}
  80. <!-- /脚本 -->