商丘市柘城县——前端

user-worklist.html 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
  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. <link rel="stylesheet" href="../css/inits.css" />
  12. <style>
  13. .mui-bar-popover {
  14. width: 30%;
  15. }
  16. .mui-popover.mui-bar-popover .mui-table-view {
  17. width: 100%;
  18. }
  19. .mui-table-view .mui-table-view-cell>a:not(.mui-btn) {
  20. text-align: center;
  21. }
  22. .san {
  23. font-size: 14px;
  24. margin-right: 5px
  25. }
  26. .nav_a {
  27. border-right: 1px solid #ccc;
  28. }
  29. .go_search {
  30. background: #fff!important;
  31. border: 1px solid #ccc!important;
  32. border-radius: 17px!important;
  33. }
  34. .new_title {
  35. color: #000;
  36. font-size: 16px;
  37. }
  38. .list_new_icon {
  39. margin-right: 5px;
  40. font-size: 20px;
  41. vertical-align: middle;
  42. }
  43. .time i {
  44. font-size: 18px!important;
  45. }
  46. .finish {
  47. color: #5ccb91;
  48. }
  49. .going {
  50. color: #febd23;
  51. }
  52. .waiting {
  53. color: #fd7c78;
  54. }
  55. .advice,
  56. .time {
  57. margin-left: 15px;
  58. }
  59. .mui-search {
  60. width: 70%;
  61. }
  62. .mui-search.mui-active:before {
  63. top: 24px!important;
  64. }
  65. </style>
  66. </head>
  67. <body>
  68. <header class="mui-bar mui-bar-nav" style="padding-right: 15px;color: #fff;">
  69. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  70. <h1 class="mui-center mui-title"><span class="Totle-box">任务列表</span></h1>
  71. </header>
  72. <div class="mui-content mui-scroll-wrapper" id="pullrefresh" style="overflow: auto;">
  73. <div class="mui-scroll">
  74. <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" id="order_list">
  75. <li class="mui-table-view-cell">
  76. <div class="mui-input-row mui-search">
  77. <input type="search" class="mui-input-clear go_search" value="请输入关键字" style="margin-bottom: 0;">
  78. </div>
  79. <div class="mui-btn mui-btn-primary turnGo">高级查询</div>
  80. </li>
  81. <!--<li class="mui-table-view-cell">
  82. <div class="mui-table">
  83. <div class="mui-table-cell mui-col-xs-12">
  84. <h5 class="mui-ellipsis-2 new_title">诉求标题诉求标题诉求标题诉求标题诉求标题</h5>
  85. <p class="mui-h6 mui-ellipsis">
  86. <span class="finish state"><i class="iconfont icon-duihao list_new_icon"></i>已完成</span>
  87. <span class="time"><i class="iconfont icon-daichuli list_new_icon"></i>2017年09月09日</span>
  88. <span class="advice"><i class="iconfont icon-wuyetousu list_new_icon"></i>建议反馈</span>
  89. </p>
  90. </div>
  91. </div>
  92. </li>-->
  93. </ul>
  94. </div>
  95. <!--<div class="mui-table more">
  96. <div class="mui-table-cell">
  97. <h4 class="mui-ellipsis mores">显示更多...</h4>
  98. </div>
  99. </div>-->
  100. </div>
  101. <script src="../js/mui.min.js"></script>
  102. <script src="../js/zepto.js"></script>
  103. <script src="../js/huayi.config.js"></script>
  104. <script src="../js/huayi.http.js"></script>
  105. <script type="text/javascript">
  106. var usercode = localStorage.getItem("user"); //获取本地存储
  107. var phone=helper.request.queryString("phone");//手机号
  108. var slcode=helper.request.queryString("slcode");//受理编号
  109. var isdeal=helper.request.queryString("isdeal");//受理编号
  110. var types=helper.request.queryString("type");//受理编号
  111. var page=1;//页数
  112. var pageSize=10;//每页显示条目
  113. var total;//数据总条数
  114. var keyw;//关键字
  115. // alert(isdeal);
  116. // alert(types);
  117. Ajax();
  118. $('.go_search').on('input focus',function(){
  119. keyw=$(this).val();
  120. page=1;
  121. console.log(keyw)
  122. Ajax();
  123. })
  124. mui.init({
  125. swipeBack: false,
  126. pullRefresh: {
  127. container: '#pullrefresh',
  128. up: {
  129. contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
  130. contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
  131. callback: pullupRefresh
  132. }
  133. }
  134. });
  135. function pullupRefresh() {
  136. setTimeout(function() {
  137. mui('#pullrefresh').pullRefresh().endPullupToRefresh((page++ >= Math.ceil(total/10)));
  138. $.ajax({
  139. type:"get",
  140. url:huayi.config.callcenter_url + '/APP/GetWorkOrderList',
  141. async:true,
  142. data:{
  143. usercode:usercode,
  144. workid:slcode,
  145. // state:'工单状态',
  146. type:types,
  147. key:keyw,
  148. tel:phone,
  149. isdeal:isdeal,//-1全部0办理中1已办理
  150. // name:'客户名称',
  151. // keyid:keyw,
  152. // starttime:'开始时间',
  153. // endtime:'结束时间',
  154. page:page,
  155. pagesize:pageSize
  156. },
  157. success:function(data){
  158. // console.log(data.rows)
  159. var con=JSON.parse(data);
  160. $(con.rows).each(function(i,n){
  161. if(n.F_WorkState==0){
  162. $('<li class="mui-table-view-cell order" data-index="'+ n.F_WorkOrderId+'">'+
  163. '<div class="mui-table">'+
  164. '<div class="mui-table-cell mui-col-xs-12">'+
  165. '<h5 class="mui-ellipsis new_title" >'+n.F_ComTitle+'</h5>'+
  166. '<p class="mui-h6 mui-ellipsis">'+
  167. '<span class="waiting state">'+
  168. '<i class="iconfont icon-icon16 list_new_icon"></i>等待处理</span>'+
  169. '<span class="time">'+
  170. '<i class="iconfont icon-daichuli list_new_icon"></i>'+ n.F_CreateTime+'</span>'+
  171. '<span class="advice">'+
  172. '<i class="iconfont icon-wuyetousu list_new_icon"></i>'+n.TypeName+'</span>'+
  173. '</p>'+
  174. '</div>'+
  175. '</div>'+
  176. '</li>').appendTo('#order_list');
  177. }else if(n.F_WorkState==9){
  178. $('<li class="mui-table-view-cell order" data-index="'+ n.F_WorkOrderId+'">'+
  179. '<div class="mui-table">'+
  180. '<div class="mui-table-cell mui-col-xs-12">'+
  181. '<h5 class="mui-ellipsis new_title" >'+n.F_ComTitle+'</h5>'+
  182. '<p class="mui-h6 mui-ellipsis">'+
  183. '<span class="finish state">'+
  184. '<i class="iconfont icon-duihao list_new_icon"></i>处理完结</span>'+
  185. '<span class="time">'+
  186. '<i class="iconfont icon-daichuli list_new_icon"></i>'+ n.F_CreateTime+'</span>'+
  187. '<span class="advice">'+
  188. '<i class="iconfont icon-wuyetousu list_new_icon"></i>'+n.TypeName+'</span>'+
  189. '</p>'+
  190. '</div>'+
  191. '</div>'+
  192. '</li>').appendTo('#order_list');
  193. }else{
  194. $('<li class="mui-table-view-cell order" data-index="'+ n.F_WorkOrderId+'">'+
  195. '<div class="mui-table">'+
  196. '<div class="mui-table-cell mui-col-xs-12">'+
  197. '<h5 class="mui-ellipsis new_title" >'+n.F_ComTitle+'</h5>'+
  198. '<p class="mui-h6 mui-ellipsis">'+
  199. '<span class="going state">'+
  200. '<i class="iconfont icon-gengduo list_new_icon"></i>正在处理</span>'+
  201. '<span class="time">'+
  202. '<i class="iconfont icon-daichuli list_new_icon"></i>'+ n.F_CreateTime+'</span>'+
  203. '<span class="advice">'+
  204. '<i class="iconfont icon-wuyetousu list_new_icon"></i>'+n.TypeName+'</span>'+
  205. '</p>'+
  206. '</div>'+
  207. '</div>'+
  208. '</li>').appendTo('#order_list');
  209. }
  210. })
  211. }
  212. });
  213. }, 1000);
  214. }
  215. // 0等待处理 9已处理 1-8处理中
  216. function Ajax(){
  217. $('.order').remove();
  218. $.ajax({
  219. type:"get",
  220. url:huayi.config.callcenter_url + 'APP/GetWorkOrderList',
  221. async:true,
  222. data:{
  223. usercode:usercode,
  224. workid:slcode,
  225. // state:'工单状态',
  226. type:types,
  227. key:keyw,
  228. tel:phone,
  229. isdeal:isdeal,//-1全部0办理中1已办理
  230. // name:'客户名称',
  231. // keyid:'关键词id',
  232. // starttime:'开始时间',
  233. // endtime:'结束时间',
  234. page:page,
  235. pagesize:pageSize
  236. },
  237. success:function(data){
  238. var con=JSON.parse(data);
  239. total=con.total;
  240. $(con.rows).each(function(i,n){
  241. if(n.F_WorkState==0){
  242. $('<li class="mui-table-view-cell order" data-index="'+ n.F_WorkOrderId+'">'+
  243. '<div class="mui-table">'+
  244. '<div class="mui-table-cell mui-col-xs-12">'+
  245. '<h5 class="mui-ellipsis new_title" >'+n.F_ComTitle+'</h5>'+
  246. '<p class="mui-h6 mui-ellipsis">'+
  247. '<span class="waiting state">'+
  248. '<i class="iconfont icon-icon16 list_new_icon"></i>等待处理</span>'+
  249. '<span class="time">'+
  250. '<i class="iconfont icon-daichuli list_new_icon"></i>'+ n.F_CreateTime+'</span>'+
  251. '<span class="advice">'+
  252. '<i class="iconfont icon-wuyetousu list_new_icon"></i>'+n.TypeName+'</span>'+
  253. '</p>'+
  254. '</div>'+
  255. '</div>'+
  256. '</li>').appendTo('#order_list');
  257. }else if(n.F_WorkState==9){
  258. $('<li class="mui-table-view-cell order" data-index="'+ n.F_WorkOrderId+'">'+
  259. '<div class="mui-table">'+
  260. '<div class="mui-table-cell mui-col-xs-12">'+
  261. '<h5 class="mui-ellipsis new_title" >'+n.F_ComTitle+'</h5>'+
  262. '<p class="mui-h6 mui-ellipsis">'+
  263. '<span class="finish state">'+
  264. '<i class="iconfont icon-duihao list_new_icon"></i>处理完结</span>'+
  265. '<span class="time">'+
  266. '<i class="iconfont icon-daichuli list_new_icon"></i>'+ n.F_CreateTime+'</span>'+
  267. '<span class="advice">'+
  268. '<i class="iconfont icon-wuyetousu list_new_icon"></i>'+n.TypeName+'</span>'+
  269. '</p>'+
  270. '</div>'+
  271. '</div>'+
  272. '</li>').appendTo('#order_list');
  273. }else{
  274. $('<li class="mui-table-view-cell order" data-index="'+ n.F_WorkOrderId+'">'+
  275. '<div class="mui-table">'+
  276. '<div class="mui-table-cell mui-col-xs-12">'+
  277. '<h5 class="mui-ellipsis new_title" >'+n.F_ComTitle+'</h5>'+
  278. '<p class="mui-h6 mui-ellipsis">'+
  279. '<span class="going state">'+
  280. '<i class="iconfont icon-gengduo list_new_icon"></i>正在处理</span>'+
  281. '<span class="time">'+
  282. '<i class="iconfont icon-daichuli list_new_icon"></i>'+ n.F_CreateTime+'</span>'+
  283. '<span class="advice">'+
  284. '<i class="iconfont icon-wuyetousu list_new_icon"></i>'+n.TypeName+'</span>'+
  285. '</p>'+
  286. '</div>'+
  287. '</div>'+
  288. '</li>').appendTo('#order_list');
  289. }
  290. })
  291. }
  292. });
  293. }
  294. //记录详情
  295. $('#order_list').on('tap','.order', function() {
  296. var id=$(this).attr('data-index');
  297. var nwaiting = plus.nativeUI.showWaiting();
  298. webviewShow = plus.webview.create("User-WorkDetails.html?id="+id); //后台创建webview并打开show.html
  299. webviewShow.addEventListener("loaded", function() { //注册新webview的载入完成事件
  300. nwaiting.close(); //新webview的载入完毕后关闭等待框
  301. webviewShow.show("slide-in-right", 300); //把新webview窗体显示出来,显示动画效果为速度300毫秒的右侧移入动画
  302. }, false);
  303. });
  304. // 高级查询
  305. $('.turnGo').on('tap', function() {
  306. var id=$(this).attr('data-index');
  307. var nwaiting = plus.nativeUI.showWaiting();
  308. webviewShow = plus.webview.create("User-lookest.html"); //后台创建webview并打开show.html
  309. webviewShow.addEventListener("loaded", function() { //注册新webview的载入完成事件
  310. nwaiting.close(); //新webview的载入完毕后关闭等待框
  311. webviewShow.show("slide-in-right", 300); //把新webview窗体显示出来,显示动画效果为速度300毫秒的右侧移入动画
  312. }, false);
  313. });
  314. </script>
  315. </body>
  316. </html>