wordorder_win.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  8. <style type="text/css">
  9. #classify-list {
  10. width: 5.4rem;
  11. height: 100%;
  12. background-color: #ffffff;
  13. overflow-x: hidden;
  14. }
  15. #classify-list .aui-list {
  16. overflow-y: scroll;
  17. }
  18. .aui-list .aui-list-item-title {
  19. font-size: 0.7rem;
  20. overflow: hidden;
  21. text-overflow: ellipsis;
  22. white-space: nowrap;
  23. }
  24. .active{
  25. background: #f5f5f5;
  26. }
  27. .active .aui-list-item-title{
  28. color: #009fe8;
  29. }
  30. .active:after{
  31. content: "";
  32. position: absolute;
  33. top: 0;
  34. left: 0;
  35. width: 3px;
  36. height: 100%;
  37. background: #009fe8;
  38. }
  39. .aui-list.aui-list-noborder .aui-list-item:last-child{
  40. background-size: 100% 1px;
  41. background-image: linear-gradient(0,#dddddd,#dddddd 50%,transparent 50%);
  42. background-image: -webkit-linear-gradient(90deg,#dddddd,#dddddd 50%,transparent 50%);
  43. }
  44. .aui-bar-nav{
  45. height: 50px;
  46. line-height: 50px;
  47. }
  48. .aui-bar-nav .aui-btn{
  49. height: 50px;
  50. padding-left: 23px;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <header class="aui-bar aui-bar-nav" id="aui-header">
  56. <a class="aui-btn aui-pull-left" onclick="closeWin()">
  57. <span class="aui-iconfont aui-icon-left"></span>
  58. </a>
  59. <div class="aui-title">审批列表</div>
  60. </header>
  61. <section class="aui-content" id="classify-list">
  62. <ul class="aui-list aui-list-noborder" id="wordOrderList_id">
  63. </ul>
  64. </section>
  65. </body>
  66. <script type="text/template" id="templateWord_List">
  67. {{~it:value:index}}
  68. <li class="aui-list-item {{=index == 0?'active':''}}" onclick="randomSwitchBtn(this,'{{=value.id}}')">
  69. <div class="aui-list-item-inner">
  70. <div class="aui-list-item-title">{{=value.title}}</div>
  71. </div>
  72. </li>
  73. {{~}}
  74. </script>
  75. <script type="text/javascript" src="../../script/api.js"></script>
  76. <script type="text/javascript" src="../../script/doT.min.js"></script>
  77. <script type="text/javascript" src="../../script/config.js"></script>
  78. <script type="text/javascript">
  79. var token,headerPos,body_h,classifyListH;
  80. var toast = new auiToast();
  81. apiready = function(){
  82. var header = $api.byId('aui-header');
  83. $api.fixStatusBar(header);
  84. headerPos = $api.offset(header);
  85. body_h = $api.offset($api.dom('body')).h;
  86. classifyListH = $api.offset($api.byId('classify-list')).w;
  87. document.getElementById("classify-list").style.height = api.winHeight-headerPos.h+"px";
  88. // 工单列表
  89. var info = $api.getStorage('data');
  90. token = JSON.parse(info).data.access_token;
  91. var headers = {
  92. "Authorization": "Bearer " + token
  93. };
  94. wordOrderList(headers);
  95. };
  96. // 关闭
  97. function closeWin(){
  98. api.closeWin();
  99. }
  100. // 随意切换分类
  101. function randomSwitchBtn( tag ,id) {
  102. seeApplyList(token,id)
  103. if( tag == $api.dom('.aui-list li.active') )return;
  104. var eFootLis = $api.domAll('.aui-list li');
  105. index = 0;
  106. for (var i = 0,len = eFootLis.length; i < len; i++) {
  107. if( tag == eFootLis[i] ){
  108. index = i;
  109. }else{
  110. $api.removeCls(eFootLis[i], 'active');
  111. }
  112. }
  113. $api.addCls( eFootLis[index], 'active');
  114. }
  115. // 工单列表
  116. function wordOrderList(header) {
  117. $http. fnReuestData(UrlRouter.wordOrderList,header,'get','',function (ret,err) {
  118. if (ret.code === 0) {
  119. toast.hide();
  120. $apis.html(wordOrderList_id,'#templateWord_List',ret.data);
  121. firstApplylist(token,ret.data[0].id);
  122. }
  123. })
  124. }
  125. function firstApplylist(token, id) {
  126. api.openFrame({
  127. name: 'worderorder_frm',
  128. url: 'wordorder_frm.html',
  129. bounces: true,
  130. rect: {
  131. x: classifyListH+5,
  132. y: headerPos.h+1,
  133. w: api.winWidth-classifyListH-5,
  134. h: 'auto'
  135. },
  136. pageParam:{
  137. token:token,
  138. id:id
  139. }
  140. })
  141. }
  142. // 查看可申请工单列表
  143. function seeApplyList(tokens,id) {
  144. api.execScript({
  145. name: 'wordorder_win',
  146. frameName:'worderorder_frm',
  147. script : 'applyList("'+tokens+'","'+id+'");'
  148. })
  149. }
  150. </script>
  151. </html>