pro_order_list_index.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8. <title>审批首页</title>
  9. <link rel="stylesheet" type="text/css" href="css/mui.min.css" />
  10. <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
  11. <link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
  12. <link rel="stylesheet" type="text/css" href="css/style.css" />
  13. <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
  14. <script>
  15. //屏蔽分享
  16. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  17. WeixinJSBridge.call('hideOptionMenu');
  18. });
  19. </script>
  20. </head>
  21. <body>
  22. <div id="pro-menu" class="mui-segmented-control">
  23. <a class="mui-control-item mui-active" name="1"><span class="iconfont icon-faqi"></span> 我发起的</a>
  24. <a class="mui-control-item" name="2"><span class="iconfont icon-shenpi"></span>我审批的</a>
  25. <a class="mui-control-item" name="3"><span class="iconfont icon-queren"></span>仓库确认</a>
  26. </div>
  27. <ul class="mui-table-view mui-grid-view my-view-no no-after" style="padding:5px 10px 10px 0;">
  28. <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-text-center middle-center">
  29. <span class="iconfont icon-riqi"></span>
  30. </li>
  31. <li class="mui-table-view-cell mui-media mui-col-xs-10 mui-text-left">
  32. <input id="search-input" class="search-text" type="text" placeholder="姓名/订单名称/备注"/>
  33. <span class="iconfont icon-sousuo my-sousuo"></span>
  34. </li>
  35. </ul>
  36. <div class="add-btn">
  37. 发起申请
  38. </div>
  39. <!--下拉刷新容器-->
  40. <div id="pullrefresh_list" class="mui-content mui-scroll-wrapper">
  41. <div class="mui-scroll">
  42. <!--退款记录列表-->
  43. <ul class="my-table-view-order">
  44. <!--<li>
  45. <ul class="mui-table-view mui-grid-view my-view-no">
  46. <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-text-left top-center">
  47. <ul class="steps">
  48. <li class="active">张三</li>
  49. </ul>
  50. </li>
  51. <li class="mui-table-view-cell mui-media mui-col-xs-9 mui-text-left">
  52. <a>
  53. <div class="pro-li-tit">张三的工单 <span class="mui-h5 mui-pull-right">2018-08-10 12:00</span></div>
  54. <h6 >订单名称:深圳爱贝源申请采购</h6>
  55. <ul class="pro-cp-list">
  56. <li>美国watero wa-1 黑色 100台</li>
  57. <li>美国watero wa-1 黑色 100台</li>
  58. </ul>
  59. </a>
  60. </li>
  61. <li class="mui-table-view-cell mui-media mui-col-xs-5 mui-text-left">
  62. <h6 class="cl-green">待入库</h6>
  63. </li>
  64. <li class="mui-table-view-cell mui-media mui-col-xs-7 mui-text-right">
  65. <button type="button" class="my-confirm-btn">确认入库</button>
  66. </li>
  67. </ul>
  68. </li>-->
  69. </ul>
  70. </div>
  71. </div>
  72. <div class="add-dalog">
  73. <div class="dalog-center">
  74. <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed my-view-no">
  75. <li class="mui-table-view-cell">
  76. <div class="mui-table">
  77. <div class="mui-table-cell mui-col-xs-12"><div class="title">发起审批</div></div>
  78. </div>
  79. <div class="mui-table">
  80. <div class="mui-table-cell mui-col-xs-6">
  81. <a class="dalog-btn" name="submit_apply_order.html"><span class="iconfont icon-shengchan"></span></a><br />生产审批
  82. </div>
  83. <div class="mui-table-cell mui-col-xs-6">
  84. <a class="dalog-btn" name="agreed_order.html"><span class="iconfont icon-tihuo"></span></a><br />提货申请
  85. </div>
  86. </div>
  87. </li>
  88. </ul>
  89. </div>
  90. </div>
  91. <script src="js/mui.min.js"></script>
  92. <script src="js/mui.picker.min.js"></script>
  93. <script src="js/jquery-2.1.1.min.js"></script>
  94. <script src="js/main.js"></script>
  95. <script>
  96. var pageNumber = 0,pagesize = 100,search_str='',type='1';
  97. if(getParam("type")!=null){
  98. type=getParam("type");
  99. $('#pro-menu>a[name='+type+']').addClass("mui-active").siblings().removeClass("mui-active");
  100. }
  101. mui.init({
  102. pullRefresh: {
  103. container: '#pullrefresh_list',
  104. down: {
  105. //callback: pulldownRefresh
  106. },
  107. up: {
  108. contentrefresh: '正在加载...',
  109. callback: pullupRefresh
  110. }
  111. }
  112. });
  113. /**
  114. * 上拉加载具体业务实现
  115. */
  116. function pullupRefresh() {
  117. ++pageNumber;
  118. var parameter = {};
  119. parameter["pageNo"] = pageNumber;
  120. parameter["pageSize"] = pagesize;
  121. parameter["selectType"] = type;
  122. var time=$(".icon-riqi").attr("time");
  123. if(time!="undefined"){
  124. parameter["stareDate"] = time;
  125. }
  126. if(search_str!="" && search_str!=" "){
  127. parameter["selectName"] = search_str;
  128. }
  129. $.ajax(base_path + '/approval/approvalInfoList?dates=' + new Date().getTime(), {
  130. data: parameter,
  131. dataType: 'json',
  132. xhrFields: {
  133. withCredentials: true
  134. },
  135. crossDomain: true,
  136. type: 'post',
  137. timeout: 15000,
  138. success: function(dt) {
  139. if(dt.isRedirect) {
  140. location.href = dt.redirectURL;
  141. } else {
  142. console.log(dt)
  143. if(dt.returnCode == "200") {
  144. var table = document.body.querySelector('.my-table-view-order');
  145. var data = dt.returnMsg.approvalList;
  146. mui('#pullrefresh_list').pullRefresh().endPullupToRefresh(data.length < pagesize); //endPullupToRefresh(ture)表示没有更多数据了,停止上拉加载
  147. var status='';
  148. mui.each(data, function(index) {
  149. var li = document.createElement('li');
  150. li.setAttribute("name",this.approvalId);
  151. li.setAttribute("approvalType",this.approvalType);
  152. switch (this.approvalStatus){
  153. case 1:
  154. status='<span class="mui-pull-right cl-red">待审批</span>';
  155. break;
  156. case 2:
  157. status='<span class="mui-pull-right cl-green">已审批</span>';
  158. break;
  159. case 3:
  160. status='<span class="mui-pull-right cl-red">已驳回</span>';
  161. break;
  162. case 4:
  163. status='<span class="mui-pull-right cl-red">已完成部分审批</span>';
  164. break;
  165. case 5:
  166. status='<span class="mui-pull-right cl-red">待入库</span>';
  167. break;
  168. case 6:
  169. status='<span class="mui-pull-right cl-red">部分入库</span>';
  170. break;
  171. case 7:
  172. status='<span class="mui-pull-right cl-green">全部入库</span>';
  173. break;
  174. case 8:
  175. status='<span class="mui-pull-right cl-green">已发货</span>';
  176. break;
  177. case 9:
  178. status='<span class="mui-pull-right cl-green">已撤销</span>';
  179. break;
  180. default:
  181. break;
  182. }
  183. var str='<ul class="pro-cp-list">';
  184. var orderName='',remark='';
  185. if(this.approvalType==1){
  186. mui(this.approvalProduction.listProductionItem).each(function (index, el) {
  187. str+='<li>'+this.itemBrandName+this.itemProductModel+this.itemColorName+this.itemProductNum+this.itemProductUnit+'</li>';
  188. });
  189. orderName=this.approvalProduction.orderName;
  190. if(typeof(this.approvalRemark)!="undefined"){
  191. remark='<ul class="pro-bz-list order"><li>'+this.approvalRemark+'</li></ul>';
  192. }
  193. }else if(this.approvalType==2){
  194. mui(this.approvalApplyPick.listApplyPickItem).each(function (index, el) {
  195. str+='<li>'+this.itemProductName+this.itemProductModel+this.itemColorName+this.itemProductNum+this.itemProductUnit+'</li>';
  196. });
  197. orderName=this.approvalApplyPick.applyPickReason;
  198. if(typeof(this.productionRemark)!="undefined"){
  199. remark='<ul class="pro-bz-list"><li>'+this.productionRemark+'</li></ul>';
  200. }
  201. }
  202. str+='</ul>';
  203. var name=this.approvalApplicant;
  204. if(name.length>2){
  205. name=name.substring(name.length-2);
  206. }
  207. li.innerHTML = '<ul class="mui-table-view mui-grid-view my-view-no"><li class="mui-table-view-cell mui-media mui-col-xs-3 mui-text-left top-center"><ul class="steps"><li class="active">'+name+'</li></ul></li><li class="mui-table-view-cell mui-media mui-col-xs-9 mui-text-left"><a><div class="pro-li-tit">'+this.approvalName+status+'</div><h6>'+formatDateFull(this.approvalCreateTime)+'</h6><div class="order-content"><h6 >订单名称:'+orderName+'</h6>'+str+remark+'</a></li></div></ul>';
  208. table.appendChild(li);
  209. });
  210. } else {
  211. mui.alert("获取数据失败!");
  212. }
  213. }
  214. },
  215. error: function(xhr, type, errorThrown) {
  216. console.log(xhr);
  217. mui.alert("获取数据失败!网络错误");
  218. }
  219. });
  220. // setTimeout(function() {
  221. // mui('#pullrefresh_list').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
  222. // var table = document.body.querySelector('.my-table-view-order');
  223. // var status='';
  224. // for (var i = 10, len = i + 5; i < len; i++) {
  225. // i%2==0?status='<span class="cl-green">已审批</span><span class="cl-red">待审批</span>':status='<span class="cl-red">待审批</span>';
  226. // var li = document.createElement('li');
  227. // li.innerHTML = '<ul class="mui-table-view mui-grid-view my-view-no"><li class="mui-table-view-cell mui-media mui-col-xs-3 mui-text-left top-center"><ul class="steps"><li class="active">张三</li></ul></li><li class="mui-table-view-cell mui-media mui-col-xs-9 mui-text-left"><a><div class="pro-li-tit">张三的工单 <span class="mui-pull-right">'+status+'</span></div><h6>2018-08-10 12:00</h6><div class="order-content"><h6 >订单名称:深圳爱贝源申请采购</h6><ul class="pro-cp-list"><li>美国watero wa-1 黑色 100台</li><li>美国watero wa-1 黑色 100台</li></ul><ul class="pro-bz-list"><li>尽早请用顺丰快递发货</li></ul><h6 class="express">顺丰快递:123455667765</h6></a></li></div></ul>';
  228. // table.appendChild(li);
  229. // }
  230. // }, 1500);
  231. }
  232. function search_pullrefresh() {
  233. var reg_Ch_En_Num=/^[A-Za-z0-9~!@#$%^&*()_+={}|<>?:;'"!@¥…(){}【】《》/`、;‘’:\-—“”,。,.?·_\-\u4e00-\u9fa5]{1,20}$/;//简体中文英文数字,常用符号(1-20位)
  234. var val=$("#search-input").val().trim();
  235. pageNumber = 0;
  236. $('.my-table-view-order').empty();
  237. if(reg_Ch_En_Num.test(val) || val==""){
  238. search_str = val;
  239. mui('#pullrefresh_list').pullRefresh().pullupLoading();
  240. mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,500);//500毫秒滚动到顶
  241. }else{
  242. mui.alert("您输入的内容有误,请重新输入");
  243. }
  244. }
  245. mui.ready(function() {
  246. var a = [{"contractUrl": "../1.jpg","contractType": "1"},{"contractUrl": "../2.jpg","contractType": "1"}];
  247. var b = [{"contractUrl": "../3.jpg","contractType": "2"},{"contractUrl": "../4.jpg","contractType": "2"}];
  248. var c=a.concat(b);
  249. console.log(c)
  250. $(".add-btn").addClass("active");
  251. mui('#pullrefresh_list').pullRefresh().pullupLoading();
  252. console.log("页面加载完毕")
  253. });
  254. //发起申请弹窗
  255. $(document).on('tap', '.add-btn', function() {
  256. $(".add-dalog").addClass("active");
  257. });
  258. //关闭弹窗
  259. $(document).on('tap', '.add-dalog.active', function() {
  260. $(".add-dalog").removeClass("active");
  261. });
  262. $(document).on('tap', '.dalog-btn', function() {
  263. location.href=$(this).attr("name");
  264. });
  265. mui.each(document.querySelectorAll('#pro-menu .mui-control-item'), function(index, el) {
  266. el.addEventListener('tap', function() {
  267. console.log(index)
  268. switch(index) {
  269. case 0:
  270. console.log(index)
  271. $(".add-btn").addClass("active");
  272. break;
  273. default:
  274. $(".add-btn").removeClass("active");
  275. break;
  276. }
  277. type=this.getAttribute("name");
  278. history.pushState(null,"","?type="+type);
  279. search_pullrefresh();
  280. }, false);
  281. });
  282. $(document).on('tap', '.my-sousuo', function() {
  283. search_pullrefresh();
  284. });
  285. var dtpicker = new mui.DtPicker({
  286. type: "date",//设置日历初始视图模式
  287. beginDate: new Date(2015, 04, 25),//设置开始日期
  288. endDate: new Date()//设置结束日期
  289. });
  290. $(document).on('tap', '.icon-riqi', function() {
  291. var th=$(this);
  292. dtpicker.show(function(e) {
  293. th.attr("time",e.value);
  294. pageNumber = 0;
  295. mui('#pullrefresh_list').pullRefresh().pullupLoading();
  296. mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,500);//500毫秒滚动到顶
  297. });
  298. });
  299. $(document).on('tap', '.mui-dtpicker .mui-btn[data-id=btn-cancel]', function() {
  300. $(".icon-riqi").removeAttr("time");
  301. });
  302. //实时监听文本框
  303. document.getElementById("search-input").addEventListener("input", function() {
  304. if(this.value.length>0){
  305. $(".my-sousuo").addClass("active");
  306. }else{
  307. $(".my-sousuo").removeClass("active");
  308. }
  309. });
  310. $(document).on('tap', '.my-table-view-order>li', function() {
  311. location.href='pro_order_details.html?id='+$(this).attr("name")+'&type='+type+'&approvalType='+$(this).attr("approvalType");
  312. });
  313. </script>
  314. </body>
  315. </html>