PingAnYeXianSZCG_Web 前端代码

WorkWechart.html 4.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  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.0">
  7. <script src="../Script/Common/huayi.load.js"></script>
  8. <script src="../Script/Common/huayi.config.js"></script>
  9. <link href="../css/WorkOrder/Search.css" rel="stylesheet">
  10. <script src="../css/laydate/laydate.js"></script>
  11. <link href="../css/init.css" rel="stylesheet" />
  12. <style>
  13. table td {
  14. word-break: break-all;
  15. word-wrap: break-word;
  16. }
  17. .laydate-icon {
  18. height: 27px;
  19. border: none;
  20. width: 115px;
  21. }
  22. </style>
  23. </head>
  24. <body class="gray-bg">
  25. <div class="wrapper wrapper-content animated fadeInRight">
  26. <div class="daoHang clearfix">
  27. <div class="dhLeft">
  28. <sapn><i class="syIcon"></i>位置:
  29. <a href="javaScript:;" id="ReIndex">首页</a>&gt;
  30. <a href="javaScript:;">工单管理</a>&gt;
  31. <a href="" style="color: #000;">微信工单列表</a>
  32. </sapn>
  33. </div>
  34. </div>
  35. <div class="th-box">
  36. <div class="th-bar">
  37. <div class="seach-box fr">
  38. <ul>
  39. <li>客户姓名:<input class="photo x-color inputs" type="text" id="Cname" /></li>
  40. <li>开始时间:<input class="photo x-color inputs laydate-icon" type="text" id="STime" /></li>
  41. <li>结束时间:<input class="photo x-color inputs laydate-icon" type="text" id="ETime" /></li>
  42. <li>工单内容:<input class="photo x-color inputs" type="text" id="Ccont" /></li>
  43. <li>电话:<input class="photo x-color inputs" type="text" id="Ctel" /></li>
  44. <li>
  45. <a class="sc_btn btns ss">搜索</a>
  46. </li>
  47. </ul>
  48. </div>
  49. </div>
  50. </div>
  51. <div style="width: 100%;padding: 10px;">
  52. <table id="workorderlist" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true">
  53. <thead>
  54. <tr>
  55. <th data-field="WorkOrderID" data-align="center">工单编号</th>
  56. <th data-field="Type" data-align="center">工单类型</th>
  57. <th data-field="State" data-align="center">工单状态</th>
  58. <th data-field="Customer" data-align="center">客户</th>
  59. <th data-field="CustomerTel" data-align="center">客户电话</th>
  60. <th data-field="WorkOrderID" data-formatter="Appoint" data-align="center">操作</th>
  61. </tr>
  62. </thead>
  63. </table>
  64. </div>
  65. <!--查看详情-->
  66. </div>
  67. <script>
  68. $(document).ready(function() {
  69. //时间
  70. laydate.skin('molv');
  71. //留言时间
  72. laydate({
  73. elem: '#STime',
  74. event: 'focus',
  75. festival: true, //显示节日
  76. });
  77. //处理时间
  78. laydate({
  79. elem: '#ETime',
  80. festival: true, //显示节日
  81. event: 'focus'
  82. });
  83. //搜索
  84. $(".sc_btn ").click(function() {
  85. initTable();
  86. })
  87. initTable();
  88. });
  89. function initTable() {
  90. //先销毁表格
  91. $('#workorderlist').bootstrapTable('destroy');
  92. //初始化表格,动态从服务器加载数据
  93. $("#workorderlist").bootstrapTable({
  94. method: "get", //使用get请求到服务器获取数据
  95. url: huayi.config.callcenter_url + "WorkOrder/GetAMList", //获取数据的Servlet地址
  96. striped: true, //表格显示条纹
  97. pagination: true, //启动分页
  98. pageSize: 10, //每页显示的记录数
  99. pageNumber: 1, //当前第几页
  100. pageList: [10, 20, 50, 100], //记录数可选列表
  101. search: false, //是否启用查询
  102. showColumns: false, //显示下拉框勾选要显示的列
  103. showRefresh: false, //显示刷新按钮
  104. sidePagination: "server", //表示服务端请求
  105. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  106. //设置为limit可以获取limit, offset, search, sort, order
  107. queryParamsType: "undefined",
  108. queryParams: function queryParams(params) { //设置查询参数
  109. var param = {
  110. page: params.pageNumber,
  111. pagesize: params.pageSize,
  112. token: $.cookie("token")
  113. };
  114. return param;
  115. },
  116. onLoadSuccess: function() { //加载成功时执行
  117. //layer.msg("加载成功");
  118. },
  119. onLoadError: function() { //加载失败时执行
  120. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  121. }
  122. });
  123. }
  124. //页面跳转
  125. //音频
  126. function Appoint(val) {
  127. return '<div><a onclick="Moneny(' + val + ')">奖励<a></div>'
  128. // layer.open({
  129. // type: 1,
  130. // content:"www.baidu.com", //iframe的url,no代表不显示滚动条
  131. // title: '红包奖励',
  132. // area: ['45%', '60%'], //宽高
  133. // })
  134. }
  135. //页面跳转
  136. function Moneny(str) {
  137. layer.open({
  138. type: 2,
  139. content: "Workreward.html", //iframe的url,no代表不显示滚动条
  140. title: '红包奖励',
  141. area: ['30%', '40%'], //宽高
  142. })
  143. }
  144. </script>
  145. </body>
  146. </html>