invCardManage.html 10.0 KB

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