goods-type.html 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>商品类型</title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  9. <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
  10. <link rel="stylesheet" href="../css/public.css" media="all">
  11. </head>
  12. <body>
  13. <div class="layuimini-container">
  14. <div class="layuimini-main">
  15. <fieldset class="table-search-fieldset">
  16. <legend>搜索信息</legend>
  17. <div style="margin: 10px 10px 10px 10px">
  18. <form class="layui-form layui-form-pane" action="">
  19. <div class="layui-form-item">
  20. <div class="layui-inline">
  21. <label class="layui-form-label">商品类型</label>
  22. <div class="layui-input-inline">
  23. <input type="text" name="type" autocomplete="off" class="layui-input">
  24. </div>
  25. </div>
  26. <div class="layui-inline">
  27. <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
  28. </div>
  29. </div>
  30. </form>
  31. </div>
  32. </fieldset>
  33. <script type="text/html" id="toolbarDemo">
  34. <div class="layui-btn-container">
  35. <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
  36. <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
  37. </div>
  38. </script>
  39. <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
  40. <script type="text/html" id="currentTableBar">
  41. <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
  42. <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
  43. </script>
  44. </div>
  45. </div>
  46. <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
  47. <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
  48. <script src="../js/myjs/utils.js"></script>
  49. <script>
  50. layui.use(['form', 'table'], function () {
  51. var $ = layui.jquery,
  52. form = layui.form,
  53. table = layui.table;
  54. table.render({
  55. elem: '#currentTableId',
  56. url: getRootUrl()+'/goods/type/page',
  57. method:'POST',
  58. headers:{
  59. token:getToken()
  60. },
  61. contentType:'application/json',
  62. request:{
  63. pageName:'pageNo',
  64. limitName:'pageSize'
  65. },
  66. parseData:function(res){
  67. return {
  68. "code": res.code, //解析接口状态
  69. "msg": res.message, //解析提示文本
  70. "count": res.data.total, //解析数据长度
  71. "data": res.data.data //解析数据列表
  72. }
  73. },
  74. toolbar: '#toolbarDemo',
  75. defaultToolbar: ['filter', 'exports', 'print', {
  76. title: '提示',
  77. layEvent: 'LAYTABLE_TIPS',
  78. icon: 'layui-icon-tips'
  79. }],
  80. cols: [[
  81. {type: "checkbox", width: 50},
  82. {field: 'id', width: 80, title: 'ID', sort: true},
  83. {field: 'type', width: 100, title: '商品类型'},
  84. {field: 'createTime', width: 200, title: '创建时间',sort:true, align: "center"},
  85. {field: 'updateTime', width: 200, title: '修改时间',sort:true, align: "center"},
  86. {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
  87. ]],
  88. limits: [10, 15, 20, 25, 50, 100],
  89. limit: 15,
  90. page: true,
  91. skin: 'line'
  92. });
  93. // 监听搜索操作
  94. form.on('submit(data-search-btn)', function (data) {
  95. var param=data.field
  96. //执行搜索重载
  97. table.reload('currentTableId', {
  98. url: getRootUrl()+'/goods/type/search',
  99. where: {
  100. type:param.type
  101. }
  102. }, 'data');
  103. return false;
  104. });
  105. /**
  106. * toolbar监听事件
  107. */
  108. table.on('toolbar(currentTableFilter)', function (obj) {
  109. if (obj.event === 'add') { // 监听添加操作
  110. var index = layer.open({
  111. title: '添加类型',
  112. type: 2,
  113. shade: 0.2,
  114. maxmin:true,
  115. shadeClose: true,
  116. area: ['40%', '35%'],
  117. content: '../page/table/goods-type-add.html',
  118. end:function(){
  119. table.reload('currentTableId', {})
  120. }
  121. });
  122. $(window).on("resize", function () {
  123. layer.full(index);
  124. });
  125. } else if (obj.event === 'delete') { // 监听删除操作
  126. var checkStatus = table.checkStatus('currentTableId')
  127. , data = checkStatus.data;
  128. layer.alert(JSON.stringify(data));
  129. }
  130. });
  131. //监听表格复选框选择
  132. table.on('checkbox(currentTableFilter)', function (obj) {
  133. console.log(obj)
  134. });
  135. table.on('tool(currentTableFilter)', function (obj) {
  136. var data = obj.data;
  137. if (obj.event === 'edit') {
  138. var index = layer.open({
  139. title: '编辑类型',
  140. type: 2,
  141. shade: 0.2,
  142. maxmin:true,
  143. shadeClose: true,
  144. area: ['40%', '35%'],
  145. content: '../page/table/goods-type-edit.html',
  146. success:function(){
  147. },
  148. end:function(){
  149. layui.sessionData('goods-type-update',null)
  150. //执行搜索重载
  151. table.reload('currentTableId', {})
  152. }
  153. });
  154. layui.sessionData('goods-type-update',{
  155. key:'goodsType',
  156. value:obj.data
  157. })
  158. $(window).on("resize", function () {
  159. layer.full(index);
  160. });
  161. return false;
  162. } else if (obj.event === 'delete') {
  163. layer.confirm('真的删除行么', function (index) {
  164. //删除商品
  165. var res=getData('/goods/type/delete',{id:obj.data.id})
  166. layer.msg(res.message)
  167. obj.del();
  168. layer.close(index);
  169. });
  170. }
  171. });
  172. });
  173. </script>
  174. </body>
  175. </html>