booksList.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
  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. </head>
  12. <body>
  13. <header class="mui-bar mui-bar-nav" id="login">
  14. <a href="" class="mui-action-back back mui-pull-left"><img src="../../../images/back.png"></a>
  15. <h1 class="mui-title" id="title">图书管理</h1>
  16. <a id="toAdd">
  17. <img src="../../../images/app_add.png" style="width: 44px;float: right;">
  18. </a>
  19. <a id="menu" class="mui-action-menu mui-icon mui-pull-right" href="#topPopover">
  20. <img src="../../../images/book.png" style="width: 20px;">
  21. </a>
  22. </header>
  23. <div class="mui-content">
  24. <div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="">
  25. <!--<div class="zhgl_div1" style="padding-left: 35px;padding-top: 5px;" v-for="item in items">
  26. <div class="mybk_shucolor"><b>{{item.appliance_bookName}}</b></div>
  27. <img src="../../../images/borrybook.png" class="mybk_img">
  28. <div class="mybk_div">
  29. <span>作者:{{item.writer}}</span><br>
  30. <span>条码:<b id="barcode">{{item.barcode}}</b></span> <br>
  31. <span>借阅次数:<b id="barcode">{{item.borrowNumber}}</b></span> <br>
  32. </div>
  33. <div class="mybk_div1">
  34. <span>出版社:{{item.appliance_factory}}</span><br>
  35. <span>编码:{{item.appliance_number}}</span> <br>
  36. </div>
  37. <div class="zhgl_div">
  38. <button type="button" id="perorder" @tap="perorder(item)" class="mui-btn mui-btn-outlined">查看</button>
  39. <button type="button" id="edit" @tap="editBook(item)" class="mui-btn mui-btn-outlined">编辑</button>
  40. <button type="button" id="del" @tap="delbook(item)" class="mui-btn mui-btn-danger mui-btn-outlined">删除</button>
  41. </div>
  42. </div>-->
  43. <ul class="mui-table-view">
  44. <li class="mui-table-view-cell" v-for="item in items">
  45. <div>
  46. <div class="mybk_shucolor"><b>{{item.appliance_bookName}}</b></div>
  47. <img src="../../../images/borrybook.png" class="mybk_img">
  48. <div class="mybk_div">
  49. <span>作者:{{item.writer}}</span><br>
  50. <span>条码:<b id="barcode">{{item.barcode}}</b></span><br>
  51. <span>出版社:{{item.appliance_factory}}</span><br>
  52. <span>编码:{{item.appliance_number}}</span><br>
  53. <span>借阅次数:<b id="barcode">{{item.borrowNumber}}</b></span><br>
  54. </div>
  55. <div class="mybk_div2">
  56. <button type="button" id="perorder" @tap="perorder(item)" class="mui-btn mui-btn-outlined mybk_button">查看</button><br>
  57. <button type="button" id="edit" @tap="editBook(item)" class="mui-btn mui-btn-outlined mybk_button">编辑</button><br>
  58. <button type="button" id="del" @tap="delbook(item)" class="mui-btn mui-btn-danger mui-btn-outlined mybk_button">删除</button><br>
  59. </div>
  60. </div>
  61. </li>
  62. </ul>
  63. <!--右上角弹出菜单-->
  64. <div id="topPopover" class="mui-popover">
  65. <div class="mui-popover-arrow"></div>
  66. <div class="mui-scroll-wrapper">
  67. <div class="mui-scroll">
  68. <ul class="mui-table-view">
  69. <li class="mui-table-view-cell">
  70. <div class="mui-input-row mui-search" >
  71. <input type="search" id="searchname" class="mui-input-clear" placeholder="请输入书名">
  72. </div>
  73. <div cclass="mui-input-row mui-search" >
  74. <button type="button" id="searchBook" class="mui-btn mui-btn-outlined" style="margin-left:20px;">查询</button>
  75. <button type="button" id="searchAllBook" class="mui-btn mui-btn-outlined" style="margin-left: 40px;">查询全部</button>
  76. </div>
  77. </li>
  78. </ul>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. <script type="text/javascript" src="../../../js/jquery-1.11.2.min.js"></script>
  84. <script src="../../../js/mui.min.js"></script>
  85. <script src="../../../js/config.js"></script>
  86. <script src="../../../js/app.js"></script>
  87. <script src="../../../js/vue.min.js"></script>
  88. <script>
  89. var pageDetail = null;
  90. mui.init({
  91. pullRefresh: {
  92. container: '#pullrefresh',
  93. down: {
  94. style: 'circle', //必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式
  95. color: '#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色
  96. height: '50px', //可选,默认50px.下拉刷新控件的高度,
  97. range: '100px', //可选 默认100px,控件可下拉拖拽的范围
  98. offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
  99. // auto: true, //可选,默认false.首次加载自动上拉刷新一次
  100. callback: reloadNews //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
  101. },
  102. up: {
  103. contentrefresh: '正在加载...',
  104. auto: true, //可选,默认false.自动上拉加载一次
  105. callback: pullupRefresh
  106. }
  107. },
  108. statusBarBackground: '#D20000', //设置状态栏颜色,仅iOS可用
  109. // preloadLimit:5,
  110. });
  111. var vmA = new Vue({
  112. el: '#pullrefresh',
  113. data: {
  114. items: [] //列表信息流数据
  115. }
  116. });
  117. /**
  118. * 下拉刷新具体业务实现
  119. */
  120. function reloadNews() {
  121. var self = plus.webview.currentWebview();
  122. var appliance_sort_id = self.appliance_sort_id;
  123. var appliance_sort_name = self.appliance_sort_name;
  124. pageNo = 1;
  125. vmA.items = [];
  126. addData(appliance_sort_id);
  127. }
  128. var pageNo = 1;
  129. var type = 0;
  130. /**
  131. * 上拉加载具体业务实现
  132. */
  133. function pullupRefresh() {
  134. //接受上个页面传递的appliance_info_type和appliance_info_id的值
  135. var self = plus.webview.currentWebview();
  136. var appliance_sort_id = self.appliance_sort_id;
  137. var appliance_sort_name = self.appliance_sort_name;
  138. vmA.items = [];
  139. addData(appliance_sort_id);
  140. }
  141. function addData(appliance_sort_id) {
  142. var url = API.API_URL();
  143. var serviceId = "oa_PHONE_20180524BooksList";
  144. var state = app.getState(); //获取登陆信息
  145. var unitId = state.user.unitId;
  146. console.log("*********" + appliance_sort_id);
  147. var p = pageNo;
  148. var bookname = $("#searchname").val();
  149. if(bookname == "") {
  150. var p = 1;
  151. }
  152. var obj = {
  153. unitId: unitId,
  154. pSize: APP.PageSize,
  155. p: p,
  156. appliance_sort_id: appliance_sort_id,
  157. bookname: bookname
  158. };
  159. app.ajax(serviceId, obj, function(data) {
  160. //服务器返回响应
  161. console.log(JSON.stringify(data))
  162. var result = data.returnParams;
  163. var totalRow = data.total;
  164. var totalPage = Math.ceil(totalRow / APP.PageSize);
  165. if(totalPage == 0){
  166. totalPage =1;
  167. }
  168. var list = data.list;
  169. if(list.length > 0) {
  170. vmA.items = vmA.items.concat(list);
  171. }
  172. mui('#pullrefresh').pullRefresh().endPullupToRefresh(totalPage == pageNo); //参数为true代表没有更多数据了。
  173. if(pageNo == 1 && totalPage>1) {
  174. mui('#pullrefresh').pullRefresh().endPulldown();
  175. mui('#pullrefresh').pullRefresh().refresh(true);
  176. }
  177. if(totalPage == 1 ){
  178. mui('#pullrefresh').pullRefresh().endPulldown();
  179. }
  180. pageNo = pageNo + 1;
  181. });
  182. }
  183. window.addEventListener('refresh', function(e) { //执行刷新
  184. location.reload();
  185. });
  186. //图书明细
  187. function perorder(item) {
  188. //前往页面
  189. mui.openWindow({
  190. //页面
  191. url: 'bookview.html',
  192. //传参
  193. extras: {
  194. 'appliance_id': item.appliance_id,
  195. 'bookname': item.appliance_bookname
  196. }
  197. })
  198. }
  199. document.getElementById("toAdd").addEventListener('click', function() {
  200. //接受上个页面传递的appliance_info_type和appliance_info_id的值
  201. var self = plus.webview.currentWebview();
  202. var appliance_sort_id = self.appliance_sort_id;
  203. var appliance_sort_name = self.appliance_sort_name;
  204. mui.openWindow({
  205. url: '../bookAdd.html',
  206. extras: {
  207. 'appliance_sort_id': appliance_sort_id,
  208. 'appliance_sort_name': appliance_sort_name
  209. }
  210. })
  211. })
  212. //图书编辑页面
  213. function editBook(item) {
  214. mui.openWindow({
  215. url: 'bookEdit.html',
  216. //传参
  217. extras: {
  218. 'appliance_id': item.appliance_id,
  219. 'bookname': item.appliance_bookname,
  220. 'barcode': item.barcode,
  221. 'appliance_number': item.appliance_number,
  222. 'appliance_putaway_date': item.appliance_putaway_date
  223. }
  224. })
  225. }
  226. //删除
  227. function delbook(item) {
  228. var btnArray = ['取消', '确认'];
  229. mui.confirm('确定要删除吗', '警告', btnArray, function(e) {
  230. if(e.index == 1) {
  231. var url = API.API_URL();
  232. var serviceId = "oa_PHONE_20180524delBook";
  233. var state = app.getState(); //获取登陆信息
  234. var appliance_id = item.appliance_id;
  235. var obj = {
  236. appliance_id: appliance_id,
  237. };
  238. app.ajax(serviceId, obj, function(data) {
  239. //服务器返回响应
  240. console.log(JSON.stringify(data))
  241. if(data == '1') {
  242. alert('删除失败:该书借出未还!');
  243. location.reload();
  244. } else {
  245. if(data == '0') {
  246. alert('删除成功');
  247. location.reload();
  248. } else {
  249. alert('删除失败:' + data.msg);
  250. }
  251. }
  252. });
  253. } else {
  254. }
  255. })
  256. }
  257. //查询
  258. document.getElementById("searchBook").addEventListener('click', function() {
  259. var self = plus.webview.currentWebview();
  260. var appliance_sort_id = self.appliance_sort_id;
  261. var url = API.API_URL();
  262. var state = app.getState(); //获取登陆信息
  263. var bookname = $("#searchname").val();
  264. var unitId = state.user.unitId;
  265. var serviceId = "oa_PHONE_20180524BooksList";
  266. var obj = {
  267. unitId: unitId,
  268. appliance_sort_id:appliance_sort_id,
  269. bookname: bookname,
  270. pSize: APP.PageSize,
  271. p: 1
  272. };
  273. app.ajax(serviceId, obj, function(data) {
  274. //服务器返回响应
  275. console.log(JSON.stringify(data))
  276. if(data.total == 0) {
  277. mui.toast("该书不存在");
  278. } else {
  279. mui.toast("查找成功");
  280. var result = data.returnParams;
  281. var list = data.list;
  282. console.log(list.length);
  283. if(list.length > 0) {
  284. vmA.items = [];
  285. vmA.items = vmA.items.concat(list);
  286. }
  287. }
  288. mui(".mui-popover").popover("toggle");
  289. });
  290. });
  291. //查询全部
  292. document.getElementById("searchAllBook").addEventListener('click', function() {
  293. var url = API.API_URL();
  294. var self = plus.webview.currentWebview();
  295. var appliance_sort_id = self.appliance_sort_id;
  296. var bookname = "";
  297. var state = app.getState(); //获取登陆信息
  298. var unitId = state.user.unitId;
  299. var serviceId = "oa_PHONE_20180524BooksList";
  300. var obj = {
  301. unitId: unitId,
  302. bookname: bookname,
  303. appliance_sort_id:appliance_sort_id,
  304. pSize: APP.PageSize,
  305. p: 1
  306. };
  307. app.ajax(serviceId, obj, function(data) {
  308. //服务器返回响应
  309. console.log(JSON.stringify(data))
  310. if(data.total == 0) {
  311. mui.toast("该书不存在");
  312. } else {
  313. mui.toast("查找成功");
  314. var result = data.returnParams;
  315. var list = data.list;
  316. console.log(list.length);
  317. if(list.length > 0) {
  318. vmA.items = [];
  319. vmA.items = vmA.items.concat(list);
  320. }
  321. mui(".mui-popover").popover("toggle");
  322. }
  323. });
  324. });
  325. </script>
  326. </body>
  327. </html>