bookAdd.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561
  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 rel="stylesheet" href="../../css/mui.min.css">
  10. <link rel="stylesheet" href="../../css/mui.picker.min.css">
  11. <link href="../../css/mui.poppicker.css" rel="stylesheet" />
  12. <link href="../../css/OA-style.css" rel="stylesheet" />
  13. <link rel="stylesheet" type="text/css" href="../../css/app.css" />
  14. <style>
  15. html,
  16. body {
  17. background-color: #efeff4;
  18. }
  19. .mui-views,
  20. .mui-view,
  21. .mui-pages,
  22. .mui-page,
  23. .mui-page-content {
  24. position: absolute;
  25. left: 0;
  26. right: 0;
  27. top: 0;
  28. bottom: 0;
  29. width: 100%;
  30. height: 100%;
  31. background-color: #efeff4;
  32. }
  33. .mui-pages {
  34. top: 43px;
  35. height: auto;
  36. }
  37. .mui-scroll-wrapper,
  38. .mui-scroll {
  39. background-color: #efeff4;
  40. }
  41. .mui-page.mui-transitioning {
  42. -webkit-transition: -webkit-transform 300ms ease;
  43. transition: transform 300ms ease;
  44. }
  45. .mui-page-left {
  46. -webkit-transform: translate3d(0, 0, 0);
  47. transform: translate3d(0, 0, 0);
  48. }
  49. .mui-ios .mui-page-left {
  50. -webkit-transform: translate3d(-20%, 0, 0);
  51. transform: translate3d(-20%, 0, 0);
  52. }
  53. .mui-navbar {
  54. position: fixed;
  55. right: 0;
  56. left: 0;
  57. z-index: 10;
  58. height: 44px;
  59. background-color: #468CF0;
  60. }
  61. .mui-navbar .mui-bar {
  62. position: absolute;
  63. background: transparent;
  64. text-align: center;
  65. }
  66. .mui-android .mui-navbar-inner.mui-navbar-left {
  67. opacity: 0;
  68. }
  69. .mui-ios .mui-navbar-left .mui-left,
  70. .mui-ios .mui-navbar-left .mui-center,
  71. .mui-ios .mui-navbar-left .mui-right {
  72. opacity: 0;
  73. }
  74. .mui-navbar .mui-btn-nav {
  75. -webkit-transition: none;
  76. transition: none;
  77. -webkit-transition-duration: .0s;
  78. transition-duration: .0s;
  79. }
  80. .mui-navbar .mui-bar .mui-title {
  81. display: inline-block;
  82. width: auto;
  83. }
  84. .mui-page-shadow {
  85. position: absolute;
  86. right: 100%;
  87. top: 0;
  88. width: 16px;
  89. height: 100%;
  90. z-index: -1;
  91. content: '';
  92. }
  93. .mui-page-shadow {
  94. background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
  95. background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
  96. }
  97. .mui-navbar-inner.mui-transitioning,
  98. .mui-navbar-inner .mui-transitioning {
  99. -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
  100. transition: opacity 300ms ease, transform 300ms ease;
  101. }
  102. .mui-page {
  103. display: none;
  104. }
  105. .mui-pages .mui-page {
  106. display: block;
  107. }
  108. .mui-page .mui-table-view:first-child {
  109. margin-top: 15px;
  110. }
  111. .mui-page .mui-table-view:last-child {
  112. margin-bottom: 30px;
  113. }
  114. .mui-table-view {
  115. margin-top: 0px;
  116. }
  117. .mui-table-view span.mui-pull-right {
  118. color: #999;
  119. }
  120. .mui-table-view-divider {
  121. background-color: #efeff4;
  122. font-size: 14px;
  123. }
  124. .mui-content>.mui-table-view:first-child {
  125. margin-top: -1px;
  126. }
  127. .mui-bar {
  128. box-shadow: none;
  129. }
  130. .mui-table-view-cell:after {
  131. left: 0px;
  132. }
  133. .mui-input-row label {
  134. padding: 0;
  135. line-height: 21px;
  136. }
  137. input[type=color],
  138. input[type=date],
  139. input[type=datetime-local],
  140. input[type=datetime],
  141. input[type=email],
  142. input[type=month],
  143. input[type=number],
  144. input[type=password],
  145. input[type=search],
  146. input[type=tel],
  147. input[type=text],
  148. input[type=time],
  149. input[type=url],
  150. input[type=week],
  151. select,
  152. textarea {
  153. padding: 0;
  154. height: auto;
  155. }
  156. .mui-table-view-divider:before,
  157. .mui-table-view-divider:after {
  158. height: 0;
  159. }
  160. .head {
  161. height: 40px;
  162. }
  163. #head {
  164. line-height: 40px;
  165. }
  166. .head-img {
  167. width: 40px;
  168. height: 40px;
  169. }
  170. #head-img1 {
  171. position: absolute;
  172. bottom: 10px;
  173. right: 40px;
  174. width: 40px;
  175. height: 40px;
  176. }
  177. .update {
  178. font-style: normal;
  179. color: #999999;
  180. margin-right: -25px;
  181. font-size: 15px
  182. }
  183. .mui-fullscreen {
  184. position: fixed;
  185. z-index: 20;
  186. background-color: #000;
  187. }
  188. .mui-ios .mui-navbar .mui-bar .mui-title {
  189. position: static;
  190. }
  191. /*问题反馈在setting页面单独的css*/
  192. #feedback .mui-popover {
  193. position: fixed;
  194. }
  195. #feedback .mui-table-view:last-child {
  196. margin-bottom: 0px;
  197. }
  198. #feedback .mui-table-view:first-child {
  199. margin-top: 0px;
  200. }
  201. .mui-plus.mui-plus-stream .mui-stream-hidden {
  202. display: none !important;
  203. }
  204. /*问题反馈在setting页面单独的css==end*/
  205. .mui-input-row .mui-numbox {
  206. float: right;
  207. margin: -11px 8px;
  208. }
  209. </style>
  210. </head>
  211. <body class="mui-fullscreen">
  212. <!--页面主结构开始-->
  213. <div id="app" class="mui-views">
  214. <div class="mui-view">
  215. <div class="mui-navbar">
  216. </div>
  217. <div class="mui-pages">
  218. </div>
  219. </div>
  220. </div>
  221. <div id="setting" class="mui-page">
  222. <div class="mui-navbar-inner mui-bar mui-bar-nav">
  223. <a class="mui-action-back back mui-pull-left"><img src="../../images/back.png"></a>
  224. <h1 class="mui-center mui-title">添加图书</h1>
  225. <div class="mui-button-row">
  226. <button type="button" id="barcode" class="mui-btn mui-btn-danger mui-btn-block" on onclick="clicked('barcode.html',true,true)" style="
  227. width:28px;
  228. float: right;margin-top: -3px;background-color: #468CF0;border: 0px;background-size:100% 80%;background-image: url(../../images/resizeApi2.png);background-repeat: no-repeat;">&nbsp;&nbsp;&nbsp;&nbsp;</button>
  229. </div>
  230. </div>
  231. <div class="mui-page-content">
  232. <div class="mui-scroll-wrapper" id="pullrefresh">
  233. <div class="mui-scroll">
  234. <div class="mui-content-padded" style="margin: 5px;">
  235. <form class="mui-input-group">
  236. <div class="mui-content">
  237. <ul class="mui-table-view ">
  238. <li class="mui-table-view-cell mui-input-row">
  239. <label>图书编码:</label>
  240. <input type="text" id="appliance_number" placeholder="">
  241. </li>
  242. <li class=" mui-input-row" id="form_element">
  243. <label style="padding-top:10px ;padding-left: 15px;">图书类别:</label>
  244. <input type="hidden" id="appliance_sort_id" value="" placeholder="" readonly="readonly">
  245. <input type="text" id="appliance_sort_name" value="" placeholder="" readonly="readonly" style="margin-top: 10px;">
  246. </li>
  247. <li class="mui-table-view-cell mui-input-row">
  248. <label>图书条码:</label>
  249. <input type="text" id="book_barcode" placeholder="">
  250. </li>
  251. <li class="mui-table-view-cell mui-input-row">
  252. <label>书名:</label>
  253. <input type="text" id="appliance_bookName" placeholder="">
  254. </li>
  255. <li class="mui-table-view-cell mui-input-row">
  256. <label>作者:</label>
  257. <input type="text" id="writer" placeholder="">
  258. </li>
  259. <li class="mui-table-view-cell mui-input-row">
  260. <label>出版社:</label>
  261. <input type="text" id="appliance_factory" placeholder="">
  262. </li>
  263. <li class="mui-table-view-cell mui-input-row">
  264. <label>入库日期:</label>
  265. <input type="text" id="appliance_putaway_date" data-options='{"type":"date"}' class="dateinput" placeholder="" readonly="readonly">
  266. </li>
  267. <li class="mui-table-view-cell mui-input-row">
  268. <label>价格:</label>
  269. <div class="mui-numbox" style="margin-right: 40%;width: 150px;margin: -11px 0px;float: left;" data-numbox-min='0.1'>
  270. <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
  271. <input class="mui-input-numbox" type="perdaymoney" id="price" value="10" />
  272. <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
  273. </div>
  274. </li>
  275. <li>
  276. <li class="mui-table-view-cell mui-input-row">
  277. <label>排序:</label>
  278. <input type="text" id="sort" placeholder="">
  279. </li>
  280. <li class="mui-table-view-cell mui-input-row">
  281. <label>备注:</label>
  282. <input type="text" id="remark" placeholder="">
  283. </li>
  284. </ul>
  285. </div>
  286. </form>
  287. <div class="mui-button-row">
  288. <button type="button" class="mui-btn mui-btn-primary" id="save">确认</button>&nbsp;&nbsp;
  289. <button type="button" class="mui-btn mui-btn-danger mui-action-back" onclick="return false;">取消</button>
  290. </div>
  291. </div>
  292. </div>
  293. </div>
  294. </div>
  295. </div>
  296. <script src="../../js/mui.min.js"></script>
  297. <script src="../../js/mui.view.js"></script>
  298. <script src="../../js/mui.picker.min.js"></script>
  299. <script src="../../js/vue.min.js"></script>
  300. <script src="../../js/config.js"></script>
  301. <script src="../../js/app.js"></script>
  302. <script src="../../js/jquery-1.11.2.min.js"></script>
  303. <script type="text/javascript" src="../../js/immersed.js"></script>
  304. <script type="text/javascript" src="../../js/common2.js"></script>
  305. <script type="text/javascript">
  306. var url = API.API_URL();
  307. mui.init();
  308. var viewApi = mui('#app').view({
  309. defaultPage: '#setting'
  310. });
  311. //初始化单页的区域滚动
  312. mui('.mui-scroll-wrapper').scroll({
  313. bounce: false, //滚动条是否有弹力默认是true
  314. indicators: false //是否显示滚动条
  315. });
  316. var year = new Date().getFullYear();
  317. var month2 = new Date().getMonth() + 1;
  318. if(month2 < 10) {
  319. month2 = "0" + month2;
  320. }
  321. var day2 = new Date().getDate();
  322. if(day2 < 10) {
  323. day2 = "0" + day2;
  324. }
  325. var nowTime = year + "-" + month2 + "-" + day2;
  326. $("input#appliance_putaway_date").val(nowTime);
  327. (function($, doc) {
  328. //接收上个界面传递的参数
  329. mui.plusReady(function() {
  330. var self = plus.webview.currentWebview();
  331. var appliance_sort_id = self.appliance_sort_id;
  332. var appliance_sort_name = self.appliance_sort_name;
  333. types(appliance_sort_id, appliance_sort_name);
  334. });
  335. var dateinputs = $('.dateinput');
  336. dateinputs.each(function(i, dinput) {
  337. dinput.addEventListener('click', function() {
  338. var _self = this;
  339. if(_self.picker) {
  340. _self.picker.show(function(rs) {
  341. dinput.setAttribute('data-options', '{"type":"date","value":"' + rs.text + '"}');
  342. dinput.value = rs.text;
  343. _self.picker.dispose();
  344. _self.picker = null;
  345. });
  346. } else {
  347. var optionsJson = this.getAttribute('data-options') || '{}';
  348. var options = JSON.parse(optionsJson);
  349. var id = this.getAttribute('id');
  350. /*
  351. * 首次显示时实例化组件
  352. * 示例为了简洁,将 options 放在了按钮的 dom 上
  353. * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
  354. */
  355. _self.picker = new mui.DtPicker(options);
  356. _self.picker.show(function(rs) {
  357. /*
  358. * rs.value 拼合后的 value
  359. * rs.text 拼合后的 text
  360. * rs.y 年,可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
  361. * rs.m 月,用法同年
  362. * rs.d 日,用法同年
  363. * rs.h 时,用法同年
  364. * rs.i 分(minutes 的第二个字母),用法同年
  365. */
  366. dinput.setAttribute('data-options', '{"type":"date","value":"' + rs.text + '"}');
  367. dinput.value = rs.text;
  368. /*
  369. * 返回 false 可以阻止选择框的关闭
  370. * return false;
  371. */
  372. /*
  373. * 释放组件资源,释放后将将不能再操作组件
  374. * 通常情况下,不需要示放组件,new DtPicker(options) 后,可以一直使用。
  375. * 当前示例,因为内容较多,如不进行资原释放,在某些设备上会较慢。
  376. * 所以每次用完便立即调用 dispose 进行释放,下次用时再创建新实例。
  377. */
  378. _self.picker.dispose();
  379. _self.picker = null;
  380. });
  381. }
  382. }, false);
  383. });
  384. //处理view的后退与webview后退
  385. var oldBack = $.back;
  386. $.back = function() {
  387. if(viewApi.canBack()) { //如果view可以后退,则执行view的后退
  388. viewApi.back();
  389. } else { //执行webview后退
  390. oldBack();
  391. }
  392. };
  393. })(mui);
  394. //图书类型
  395. var vm2 = new Vue({
  396. el: '#form_element',
  397. data: {
  398. bookTypes: []
  399. }
  400. });
  401. mui.plusReady(function() {
  402. //表单提交按钮
  403. var save = document.getElementById("save");
  404. save.addEventListener("click", function() {
  405. var state = app.getState(); //获取登陆信息
  406. var staffId = state.user.useId;
  407. var appliance_number = $("#appliance_number").val(); //图书编码
  408. var appliance_sort_id = $("#appliance_sort_id").val(); //图书类别
  409. var appliance_bookName = $("#appliance_bookName").val(); //书名
  410. var appliance_putaway_date = $("#appliance_putaway_date").val(); //入库时间
  411. var writer = $("#writer").val(); //作者
  412. var barcode = $("#book_barcode").val(); //条码
  413. var price = $("#price").val(); //价格
  414. var sort = $("#sort").val(); //排序
  415. var remark = $("#remark").val(); //备注
  416. var appliance_factory = $("#appliance_factory").val(); //出版社
  417. if(appliance_number == "") {
  418. mui.toast("图书编码不能为空,请输入");
  419. return;
  420. }
  421. if(barcode == "") {
  422. mui.toast("图书条码不能为空,请输入");
  423. return;
  424. }
  425. if(appliance_sort_id == "") {
  426. mui.toast("图书类别不能为空,请输入");
  427. return;
  428. }
  429. var serviceId = "oa_PHONE_addBook";
  430. var obj = {
  431. appliance_number: appliance_number,
  432. appliance_sort_id: appliance_sort_id,
  433. appliance_bookName: appliance_bookName,
  434. writer: writer,
  435. barcode: barcode,
  436. price: price,
  437. sort: sort,
  438. appliance_putaway_date: appliance_putaway_date,
  439. appliance_remark: remark,
  440. appliance_factory: appliance_factory,
  441. create_user: staffId
  442. };
  443. document.getElementById("save").setAttribute("disabled", true); //按钮变灰不可用
  444. app.ajax(serviceId, obj, function(data) {
  445. //服务器返回响应
  446. console.log(JSON.stringify(data))
  447. if(data == '1') {
  448. mui.toast("图书编码已存在,请确认");
  449. document.getElementById("save").disabled = false;
  450. } else if(data == '2') {
  451. mui.toast("图书条码已存在,请确认");
  452. document.getElementById("save").disabled = false;
  453. } else if(data == '0') {
  454. mui.toast("添加成功");
  455. location.reload();
  456. } else {
  457. mui.toast("添加失败,请确认");
  458. location.reload();
  459. }
  460. });
  461. });
  462. })
  463. //获取上个页面的数据
  464. function types(id, name) {
  465. $("#appliance_sort_id").val(id);
  466. $("#appliance_sort_name").val(name);
  467. }
  468. //判断输入图书条码的内容是否是中文
  469. document.getElementById("book_barcode").addEventListener('blur', function() {
  470. var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
  471. var barcode = $("#book_barcode").val();
  472. if(reg.test(barcode)) {
  473. alert("不能输入汉字!"); 
  474. var strObj = document.getElementById("book_barcode");
  475. strObj.value = "";
  476. }
  477. })
  478. function scaned(t, r, f) {
  479. var serviceId = "oa_PHONE_booksInfo";
  480. var obj = {
  481. barcode: r
  482. };
  483. app.ajax(serviceId, obj, function(data) {
  484. console.log(JSON.stringify(data))
  485. if(data.count < 1) {
  486. $("#book_barcode").val(r);
  487. } else {
  488. mui.toast("该图书已存在");
  489. }
  490. });
  491. }
  492. </script>
  493. </body>
  494. </html>