createTrip.html 28 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>表单</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <link href="../../css/mui.min.css" rel="stylesheet" />
  9. <link href="../../css/mui.picker.css" rel="stylesheet" />
  10. <link href="../../css/mui.poppicker.css" rel="stylesheet" />
  11. <link href="../../css/OA-style.css" rel="stylesheet" />
  12. <style>
  13. .mui-input-row .mui-btn {
  14. float: left;
  15. width: 27%;
  16. margin-left: 10px;
  17. }
  18. .mui-btn-blue,
  19. .mui-btn-primary,
  20. input[type=submit] {
  21. width: 150px;
  22. }
  23. @media screen and (max-width: 768px) {
  24. #yy {
  25. width: 100%;
  26. }
  27. }
  28. .inp {
  29. width: 15%;
  30. }
  31. .bg {
  32. height: 300px;
  33. width: 100%;
  34. background: #62949a;
  35. }
  36. .bg_bt {
  37. margin: 50px;
  38. width: 10%;
  39. }
  40. .div_center {
  41. background: #FFFFFF;
  42. width: 90%;
  43. height: auto;
  44. margin-left: 5%;
  45. border-radius: 10px;
  46. margin-top: 10px;
  47. padding: 30px;
  48. }
  49. .ldsp {
  50. font-size: 1.5em;
  51. }
  52. .div1_center {
  53. padding: 10px;
  54. }
  55. .fl {
  56. float: left;
  57. }
  58. .ov {
  59. overflow: hidden;
  60. }
  61. .div_border {
  62. border: #000000 1px solid;
  63. height: auto;
  64. font-size: 13px;
  65. color: #9c9c9c;
  66. padding: 10px;
  67. }
  68. .hongse {
  69. color: #CF2D28;
  70. }
  71. .text_cent {
  72. text-align: center;
  73. border: #000000 1px solid;
  74. padding: 10px;
  75. margin-top: 10px;
  76. display: block;
  77. word-break: break-all;
  78. word-wrap: break-word;
  79. }
  80. .yanse {
  81. color: #B6B6B6;
  82. }
  83. #xx {
  84. height: 100px;
  85. }
  86. html,
  87. body {
  88. background-color: #efeff4;
  89. }
  90. .mui-views,
  91. .mui-view,
  92. .mui-pages,
  93. .mui-page,
  94. .mui-page-content {
  95. position: absolute;
  96. left: 0;
  97. right: 0;
  98. top: 0;
  99. bottom: 0;
  100. width: 100%;
  101. height: 100%;
  102. background-color: #efeff4;
  103. }
  104. .mui-pages {
  105. top: 43px;
  106. height: auto;
  107. }
  108. .mui-scroll-wrapper,
  109. .mui-scroll {
  110. background-color: #efeff4;
  111. }
  112. .mui-page.mui-transitioning {
  113. -webkit-transition: -webkit-transform 300ms ease;
  114. transition: transform 300ms ease;
  115. }
  116. .mui-page-left {
  117. -webkit-transform: translate3d(0, 0, 0);
  118. transform: translate3d(0, 0, 0);
  119. }
  120. .mui-ios .mui-page-left {
  121. -webkit-transform: translate3d(-20%, 0, 0);
  122. transform: translate3d(-20%, 0, 0);
  123. }
  124. .mui-navbar {
  125. position: fixed;
  126. right: 0;
  127. left: 0;
  128. z-index: 10;
  129. height: 44px;
  130. background-color: #468CF0;
  131. }
  132. .mui-navbar .mui-bar {
  133. position: absolute;
  134. background: transparent;
  135. text-align: center;
  136. }
  137. .mui-android .mui-navbar-inner.mui-navbar-left {
  138. opacity: 0;
  139. }
  140. .mui-ios .mui-navbar-left .mui-left,
  141. .mui-ios .mui-navbar-left .mui-center,
  142. .mui-ios .mui-navbar-left .mui-right {
  143. opacity: 0;
  144. }
  145. .mui-navbar .mui-btn-nav {
  146. -webkit-transition: none;
  147. transition: none;
  148. -webkit-transition-duration: .0s;
  149. transition-duration: .0s;
  150. }
  151. .mui-navbar .mui-bar .mui-title {
  152. display: inline-block;
  153. width: auto;
  154. }
  155. .mui-page-shadow {
  156. position: absolute;
  157. right: 100%;
  158. top: 0;
  159. width: 16px;
  160. height: 100%;
  161. z-index: -1;
  162. content: '';
  163. }
  164. .mui-page-shadow {
  165. 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%);
  166. 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%);
  167. }
  168. .mui-navbar-inner.mui-transitioning,
  169. .mui-navbar-inner .mui-transitioning {
  170. -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
  171. transition: opacity 300ms ease, transform 300ms ease;
  172. }
  173. .mui-page {
  174. display: none;
  175. }
  176. .mui-pages .mui-page {
  177. display: block;
  178. }
  179. .mui-page .mui-table-view:first-child {
  180. margin-top: 15px;
  181. }
  182. .mui-page .mui-table-view:last-child {
  183. margin-bottom: 30px;
  184. }
  185. .mui-table-view {
  186. margin-top: 0px;
  187. }
  188. .mui-table-view span.mui-pull-right {
  189. color: #999;
  190. }
  191. .mui-table-view-divider {
  192. background-color: #efeff4;
  193. font-size: 14px;
  194. }
  195. .mui-content>.mui-table-view:first-child {
  196. margin-top: -1px;
  197. }
  198. .mui-bar {
  199. box-shadow: none;
  200. }
  201. .mui-table-view-cell:after {
  202. left: 0px;
  203. }
  204. /*.mui-input-row label {
  205. padding: 0;
  206. line-height: 21px;
  207. }*/
  208. input[type=color],
  209. input[type=date],
  210. input[type=datetime-local],
  211. input[type=datetime],
  212. input[type=email],
  213. input[type=month],
  214. input[type=number],
  215. input[type=password],
  216. input[type=search],
  217. input[type=tel],
  218. input[type=text],
  219. input[type=time],
  220. input[type=url],
  221. input[type=week],
  222. select,
  223. textarea {}
  224. .mui-table-view-divider:before,
  225. .mui-table-view-divider:after {
  226. height: 0;
  227. }
  228. .head {
  229. height: 40px;
  230. }
  231. #head {
  232. line-height: 40px;
  233. }
  234. .head-img {
  235. width: 40px;
  236. height: 40px;
  237. }
  238. #head-img1 {
  239. position: absolute;
  240. bottom: 10px;
  241. right: 40px;
  242. width: 40px;
  243. height: 40px;
  244. }
  245. .update {
  246. font-style: normal;
  247. color: #999999;
  248. margin-right: -25px;
  249. font-size: 15px
  250. }
  251. .mui-fullscreen {
  252. position: fixed;
  253. z-index: 20;
  254. background-color: #000;
  255. }
  256. .mui-ios .mui-navbar .mui-bar .mui-title {
  257. position: static;
  258. }
  259. /*问题反馈在setting页面单独的css*/
  260. #feedback .mui-popover {
  261. position: fixed;
  262. }
  263. #feedback .mui-table-view:last-child {
  264. margin-bottom: 0px;
  265. }
  266. #feedback .mui-table-view:first-child {
  267. margin-top: 0px;
  268. }
  269. .mui-plus.mui-plus-stream .mui-stream-hidden {
  270. display: none !important;
  271. }
  272. </style>
  273. </head>
  274. <body class="mui-fullscreen">
  275. <!--页面主结构开始-->
  276. <div id="app" class="mui-views">
  277. <div class="mui-view">
  278. <div class="mui-navbar">
  279. </div>
  280. <div class="mui-pages">
  281. </div>
  282. </div>
  283. </div>
  284. <!--页面主结构结束-->
  285. <!--单页面开始-->
  286. <div id="setting" class="mui-page">
  287. <!--页面标题栏开始-->
  288. <div class="mui-navbar-inner mui-bar mui-bar-nav">
  289. <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
  290. <img class="mui-icon mui-icon-left-nav" src="../../images/back.png" height="20" style="margin-left: 5px;margin-top: 11px;">
  291. </button>
  292. <h1 class="mui-center mui-title">发起出差审批</h1>
  293. <button id="saveBtn" type="button" class="mui-right mui-btn mui-btn-link mui-btn-nav mui-pull-right">
  294. <img class="mui-icon mui-icon-left-nav" src="../../images/queding.png" height="20" style="margin-right: 5px;margin-top: 11px;">
  295. </button>
  296. </div>
  297. <!--页面主内容区开始-->
  298. <div class="mui-page-content">
  299. <div class="mui-scroll-wrapper" >
  300. <div class="mui-scroll">
  301. <div class="mui-content-padded" style="margin: 5px;">
  302. <form class="mui-input-group" id="form_element">
  303. <div class="mui-input-row">
  304. <label>审核单号</label>
  305. <input type="text" id="tripid" readonly="readonly" >
  306. </div>
  307. <div class="mui-input-row" id="pullrefresh">
  308. <label>部门</label>
  309. <select id="tripdepart">
  310. <template v-for="item in items">
  311. <option v-bind:value="item.GROUPNAME">{{item.GROUPNAME}}</option>
  312. </template>
  313. </select>
  314. </div>
  315. <div class="mui-input-row">
  316. <label>出差人数</label>
  317. <input type="number" id="tripnum" >
  318. </div>
  319. <div class="mui-input-row">
  320. <label>经办人</label>
  321. <input type="text" id="tripmanid" readonly="readonly">
  322. </div>
  323. <div class="mui-input-row" style="height: 80px;">
  324. <label>出差地点</label>
  325. <textarea rows="" cols="" id="address"></textarea>
  326. </div>
  327. <!--<div class="mui-input-row">
  328. <a href="#personComponent">
  329. <label> 出差人员</label>
  330. <input type="text" placeholder="66666">
  331. </a>
  332. </div> -->
  333. <div class="mui-input-row" style="height: 100px;">
  334. <label>出差时间</label><br><br>
  335. <div class="mui-input-row" style="height: 70px;">
  336. <span>
  337. <button type="button" class="mui-btn" onclick="searchbegin()"><span id="bengintime">开始时间</span></button>
  338. </span>
  339. <label style="width: 3%;"> 至 </label>
  340. <span>
  341. <button type="button" class="mui-btn" onclick="searchend()"><span id="endtime">结束时间</span></button>
  342. </span>
  343. <label style="width: 3%;">共</label>
  344. <span> <input type="text" id="triptotalday" style="border: solid 1px gainsboro; width: 40px;margin-left: 10px;padding-left: 12px;float: left;"> </span>
  345. <label style="width: 3%;margin-left:-10px;">天</label>
  346. </div>
  347. </div>
  348. <div class="mui-input-row">
  349. <label>是否派车</label>
  350. <div id="" style="margin-top: 8px;">
  351. <input name="wheacar" id="wheacar" type="radio" value="1"/>是
  352. <input name="wheacar" id="wheacar" type="radio" style="margin-left: 15px;" value="2"/>否
  353. </div>
  354. </div>
  355. <div class="mui-input-row" >
  356. <label>是否全程跟随</label>
  357. <select name="whealltrip" id="whealltrip">
  358. <option value="-1">请选择</option>
  359. <option value="0">不派车</option>
  360. <option value="1">全程跟随</option>
  361. <option value="2">接</option>
  362. <option value="3">送</option>
  363. <option value="4">接和送</option>
  364. </select>
  365. </div>
  366. <div class="mui-input-row" style="height: 80px;">
  367. <label>出差 派车事由</label>
  368. <textarea rows="" cols="" id="reason"></textarea>
  369. </div>
  370. </form>
  371. <form class="mui-input-group">
  372. <section id="startFlow">
  373. <!-- 0并行分支,1手动分支,2条件分支 -->
  374. <template >
  375. <div class="mui-input-row">
  376. <label style="padding: 10px 0px 0px 15px;">出差人员</label>
  377. </div>
  378. <div class="mui-input-row" style="height: auto;" >
  379. <textarea id="tripmen_name" rows="2" placeholder="请选择人员" readonly="readonly" @click="choosePerson()"></textarea>
  380. <input type="hidden" id="tripmen" value="" />
  381. </div>
  382. </template>
  383. </section>
  384. </form>
  385. <h4 style="color: darkcyan;margin: 15px;">下一环节:科室审批</h4>
  386. <form class="mui-input-group">
  387. <section id="startFlow2">
  388. <!-- 0并行分支,1手动分支,2条件分支 -->
  389. <template >
  390. <div class="mui-input-row">
  391. <label style="padding: 10px 0px 0px 15px;">下一环节审批人</label>
  392. </div>
  393. <div class="mui-input-row" style="height: auto;" >
  394. <textarea id="approveman_name" rows="1" placeholder="请选择人员" readonly="readonly" @click="choosePerson2()"></textarea>
  395. <input type="hidden" id="approveman" value="" />
  396. </div>
  397. </template>
  398. </section>
  399. </form>
  400. </div>
  401. </div>
  402. </div>
  403. </div>
  404. <!--页面主内容区结束-->
  405. </div>
  406. <!--单页面结束-->
  407. <div id="personComponent" class="mui-page">
  408. <div class="mui-navbar-inner mui-bar mui-bar-nav">
  409. <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
  410. <img class="mui-icon mui-icon-left-nav" src="../../images/back.png" height="20">
  411. </button>
  412. <h1 class="mui-center mui-title">人员选择</h1>
  413. <button id="button" type="button" class="mui-right mui-btn mui-btn-link mui-btn-nav mui-pull-right">
  414. <img class="mui-icon mui-icon-left-nav" src="../../images/queding.png" height="20">
  415. </button>
  416. </div>
  417. <div class="mui-page-content">
  418. <div class="mui-scroll-wrapper" id="person-scroll">
  419. <div class="mui-scroll">
  420. <div class="mui-card" id="personData">
  421. <!-- 当前选择人员在环节 -->
  422. <input type="hidden" id="selTmodelId" value="" />
  423. <ul class="mui-table-view">
  424. <li class="mui-table-view-cell" v-for="groupUser in groupUsers" v-if="groupUser.type == 'dept'">
  425. <a class="mui-navigate-right" href="#" @click="getGroupUser(groupUser.id)">{{groupUser.text}}</a>
  426. </li>
  427. </ul>
  428. <div class="mui-table-view-cell mui-checkbox" style="padding:5px;" v-for="groupUser in groupUsers" v-if="groupUser.type == 'user'">
  429. <label style="width: 60%;padding:5px;">{{groupUser.text}}</label>
  430. <input id="checkbox" name="checkbox" type="checkbox" v-value="groupUser.id" @click="selectUser(groupUser)">
  431. </div>
  432. </div>
  433. </div>
  434. </div>
  435. </div>
  436. </div>
  437. <div id="personComponent2" class="mui-page">
  438. <div class="mui-navbar-inner mui-bar mui-bar-nav">
  439. <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
  440. <img class="mui-icon mui-icon-left-nav" src="../../images/back.png" height="20">
  441. </button>
  442. <h1 class="mui-center mui-title">人员选择</h1>
  443. <button id="button2" type="button" class="mui-right mui-btn mui-btn-link mui-btn-nav mui-pull-right">
  444. <img class="mui-icon mui-icon-left-nav" src="../../images/queding.png" height="20">
  445. </button>
  446. </div>
  447. <div class="mui-page-content">
  448. <div class="mui-scroll-wrapper" id="person-scroll">
  449. <div class="mui-scroll">
  450. <div class="mui-card" id="personData2">
  451. <!-- 当前选择人员在环节 -->
  452. <input type="hidden" id="selTmodelId" value="" />
  453. <ul class="mui-table-view">
  454. <li class="mui-table-view-cell" v-for="groupUser in groupUsers2" v-if="groupUser.type == 'dept'">
  455. <a class="mui-navigate-right" href="#" @click="getGroupUser2(groupUser.id)">{{groupUser.text}}</a>
  456. </li>
  457. </ul>
  458. <div class="mui-table-view-cell mui-radio" style="padding:5px;" v-for="groupUser in groupUsers2" v-if="groupUser.type == 'user'">
  459. <label style="width: 60%;padding:5px;">{{groupUser.text}}</label>
  460. <input id="radio" name="radio" type="radio" v-value="groupUser.id" @click="selectUser(groupUser)">
  461. </div>
  462. </div>
  463. </div>
  464. </div>
  465. </div>
  466. </div>
  467. <script src="../../js/mui.min.js"></script>
  468. <script src="../../js/mui.view.js"></script>
  469. <script src="../../js/mui.picker.min.js"></script>
  470. <script src="../../js/vue.min.js"></script>
  471. <script src="../../js/config.js"></script>
  472. <script src="../../js/app.js"></script>
  473. <script src="../../js/jquery-1.11.2.min.js"></script>
  474. <script src="../../js/mui.js"></script>
  475. <script type="text/javascript">
  476. //选取开始时间
  477. function searchbegin() {
  478. var dDate = new Date();
  479. plus.nativeUI.pickDate(function(e) {
  480. var d = e.date;
  481. var month=d.getMonth() + 1;
  482. if(month < 10){
  483. month= "0"+ month;
  484. }
  485. var day=d.getDate();
  486. if(day < 10){
  487. day= "0"+ day;
  488. }
  489. var a = d.getFullYear() + "-" + month + "-" + day;
  490. document.getElementById("bengintime").innerHTML=a;
  491. }, function(e){
  492. console.log( "未选择日期:"+e.message );
  493. },{
  494. title: "请选择日期",
  495. date: dDate,
  496. });
  497. }
  498. //选取结束时间
  499. function searchend() {
  500. var dDate = new Date();
  501. dDate.setFullYear(2014, 7, 16);
  502. var minDate = new Date();
  503. minDate.setFullYear(2010, 0, 1);
  504. var maxDate = new Date();
  505. maxDate.setFullYear(2016, 11, 31);
  506. plus.nativeUI.pickDate(function(e) {
  507. var d = e.date;
  508. var month=d.getMonth() + 1;
  509. if(month < 10){
  510. month= "0"+ month;
  511. }
  512. var day=d.getDate();
  513. if(day < 10){
  514. day= "0"+ day;
  515. }
  516. var a = d.getFullYear() + "-" + month + "-" + day;
  517. document.getElementById("endtime").innerHTML=a;
  518. }, {
  519. title: "请选择日期",
  520. date: dDate,
  521. minDate: minDate,
  522. maxDate: maxDate
  523. });
  524. }
  525. var vmA = new Vue({
  526. el: '#pullrefresh',
  527. data: {
  528. items: [] //列表信息流数据
  529. }
  530. });
  531. var url = API.API_URL();
  532. mui.init();
  533. var viewApi = mui('#app').view({
  534. defaultPage: '#setting'
  535. });
  536. //初始化单页的区域滚动
  537. mui('.mui-scroll-wrapper').scroll({
  538. bounce: false, //滚动条是否有弹力默认是true
  539. indicators: false //是否显示滚动条
  540. });
  541. // mui("#pullrefresh").pullRefresh().setStopped(true);
  542. // mui('#pullrefresh').pullRefresh().setStopped(true); //暂时禁止滚动
  543. var view = viewApi.view;
  544. function test(o) {
  545. alert(o);
  546. };
  547. (function($, doc) {
  548. getGroupUser(347517153919893);
  549. getGroupUser2(347517153919893);
  550. var dateinputs = $('.dateinput');
  551. dateinputs.each(function(i, dinput) {
  552. dinput.addEventListener('click', function() {
  553. var _self = this;
  554. if(_self.picker) {
  555. _self.picker.show(function(rs) {
  556. dinput.setAttribute('data-options', '{"type":"date","value":"' + rs.text + '"}');
  557. dinput.value = rs.text;
  558. _self.picker.dispose();
  559. _self.picker = null;
  560. });
  561. } else {
  562. var optionsJson = this.getAttribute('data-options') || '{}';
  563. var options = JSON.parse(optionsJson);
  564. var id = this.getAttribute('id');
  565. /*
  566. * 首次显示时实例化组件
  567. * 示例为了简洁,将 options 放在了按钮的 dom 上
  568. * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
  569. */
  570. _self.picker = new mui.DtPicker(options);
  571. _self.picker.show(function(rs) {
  572. /*
  573. * rs.value 拼合后的 value
  574. * rs.text 拼合后的 text
  575. * rs.y 年,可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
  576. * rs.m 月,用法同年
  577. * rs.d 日,用法同年
  578. * rs.h 时,用法同年
  579. * rs.i 分(minutes 的第二个字母),用法同年
  580. */
  581. dinput.setAttribute('data-options', '{"type":"date","value":"' + rs.text + '"}');
  582. dinput.value = rs.text;
  583. /*
  584. * 返回 false 可以阻止选择框的关闭
  585. * return false;
  586. */
  587. /*
  588. * 释放组件资源,释放后将将不能再操作组件
  589. * 通常情况下,不需要示放组件,new DtPicker(options) 后,可以一直使用。
  590. * 当前示例,因为内容较多,如不进行资原释放,在某些设备上会较慢。
  591. * 所以每次用完便立即调用 dispose 进行释放,下次用时再创建新实例。
  592. */
  593. _self.picker.dispose();
  594. _self.picker = null;
  595. });
  596. }
  597. }, false);
  598. });
  599. //处理view的后退与webview后退
  600. var oldBack = $.back;
  601. $.back = function() {
  602. if(viewApi.canBack()) { //如果view可以后退,则执行view的后退
  603. viewApi.back();
  604. } else { //执行webview后退
  605. oldBack();
  606. }
  607. };
  608. //监听页面切换事件方案1,通过view元素监听所有页面切换事件,目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
  609. //第一个参数为事件名称,第二个参数为事件回调,其中e.detail.page为当前页面的html对象
  610. view.addEventListener('pageBeforeShow',
  611. function(e) {
  612. console.log(e.detail.page.id + ' beforeShow');
  613. });
  614. view.addEventListener('pageShow', function(e) {
  615. console.log(e.detail.page.id + ' show');
  616. });
  617. view.addEventListener('pageBeforeBack', function(e) {
  618. console.log(e.detail.page.id + ' beforeBack');
  619. });
  620. view.addEventListener('pageBack', function(e) {
  621. console.log(e.detail.page.id + ' back');
  622. });
  623. })(mui);
  624. mui.plusReady(function() {
  625. });
  626. function choosePerson() {
  627. getGroupUser(347517153919893);
  628. viewApi.go('#personComponent');
  629. };
  630. function choosePerson2() {
  631. getGroupUser2(347517153919893);
  632. viewApi.go('#personComponent2');
  633. };
  634. var ids = [];
  635. var ids_name = [];
  636. function selectUser(user) {
  637. var remove_id = false;
  638. ids.forEach(function(item, index) {
  639. if(item == user.id) {
  640. remove_id = true;
  641. ids.splice(index, index + 1);
  642. ids_name.splice(index, index + 1);
  643. }
  644. });
  645. if(!remove_id) {
  646. ids.push(user.id);
  647. ids_name.push(user.text);
  648. }
  649. /*alert("ids:"+ids);
  650. alert("ids_name:"+ids_name);*/
  651. }
  652. var buttons = document.getElementById("button");
  653. buttons.addEventListener("tap", function() {
  654. var str_ids = "";
  655. var str_ids_name = "";
  656. ids.forEach(function(item, index) {
  657. if(index == 0) {
  658. str_ids += "" + item;
  659. } else {
  660. str_ids += "," + item;
  661. }
  662. })
  663. //alert(str_ids);
  664. ids_name.forEach(function(item, index) {
  665. if(index == 0) {
  666. str_ids_name += "" + item;
  667. } else {
  668. str_ids_name += "," + item;
  669. }
  670. })
  671. /*alert(str_ids_name);*/
  672. $("#tripmen_name").val(str_ids_name);
  673. $("#tripmen").val(str_ids);
  674. ids = [];
  675. ids_name = [];
  676. viewApi.back();
  677. });
  678. var buttons2 = document.getElementById("button2");
  679. buttons2.addEventListener("tap", function() {
  680. var str_ids2 = "";
  681. var str_ids_name2 = "";
  682. ids.forEach(function(item, index) {
  683. if(index == 0) {
  684. str_ids2 += "" + item;
  685. } else {
  686. str_ids2 += "," + item;
  687. }
  688. })
  689. //alert(str_ids);
  690. ids_name.forEach(function(item, index) {
  691. if(index == 0) {
  692. str_ids_name2 += "" + item;
  693. } else {
  694. str_ids_name2 += "," + item;
  695. }
  696. })
  697. /*alert(str_ids_name);*/
  698. $("#approveman_name").val(str_ids_name2);
  699. console.log("username"+str_ids_name2);
  700. $("#approveman").val(str_ids2);
  701. ids = [];
  702. ids_name = [];
  703. viewApi.back();
  704. });
  705. var vm = new Vue({
  706. el: '#startFlow', //bodydiv
  707. data: {
  708. flow: {},
  709. nextTmodels: [],
  710. nextHandTmodels: []
  711. },
  712. });
  713. var vm4 = new Vue({
  714. el: '#startFlow2', //bodydiv
  715. data: {
  716. flow: {},
  717. nextTmodels: [],
  718. nextHandTmodels: []
  719. },
  720. });
  721. var vm2 = new Vue({
  722. el: '#personData',
  723. data: {
  724. groupUsers: []
  725. }
  726. });
  727. var vm3 = new Vue({
  728. el: '#personData2',
  729. data: {
  730. groupUsers2: []
  731. }
  732. });
  733. mui.plusReady(function() {
  734. var url = API.API_URL();
  735. var serviceId = "oa_2018V001PHONE_triptocreate";
  736. var state = app.getState(); //获取登陆信息
  737. var staffId = state.user.useId; //获取登录id
  738. var obj = {
  739. universalid: staffId,
  740. };
  741. app.ajax(serviceId, obj, function(data) {
  742. //服务器返回响应
  743. console.log(JSON.stringify(data))
  744. var result = data.returnParams;
  745. var list = data.list;
  746. var tripid = data.tripid;
  747. $("#tripid").attr("value", tripid);
  748. var name = data.name;
  749. $("#tripmanid").attr("value", name);
  750. console.log(list.length);
  751. vmA.items = [];
  752. if(list.length > 0) {
  753. vmA.items = vmA.items.concat(list);
  754. }
  755. });
  756. })
  757. //获取人员选择列表信息
  758. function getGroupUser(groupId) {
  759. mui('#person-scroll').scroll().scrollTo(0, 0);
  760. console.log(groupId);
  761. var state = app.getState(); //获取登陆信息
  762. var staffId = state.user.useId;
  763. mui.ajax(url, {
  764. dataType: 'json', //服务器返回json格式数据
  765. type: 'post', //HTTP请求类型
  766. data: {
  767. 'serviceId': 'eu_20180308loadUserByGroup',
  768. 'params': '{staffId:"' + staffId + '",groupId:"' + groupId + '"}'
  769. },
  770. timeout: 10000, //超时时间设置为10秒;
  771. headers: {
  772. 'Accept': 'application/json'
  773. },
  774. success: function(data) {
  775. //服务器返回响应
  776. console.log("人员信息:" + JSON.stringify(data));
  777. if(data.returnCode == "1") {
  778. vm2.groupUsers = data.returnParams;
  779. } else {
  780. mui.toast("获取流程信息错误");
  781. }
  782. },
  783. error: function(xhr, type, errorThrown) {
  784. //异常处理;
  785. console.log(xhr + "========" + type + "===========" + errorThrown);
  786. }
  787. });
  788. };
  789. //获取人员选择列表信息
  790. function getGroupUser2(groupId) {
  791. mui('#person-scroll').scroll().scrollTo(0, 0);
  792. console.log(groupId);
  793. var state = app.getState(); //获取登陆信息
  794. var staffId = state.user.useId;
  795. mui.ajax(url, {
  796. dataType: 'json', //服务器返回json格式数据
  797. type: 'post', //HTTP请求类型
  798. data: {
  799. 'serviceId': 'eu_20180308loadUserByGroup',
  800. 'params': '{staffId:"' + staffId + '",groupId:"' + groupId + '"}'
  801. },
  802. timeout: 10000, //超时时间设置为10秒;
  803. headers: {
  804. 'Accept': 'application/json'
  805. },
  806. success: function(data) {
  807. //服务器返回响应
  808. console.log("人员信息:" + JSON.stringify(data));
  809. if(data.returnCode == "1") {
  810. vm3.groupUsers2 = data.returnParams;
  811. } else {
  812. mui.toast("获取流程信息错误");
  813. }
  814. },
  815. error: function(xhr, type, errorThrown) {
  816. //异常处理;
  817. console.log(xhr + "========" + type + "===========" + errorThrown);
  818. }
  819. });
  820. };
  821. //表单提交按钮
  822. var save = document.getElementById("saveBtn");
  823. save.addEventListener("click", function() {
  824. if($("#tripnum").val() == "" && !isNaN($("#tripnum").val())) {
  825. alert('出差人数不能为空且必须为数字');
  826. return false;
  827. }
  828. if($("#address").val() == "") {
  829. alert('出差地点不能为空');
  830. return false;
  831. }
  832. if($("#bengintime").html() == "开始时间") {
  833. alert('请选择出差开始时间');
  834. return false;
  835. }
  836. if($("#endtime").html() == "结束时间") {
  837. alert('请选择出差结束时间');
  838. return false;
  839. }
  840. if($("#triptotalday").val() == "") {
  841. alert('出差总天数不能为空');
  842. return false;
  843. }
  844. if($("#wheacar").val() == "" ){
  845. alert('请选择是否派车');
  846. return false;
  847. }
  848. if($("#whealltrip").val() == "-1" ){
  849. alert('请选择是否全程跟随');
  850. return false;
  851. }
  852. if($("#reason").val() == "" ){
  853. alert('出差、派车事由不能为空');
  854. return false;
  855. }
  856. if($("#tripmen").val() == "" ){
  857. alert('请选择出差人员');
  858. return false;
  859. }
  860. if($("#approveman").val() == "" ){
  861. alert('请选择下一环节审批人');
  862. return false;
  863. }
  864. //var self = plus.webview.currentWebview();
  865. var tripid=$("#tripid").val();
  866. var tripdepart=$("#tripdepart").val();
  867. var tripnum=$("#tripnum").val();
  868. var address=$("#address").val();
  869. var bengintime=$("#bengintime").html();
  870. var endtime=$("#endtime").html();
  871. var triptotalday=$("#triptotalday").val();
  872. var wheacar=$("input[name='wheacar']:checked").val();
  873. var whealltrip=$("#whealltrip").val();
  874. var reason=$("#reason").val();
  875. var tripmen=$("#tripmen").val();
  876. var approveman=$("#approveman").val();
  877. var state = app.getState(); //获取登陆信息
  878. var staffId = state.user.useId;
  879. var serviceId = "oa_2018V001PHONE_tripcreate";
  880. var obj = {
  881. tripid:tripid,
  882. tripdepart:tripdepart,
  883. tripnum:tripnum,
  884. tripmanid:staffId,
  885. address:address,
  886. bengintime:bengintime,
  887. endtime:endtime,
  888. triptotalday:triptotalday,
  889. wheacar:wheacar,
  890. whealltrip:whealltrip,
  891. reason:reason,
  892. tripmen:tripmen,
  893. approveman:approveman
  894. };
  895. app.ajax(serviceId,obj, function(data) {
  896. //服务器返回响应
  897. console.log(JSON.stringify(data));
  898. if(data.boo4 == true) {
  899. mui.toast('提交成功');
  900. location.reload();
  901. } else {
  902. alert('提交失败:' + data.msg);
  903. }
  904. });
  905. });
  906. </script>
  907. </body>
  908. </html>