datalist.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. {extend name="common/base"/}
  2. <!-- 主体 -->
  3. {block name="body"}
  4. <div class="p-3">
  5. <form class="layui-form gg-form-bar border-t border-x">
  6. <div class="layui-input-inline" style="width:300px;">
  7. <input type="text" name="keywords" placeholder="请输入关键字" class="layui-input" autocomplete="off" />
  8. </div>
  9. <div class="layui-input-inline">
  10. <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="searchform">提交搜索</button>
  11. </div>
  12. </form>
  13. <table class="layui-hide" id="company" lay-filter="company"></table>
  14. </div>
  15. <script type="text/html" id="toolbarDemo">
  16. <div class="layui-btn-container">
  17. <span class="layui-btn layui-btn-sm" lay-event="add" data-title="添加公司">+ 添加公司</span>
  18. </div>
  19. </script>
  20. <script type="text/html" id="status">
  21. <i class="layui-icon {{# if(d.status == 1){ }}layui-icon-ok{{# } else { }}layui-icon-close{{# } }}"></i>
  22. </script>
  23. <script type="text/html" id="barDemo">
  24. <div class="layui-btn-group"><a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="read">查看</a><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></div>
  25. </script>
  26. {/block}
  27. <!-- /主体 -->
  28. <!-- 脚本 -->
  29. {block name="script"}
  30. <script>
  31. const moduleInit = ['tool'];
  32. function gouguInit() {
  33. var table = layui.table,tool = layui.tool, form = layui.form;
  34. layui.pageTable = table.render({
  35. elem: '#company',
  36. title: '总公司列表',
  37. toolbar: '#toolbarDemo',
  38. url: '/admin/cpuser.company/datalist',
  39. page: true,
  40. limit: 20,
  41. cellMinWidth: 80,
  42. cols: [
  43. [
  44. {
  45. fixed: 'left',
  46. field: 'id',
  47. title: '编号',
  48. align: 'center',
  49. },{
  50. field: 'title',
  51. title: '公司',
  52. align: 'center',
  53. },{
  54. field: 'username',
  55. title: '账号',
  56. align: 'center',
  57. },{
  58. field: 'phone',
  59. title: '电话',
  60. align: 'center',
  61. },{
  62. field: 'company_type',
  63. title: '公司类型',
  64. align: 'center',
  65. }, {
  66. field: 'create_time',
  67. title: '项目创建日期',
  68. align: 'center',
  69. templet: "<div>{{layui.util.toDateString(d.create_time, 'yyyy-MM-dd')}}</div>"
  70. },{
  71. field: 'status',
  72. title: '状态',
  73. toolbar: '#status',
  74. align: 'center',
  75. }, {
  76. fixed: 'right',
  77. field: 'right',
  78. title: '操作',
  79. toolbar: '#barDemo',
  80. minwidth: 80,
  81. align: 'center'
  82. }
  83. ]
  84. ]
  85. });
  86. //监听表头工具栏事件
  87. table.on('toolbar(company)', function(obj){
  88. if (obj.event === 'add') {
  89. tool.side("/admin/cpuser.company/add");
  90. return false;
  91. }
  92. });
  93. //监听表格行工具事件
  94. table.on('tool(company)', function(obj) {
  95. var data = obj.data;
  96. if (obj.event === 'read') {
  97. tool.side('/admin/cpuser.company/read?id='+obj.data.id);
  98. }
  99. else if (obj.event === 'edit') {
  100. tool.side('/admin/cpuser.company/edit?id='+obj.data.id);
  101. console.log(obj.data.id)
  102. }
  103. else if (obj.event === 'del') {
  104. layer.confirm('确定要删除该记录吗?', {
  105. icon: 3,
  106. title: '提示'
  107. }, function(index) {
  108. let callback = function (e) {
  109. layer.msg(e.msg);
  110. if (e.code == 0) {
  111. obj.del();
  112. }
  113. }
  114. tool.delete("/admin/cpuser.company/del", { id: data.id }, callback);
  115. layer.close(index);
  116. });
  117. }
  118. return false;
  119. });
  120. //监听搜索提交
  121. form.on('submit(searchform)', function(data) {
  122. layui.pageTable.reload({
  123. where: {
  124. keywords: data.field.keywords
  125. },
  126. page: {
  127. curr: 1
  128. }
  129. });
  130. return false;
  131. });
  132. }
  133. </script>
  134. {/block}
  135. <!-- /脚本 -->