No Description

Setting_manage.html 6.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  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. <title></title>
  7. <link href="../css/mui.min.css" rel="stylesheet" />
  8. <link href="../css/mui.indexedlist.css" rel="stylesheet" />
  9. <link href="../css/index.css" />
  10. <style>
  11. html,
  12. body {
  13. height: 100%;
  14. overflow: hidden;
  15. }
  16. .oa-contact-cell.mui-table .mui-table-cell {
  17. padding: 11px 0;
  18. vertical-align: middle;
  19. }
  20. .oa-contact-cell {
  21. position: relative;
  22. margin: -11px 0;
  23. }
  24. .oa-contact-avatar {
  25. width: 50px;
  26. }
  27. .oa-contact-avatar img {
  28. border-radius: 50%;
  29. width: 30px;
  30. height: 30px;
  31. }
  32. .oa-contact-content {
  33. width: 100%;
  34. }
  35. .oa-contact-name {
  36. margin-right: 10px;
  37. }
  38. .go_search {
  39. background: #fff!important;
  40. border: 1px solid #ccc!important;
  41. border-radius: 17px!important;
  42. }
  43. a {
  44. color: #000;
  45. }
  46. .mui-search.mui-active:before {
  47. top: 25px;
  48. }
  49. .oa-contact-position{
  50. margin-left: 15px;
  51. }
  52. .mui-icon-tiajia{
  53. position: absolute;
  54. right: 15px;
  55. top: 10px;
  56. width: 20px;
  57. height: 20px;
  58. }
  59. .mui-icon-tiajia img{
  60. width: 100%;
  61. }
  62. </style>
  63. </head>
  64. <body>
  65. <header class="mui-bar mui-bar-nav" style="background: #cd0000 !important;">
  66. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
  67. <h1 id="title" class="mui-title">用户管理</h1>
  68. <a class=" mui-icon-tiajia mui-pull-right tjyh" style="color: #fff;">
  69. <img src="../img/yonhu.png">
  70. </a>
  71. </header>
  72. <div class="mui-content">
  73. <div id='list' class="mui-indexed-list" style="height: 100%;">
  74. <div class="mui-indexed-list-search mui-input-row mui-search">
  75. <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索">
  76. </div>
  77. <div class="mui-indexed-list-bar">
  78. <a>A</a>
  79. <a>B</a>
  80. <a>C</a>
  81. <a>D</a>
  82. <a>E</a>
  83. <a>F</a>
  84. <a>G</a>
  85. <a>H</a>
  86. <a>I</a>
  87. <a>J</a>
  88. <a>K</a>
  89. <a>L</a>
  90. <a>M</a>
  91. <a>N</a>
  92. <a>O</a>
  93. <a>P</a>
  94. <a>Q</a>
  95. <a>R</a>
  96. <a>S</a>
  97. <a>T</a>
  98. <a>U</a>
  99. <a>V</a>
  100. <a>W</a>
  101. <a>X</a>
  102. <a>Y</a>
  103. <a>Z</a>
  104. </div>
  105. <div class="mui-indexed-list-alert"></div>
  106. <div class="mui-indexed-list-inner">
  107. <div class="mui-indexed-list-empty-alert">没有数据</div>
  108. <ul class="mui-table-view TX" style="padding-bottom: 50px;">
  109. </ul>
  110. </div>
  111. </div>
  112. </div>
  113. <script src="../js/mui.min.js"></script>
  114. <script src="../js/mui.indexedlist.js"></script>
  115. <script src="../js/zepto.js"></script>
  116. <script src="../js/huayi.config.js"></script>
  117. <script type="text/javascript" charset="utf-8">
  118. mui.init();
  119. mui.ready(function() {
  120. var keyw = '';
  121. mui('.mui-scroll-wrapper').scroll({
  122. deceleration: 0.0005
  123. }); //设置减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
  124. Ajax();
  125. function Ajax() {
  126. $(".TX").empty();
  127. $.ajax({
  128. data: {
  129. pageindex: 1,
  130. pagesize: 9999,
  131. token: localStorage.getItem('token')
  132. },
  133. url: huayi.config.callcenter_url + '/UserAccount/GetMpdelList',
  134. dataType: 'json', //服务器返回json格式数据
  135. type: 'get', //HTTP请求类型
  136. timeout: 10000, //超时时间设置为10秒;
  137. headers: {
  138. 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
  139. },
  140. success: function(data) {
  141. if(data.state = "success") {
  142. var html;
  143. var F_Mobile
  144. //alert(JSON.stringify(data.rows))
  145. //alert(JSON.stringify(data.total))
  146. if (data.rows.length>0) {
  147. $(data.rows).each(function(i, n) {
  148. if (n.F_Mobile) {
  149. F_Mobile=n.F_Mobile
  150. }else{
  151. F_Mobile="暂无"
  152. }
  153. html= '<li data-group="'+n.code+'" data-value="'+n.NameOneCode+'" data-tags="'+n.NameOneCode+'" class="mui-table-view-cell mui-indexed-list-item">'+
  154. '<div class="mui-slider-cell">'+
  155. '<a class="xg_manage" data-name="'+n.F_UserCode+'" data-index="'+n.F_UserId+'">'+
  156. '<div class="oa-contact-cell mui-table">'+
  157. '<div class="oa-contact-content mui-table-cell">'+
  158. '<h4 class="oa-contact-name size-14">'+n.F_UserName+
  159. '<span class="oa-contact-position mui-h6">工号:'+n.F_WorkNumber+'</span></h4>'+
  160. '<h4 class="mui-h6"><span>'+n.F_DeptName+"-"+n.F_RoleName+'</span></h4>'+
  161. '<h4 class="oa-contact-email mui-h5">手机号:'+F_Mobile+'</h4>'+
  162. '</div>'+
  163. '</div>'+
  164. '</a>'+
  165. '</div>'+
  166. '</li>';
  167. $(html).appendTo($(".TX"));
  168. })
  169. }
  170. }
  171. },
  172. error: function(xhr, type, errorThrown) {
  173. //异常处理;
  174. mui.alert("");
  175. }
  176. });
  177. }
  178. setTimeout(indexAjax,5000);
  179. function indexAjax () {
  180. var list = document.getElementById('list')
  181. //calc hieght
  182. list.style.height = (document.body.offsetHeight) + 'px';
  183. //create
  184. window.indexedList = new mui.IndexedList(list);
  185. }
  186. $('.TX').on('tap', '.xg_manage', function() {
  187. var id = $(this).attr('data-index');
  188. var name = $(this).attr('data-name');
  189. mui.openWindow({
  190. id: 'xg_manage',
  191. url: 'xg_manage.html',
  192. createNew: true,
  193. show: {
  194. aniShow: 'pop-in'
  195. },
  196. styles: {
  197. popGesture: 'hide'
  198. },
  199. waiting: {
  200. autoShow: true
  201. },
  202. extras: {
  203. name: name,
  204. nameid: id,
  205. token: localStorage.getItem('token')
  206. }
  207. });
  208. })
  209. $('.tjyh').on('tap', function() {
  210. mui.openWindow({
  211. id: 'tj_manage',
  212. url: 'tj_manage.html',
  213. createNew: true,
  214. show: {
  215. aniShow: 'pop-in'
  216. },
  217. styles: {
  218. popGesture: 'hide'
  219. },
  220. waiting: {
  221. autoShow: false
  222. },
  223. extras: {
  224. token: localStorage.getItem('token')
  225. }
  226. });
  227. })
  228. });
  229. </script>
  230. </body>
  231. </html>