Нет описания

WorkOrderDispose.html 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551
  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 rel="stylesheet" href="../js/zTree/zTreeStyle.css" />
  10. <link href="../css/WorkOrder/Search.css" rel="stylesheet">
  11. <link href="../js/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" />
  12. <link rel="stylesheet" href="../js/comboSelect/combo.select.css" />
  13. <link href="../css/init.css" rel="stylesheet" />
  14. <style>
  15. .time-box {
  16. display: inline-block;
  17. position: relative;
  18. }
  19. i.tub {
  20. position: absolute;
  21. right: 8px;
  22. top: 8px;
  23. font-size: 18px;
  24. color: #1ab394;
  25. }
  26. .toolBox{
  27. padding-top: 15px;
  28. }
  29. .toolBox .form-inline .form-group{
  30. margin-bottom: 10px;
  31. }
  32. .search_time {
  33. width: 228px!important;
  34. }
  35. .bootstrap-select>.dropdown-toggle.bs-placeholder {
  36. background-color: #ffffff!important;
  37. border-color: #e5e6e7!important;
  38. }
  39. .filter-option {
  40. color: #676b6d;
  41. }
  42. .bootstrap-select>.dropdown-toggle.btn-default {
  43. background-color: #ffffff!important;
  44. border-color: #e5e6e7!important;
  45. color: #555;
  46. }
  47. #typeclass {
  48. background: #fff;
  49. }
  50. .treeList {
  51. top: 34px!important;
  52. border: 1px solid #e5e6e7!important;
  53. border-top: 0;
  54. height: auto!important;
  55. }
  56. #TreeDemo li {
  57. float: initial;
  58. }
  59. .E73 {
  60. background: #87eebf;
  61. color: #000;
  62. width: 100px;
  63. }
  64. .E72 {
  65. width: 100px;
  66. }
  67. ._table1>thead>tr>th {
  68. text-align: right;
  69. padding: 4px !important;
  70. width: 25%;
  71. }
  72. ._table1>thead>tr>td {
  73. padding: 4px !important;
  74. width: 25%;
  75. }
  76. .imgs a{
  77. padding-right: 5px;
  78. }
  79. .inps2,.inps3{
  80. display: none;
  81. }
  82. </style>
  83. </head>
  84. <body class="gray-bg">
  85. <div class="daoHang clearfix">
  86. <div class="dhLeft">
  87. <sapn>
  88. <i class="syIcon"></i>位置:
  89. <a href="javaScript:;" id="ReIndex">首页</a>&gt;
  90. <a href="javaScript:;">工单管理</a>&gt;
  91. <a href="" class="nowPosition">待处理工单</a>
  92. </sapn>
  93. </div>
  94. <div class="dhRight">
  95. <a href="#" title="刷新"><i class="fa fa-refresh"></i></a>
  96. </div>
  97. </div>
  98. <div class="wrapper wrapper-content animated fadeInRight">
  99. <div class="toolBox clearfix">
  100. <div class="pull-left">
  101. <div class="form-inline clearfix">
  102. <div class="form-group">
  103. <input class="form-control" type="text" id="searchCode" placeholder="请输入工单编号">
  104. </div>
  105. <div class="form-group">
  106. <select class="form-control" id="searchArea">
  107. <option value="">请选择大区</option>
  108. </select>
  109. </div>
  110. <div class="form-group">
  111. <select class="form-control" id="searchOffice">
  112. <option value="">请选择办事处</option>
  113. </select>
  114. </div>
  115. <div class="time-box form-group">
  116. <i class="tub fa fa-calendar"></i>
  117. <input class="form-control search_time" type="text" id="greetingTimes" placeholder="请选择投诉时间">
  118. </div>
  119. <div class="form-group">
  120. <input class="form-control" type="text" id="searchKeywords" placeholder="联系电话">
  121. </div>
  122. <div class="form-group">
  123. <select class="form-control" id="searchProductType">
  124. <option value="">请选择产品代码</option>
  125. </select>
  126. </div>
  127. <div class="form-group">
  128. <input class="form-control" type="text" id="searchProductDate" placeholder="生产日期(YYYY.MM.DD)">
  129. </div>
  130. <div class="form-group">
  131. <input class="form-control" type="text" id="searchBatchNumber" placeholder="产品编码">
  132. </div>
  133. <div class="form-group">
  134. <input type="text" class="form-control" id="searchManufacturer" list="searchManufacturerDataList" placeholder="生产厂家"/>
  135. <datalist id="searchManufacturerDataList">
  136. </datalist>
  137. </div>
  138. <div class="form-group">
  139. <select class="form-control" id="searchProblemCode">
  140. <option value="">请选择问题代码</option>
  141. </select>
  142. </div>
  143. <div class="form-group">
  144. <select class="form-control" id="searchNotifications">
  145. <option value="">请选择通知人</option>
  146. </select>
  147. </div>
  148. <div class="form-group">
  149. <select class="form-control" id="searchOrderType">
  150. <option value="">请选择工单类别</option>
  151. <option value="1">咨询</option>
  152. <option value="2">投诉</option>
  153. <option value="3">重复</option>
  154. </select>
  155. </div>
  156. <div class="form-group">
  157. <select class="form-control" id="searchDealTimely">
  158. <option value="">请选择工单级别</option>
  159. </select>
  160. </div>
  161. <!--<div class="form-group">
  162. <select class="form-control" id="searchOrderSource">
  163. <option value="">请选择工单来源</option>
  164. <option value="1">PC</option>
  165. <option value="2">APP</option>
  166. <option value="3">微信</option>
  167. </select>
  168. </div>-->
  169. <div class="form-group">
  170. <select class="form-control" id="searchSee">
  171. <option value="">查看负责区域单子</option>
  172. <option value="0">所有</option>
  173. <option value="1">管理区域</option>
  174. </select>
  175. </div>
  176. <div class="form-group btn-position">
  177. <button class="btns ss">搜索</button>
  178. <button class="btns export">导出</button>
  179. </div>
  180. </div>
  181. </div>
  182. </div>
  183. <div style="width: 100%;padding: 10px;" id="ces">
  184. <table id="workorderlist" class="market" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true">
  185. <thead>
  186. <tr>
  187. <th data-field="F_WorkOrderId" data-class="W160" data-formatter="View" data-align="center">工单编号</th>
  188. <th data-field="F_AreaName" data-class="W100" data-align="center">大区</th>
  189. <th data-field="F_OfficName" data-class="W100" data-align="center">办事处</th>
  190. <th data-field="F_CreateTime" data-class="W300" data-formatter="formatterAddressResult" data-align="center">投诉时间</th>
  191. <th data-field="F_SerialNumber" data-class="W100" data-align="center">序号</th>
  192. <th data-field="F_CusName" data-class="W160" data-align="center">姓名</th>
  193. <th data-field="F_AddRess" data-class="W300" data-formatter="formatterAddressResult" data-align="center">地址</th>
  194. <th data-field="F_CusPhone" data-class="W300" data-formatter="formatterAddressResult" data-align="center">联系电话</th>
  195. <th data-field="F_ProductType" data-class="W100" data-align="center">产品代码</th>
  196. <th data-field="F_ProductName" data-class="W300" data-formatter="formatterAddressResult" data-align="center">产品名称</th>
  197. <th data-field="F_Specifications" data-class="W100" data-formatter="formatterCharacterLength" data-align="center">规格</th>
  198. <th data-field="F_ProductDate" data-class="W100" data-align="center">生产日期</th>
  199. <th data-field="F_BatchNumber" data-class="W300" data-formatter="formatterAddressResult" data-align="center">产品编码</th>
  200. <th data-field="F_Manufacturer" data-class="W160" data-formatter="formatterCharacterLength" data-align="center">生产厂家</th>
  201. <th data-field="F_ProblemCode" data-class="W100" data-align="center">问题代码</th>
  202. <th data-field="F_QualityProblem" data-class="W160" data-formatter="formatterCharacterLength" data-align="center">质量问题</th>
  203. <th data-field="F_Notifications" data-class="W100" data-align="center">通知人</th>
  204. <th data-field="F_ReceivingPerson" data-class="W100" data-align="center">接听人</th>
  205. <th data-field="F_DealResult" data-class="W300" data-formatter="formatterAddressResult" data-align="center">落实情况</th>
  206. <th data-field="F_State" data-class="W100" data-formatter="workOrderStateJudge" data-align="center">处理进度</th>
  207. <th data-field="F_Type" data-class="W60margin" data-formatter="workOrderTypeJudge" data-align="center">工单类别</th>
  208. <!--<th data-field="F_Source" data-class="W100" data-formatter="workOrderSourceJudge" data-align="center">工单来源</th>-->
  209. <!--<th data-field="F_DealTimely" data-class="W100" data-align="center">工单级别</th>-->
  210. <!--<th data-field="F_Reason" data-class="W100" data-align="center">原因</th>-->
  211. <!--<th data-field="F_DealUser" data-class="W100" data-align="center">处理人</th>-->
  212. <!--<th data-field="F_DealTime" data-class="W100" data-align="center">处理时间</th>-->
  213. <!--<th data-field="F_Returnnote" data-class="W100" data-align="center">退回说明</th>-->
  214. <!--<th data-field="F_Content" data-class="W160" data-align="center">备注</th>-->
  215. <th data-field="F_WorkOrderId" data-class="workOprate workOprate4 W200" data-formatter="formatterOprateDispose" data-align="center">操作</th>
  216. </tr>
  217. </thead>
  218. </table>
  219. </div>
  220. <!--查看详情-->
  221. <div class="ckxq Hidens">
  222. <ul class="clearfix ckxq_ul">
  223. <li class="Active">工单详情</li>
  224. <li>工单记录</li>
  225. <span class="Closed">×</span>
  226. </ul>
  227. <div class="gdxq">
  228. <div class="">
  229. <table id="gdxq_table" border="0" class="table table-bordered table-hover " style="width: 100%;">
  230. <tbody class="tbodys">
  231. <tr>
  232. <th>工单编号:</th>
  233. <td>
  234. <span id="detailWorkOrderId"></span>
  235. </td>
  236. <th>工单来源:</th>
  237. <td>
  238. <span id="detailSource"></span>
  239. </td>
  240. <th>工单类型:</th>
  241. <td>
  242. <span id="detailType"></span>
  243. </td>
  244. </tr>
  245. <tr>
  246. <th>大区:</th>
  247. <td>
  248. <span id="detailAreaName"></span>
  249. </td>
  250. <th>办事处:</th>
  251. <td>
  252. <span id="detailOfficeName"></span>
  253. </td>
  254. <th>投诉时间:</th>
  255. <td>
  256. <span id="detailCreateTime"></span>
  257. </td>
  258. </tr>
  259. <tr>
  260. <th>工单级别:</th>
  261. <td>
  262. <span id="detailDealTimely"></span>
  263. </td>
  264. <th>原因:</th>
  265. <td>
  266. <span id="detailReason"></span>
  267. </td>
  268. <th>通知人:</th>
  269. <td>
  270. <span id="detailNotifications"></span>
  271. </td>
  272. </tr>
  273. <tr>
  274. <th>姓名:</th>
  275. <td>
  276. <span id="detailCusName"></span>
  277. </td>
  278. <th>联系电话:</th>
  279. <td>
  280. <span id="detailCusPhone"></span>
  281. </td>
  282. <th>接听人:</th>
  283. <td>
  284. <span id="detailReceivingPerson"></span>
  285. </td>
  286. </tr>
  287. <tr>
  288. <th>地址:</th>
  289. <td>
  290. <span id="detailAddress"></span>
  291. </td>
  292. <th>产品代码:</th>
  293. <td>
  294. <span id="detailProductType"></span>
  295. </td>
  296. <!--<th class="snRmove">生产日期:</th>
  297. <td class="snRmove">
  298. <span id="productDate"></span>
  299. </td>-->
  300. <th>产品名称:</th>
  301. <td>
  302. <span id="detailProductName"></span>
  303. </td>
  304. </tr>
  305. <tr>
  306. <th>规格:</th>
  307. <td>
  308. <span id="detailSpecifications"></span>
  309. </td>
  310. <th>生产日期:</th>
  311. <td>
  312. <span id="detailPRoductDate"></span>
  313. </td>
  314. <th>产品编码:</th>
  315. <td>
  316. <span id="detailBatchNumber"></span>
  317. </td>
  318. </tr>
  319. <tr>
  320. <th>生产厂家:</th>
  321. <td>
  322. <span id="detailManufacturer"></span>
  323. </td>
  324. <th>问题代码:</th>
  325. <td>
  326. <span id="detailProblemCode"></span>
  327. </td>
  328. <th>质量问题:</th>
  329. <td>
  330. <span id="detailQualityProblem"></span>
  331. </td>
  332. </tr>
  333. <tr>
  334. <th>序号:</th>
  335. <td>
  336. <span id="detailSerialNumber"></span>
  337. </td>
  338. <th>工单状态:</th>
  339. <td>
  340. <span id="detailState"></span>
  341. </td>
  342. <th>处理时间:</th>
  343. <td>
  344. <span id="detailDealTime"></span>
  345. </td>
  346. </tr>
  347. <tr>
  348. <th>落实情况:</th>
  349. <td>
  350. <span id="detailDealResult"></span>
  351. </td>
  352. <th>处理人:</th>
  353. <td>
  354. <span id="detailDealUser"></span>
  355. </td>
  356. </tr>
  357. <tr>
  358. <th>备注:</th>
  359. <td colspan="5" id="detailContent">
  360. </td>
  361. </tr>
  362. </tbody>
  363. </table>
  364. </div>
  365. </div>
  366. <div class="gdxq" style="display:none;">
  367. <div class="">
  368. <table id="workOrderRecord" data-row-style="rowStyle" data-query-params="queryParams" data-pagination="true">
  369. <thead>
  370. <tr>
  371. <th data-field="F_WoState" data-width="20%" data-align="left" data-formatter="formatterWorkOrderRecordStatus">工单状态</th>
  372. <th data-field="F_OptContent" data-align="left">内容</th>
  373. <th data-field="F_CreateTime" data-width="10%" data-align="center">创建时间</th>
  374. </tr>
  375. </thead>
  376. </table>
  377. </div>
  378. </div>
  379. </div>
  380. </div>
  381. <div class="t-shade">
  382. <!--处理工单-->
  383. <div class="shade_k clgd ">
  384. <div class="shade_title">
  385. <span>处理工单<srong class="cknum"></srong></span>
  386. <span class="setwin"><a>x</a></span>
  387. </div>
  388. <div class="shade_content">
  389. <div class="dgxx_table size-13">
  390. <table class="_table1 table table-bordered" border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
  391. <thead>
  392. <tr>
  393. <th>工单编号:</th>
  394. <td>
  395. <span id="cl_gdbh"></span>
  396. </td>
  397. <th>工单类型:</th>
  398. <td>
  399. <span id="cl_gdlx"></span>
  400. </td>
  401. </tr>
  402. <tr>
  403. <th>客户姓名:</th>
  404. <td>
  405. <span id="cl_khxm"></span>
  406. </td>
  407. <th>客户电话:</th>
  408. <td>
  409. <span id="cl_khdh"></span>
  410. </td>
  411. </tr>
  412. </thead>
  413. <tr class="ns-2">
  414. <th>处理费用:</th>
  415. <td colspan="3">
  416. <div>&nbsp;
  417. <label style="font-weight: normal;">
  418. <input type="number" style="width: 60px; padding-left: 5px;" id="dealCost" />
  419. &nbsp;&nbsp;元
  420. </label>
  421. </div>
  422. </td>
  423. </tr>
  424. <tr>
  425. <th>处理状态:</th>
  426. <td colspan="3">
  427. <div class="disposeST">
  428. </div>
  429. </td>
  430. </tr>
  431. <tr class="ns-2">
  432. <th>响应状态:</th>
  433. <td colspan="3">
  434. <div class="responseST">
  435. </div>
  436. </td>
  437. </tr>
  438. <tr>
  439. <th>处理结果:</th>
  440. <td colspan="5">
  441. <div>
  442. <textarea id="dealCont" name="" rows="3" style="width:100%;"></textarea>
  443. </div>
  444. </td>
  445. </tr>
  446. <tr>
  447. <th>客诉进展详述:</th>
  448. <td colspan="5">
  449. <div>
  450. <textarea id="cont" name="" rows="3" style="width:100%;"></textarea>
  451. </div>
  452. </td>
  453. </tr>
  454. </table>
  455. </div>
  456. <div class="clearfix wh_btn">
  457. <input type="button" value="确定" class="btn-info" id="clgd" />
  458. </div>
  459. </div>
  460. </div>
  461. </div>
  462. <script src="../js/zTree/jquery.ztree.core.js"></script>
  463. <script src="../js/laydate/laydate.js"></script>
  464. <script src="../js/comboSelect/jquery.combo.select.js"></script>
  465. <script src="../js/kindeditor/kindeditor.js"></script>
  466. <script src="../js/kindeditor/lang/zh_CN.js"></script>
  467. <script src="../js/WorkOrder/WorkOrder.js"></script>
  468. <script>
  469. $(document).ready(function() {
  470. laydate.render({
  471. elem: '#greetingTimes',
  472. range: '~',
  473. theme: '#1ab394',
  474. calendar: 'true'
  475. //type: 'datetime',
  476. //max : 31,
  477. //min: 0,
  478. });
  479. // 导出
  480. $('.export').click(function() {
  481. var state = 3; //处理进度
  482. dcexcel(state);
  483. });
  484. })
  485. function initTable() {
  486. //先销毁表格
  487. $('#workorderlist').bootstrapTable('destroy');
  488. //初始化表格,动态从服务器加载数据
  489. $("#workorderlist").bootstrapTable({
  490. method: "get", //使用get请求到服务器获取数据
  491. url: huayi.config.callcenter_url + "WorkOrder/GetList", //获取数据的Servlet地址
  492. contentType: 'application/x-www-form-urlencoded',
  493. striped: true, //表格显示条纹
  494. pagination: true, //启动分页
  495. pageSize: 10, //每页显示的记录数
  496. pageNumber: 1, //当前第几页
  497. pageList: [10, 20, 50, 100], //记录数可选列表
  498. search: false, //是否启用查询
  499. showColumns: false, //显示下拉框勾选要显示的列
  500. showRefresh: false, //显示刷新按钮
  501. fixedColumns: true,
  502. fixedNumber: 14,
  503. sidePagination: "server", //表示服务端请求
  504. //设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
  505. //设置为limit可以获取limit, offset, search, sort, order
  506. queryParamsType: "undefined",
  507. queryParams: function queryParams(params) { //设置查询参数
  508. var param = {
  509. state: 3,
  510. token: $.cookie("token"),
  511. code: $("#searchCode").val(), //工单编号
  512. area: $("#searchArea").val(), //大区
  513. office: $("#searchOffice").val(), //办事处
  514. starttime: $('#greetingTimes').val() && $('#greetingTimes').val().split(' ~ ')[0], //开始时间
  515. endtime: $('#greetingTimes').val() && $('#greetingTimes').val().split(' ~ ')[1], //结束时间
  516. keywords: $("#searchKeywords").val(),//联系电话
  517. productType: $("#searchProductType").val(), //产品代码
  518. productDate: $("#searchProductDate").val(), //生产日期
  519. batchNumber: $("#searchBatchNumber").val(), //产品编码
  520. manufacturer: $("#searchManufacturer").val(), //生产厂家
  521. problemCode: $("#searchProblemCode").val(), //问题代码
  522. notifications: $("#searchNotifications").val(), //通知人
  523. type: $("#searchOrderType").val(), //工单类别
  524. dealTimely: $("#searchDealTimely").val(), // 工单级别
  525. see: $("#searchSee").val(), // 处理专员是否只查看负责区域单子
  526. // source: $("#searchOrderSource").val(), //工单来源
  527. pageindex: params.pageNumber, //页码
  528. pagesize: params.pageSize, //条数
  529. };
  530. return param;
  531. },
  532. onLoadSuccess: function() { //加载成功时执行
  533. //layer.msg("加载成功");
  534. getLoginPersonNow();
  535. },
  536. onLoadError: function() { //加载失败时执行
  537. //layer.msg("加载数据失败", { time: 1500, icon: 2 });
  538. }
  539. });
  540. }
  541. </script>
  542. </body>
  543. </html>