department_list.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>部门管理</title>
  7. <link rel="stylesheet" href="../../lib/layui/css/layui.css">
  8. <style>
  9. body { padding: 15px; }
  10. .status-green { color: #5fb878; }
  11. .status-red { color: #ff5722; }
  12. </style>
  13. </head>
  14. <body>
  15. <div class="table-toolbar">
  16. <button class="layui-btn layui-btn-sm" id="btnAdd"><i class="layui-icon layui-icon-add-1"></i> 添加</button>
  17. </div>
  18. <table id="tableList" lay-filter="tableList"></table>
  19. <script type="text/html" id="toolbar">
  20. <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i> 编辑</a>
  21. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i> 删除</a>
  22. </script>
  23. <script type="text/html" id="statusTpl">
  24. {{# if(d.status === '1') { }}
  25. <span class="status-green"><i class="layui-icon layui-icon-ok-circle"></i> 正常</span>
  26. {{# } else { }}
  27. <span class="status-red"><i class="layui-icon layui-icon-close-fill"></i> 停用</span>
  28. {{# } }}
  29. </script>
  30. <script src="../../lib/layui/layui.js"></script>
  31. <script src="../../js/config.js"></script>
  32. <script src="../../js/common.js"></script>
  33. <script>
  34. layui.use(['table', 'layer', 'tree'], function() {
  35. var table = layui.table;
  36. var layer = layui.layer;
  37. // 使用树形表格
  38. var tableIns = table.render({
  39. elem: '#tableList',
  40. url: Config.getApiUrl(Config.api.department.tree),
  41. method: 'get',
  42. headers: function() {
  43. var token = localStorage.getItem('token');
  44. return token ? { 'Authorization': token } : {};
  45. },
  46. response: {
  47. statusName: 'code',
  48. statusCode: 200,
  49. dataName: 'data'
  50. },
  51. cols: [[
  52. { field: 'departmentName', title: '部门名称', width: 250 },
  53. { field: 'departmentCode', title: '部门编码', width: 150 },
  54. { field: 'leader', title: '负责人', width: 120 },
  55. { field: 'phone', title: '联系电话', width: 140 },
  56. { field: 'sort', title: '排序', width: 80 },
  57. { field: 'status', title: '状态', width: 100, templet: '#statusTpl' },
  58. { fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#toolbar' }
  59. ]],
  60. parseData: function(res) {
  61. return {
  62. code: res.code,
  63. data: res.data || []
  64. };
  65. }
  66. });
  67. $('#btnAdd').click(function() {
  68. Common.open({
  69. title: '添加部门',
  70. area: ['550px', '400px'],
  71. content: 'department_form.html?id='
  72. });
  73. });
  74. table.on('tool(tableList)', function(obj) {
  75. var data = obj.data;
  76. var event = obj.event;
  77. if (event === 'edit') {
  78. Common.open({
  79. title: '编辑部门',
  80. area: ['550px', '400px'],
  81. content: 'department_form.html?id=' + data.id
  82. });
  83. } else if (event === 'del') {
  84. Common.confirm('确定要删除部门 【' + data.departmentName + '】 吗?', function() {
  85. Common.del(Config.api.department.remove + '/' + data.id, function(res) {
  86. Common.success('删除成功', function() {
  87. obj.del();
  88. });
  89. });
  90. });
  91. }
  92. });
  93. });
  94. </script>
  95. </body>
  96. </html>