goods-option.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  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="goodsName" 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 src="../js/myjs/goods-table.js"></script>
  50. <script>
  51. layui.use(['form', 'table'], function () {
  52. var $ = layui.jquery,
  53. form = layui.form,
  54. table = layui.table;
  55. table.render({
  56. elem: '#currentTableId',
  57. url: getRootUrl()+'/goods/option/list',
  58. method:'POST',
  59. headers:{
  60. token:getToken()
  61. },
  62. contentType:'application/json',
  63. request:{
  64. pageName:'pageNo',
  65. limitName:'pageSize'
  66. },
  67. parseData:function(res){
  68. return {
  69. "code": res.code, //解析接口状态
  70. "msg": res.message, //解析提示文本
  71. "count": res.data.total, //解析数据长度
  72. "data": res.data.data //解析数据列表
  73. }
  74. },
  75. toolbar: '#toolbarDemo',
  76. defaultToolbar: ['filter', 'exports', 'print', {
  77. title: '提示',
  78. layEvent: 'LAYTABLE_TIPS',
  79. icon: 'layui-icon-tips'
  80. }],
  81. cols: [[
  82. {type: "checkbox", width: 50},
  83. {field: 'goodsId', width: 80, title: 'ID', sort: true},
  84. {field: 'goodsName', width: 100, title: '商品名称'},
  85. {field: 'goodsOptionText', title: '规格名称', minWidth: 150},
  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. table.reload('currentTableId', {
  97. url: getRootUrl()+'/goods/option/search',
  98. where: {
  99. goodsName:param.goodsName
  100. }
  101. });
  102. return false;
  103. });
  104. /**
  105. * toolbar监听事件
  106. */
  107. table.on('toolbar(currentTableFilter)', function (obj) {
  108. if (obj.event === 'add') { // 监听添加操作
  109. } else if (obj.event === 'delete') { // 监听删除操作
  110. var checkStatus = table.checkStatus('currentTableId')
  111. , data = checkStatus.data;
  112. layer.alert(JSON.stringify(data));
  113. }
  114. });
  115. //监听表格复选框选择
  116. table.on('checkbox(currentTableFilter)', function (obj) {
  117. console.log(obj)
  118. });
  119. table.on('tool(currentTableFilter)', function (obj) {
  120. var data = obj.data;
  121. if (obj.event === 'edit') {
  122. var index = layer.open({
  123. title: '添加商品规格',
  124. type: 2,
  125. shade: 0.2,
  126. maxmin:true,
  127. shadeClose: true,
  128. area: ['60%', '50%'],
  129. content: '../page/table/goods-option-add.html',
  130. end:function(){
  131. layui.sessionData('goods-option-add',null)
  132. //执行搜索重载
  133. table.reload('currentTableId', {})
  134. }
  135. });
  136. layui.sessionData('goods-option-add',{
  137. key:'goods',
  138. value:obj.data
  139. })
  140. $(window).on("resize", function () {
  141. layer.full(index);
  142. });
  143. return false;
  144. } else if (obj.event === 'delete') {
  145. layer.confirm('确认删除商品吗?', function (index) {
  146. //删除商品
  147. // deleteGoodsById(obj.data.id);
  148. obj.del();
  149. layer.close(index);
  150. });
  151. }
  152. });
  153. //双击事件
  154. table.on('rowDouble()',function(obj){
  155. // console.log(obj.data) 得到当前行数据
  156. })
  157. });
  158. </script>
  159. </body>
  160. </html>