Geen omschrijving

notifiedList.html 22KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>已通报列表</title>
  6. <script src="../Script/Common/huayi.load.js"></script>
  7. <script src="../Script/Common/huayi.config.js"></script>
  8. <link rel="stylesheet" href="../css/bootstrap-select.css">
  9. <link rel="stylesheet" href="../js/zTree/zTreeStyle.css" />
  10. <link rel="stylesheet" href="../css/init.css" />
  11. <link rel="stylesheet" href="../js/layui/css/layui.css">
  12. <style>
  13. #sqzx th {
  14. /*padding: 5px 8px 5px 0;*/
  15. text-align: right;
  16. }
  17. .select {
  18. width: 150px;
  19. background-color: #FFF;
  20. background-image: none;
  21. border: 1px solid #ccc;
  22. border-radius: 1px;
  23. color: inherit;
  24. padding: 6px 12px;
  25. }
  26. #sex {
  27. background-color: #FFF;
  28. background-image: none;
  29. border: 1px solid #ccc;
  30. border-radius: 1px;
  31. color: inherit;
  32. padding: 6px 12px;
  33. }
  34. input {
  35. background-color: #FFF;
  36. background-image: none;
  37. border: 1px solid #ccc;
  38. border-radius: 1px;
  39. color: inherit;
  40. padding: 6px 12px;
  41. }
  42. #sqzx td {
  43. padding: 6px 0 5px 10px;
  44. }
  45. .lxr ul li {
  46. float: left;
  47. list-style: none;
  48. width: 30%;
  49. margin-bottom: 5px;
  50. padding-top: 10px;
  51. }
  52. .clearFix:after {
  53. content: "";
  54. display: block;
  55. clear: both;
  56. }
  57. .form-group {
  58. padding-left: 40px;
  59. margin-bottom: 0;
  60. }
  61. textarea {
  62. height: 70px;
  63. border: 1px solid #ccc;
  64. border-radius: 1px;
  65. width: 50%;
  66. resize: none;
  67. }
  68. .textarea_box {
  69. margin-top: 10px;
  70. }
  71. .box_content {
  72. border-bottom: 1px solid #ccc;
  73. }
  74. .tj_content {
  75. border: 1px solid #e6e6e6;
  76. border-radius: 5px;
  77. }
  78. .t-shade {
  79. position: fixed;
  80. top: 0;
  81. left: 0;
  82. width: 100%;
  83. background: rgba(0, 0, 0, 0.48);
  84. z-index: 10004;
  85. display: none;
  86. }
  87. .lyxz .shade_k {
  88. z-index: 10005;
  89. width: 40%;
  90. left: 30%;
  91. margin: 20% auto;
  92. position: absolute;
  93. background-color: #fff;
  94. box-shadow: 1px 1px 50px rgba(0, 0, 0, .3);
  95. border-radius: 5px;
  96. }
  97. .shade_title {
  98. padding: 0 80px 0 20px;
  99. height: 42px;
  100. line-height: 42px;
  101. border-bottom: 1px solid #eee;
  102. font-size: 16px;
  103. color: #FFFFFF;
  104. overflow: hidden;
  105. background-color: #00a1cb;
  106. border-radius: 2px 2px 0 0;
  107. position: relative;
  108. border-top-left-radius: 5px;
  109. border-top-right-radius: 5px;
  110. }
  111. .cx {
  112. display: block;
  113. }
  114. .setwin {
  115. position: absolute;
  116. right: 15px;
  117. top: 5px;
  118. font-size: 0;
  119. line-height: initial;
  120. }
  121. .setwin a {
  122. position: relative;
  123. width: 16px;
  124. height: 16px;
  125. font-size: 20px;
  126. color: #fff;
  127. }
  128. .xg i {
  129. font-size: 16px;
  130. }
  131. .hidens {
  132. display: none;
  133. }
  134. #sqzx .Seach {
  135. margin-left: 0;
  136. width: 60px;
  137. font-size: 13px;
  138. display: inline-block;
  139. text-align: center;
  140. }
  141. </style>
  142. </head>
  143. <body class="gray-bg">
  144. <div class="wrapper wrapper-content animated fadeInRight">
  145. <div class="daoHang clearfix">
  146. <div class="dhLeft">
  147. <sapn>
  148. <i class="syIcon"></i>位置:
  149. <a href="javaScript:;" id="ReIndex">首页</a>&gt;
  150. <a href="javaScript:;">办理单位</a>&gt;
  151. <a href="" class="nowPosition">已通报列表</a>
  152. </sapn>
  153. </div>
  154. <div class="dhRight">
  155. <a href="" title="刷新"><i class="fa fa-refresh"></i></a>
  156. </div>
  157. </div>
  158. <div style="padding: 10px;" class="tj_content clearFix">
  159. <div style="padding: 10px;" class="tj_content clearFix">
  160. <div>
  161. <span>【搜索信息】</span>
  162. <div class="box_content">
  163. <table id="sqzx" style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
  164. <tr>
  165. <th>关键字:</th>
  166. <td>
  167. <input type="text" placeholder="输入关键字" id="key" class="Min-width" />
  168. </td>
  169. <th>事项编号:</th>
  170. <td>
  171. <input type="text" placeholder="输入工单号" id="wids" class="Min-width" />
  172. </td>
  173. <th>时间:</th>
  174. <td>
  175. <input type="text" id="startTime" class="laydate-icon Min-width"
  176. style="height: 32px;" />&nbsp;——&nbsp;<input type="text" id="endTime"
  177. class="laydate-icon Min-width" style="height: 32px;" />
  178. </td>
  179. <th>区域:</th>
  180. <td>
  181. <select name="" id="sourceAreas" class="select">
  182. </select>
  183. </td>
  184. </tr>
  185. <tr>
  186. <th>类型:</th>
  187. <td>
  188. <select class="select_" id="type">
  189. </select>
  190. </td>
  191. <th>工单来源:</th>
  192. <td>
  193. <select class="select_" id="source">
  194. </select>
  195. </td>
  196. <!-- <th>主题词:</th>
  197. <td>
  198. <select id="keyid" name="" class="select"></select>
  199. </td> -->
  200. <th>来电号码:</th>
  201. <td>
  202. <input type="text" id="tel" class="Min-width" />
  203. </td>
  204. </tr>
  205. <tr>
  206. <th>坐席:</th>
  207. <td>
  208. <select id="ZX" name="select" class="selectpicker show-tick form-control" multiple
  209. data-live-search="true">
  210. <option value="">请选择坐席</option>
  211. </select>
  212. </td>
  213. <th>审核员:</th>
  214. <td>
  215. <select id="yardman" name="select" class="selectpicker show-tick form-control"
  216. multiple data-live-search="true">
  217. <option value="">请选择调度员</option>
  218. </select>
  219. </td>
  220. <th>来电人:</th>
  221. <td colspan="3">
  222. <input type="text" id="name" class="Min-width" />
  223. </td>
  224. <td>
  225. <botton class="btns Seach">搜索</botton>
  226. </td>
  227. </tr>
  228. </table>
  229. </div>
  230. </div>
  231. <div>
  232. <div style="width: 100%;padding: 10px;">
  233. <table id="orderlist" data-row-style="rowStyle" data-query-params="queryParams"
  234. data-pagination="true">
  235. <thead>
  236. <tr>
  237. <th data-formatter="serialNumber" data-align="center">
  238. 序号
  239. </th>
  240. <th data-field="F_WorkOrderId" data-formatter="View" data-align="center">工单单号</th>
  241. <th data-field="F_ComTitle" data-formatter="GetCont" data-align="center">诉求标题</th>
  242. <th data-field="DeptName" data-align="center">承办单位</th>
  243. <!-- <th data-field="OtherDeptName" data-align="center">协办单位</th> -->
  244. <th data-field="NoticeDeptName" data-align="center">通报单位</th>
  245. <th data-field="NoticeReson" data-formatter="GetCont" data-align="center">通报原因</th>
  246. <!--<th data-field="FilePath" data-formatter="setCode" data-align="center">录音</th>-->
  247. <th data-formatter="Dispose" data-align="center" data-width="10%">操作</th>
  248. </tr>
  249. </thead>
  250. <tbody class="list"></tbody>
  251. </table>
  252. </div>
  253. </div>
  254. </div>
  255. </div>
  256. <!--下载框-->
  257. <div class="t-shade lyxz">
  258. <div class="shade_k">
  259. <div class="shade_title">
  260. <span>录音播放与下载<srong class="cknum"></srong></span>
  261. <span class="setwin gbly"><a>x</a></span>
  262. </div>
  263. <div class="shade_content">
  264. <div class="Ly_box audiojs">
  265. </div>
  266. </div>
  267. </div>
  268. </div>
  269. </div>
  270. <script src="../js/layui/layui.js"></script>
  271. <script src="../js/bootstrap-select.js"></script>
  272. <script src="../css/laydate/laydate.js"></script>
  273. <script src="../My97DatePicker/WdatePicker.js"></script>
  274. <script src="../js/zTree/jquery.ztree.core.js"></script>
  275. <!--<script src="../js/search/screen.js"></script>-->
  276. <script src="../js/WorkOrder/WorkOrderList.js"></script>
  277. <script>
  278. $(document).ready(function () {
  279. load();
  280. LY($("#source")); //工单来源
  281. LB($("#type")); //工单类别
  282. ZT($("#keyid")); //主题
  283. ZX($("#ZX"));
  284. yardman($("#yardman"));
  285. helper.getDropList.getOrderAreas($('#sourceAreas'));
  286. laydate.skin('blue');
  287. laydate({
  288. elem: '#startTime',
  289. event: 'focus'
  290. });
  291. laydate({
  292. elem: '#endTime',
  293. event: 'focus'
  294. });
  295. $(".Seach").click(function () {
  296. load();
  297. });
  298. $("#orderlist").on("click-row.bs.table", function (e, row, ele) {
  299. $('.success').removeClass('success'); //去除之前选中的行的,选中样式
  300. $(ele).addClass('success'); //添加当前选中的 success样式用于区别
  301. });
  302. $("#sqzx").bind("keydown", function (event) {
  303. var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event
  304. .charCode;
  305. if (keyCode == 13) {
  306. load();
  307. }
  308. })
  309. });
  310. //获取查询信息
  311. function load() {
  312. //坐席
  313. var usercodeID = "";
  314. var usercode_ = $("#ZX").val(); //坐席
  315. if (usercode_ != null) {
  316. $(usercode_).each(function (i, n) {
  317. var obj1 = '';
  318. obj1 = n + ",";
  319. usercodeID += obj1;
  320. })
  321. } else {
  322. usercodeID = ""
  323. }
  324. // 调度员
  325. var ddusercodeID = "";
  326. var ddusercode_ = $("#yardman").val(); //坐席
  327. if (ddusercode_ != null) {
  328. $(ddusercode_).each(function (i, n) {
  329. var obj2 = '';
  330. obj2 = n + ",";
  331. ddusercodeID += obj2;
  332. })
  333. } else {
  334. ddusercodeID = ""
  335. }
  336. //先销毁表格
  337. $('#orderlist').bootstrapTable('destroy');
  338. //初始化表格,动态从服务器加载数据
  339. $("#orderlist").bootstrapTable({
  340. method: "get", //使用get请求到服务器获取数据
  341. url: huayi.config.callcenter_url + "WorkOrder/GetNoticeList",
  342. contentType: "application/x-www-form-urlencoded",
  343. striped: true, //表格显示条纹
  344. pagination: true, //启动分页
  345. pageSize: 10, //每页显示的记录数
  346. pageNumber: 1, //当前第几页
  347. pageList: [10, 20, 50, 100], //记录数可选列表
  348. search: false, //是否启用查询
  349. showColumns: false, //显示下拉框勾选要显示的列
  350. showRefresh: false, //显示刷新按钮
  351. sidePagination: "server", //表示服务端请求
  352. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  353. //设置为limit可以获取limit, offset, search, sort, order
  354. queryParamsType: "undefined",
  355. queryParams: function queryParams(params) { //设置查询参数
  356. var param = {
  357. page: params.pageNumber,
  358. pagesize: params.pageSize,
  359. key: $("#key").val(), //关键字
  360. starttime: $("#startTime").val(), //开始时间
  361. endtime: $("#endTime").val(), //结束时间
  362. workid: $('#wids').val(), //工单编号
  363. type: $('#type').val(), //工单类型
  364. tel: $('#tel').val(), //客户电话
  365. name: $('#name').val(), //客户名称
  366. usercode: usercodeID, //=坐席工号
  367. ddusercode: ddusercodeID,
  368. keyid: $('#keyid').val(), //关键词id
  369. source: $("#source").val(), //来源
  370. // usercode: $("#ZX").val(), //=坐席工号
  371. // ddusercode: $("#yardman").val(),
  372. sourcearea: $('#sourceAreas').val(), //区域
  373. token: $.cookie("token")
  374. };
  375. return param;
  376. },
  377. onLoadSuccess: function (data) { //加载成功时执行
  378. //layer.msg("加载成功");
  379. },
  380. onLoadError: function () { //加载失败时执行
  381. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  382. }
  383. });
  384. }
  385. //来源
  386. function LY(obj) {
  387. obj.empty();
  388. obj.append('<option selected="selected" value="">请选择</option>');
  389. $.getJSON(huayi.config.callcenter_url + "Dictionary/GetDicValueListById", {
  390. "token": $.cookie("token"),
  391. id: 1
  392. }, function (data) {
  393. if (data.state.toLowerCase() == "success") {
  394. var content = data.data;
  395. $(content).each(function (i, n) {
  396. $("<option value='" + n.F_ValueId + "'>" + n.F_Value + "</option>").appendTo(
  397. obj);
  398. })
  399. }
  400. })
  401. }
  402. //类别
  403. function LB(obj) {
  404. obj.empty();
  405. obj.append('<option selected="selected" value="">请选择</option>');
  406. $.getJSON(huayi.config.callcenter_url + "Dictionary/GetDicValueListById", {
  407. "token": $.cookie("token"),
  408. id: 2
  409. }, function (data) {
  410. if (data.state.toLowerCase() == "success") {
  411. var content = data.data;
  412. $(content).each(function (i, n) {
  413. $("<option value='" + n.F_ValueId + "'>" + n.F_Value + "</option>").appendTo(
  414. obj);
  415. })
  416. }
  417. })
  418. }
  419. //主题
  420. function ZT(obj) {
  421. obj.empty();
  422. obj.append('<option selected="selected" value="">请选择</option>');
  423. $.getJSON(huayi.config.callcenter_url + "Dictionary/GetDicValueListById", {
  424. "token": $.cookie("token"),
  425. id: 3
  426. }, function (data) {
  427. if (data.state.toLowerCase() == "success") {
  428. var content = data.data;
  429. $(content).each(function (i, n) {
  430. $("<option value='" + n.F_ValueId + "'>" + n.F_Value + "</option>").appendTo(
  431. obj);
  432. })
  433. }
  434. })
  435. }
  436. ///坐席
  437. function ZX(obj) {
  438. obj.empty();
  439. $.getJSON(huayi.config.callcenter_url + "UserAccount/GetSeatList", {
  440. "token": $.cookie("token"),
  441. }, function (data) {
  442. if (data.state.toLowerCase() == "success") {
  443. var content = data.data;
  444. $(content).each(function (i, n) {
  445. $("<option value='" + n.F_UserCode + "'>" + n.F_UserName + "</option>")
  446. .appendTo(obj);
  447. })
  448. obj.selectpicker({
  449. noneSelectedText: '请选择' //默认显示内容
  450. });
  451. obj.selectpicker('refresh');
  452. }
  453. })
  454. }
  455. //调度员
  456. function yardman(obj) {
  457. obj.empty();
  458. $.getJSON(huayi.config.callcenter_url + "UserAccount/GetUsersList", {
  459. rolecode: "ZXLD",
  460. "token": $.cookie("token"),
  461. }, function (data) {
  462. if (data.state.toLowerCase() == "success") {
  463. var content = data.data;
  464. $(content).each(function (i, n) {
  465. $("<option value='" + n.F_UserCode + "'>" + n.F_UserName + "</option>")
  466. .appendTo(obj);
  467. })
  468. obj.selectpicker({
  469. noneSelectedText: '请选择' //默认显示内容
  470. });
  471. obj.selectpicker('refresh');
  472. }
  473. })
  474. }
  475. //编号
  476. function serialNumber(val, row, index) {
  477. return index + 1;
  478. }
  479. //述求标题
  480. function GetCont(val) {
  481. if (val) {
  482. var str = '<div '
  483. if (val.length > 10) {
  484. str = str + ' title="' + val + '" ';
  485. val = val.substr(0, 10) + "...";
  486. }
  487. return str + '>' + val + '</div>';
  488. } else {
  489. return '';
  490. }
  491. }
  492. //操作
  493. function Dispose(val, row) {
  494. //按钮
  495. var showOrnot = 'none';
  496. //撤回按钮显示或隐藏
  497. if (row.IsReturnNotice == 1) {
  498. showOrnot = 'inline-block';
  499. } else {
  500. showOrnot = 'none';
  501. }
  502. return '<div class="imgs" >' +
  503. '<a class="xg" title="查看" onclick="ckxq(' + row.F_WorkOrderId + ')">查看</a>' +
  504. '<a class="xg withDrawBtn" style="display: ' + showOrnot + '" title="撤回" onclick="withDraw(' + row
  505. .F_WorkOrderId + ')">撤回</a>' +
  506. '</div>';
  507. }
  508. //查看详情
  509. function ckxq(str) {
  510. layer.open({
  511. type: 2,
  512. content: "../CommonHtml/WorkDatil.html?wid=" + str, //iframe的url,no代表不显示滚动条
  513. title: '工单详情',
  514. area: ['100%', '100%'], //宽高
  515. });
  516. }
  517. //撤回
  518. function withDraw(str) {
  519. layer.open({
  520. content: '是否要撤回?',
  521. btn: ['是', '否'],
  522. yes: function (index, layero) {
  523. $.post(huayi.config.callcenter_url + "WorkOrder/NoticeWorkOrder", {
  524. workorderid: str, //工单编号
  525. isnotice: 0, //(0撤回,1通告)
  526. //deptids: '',
  527. token: $.cookie("token")
  528. }, function (result) {
  529. var data = JSON.parse(result);
  530. if (data.state == "success") {
  531. $(".withDrawBtn").hide();
  532. layer.close();
  533. load();
  534. layer.msg("撤回成功");
  535. }
  536. })
  537. }
  538. })
  539. }
  540. //音频
  541. function setCode(val) {
  542. if (val) {
  543. return '<div class="imgs" style="cursor: pointer;">' +
  544. '<img src="../img/vice.png" alt="" onclick= "helper.luyin.view(this)" item="' + val + '" />' +
  545. '</div>';
  546. } else {
  547. return '';
  548. }
  549. }
  550. </script>
  551. </body>
  552. </html>