invCardManage.html 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  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. <a href="#" id="toggle" class="top">收起</a>
  18. </div>
  19. </div>
  20. <form class="layui-form" action="javascript:void(0)" id = "formName">
  21. <div class="order-select back-border" id="content">
  22. <div class="layui-inline">
  23. <label class="f12-gray4">机台号 :</label>
  24. <input type="tel" name="machineNo" id ="machineNo" onchange = "changeSelectCon(0,this,'inp')" placeholder="请输入机台号" class="search-select">
  25. </div>
  26. <div class="layui-inline">
  27. <label class="f12-gray4">取货码:</label>
  28. <input type="tel" name="pickUpCode" id ="pickUpCode" onchange = "changeSelectCon(1,this,'inp')" placeholder="请输入取货码" class="search-select">
  29. </div>
  30. <div class="d-dashed" style="margin: 10px 0;"></div>
  31. <div class="layui-inline">
  32. <label class="f12-gray4">状态:</label>
  33. <div class="" style="display:inline-block" id = 'pickUpState'></div>
  34. </div>
  35. <div class="layui-inline">
  36. <label class="f12-gray4">创建日期:</label>
  37. <input class="search-select" type="text" id="creatdDtes" placeholder="日期(区间)" readonly />
  38. </div>
  39. <div class="layui-inline">
  40. <label class="f12-gray4">取货日期:</label>
  41. <input class="search-select" type="text" id="pickUpDates" placeholder="日期(区间)" readonly />
  42. </div>
  43. </div>
  44. </form>
  45. </div>
  46. <div class="shadow-content" style="margin:1.5rem;">
  47. <table id="cardManage" lay-filter="tableFilter"></table>
  48. </div>
  49. <!--操作功能-->
  50. <script type="text/html" id="barDemo">
  51. {{# if(d.stt == '00'){ }}
  52. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="doPickup">取货</a>
  53. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="doTovoid">作废</a>
  54. {{# }; }}
  55. </script>
  56. <script>
  57. $("#toggle").click(function() {
  58. $(this).html($("#content").is(":hidden") ? "收起" + "<i class='iconfont up iconSelect_drop-down'/></i>" : "展开" +
  59. "<i class='iconfont up iconSelect_drop-down'/></i>");
  60. $("#content").slideToggle();
  61. });
  62. layui.use(['table','laydate','form'], function(){
  63. var laydate = layui.laydate;
  64. //日期范围
  65. laydate.render({
  66. elem: '#creatdDtes'
  67. ,range: true
  68. ,format:'yyyyMMdd'
  69. ,done: function(value, date, endDate){
  70. changeSelectCon(1,"creatdDtes",'date',value)
  71. }
  72. });
  73. laydate.render({
  74. elem: '#pickUpDates'
  75. ,range: true
  76. ,format:'yyyyMMdd'
  77. ,done: function(value, date, endDate){
  78. changeSelectCon(2,"pickUpDates",'date',value)
  79. }
  80. });
  81. form = layui.form;
  82. initSelect('pickUpState', "PICKUP_STT", "pickUpState", ' ', true);
  83. form.on('select(pickUpState)', function(data){
  84. changeSelectCon(3, data.elem, "sel","pickUpState");
  85. });
  86. form.render();
  87. })
  88. var table;
  89. layui.use('table', function() {
  90. table = layui.table;
  91. table.render({
  92. id : 'cardManage'
  93. ,elem: '#cardManage'
  94. ,limit:10
  95. ,url: 'invCardManageAction/selectOrderDetail' //数据接口
  96. ,method: 'post'
  97. ,where:{MINView:"JSON", token: 'sasasas'}
  98. ,page: true //开启分页
  99. ,cols: [[ //表头
  100. {type:'numbers',title: '序号',width:'5%'}
  101. ,{field: 'orderNo', title: '订单号', width:'10%'}
  102. ,{field: 'productName', title: '商品信息', width:'12%'}
  103. ,{field: 'machineNo', title: '机台号', width:'12%'}
  104. ,{field: 'equrelId', title: '货道号', width:'15%'}
  105. ,{field: 'userName', title: '消费者信息',width:'15%'}
  106. ,{field: 'orderAmt', title: '支付金额',width:'15%'}
  107. ,{field: 'createTime', title: '创建时间',width:'8%'}
  108. ,{field: 'pickupNo', title: '取货码',width:'8%'}
  109. ,{field: 'pickUpTime', title: '取货时间', width: '25%',}
  110. ,{field: 'sttdesc', title: '状态',width:'8%'}
  111. ,{field: 'operate', title: '操作',width:'8%', toolbar: '#barDemo'}
  112. ]]
  113. ,done: function(res, curr, count){
  114. //如果是异步请求数据方式,res即为你接口返回的信息。
  115. console.log(res);
  116. //得到当前页码
  117. console.log(curr);
  118. //得到数据总量
  119. console.log(count);
  120. }
  121. ,even: true //开启隔行背景
  122. });
  123. // 监听工具条(操作)
  124. table.on('tool(tableFilter)', function(obj){ //注:tool是工具条事件名,tableFilter是table原始容器的属性 lay-filter="对应的值"
  125. var data = obj.data; //获得当前行数据
  126. var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
  127. var tr = obj.tr; //获得当前行 tr 的DOM对象
  128. var id = data.id;
  129. if(layEvent == 'doTovoid'){ //作废
  130. layer.confirm('确定要作废订单吗?', function(index){
  131. $.request({
  132. action : '../../invCardManageAction/updateOrderStt',
  133. data : {
  134. orderNo : orderNo, //订单号
  135. temp : "0" //操作0:作废,1:取货
  136. },
  137. success : function(data) {
  138. layer.alert('操作成功!', {
  139. icon: 6,
  140. title: "提示"
  141. });
  142. },
  143. error : function(data) {
  144. layer.alert('操作失败!', {
  145. icon: 5,
  146. title: "提示"
  147. });
  148. }
  149. });
  150. });
  151. } else if(layEvent == 'doPickup'){ //取货
  152. layer.confirm('确定要取货吗?', function(index){
  153. $.request({
  154. action : '../../invCardManageAction/updateOrderStt',
  155. data : {
  156. orderNo : orderNo, //订单号
  157. temp : "1" //操作0:作废,1:取货
  158. },
  159. success : function(data) {
  160. layer.alert('操作成功!', {
  161. icon: 6,
  162. title: "提示"
  163. });
  164. },
  165. error : function(data) {
  166. layer.alert('操作失败!', {
  167. icon: 5,
  168. title: "提示"
  169. });
  170. }
  171. });
  172. });
  173. }
  174. });
  175. var $ = layui.$, active = {
  176. reload: function(){
  177. reLoadFun();
  178. }
  179. ,reset: function(){
  180. $('#formName')[0].reset()
  181. }
  182. };
  183. });
  184. function reLoadFun() {
  185. var machineNo = $('#machineNo').val();
  186. var pickUpCode = $('#pickUpCode').val();
  187. var pickUpState = $("select[name='pickUpState']").val();
  188. var pickUpDates = $("#pickUpDates").val();
  189. var creatdDtes = $("#creatdDtes").val();
  190. //执行重载
  191. table.reload('userManage', {
  192. page: {
  193. curr: 1 //重新从第 1 页开始
  194. }
  195. ,where: {
  196. machineNo : machineNo,
  197. pickUpCode : pickUpCode,
  198. pickUpState : pickUpState,
  199. creatdDtes : creatdDtes,
  200. pickUpDates : pickUpDates
  201. }
  202. });
  203. }
  204. //查询
  205. function changeSelectCon(index, t, type, dateValue){
  206. if (type == "date") {
  207. if (isEmpty(dateValue)) {
  208. $("#search" + index).remove();
  209. } else {
  210. $("#search" + index).remove();
  211. if (isEmpty($("#search" + index).attr("name"))) {
  212. $("#conditions").append(getSelectConHtml(index, t, type,dateValue));
  213. }
  214. }
  215. } else if (type == 'inp') {
  216. if (isEmpty($(t).val())) {
  217. $("#search" + index).remove();
  218. } else {
  219. $("#search" + index).remove();
  220. if (isEmpty($("#search" + index).attr("name"))) {
  221. $("#conditions").append(getSelectConHtml(index, t, type));
  222. }
  223. }
  224. } else {
  225. if (isEmpty($(t).val())) {
  226. $("#search" + index).remove();
  227. } else {
  228. $("#search" + index).remove();
  229. if (isEmpty($("#search" + index).attr("name"))) {
  230. $(t).attr("id",dateValue);
  231. $("#conditions").append(getSelectConHtml(index, t, type,dateValue));
  232. }
  233. }
  234. }
  235. }
  236. var array = new Array('机台号','取货码','状态','创建日期','取货日期');
  237. function getSelectConHtml(index, t, type,dateValue){
  238. var name;
  239. var value;
  240. if(type == "inp"){
  241. value = t.value.substr(0,5)+"..";
  242. }
  243. if (type == "date") {
  244. value = dateValue;
  245. }
  246. if(type == "sel" && dateValue =="state"){
  247. value = $("#state").find("option:selected").text();
  248. }
  249. if (type == "date") {
  250. name = $("#"+t).attr("id");
  251. } else {
  252. name = $(t).attr("id");
  253. }
  254. var html = '<div class="fl xuanzhong-active" id = "search' + index + '" name = "' + name + '" onclick = "removeSearch(this)">' +
  255. '<div class="fl">' + array[index] + '</div>' +
  256. ':<i class="iconfont">'+value+'</i>' +
  257. '<svg class="icon" aria-hidden="true">' +
  258. '<use xlink:href="#iconicon_close1"></use>' +
  259. '</svg>' +
  260. '</div>';
  261. return html;
  262. }
  263. function removeSearch(t) {
  264. if ($(t).attr("name") == 'state') {
  265. initSelect('pickUpState', "PICKUP_STT", "pickUpState", ' ', true);
  266. form.render();
  267. $(t).remove();
  268. } else {
  269. $("#"+$(t).attr("name")).val('');
  270. $(t).remove();
  271. }
  272. }
  273. </script>
  274. </body>
  275. </html>