orderList.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-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 href="../../../css/mui.min.css" rel="stylesheet" />
  10. <link href="../../../css/OA-style.css" rel="stylesheet" />
  11. <link href="../../../css/mui.picker.css" rel="stylesheet" />
  12. <link href="../../../css/mui.picker.all.css" rel="stylesheet" />
  13. <link rel="stylesheet" type="text/css" href="../../../css/mui.picker.min.css" />
  14. </head>
  15. <body>
  16. <header class="mui-bar mui-bar-nav" id="login">
  17. <a href="" class="mui-action-back back mui-pull-left"><img src="../../../images/back.png"></a>
  18. <h1 class="mui-title" id="title">订单管理</h1>
  19. <a id="menu" class="mui-action-menu mui-icon mui-pull-right" href="#topPopover"><img src="../../../images/dd_search.png" style="width: 25px;margin-top: -2px;"></a>
  20. </header>
  21. <div class="mui-content" >
  22. <!--<div id="search" style="display: none;">
  23. <div class="mui-input-row" style="margin:0px 0 0px 10px;position: relative; top: 15px;">
  24. <input type="text" id="searchname" style="width: 80%;" placeholder="账户名称"/>&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" style="width: 15%;" id="namesearch" value="搜索"/><br />
  25. </div>
  26. <div class="mui-content-padded">
  27. <h5 class="mui-content-padded"></h5>
  28. <button id='demo6' data-options='{"type":"date"}' class="btn mui-btn mui-btn-block">选择日期 ...</button>
  29. <div id='result' class="ui-alert"></div>
  30. </div>
  31. </div>-->
  32. <div id="topPopover" class="mui-popover">
  33. <div class="mui-popover-arrow"></div>
  34. <div class="mui-scroll-wrapper">
  35. <div class="mui-scroll">
  36. <ul class="mui-table-view">
  37. <li class="mui-table-view-cell">
  38. <a href="#"><div class="mui-input-row mui-search">
  39. <input type="search" id="searchname" class="mui-input-clear" placeholder="账户名称">
  40. </div></a>
  41. </li>
  42. <li class="mui-table-view-cell">
  43. <div class="mui-content-padded">
  44. <h5 class="mui-content-padded"></h5>
  45. <button id='demo6' class="btn mui-btn mui-btn-block" onclick="searchtime()">
  46. <span id="riqi">选择日期 ...</span>
  47. </button>
  48. <div id='result' class="ui-alert"></div>
  49. </div>
  50. </li>
  51. <li class="mui-button-row">
  52. <button type="button" class="mui-btn mui-btn-primary" id="save">查找</button>&nbsp;&nbsp;
  53. <button type="button" class="mui-btn mui-btn-primary" id="saveall">查找全部</button>
  54. </li>
  55. </ul>
  56. </div>
  57. </div>
  58. </div>
  59. <div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="">
  60. <div style="background-color: #FFFFFF;margin-top: 12px;padding: 10px 20px;">
  61. <div class="mui-row" >
  62. <div class="mui-col-sm-4">
  63. <span style="font-size: 12px;">早餐共 :</span>
  64. <h3 style="color: #2FA8EC;" id="zaocantotal"> <span style="font-size: 15px;">份</span></h3>
  65. </div>
  66. <div class="mui-col-sm-4">
  67. <span style="font-size: 12px;">午餐共 :</span>
  68. <h3 style="color: #2FA8EC;" id="wucantotal"> <span style="font-size: 15px;">份</span></h3>
  69. </div>
  70. <div class="mui-col-sm-4">
  71. <span style="font-size: 12px;">晚餐共 :</span>
  72. <h3 style="color: #2FA8EC;" id="wancantotal"> <span style="font-size: 15px;">份</span></h3>
  73. </div>
  74. </div>
  75. </div>
  76. <div class="mydd_div" v-for="item in items" style="position: relative ;">
  77. <div class="mydd_div8">
  78. <div class="mydd_div1">{{item.name}} > </div>
  79. <div class="mydd_div2">已花费</div>
  80. </div>
  81. <div class="mydd_div3">
  82. <div class="mydd_div4"><img src="../../../images/dd_img2.png" width="40px"></div>
  83. <div class="mydd_div5">订单内容:{{item.content}}
  84. </div>
  85. <div class="mydd_div6">¥{{item.cost}}
  86. </div>
  87. </div>
  88. <div class="mydd_div7" style="position: absolute;bottom: 10px;right: 16px; ">{{item.date}}</div>
  89. </div>
  90. <div></div>
  91. <!--右上角弹出菜单-->
  92. <!--<div id="topPopover" class="mui-popover">
  93. <div class="mui-popover-arrow"></div>
  94. <div class="mui-scroll-wrapper">
  95. <div class="mui-scroll">
  96. <ul class="mui-table-view">
  97. <li class="mui-table-view-cell">
  98. <a href="#"><div class="mui-input-row mui-search">
  99. <input type="search" id="searchname" class="mui-input-clear" placeholder="账户名称">
  100. </div></a>
  101. </li>
  102. <li class="mui-table-view-cell">
  103. <div class="mui-content-padded">
  104. <h5 class="mui-content-padded"></h5>
  105. <button id='demo6' data-options='{"type":"date"}' class="btn mui-btn mui-btn-block">选择日期 ...</button>
  106. <div id='result' class="ui-alert"></div>
  107. </div>
  108. </li>
  109. </ul>
  110. </div>
  111. </div>
  112. </div>-->
  113. </div>
  114. </div>
  115. <script type="text/javascript" src="../../../js/jquery-1.11.2.min.js"></script>
  116. <script src="../../../js/mui.min.js"></script>
  117. <script src="../../../js/config.js"></script>
  118. <script src="../../../js/app.js"></script>
  119. <script src="../../../js/dj/article/list.js"></script>
  120. <script src="../../../js/vue.min.js"></script>
  121. <script>
  122. //选取时间
  123. function searchtime() {
  124. var dDate = new Date();
  125. dDate.setFullYear(2014, 7, 16);
  126. var minDate = new Date();
  127. minDate.setFullYear(2010, 0, 1);
  128. var maxDate = new Date();
  129. maxDate.setFullYear(2016, 11, 31);
  130. plus.nativeUI.pickDate(function(e) {
  131. var d = e.date;
  132. var month=d.getMonth() + 1;
  133. if(month < 10){
  134. month= "0"+ month;
  135. }
  136. var day=d.getDate();
  137. if(day < 10){
  138. day= "0"+ day;
  139. }
  140. var a = d.getFullYear() + "-" + month + "-" + day;
  141. document.getElementById("riqi").innerHTML=a;
  142. }, {
  143. title: "请选择日期",
  144. date: dDate,
  145. minDate: minDate,
  146. maxDate: maxDate
  147. });
  148. }
  149. var pageDetail = null;
  150. mui.init({
  151. pullRefresh: {
  152. container: '#pullrefresh',
  153. down: {
  154. style: 'circle', //必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式
  155. color: '#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色
  156. height: '50px', //可选,默认50px.下拉刷新控件的高度,
  157. range: '100px', //可选 默认100px,控件可下拉拖拽的范围
  158. offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
  159. // auto: true, //可选,默认false.首次加载自动上拉刷新一次
  160. callback: reloadNews //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
  161. },
  162. up: {
  163. contentrefresh: '正在加载...',
  164. auto: true, //可选,默认false.自动上拉加载一次
  165. callback: pullupRefresh
  166. }
  167. },
  168. statusBarBackground: '#FFFFFF', //设置状态栏颜色,仅iOS可用
  169. // preloadLimit:5,
  170. });
  171. var vmA = new Vue({
  172. el: '#pullrefresh',
  173. data: {
  174. items: [] //列表信息流数据
  175. }
  176. });
  177. /**
  178. * 下拉刷新具体业务实现
  179. */
  180. function reloadNews() {
  181. pageNo = 1;
  182. vmA.items = [];
  183. addData();
  184. }
  185. var pageNo = 1;
  186. //var type = 0;
  187. /**
  188. * 上拉加载具体业务实现
  189. */
  190. function pullupRefresh() {
  191. //接受上个页面传递的appliance_info_type和appliance_info_id的值
  192. addData();
  193. }
  194. function addData() {
  195. var url = API.API_URL();
  196. var serviceId = "oa_2017V001PHONE_orderList";
  197. var state = app.getState(); //获取登陆信息
  198. var searchname=null;
  199. var time=null;
  200. /*var staffId = state.user.useId;
  201. var unitId = state.user.unitId;
  202. var notice_title = "";*/
  203. var obj = {
  204. /*unitId: unitId,
  205. userId: staffId,
  206. notice_title: notice_title,*/
  207. time: time,
  208. searchname:searchname,
  209. type: 2,
  210. pSize: APP.PageSize,
  211. p: pageNo
  212. };
  213. app.ajax(serviceId,obj, function(data) {
  214. //服务器返回响应
  215. console.log(JSON.stringify(data))
  216. var result = data.returnParams;
  217. var totalRow = data.total;
  218. var totalPage = Math.ceil(totalRow / APP.PageSize);
  219. if(totalPage == 0){
  220. totalPage =1;
  221. }
  222. var zaocantotal = data.zaocantotal;
  223. var wucantotal = data.wucantotal;
  224. var wancantotal = data.wancantotal;
  225. document.getElementById("zaocantotal").innerHTML=zaocantotal+"份";
  226. document.getElementById("wucantotal").innerHTML=wucantotal+"份";
  227. document.getElementById("wancantotal").innerHTML=wancantotal+"份";
  228. var list = data.list;
  229. if(list.length > 0) {
  230. vmA.items = vmA.items.concat(convert(list));
  231. }
  232. mui('#pullrefresh').pullRefresh().endPullupToRefresh(totalPage == pageNo); //参数为true代表没有更多数据了。
  233. if(pageNo == 1 && totalPage>1) {
  234. mui('#pullrefresh').pullRefresh().endPulldown();
  235. mui('#pullrefresh').pullRefresh().refresh(true);
  236. }
  237. if(totalPage == 1 ){
  238. mui('#pullrefresh').pullRefresh().endPulldown();
  239. }
  240. pageNo = pageNo + 1;
  241. });
  242. }
  243. /**
  244. * 1、将服务端返回数据,转换成前端需要的格式
  245. * 2、若服务端返回格式和前端所需格式相同,则不需要改功能
  246. *
  247. * @param {Array} items
  248. */
  249. function convert(items) {
  250. var newItems = [];
  251. items.forEach(function(item) {
  252. if(item.type==1){
  253. type="早餐";
  254. }
  255. if(item.type==2){
  256. type="午餐";
  257. }
  258. if(item.type==3){
  259. type="晚餐";
  260. }
  261. newItems.push({
  262. id:item.id,
  263. universalid: item.universalid,
  264. name: item.name,
  265. content: item.name2,
  266. cost: item.cost,
  267. type: type,
  268. date: item.date,
  269. });
  270. });
  271. return newItems;
  272. }
  273. mui.plusReady(function() {
  274. var self = plus.webview.currentWebview();
  275. type = self.type;
  276. var title1 = mui('#title');
  277. title1[0].innerHTML = self.name;
  278. //接收上个界面传递的参数
  279. window.addEventListener('listEvent', function(event) {
  280. location.reload();
  281. });
  282. // pageDetail = mui.preload({
  283. // url: 'detailList.html',
  284. // id: 'detailList.html',
  285. // })
  286. });
  287. window.addEventListener('refresh', function(e){//执行刷新
  288. location.reload();
  289. });
  290. //点击右上角搜索显示隐藏层
  291. document.getElementById("menu").addEventListener('tap',function(){
  292. var state=document.getElementById('topPopover').style.display;
  293. if(state == 'none'){
  294. document.getElementById('topPopover').style.display="";
  295. }else{
  296. document.getElementById('topPopover').style.display='none';
  297. }
  298. })
  299. //查询按钮
  300. document.getElementById("save").addEventListener('click',function(){
  301. var url = API.API_URL();
  302. var searchname=$("#searchname").val();
  303. var serviceId = "oa_2017V001PHONE_orderList";
  304. var time=document.getElementById("riqi").innerHTML;
  305. if(searchname == null || searchname == ""){
  306. searchname = null;
  307. }
  308. if(time == null || time == "" || time == "选择日期 ..."){
  309. time = null;
  310. }
  311. var obj = {
  312. time: time,
  313. searchname: searchname,
  314. pSize: APP.PageSize,
  315. p: 1
  316. };
  317. app.ajax(serviceId,obj, function(data) {
  318. //服务器返回响应
  319. console.log(JSON.stringify(data))
  320. mui.toast("查找成功");
  321. var result = data.returnParams;
  322. var totalRow = data.total;
  323. var totalPage = Math.ceil(totalRow / APP.PageSize);
  324. var zaocantotal = data.zaocantotal;
  325. var wucantotal = data.wucantotal;
  326. var wancantotal = data.wancantotal;
  327. document.getElementById("zaocantotal").innerHTML=zaocantotal+"份";
  328. document.getElementById("wucantotal").innerHTML=wucantotal+"份";
  329. document.getElementById("wancantotal").innerHTML=wancantotal+"份";
  330. var list = data.list;
  331. console.log(list.length);
  332. vmA.items = [];
  333. if(list.length > 0) {
  334. vmA.items = vmA.items.concat(convert(list));
  335. }
  336. mui('#pullrefresh').pullRefresh().endPullupToRefresh(totalPage == pageNo); //参数为true代表没有更多数据了。
  337. pageNo = endPull(totalPage, pageNo);
  338. mui(".mui-popover").popover("toggle");
  339. });
  340. });
  341. //查找全部
  342. document.getElementById("saveall").addEventListener('click',function(){
  343. vmA.items = [];
  344. var url = API.API_URL();
  345. var serviceId = "oa_2017V001PHONE_orderList";
  346. var state = app.getState(); //获取登陆信息
  347. var searchname=null;
  348. var time=null;
  349. /*var staffId = state.user.useId;
  350. var unitId = state.user.unitId;
  351. var notice_title = "";*/
  352. var obj = {
  353. /*unitId: unitId,
  354. userId: staffId,
  355. notice_title: notice_title,*/
  356. time: time,
  357. searchname:searchname,
  358. type: 2,
  359. pSize: APP.PageSize,
  360. p: 1
  361. };
  362. app.ajax(serviceId,obj, function(data) {
  363. //服务器返回响应
  364. console.log(JSON.stringify(data))
  365. var result = data.returnParams;
  366. var totalRow = data.total;
  367. var totalPage = Math.ceil(totalRow / APP.PageSize);
  368. var list = data.list;
  369. console.log(list.length);
  370. if(list.length > 0) {
  371. vmA.items = vmA.items.concat(convert(list));
  372. }
  373. mui('#pullrefresh').pullRefresh().endPullupToRefresh(totalPage == pageNo); //参数为true代表没有更多数据了。
  374. pageNo = endPull(totalPage, pageNo);
  375. mui(".mui-popover").popover("toggle");
  376. });
  377. });
  378. //删除
  379. function del(item) {
  380. var btnArray = ['取消', '确认'];
  381. mui.confirm('确定要删除吗', '警告', btnArray, function(e) {
  382. if (e.index == 1) {
  383. var url = API.API_URL();
  384. var serviceId = "oa_2017V001PHONE_orderDel";
  385. var state = app.getState(); //获取登陆信息
  386. var id=item.id;
  387. var obj = {
  388. id:id,
  389. };
  390. app.ajax(serviceId,obj, function(data) {
  391. //服务器返回响应
  392. console.log(JSON.stringify(data))
  393. if(data.boo == true) {
  394. alert('删除成功');
  395. location.reload();
  396. } else {
  397. alert('删除失败:' + data.msg);
  398. }
  399. });
  400. } else {
  401. }
  402. })
  403. }
  404. </script>
  405. </body>
  406. </html>