PingAnYeXianSZCG_Web 前端代码

WorkCL.html 8.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  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. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <link href="../css/mui.min.css" rel="stylesheet" />
  10. <link rel="stylesheet" href="../css/iconfont.css" />
  11. <style>
  12. .mui-bar-popover {
  13. width: 30%;
  14. }
  15. .mui-popover.mui-bar-popover .mui-table-view {
  16. width: 100%;
  17. }
  18. .san {
  19. font-size: 14px;
  20. margin-right: 5px
  21. }
  22. .nav_a {
  23. border-right: 1px solid #ccc;
  24. }
  25. .time {
  26. text-align: right;
  27. }
  28. .mui-table-view .mui-media-object {
  29. /* line-height: 71px; */
  30. max-width: 80px;
  31. height: 80px;
  32. }
  33. input[type=search] {
  34. border: 1px solid #ccc;
  35. border-radius: 18px;
  36. background-color: rgb(255, 255, 255);
  37. }
  38. .Success {
  39. color: #4cd964;
  40. }
  41. .Finish {
  42. color: #ccc;
  43. }
  44. .mui-search.mui-active:before {
  45. font-size: 20px;
  46. right: auto;
  47. left: 5px;
  48. display: block;
  49. margin-right: 0;
  50. top: 25px;
  51. }
  52. .mui-icon-clear {
  53. right: 80px!important;
  54. }
  55. .mui-search {
  56. margin-right: 55px;
  57. }
  58. .success {
  59. color: #ccc;
  60. }
  61. .wait {
  62. color: #2AC845;
  63. }
  64. </style>
  65. <script src="../js/zepto.js"></script>
  66. <script src="../Script/Common/huayi.http.js"></script>
  67. <script type="text/javascript">
  68. var usercode = helper.cookies.get("usercode");
  69. if(!usercode) {
  70. window.location.href = "../login.html";
  71. }
  72. </script>
  73. </head>
  74. <body>
  75. <div class="mui-content mui-content mui-scroll-wrapper" id="pullrefresh">
  76. <div class="mui-scroll">
  77. <ul class="mui-table-view" id="OA_task_2">
  78. <li class="mui-table-view-cell">
  79. <div class="mui-input-row mui-search">
  80. <input type="search" class="mui-input-clear go_search" placeholder="请输入关键字" style="margin-bottom: 0;">
  81. </div>
  82. <div class="mui-btn mui-btn-primary turnGo">更多</div>
  83. </li>
  84. </ul>
  85. </div>
  86. </div>
  87. <script src="../js/mui.min.js"></script>
  88. <script src="../Script/Common/huayi.config.js"></script>
  89. <script>
  90. var page = 1; //页数
  91. var pageSize = 10; //每页显示条目
  92. var total; //数据总条数
  93. var Type_ = 1;
  94. var state = helper.request.queryString("state"); //手机号
  95. var name = helper.request.queryString("name"); //手机号
  96. var tel = helper.request.queryString("tel"); //受理编号
  97. var starttime = helper.request.queryString("starttime"); //受理编号
  98. var endtime = helper.request.queryString("endtime"); //受理编号
  99. var workid = helper.request.queryString("workid"); //受理编号
  100. var source = helper.request.queryString("source"); //受理编号
  101. var infotype = helper.request.queryString("infotype"); //受理编号
  102. mui.init({
  103. swipeBack: false,
  104. pullRefresh: {
  105. container: '#pullrefresh',
  106. up: {
  107. contentrefresh: "正在加载...", //可选,正在加载状态时,上拉加载控件上显示的标题内容
  108. contentnomore: '没有更多数据了', //可选,请求完毕若没有更多数据时显示的提醒内容;
  109. callback: pullupRefresh
  110. }
  111. }
  112. });
  113. //查找
  114. $('.go_search').on('input focus', function() {
  115. keyw = $(this).val();
  116. page = 1;
  117. Ajax(keyw);
  118. })
  119. Ajax();
  120. //下拉刷新
  121. function pullupRefresh(keyw) {
  122. setTimeout(function() {
  123. mui('#pullrefresh').pullRefresh().endPullupToRefresh((page++ >= Math.ceil(total / 10)));
  124. $.ajax({
  125. url: huayi.config.callcenter_url + 'WxLogin/GetList',
  126. data: {
  127. openid: helper.cookies.get("openid"), //微信openid
  128. key: keyw,
  129. page: page,
  130. state: state,
  131. name: name, ///联系人
  132. tel: tel, //联系电话
  133. starttime: starttime, //
  134. endtime: endtime, //
  135. workid: workid, //工单编号
  136. source: source, //工单来源
  137. infotype: infotype, //信息分类
  138. pagesize: pageSize
  139. },
  140. async: true,
  141. dataType: 'json',
  142. type: 'get', //HTTP请求类型
  143. success: function(data) {
  144. total = data.total;
  145. $(data.rows).each(function(i, n) {
  146. var States = n.State;
  147. var html = ''
  148. var Html = '';
  149. if(States < 2) {
  150. Html = '<div class = "mui-slider-right mui-disabled" >' +
  151. '<a class = "mui-btn mui-btn-grey" > 处理 </a></div >' +
  152. '<div class = "mui-slider-handle" >'
  153. html = '<h5 class="wait" style="text-align:right;"><span>待处理</span></h5>'
  154. } else {
  155. html = '<h5 class="success" style="text-align:right;"><span>已完成</span></h5>'
  156. }
  157. $('<li class="mui-table-view-cell order" data-index="' + n.ID + '">' +
  158. '' + Html + '' +
  159. '<div class = "mui-table-cell mui-col-xs-10" > ' +
  160. '<h4 class = "mui-ellipsis" > ' + n.Detail + ' </h4> ' +
  161. '<h5 > <span>联系人:' + n.Customer + '</span>' +
  162. '</h5>' +
  163. '</div >' +
  164. '</div> ' +
  165. '' + html + '' +
  166. '</li > ').appendTo('#OA_task_2 ');
  167. })
  168. //工单跳转
  169. $('.order').on('tap', function() {
  170. var index = $(this).attr('data-index');
  171. window.location.href = "Schedule.html?id=" + index;
  172. });
  173. },
  174. error: function(xhr, type, errorThrown) {
  175. //异常处理;
  176. }
  177. })
  178. }, 1000);
  179. }
  180. //获取数据
  181. function Ajax(keyw) {
  182. $(".order").remove();
  183. $.ajax({
  184. url: huayi.config.callcenter_url + 'WxLogin/GetList',
  185. data: {
  186. openid: helper.cookies.get("openid"), //微信openid ,
  187. key: keyw,
  188. page: page,
  189. state: state,
  190. name: name, ///联系人
  191. tel: tel, //联系电话
  192. starttime: starttime, //
  193. endtime: endtime, //
  194. workid: workid, //工单编号
  195. source: source, //工单来源
  196. infotype: infotype, //信息分类
  197. pagesize: pageSize
  198. },
  199. async: true,
  200. dataType: 'json',
  201. type: 'get', //HTTP请求类型
  202. success: function(data) {
  203. total = data.total;
  204. $(data.rows).each(function(i, n) {
  205. var States = n.State;
  206. console.log(States);
  207. var html = ''
  208. var Html = '';
  209. if(States < 2) {
  210. Html = '<div class = "mui-slider-right mui-disabled" >' +
  211. '<a class = "mui-btn mui-btn-grey" > 处理 </a></div >' +
  212. '<div class = "mui-slider-handle" >'
  213. html = '<h5 class="wait" style="text-align:right;"><span>待处理</span></h5>'
  214. } else {
  215. html = '<h5 class="success" style="text-align:right;"><span>已完成</span></h5>'
  216. }
  217. $('<li class="mui-table-view-cell order" data-index="' + n.ID + '">' +
  218. '' + Html + '' +
  219. '<div class = "mui-table-cell mui-col-xs-10" > ' +
  220. '<h4 class = "mui-ellipsis" > ' + n.Detail + ' </h4> ' +
  221. '<h5 > <span>联系人:' + n.Customer + '</span>' +
  222. '</h5>' +
  223. '</div >' +
  224. '</div> ' +
  225. '' + html + '' +
  226. '</li > ').appendTo('#OA_task_2 ');
  227. })
  228. //工单跳转
  229. $('.order').on('tap', function() {
  230. var index = $(this).attr('data-index');
  231. window.location.href = "Schedule.html?id=" + index;
  232. });
  233. },
  234. error: function(xhr, type, errorThrown) {
  235. //异常处理;
  236. }
  237. })
  238. }
  239. (function($) {
  240. var btnArray = ['确认', '取消'];
  241. //第二个demo,向左拖拽后显示操作图标,释放后自动触发的业务逻辑
  242. $('#OA_task_2').on('slideleft', '.mui-table-view-cell', function(event) {
  243. var elem = this;
  244. var Workindex = elem.getAttribute("data-index");
  245. mui.confirm('确认要处理此工单?', '提示', btnArray, function(e) {
  246. if(e.index == 0) {
  247. window.location.href = "Workdeal.html?id=" + Workindex;
  248. } else {
  249. setTimeout(function() {
  250. $.swipeoutClose(elem);
  251. }, 0);
  252. }
  253. });
  254. });
  255. })(mui);
  256. $('.turnGo').on('tap', function() {
  257. window.location.href = "WorkSearch.html?Tye=" + Type_;
  258. })
  259. </script>
  260. </body>
  261. </html>