rechargeRuleManage.html 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>充值规则管理</title>
  6. <script src="../../js/min-loader-next.js"></script>
  7. </head>
  8. <body class="content">
  9. <div class="order-body">
  10. <div class="order-tiaojian back-gray">
  11. <div class="tiaojian-part1" id = "conditions">
  12. <div class="fl f12-gray4-op mt4">所选条件:</div>
  13. </div>
  14. <div class="tiaojian-part2 fr demoTable">
  15. <button class="layui-btn order-bnt1" data-type="reload" >搜索</button>
  16. <button class="layui-btn order-bnt2" data-type="reset">重置</button>
  17. <button class="layui-btn order-bnt2" id = "add">添加</button>
  18. <a href="#" id="toggle" class="top">收起</a>
  19. </div>
  20. </div>
  21. <form class="layui-form" action="javascript:void(0)" id = "formName">
  22. <div class="order-select back-border" id="content">
  23. <div class="layui-inline">
  24. <label class="f12-gray4">充值金额:</label>
  25. <input onchange = "changeSelectCon(0,this,'inp')" class="search-select" type="rechargeAmt" name="rechargeAmt" id ="rechargeAmt" value="" placeholder="请输入充值金额" />
  26. </div>
  27. <div class="layui-inline">
  28. <label class="f12-gray4">创建时间:</label>
  29. <input class="search-select" type="text" id="dates" placeholder="创建时间(区间)" readonly />
  30. </div>
  31. </div>
  32. </form>
  33. </div>
  34. <div class="shadow-content" style="margin:1.5rem;">
  35. <table id="userManage" lay-filter="tableFilter"></table>
  36. </div>
  37. <!--操作功能-->
  38. <script type="text/html" id="barDemo">
  39. <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  40. <a class="layui-btn layui-btn-xs" lay-event="dele">删除</a>
  41. </script>
  42. <script>
  43. $("#toggle").click(function() {
  44. $(this).html($("#content").is(":hidden") ? "收起" + "<i class='iconfont up iconSelect_drop-down'/></i>" : "展开" +
  45. "<i class='iconfont up iconSelect_drop-down'/></i>");
  46. $("#content").slideToggle();
  47. });
  48. layui.use(['table','laydate','form'], function(){
  49. var laydate = layui.laydate;
  50. //日期范围
  51. laydate.render({
  52. elem: '#dates'
  53. ,range: true
  54. ,format:'yyyyMMdd'
  55. ,done: function(value, date, endDate){
  56. changeSelectCon(1,"dates",'date',value)
  57. }
  58. });
  59. form = layui.form;
  60. form.render();
  61. })
  62. var table;
  63. layui.use('table', function(){
  64. table = layui.table;
  65. table.render({
  66. //tbname:'userManage',
  67. id : 'userManage'
  68. ,elem: '#userManage'
  69. ,limit:10
  70. ,url: 'RechargeManageAction/queryRechargeRule' //数据接口
  71. ,method: 'post'
  72. ,where:{MINView:"JSON"}
  73. ,page: true //开启分页
  74. ,cols: [[ //表头
  75. {type:'numbers',title: '序号',width:'5%'}
  76. ,{field: 'id', title: '编号', width:'10%', sort: true}
  77. ,{field: 'rechargeAmt', title: '充值金额', width:'12%'}
  78. ,{field: 'giveAmt', title: '赠送金额', width:'12%'}
  79. ,{field: 'desc', title: '备注', width:'15%'}
  80. ,{field: 'createTime', title: '创建日期',width:'15%'}
  81. ,{field: 'branch', title: '所属商户',width:'15%'}
  82. ,{field: 'operate', title: '操作', width: '25%', toolbar: '#barDemo',fixed: 'right'}
  83. ]]
  84. ,done: function(res, curr, count){
  85. //如果是异步请求数据方式,res即为你接口返回的信息。
  86. console.log(res);
  87. //得到当前页码
  88. console.log(curr);
  89. //得到数据总量
  90. console.log(count);
  91. }
  92. ,even: true //开启隔行背景
  93. });
  94. // 监听工具条(操作)
  95. table.on('tool(tableFilter)', function(obj){ //注:tool是工具条事件名,tableFilter是table原始容器的属性 lay-filter="对应的值"
  96. var data = obj.data; //获得当前行数据
  97. var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
  98. var tr = obj.tr; //获得当前行 tr 的DOM对象
  99. var id = data.id;
  100. if(layEvent == 'dele'){ //删除
  101. layer.confirm('真的要删除吗', function(index){
  102. $.request({
  103. action : '../../RechargeManageAction/deleteRechargeRule',
  104. data : {
  105. id : id
  106. },
  107. success : function(data) {
  108. //成功后刷新
  109. var btn=$(".layui-laypage-btn")[0];
  110. btn.click();
  111. layer.alert('操作成功!', {
  112. icon: 6,
  113. title: "提示"
  114. });
  115. },
  116. error : function(data) {
  117. layer.alert('操作失败!', {
  118. icon: 5,
  119. title: "提示"
  120. });
  121. }
  122. });
  123. });
  124. } else if(layEvent == 'edit'){ //编辑
  125. editDetail(data);
  126. }
  127. });
  128. var $ = layui.$, active = {
  129. reload: function(){
  130. reLoadFun();
  131. }
  132. //重置
  133. ,reset : function(){
  134. $('#formName')[0].reset();
  135. $("#conditions").html('<div class="fl f12-gray4-op mt4">所选条件:</div>');
  136. }
  137. };
  138. $('.layui-btn').on('click', function(){
  139. var type = $(this).data('type');
  140. active[type] ? active[type].call(this) : '';
  141. });
  142. });
  143. function reLoadFun() {
  144. var rechargeAmt = $('#rechargeAmt').val();
  145. var dates = $("#dates").val();
  146. //执行重载
  147. table.reload('userManage', {
  148. page: {
  149. curr: 1 //重新从第 1 页开始
  150. }
  151. ,where: {
  152. rechargeAmt : rechargeAmt,
  153. dates :dates
  154. }
  155. });
  156. }
  157. function showDetail(data) {
  158. var params = {};
  159. params.columnNumber = 2; //每行显示两个字段
  160. // 要显示的数据
  161. params.fields = [
  162. {field: 'id', title: 'ID'}
  163. ,{field: 'logonname', title: '登录名'}
  164. ,{field: 'name', title: '姓名'}
  165. ,{field: 'rolename', title: '角色'}
  166. ,{field: 'phone', title: '手机号'}
  167. ,{field: 'createdate', title: '创建日期'}
  168. ,{field: 'lastlogon', title: '最后登录日期'}
  169. ,{field: 'sttdesc', title: '状态'}
  170. ];
  171. // 寄存当前数据
  172. setNowRowData(data, params);
  173. layer.open({
  174. type: 2,
  175. title: '用户详情',
  176. shadeClose: true,
  177. shade: 0.8,
  178. //maxmin: true, //开启最大化最小化按钮
  179. area: ['800px', '500px'],
  180. content: '../../web/showDetail.html'
  181. });
  182. }
  183. //添加操作员
  184. $(document).on('click','#add',function(){
  185. openMainTabPage('101006-01', ' 增加充值规则', 'rechargeManage/addRechargeManage.html', '', '101006', reLoadFun);
  186. });
  187. //编辑
  188. function editDetail(data) {
  189. // 寄存当前数据
  190. layui.sessionData("ROW_DATA", {key:"NOW_ROW", value:data});
  191. openMainTabPage('101006-02', ' 编辑充值规则', 'rechargeManage/editRechargeManage.html', '', '101006', reLoadFun);
  192. }
  193. function changeSelectCon(index, t, type, dateValue){
  194. if (type == "date") {
  195. if (isEmpty(dateValue)) {
  196. $("#search" + index).remove();
  197. } else {
  198. $("#search" + index).remove();
  199. if (isEmpty($("#search" + index).attr("name"))) {
  200. $("#conditions").append(getSelectConHtml(index, t, type,dateValue));
  201. }
  202. }
  203. } else if (type == 'inp') {
  204. if (isEmpty($(t).val())) {
  205. $("#search" + index).remove();
  206. } else {
  207. $("#search" + index).remove();
  208. if (isEmpty($("#search" + index).attr("name"))) {
  209. $("#conditions").append(getSelectConHtml(index, t, type));
  210. }
  211. }
  212. } else {
  213. if (isEmpty($(t).val())) {
  214. $("#search" + index).remove();
  215. } else {
  216. $("#search" + index).remove();
  217. if (isEmpty($("#search" + index).attr("name"))) {
  218. $(t).attr("id",dateValue);
  219. $("#conditions").append(getSelectConHtml(index, t, type,dateValue));
  220. }
  221. }
  222. }
  223. }
  224. var array = new Array('充值金额','创建时间');
  225. function getSelectConHtml(index, t, type,dateValue){
  226. var name;
  227. var value;
  228. if(type == "inp"){
  229. value = t.value.substr(0,5)+"..";
  230. }
  231. if (type == "date") {
  232. value = dateValue;
  233. }
  234. if (type == "date") {
  235. name = $("#"+t).attr("id");
  236. } else {
  237. name = $(t).attr("id");
  238. }
  239. var html = '<div class="fl xuanzhong-active" id = "search' + index + '" name = "' + name + '" onclick = "removeSearch(this)">' +
  240. '<div class="fl">' + array[index] + '</div>' +
  241. ':<i class="iconfont">'+value+'</i>' +
  242. '<svg class="icon" aria-hidden="true">' +
  243. '<use xlink:href="#iconicon_close1"></use>' +
  244. '</svg>' +
  245. '</div>';
  246. return html;
  247. }
  248. function removeSearch(t) {
  249. $("#"+$(t).attr("name")).val('');
  250. $(t).remove();
  251. }
  252. </script>
  253. </body>
  254. </html>