商丘12345 前端

jiaoban.html 20KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <script src="../Script/Common/huayi.load.js"></script>
  6. <script src="../Script/Common/huayi.config.js"></script>
  7. <link href="../css/layer/need/layer.css" />
  8. <link rel="stylesheet" href="../js/zTree/zTreeStyle.css" />
  9. <link rel="stylesheet" href="../css/init.css" />
  10. <title>交办</title>
  11. <style>
  12. #main{
  13. width: 788.8px;
  14. margin: 0 auto;
  15. -webkit-box-shadow: 1px 1px 9px 2px #D2D2D2;
  16. box-shadow: 1px 1px 9px 2px #D2D2D2;
  17. background-color: #fff;
  18. padding: 30px 60px 40px 60px;
  19. }
  20. .alignC{
  21. text-align: center;
  22. }
  23. .alignC h2{
  24. font-family: "宋体";
  25. font-weight: bold;
  26. font-size: 22pt;
  27. letter-spacing: -1px;
  28. }
  29. .company {
  30. text-align: left;
  31. margin-bottom: 10px;
  32. }
  33. .company span{
  34. font-size: 14pt;
  35. padding-top: 20px;
  36. text-align: left;
  37. font-weight: normal;
  38. margin-left: 48px;
  39. vertical-align: middle;
  40. }
  41. #main table{
  42. margin: 0 auto;
  43. width: 600px;
  44. border-collapse: collapse;
  45. font-size: 13pt;
  46. font-family: "仿宋";
  47. }
  48. tbody td{
  49. min-width: 10%;
  50. padding: 6px 0 6px 0;
  51. }
  52. .btn{
  53. margin-top: 4px;
  54. margin-bottom: 4px ;
  55. background: #00a1cb;
  56. color: #fff;
  57. }
  58. .lxr,.mmdj,.jbyj,.cbyj,.ldps,.bljg{
  59. white-space:normal;
  60. word-break:break-all;
  61. }
  62. .inpBox {
  63. border: 1px solid #a9a9a9;
  64. height: 27px;
  65. width: 469px;
  66. display: inline-block;
  67. position: relative;
  68. vertical-align: middle;
  69. }
  70. .inpBoxP{
  71. position: absolute;
  72. left: 131px;
  73. top: 1px;
  74. z-index: 111;
  75. }
  76. .addTree {
  77. background: #fff;
  78. position: absolute;
  79. width: 100%;
  80. border: 1px solid darkgrey;
  81. right: 0;
  82. top: 26px;
  83. display: none;
  84. z-index: 5;
  85. z-index: 112;
  86. }
  87. .menuContent{
  88. background: #fff;
  89. position: absolute;
  90. width: 100%;
  91. border: 1px solid darkgrey;
  92. right: 0;
  93. top: 26px;
  94. display: none;
  95. z-index: 5;
  96. }
  97. .addTree a,
  98. .addTree span,
  99. .ztree a,
  100. .ztree span{
  101. font-size: 16px;
  102. }
  103. .xl {
  104. display: inline-block;
  105. background: url(../../img/dropDown.png) no-repeat;
  106. height: 100%;
  107. background-position: center center;
  108. width: 20px;
  109. position: absolute;
  110. right: 0;
  111. top: 0px;
  112. /* background-color: #f7bc8b; */
  113. cursor: pointer;
  114. }
  115. ul.ztree {
  116. margin-top: 10px;
  117. width: 466px;
  118. height: 260px;
  119. overflow-y:scroll;
  120. overflow-x:auto;
  121. }
  122. .ztree li span {
  123. border: none;
  124. padding: 0;
  125. margin-left: 0;
  126. }
  127. .inps {
  128. width: 468px;
  129. height: 24px;
  130. outline: none;
  131. border: 0;
  132. border-image-width: 0;
  133. padding: 0;
  134. padding-left: 3px;
  135. font-size: 16px;
  136. }
  137. .xl {
  138. display: inline-block;
  139. background: url(../img/dropDown.png) no-repeat;
  140. height: 100%;
  141. background-position: center center;
  142. width: 20px;
  143. position: absolute;
  144. right: 0;
  145. top: 0px;
  146. /* background-color: #f7bc8b; */
  147. cursor: pointer;
  148. }
  149. .selDpart1{
  150. position: absolute;
  151. left: 130px;
  152. top: 27px;
  153. z-index: 11111;
  154. width: 470px;
  155. line-height: 27px;
  156. background: #FFFFFF;
  157. display: none;
  158. }
  159. #sponsor{
  160. width: 468px;
  161. border: 1px solid #00a1cb;
  162. margin: 0;
  163. padding: 0;
  164. list-style: none;
  165. max-height: 212px;
  166. overflow-x: hidden;
  167. overflow-y: scroll;
  168. }
  169. #sponsor li{
  170. margin: 0;
  171. padding-left: 10px;
  172. width: 468px;
  173. height: 27px;
  174. line-height: 27px;
  175. list-style: none;
  176. }
  177. #sponsor li:hover{
  178. background: #00a1cb;
  179. }
  180. </style>
  181. </head>
  182. <body>
  183. <div id="main">
  184. <div class="alignC headerAlign">
  185. <br />
  186. <h2 style="margin-bottom: 15px;">
  187. 商丘市12345政务服务热线办公室工作交办单
  188. </h2>
  189. <div class="company" style="position: relative;">
  190. <span>主办单位:</span>
  191. <div class="inpBox inpBoxP">
  192. <input id="citySel1" class="inps" readonly />
  193. <input type="hidden" id="PID" />
  194. <i class="xl xl_one" id="xls"></i>
  195. <div class="addTree xlAdd">
  196. <ul id="addTreeDemo" class="ztree">
  197. </ul>
  198. </div>
  199. </div>
  200. <div class="selDpart1">
  201. <ul id="sponsor">
  202. </ul>
  203. </div>
  204. </div>
  205. <div class="company">
  206. <span>协办单位:</span>
  207. <div class="inpBox" id="organizer">
  208. <input id="citySel" class="inps" readonly />
  209. <input type="hidden" id="OPID" />
  210. <i class="xl xl_one" id="xl_one"></i>
  211. <div id="menuContent" class="menuContent">
  212. <ul id="treeDemo" class="ztree"></ul>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. <table class="alignC" border="1" cellpadding="4" cellspacing="0" bordercolor="#cbcbcb">
  218. <tbody>
  219. <tr style="min-height: 49px;">
  220. <td rowspan="2" width="10%">编号
  221. </td>
  222. <td rowspan="2" width="22%">
  223. <span class="gdbhs"></span>
  224. </td>
  225. <td rowspan="2" width="13%">受理时间
  226. </td>
  227. <td rowspan="2" width="16%">
  228. <span class="tssj"></span>
  229. </td>
  230. <td width="16%">签收时间
  231. </td>
  232. <td>
  233. <span class="QSHJ"></span>
  234. </td>
  235. </tr>
  236. <tr style="min-height: 49px;">
  237. <td>
  238. 办理时限
  239. </td>
  240. <td>
  241. <input type="text" id="startTime" class="laydate-icon" style="height: 32px;width: 96%;">
  242. </td>
  243. </tr>
  244. <tr style="min-height: 49px;">
  245. <td>
  246. 投诉人
  247. </td>
  248. <td>
  249. <span class="gdbh"></span>
  250. </td>
  251. <td>
  252. 联系电话
  253. </td>
  254. <td>
  255. <span class="lxdh"></span>
  256. </td>
  257. <td>
  258. 秘密等级
  259. </td>
  260. <td>
  261. <span class="MJ"></span>
  262. </td>
  263. </tr>
  264. <tr style="min-height: 49px;">
  265. <td>
  266. 地址
  267. </td>
  268. <td colspan="5" style="text-align: left;text-indent: .3em; padding: 4px;">
  269. <span class="areaaddress"></span> <span class="mmdj"></span>
  270. </td>
  271. </tr>
  272. <tr style="height: 180px;">
  273. <td class="style1">内容<br/>摘要
  274. </td>
  275. <td colspan="5" style="text-align:justify; padding:4px;text-indent: 2em;">
  276. <span class="lxr"></span>
  277. </td>
  278. </tr>
  279. <tr style="height: 110px;">
  280. <td>
  281. <span>调度<br/>意见</span>
  282. </td>
  283. <td colspan="5"><textarea data-adaptheight id="assignedopinion" name="" rows="4" cols="" style="width: 97%;resize:none;padding-left: 6px; padding-right: 6px;"></textarea></td>
  284. <input type="hidden" id="ID" />
  285. <input type="hidden" id="PID" />
  286. <input type="hidden" id="Dpment" />
  287. </tr>
  288. </tbody>
  289. </table>
  290. <div id="message" style="margin: 20px 0 0 30px;">
  291. 是否发送短信
  292. <input type="radio" name="message" id="" value="0" />否
  293. <input type="radio" name="message" id="" value="1" checked/>是
  294. </div>
  295. <div class="btn_box" style="text-align: center;">
  296. <button class="btns BC">保存</button>
  297. <button class="btns Submit">保存并交办</button>
  298. </div>
  299. </div>
  300. <script src="../css/laydate/laydate.js"></script>
  301. <script src="../js/zTree/jquery.ztree.core.js"></script>
  302. <script src="../js/zTree/jquery.ztree.excheck.min.js"></script>
  303. <script src="../js/adjustHeight.js"></script>
  304. <script>
  305. var wid = helper.request.queryString("wid");
  306. var State = 0;
  307. var a = $("#ID").val();
  308. $("#inpts").val($("#Dpment").val());
  309. var saveArrs = [];
  310. $(document).ready(function() {
  311. Detail();
  312. if (wid) {
  313. $.getJSON(huayi.config.callcenter_url + 'WorkOrder/GetWorkOrder', { workorderid: wid, "token": $.cookie("token") }, function (result) {
  314. if (result.state.toLowerCase() == "success") {
  315. var content = result.data;
  316. //console.log( content);
  317. $(".gdbhs").text(content.data[0].F_WorkOrderId);//工单
  318. $(".tsfs").text(content.data[0].SourceName);
  319. $(".lxr").text(content.data[0].F_CusName);
  320. $('.lxdh').text(content.data[0].F_CusPhone);
  321. $(".lxr ").text(content.data[0].F_ComContent);//内容
  322. var T= content.data[0].F_CreateTime;//受理时间
  323. if(T){
  324. var S=T.substring(0, T.indexOf(' '));
  325. $('.tssj').text(S);
  326. }
  327. if(content.jbdata.length > 0){
  328. var qst = content.jbdata[0].F_SureTime;//签收时间
  329. if(qst){
  330. var qs = qst.substring(0,qst.indexOf(' '));
  331. $('.QSHJ').text(qs);
  332. }
  333. }
  334. $(".gdbh").text(content.data[0].F_CusName);//投诉人
  335. $(".areaaddress").text(content.data[0].AreaName);
  336. $(".mmdj").text(content.data[0].F_SourceAddress);//地址
  337. $(".tslx").text(content.data[0].TypeName1);//偶投诉类型
  338. $(".bljg").text(content.data[0].F_Result);
  339. //密级程度
  340. if(content.data[0].F_IsProtect == 0) {
  341. $('.MJ').text("普通");
  342. } else {
  343. $('.MJ').text("保密");
  344. }
  345. var n=content.psdata.length;
  346. if (n > 0) {
  347. var ldps = content.psdata[n - 1].F_SuperOpinion;
  348. $(".ldps").html(ldps);
  349. }
  350. }
  351. })
  352. }
  353. $("#inpts").val($("#Dpment").val());
  354. laydate.skin('blue');
  355. laydate({
  356. elem: '#startTime',
  357. event: 'focus'
  358. });
  359. //保存
  360. $('.BC').click(function() {
  361. if($("#PID").val() == ""){
  362. layer.msg("主办单位不能为空");
  363. }else if($("#startTime").val() == ""){
  364. layer.msg("办理时限不能为空");
  365. }else
  366. if($("#assignedopinion").val() == "") {
  367. layer.msg("调度意见不能为空");
  368. } else {
  369. State = 0;
  370. JA();
  371. }
  372. });
  373. //保存并提交
  374. $('.Submit').click(function() {
  375. if($("#PID").val() == ""){
  376. layer.msg("主办单位不能为空");
  377. }else if($("#startTime").val() == ""){
  378. layer.msg("办理时限不能为空");
  379. }else if($("#assignedopinion").val() == "") {
  380. layer.msg("调度意见不能为空");
  381. } else {
  382. State = 1;
  383. JA();
  384. if($('#message input[type="radio"]:checked').val()==1){
  385. sendMessage();
  386. }
  387. }
  388. });
  389. tree(saveArrs);
  390. function tree(saveArr) {
  391. $.get(huayi.config.callcenter_url + 'Department/GetDeptList', {
  392. "token": $.cookie("token"),"iscbdw":1
  393. // "pid": pid
  394. }, function(result) {
  395. result = $.parseJSON(result);
  396. result1=result;
  397. $.fn.zTree.init($("#addTreeDemo"), setting1, result1.data); //实例化树形图
  398. //父节点不显示checkbox
  399. //获取到zTree
  400. var zTree1 = $.fn.zTree.getZTreeObj("addTreeDemo");
  401. //设置只能选择最后一层的子节点
  402. var allNodes1= zTree1.transformToArray(zTree1.getNodes());//
  403. //去掉选框
  404. if(allNodes1.length>0){
  405. for(var i=0;i<allNodes1.length;i++){
  406. if(allNodes1[i].F_IsDept==1){//找到父节点
  407. allNodes1[i].nocheck=false;//nocheck为true表示没有选择框
  408. zTree1.updateNode(allNodes1[i]);
  409. }else{
  410. allNodes1[i].nocheck=true;//nocheck为true表示没有选择框
  411. zTree1.updateNode(allNodes1[i]);
  412. }
  413. }
  414. }
  415. if(saveArr.length>0){
  416. for(var x = 0; x < saveArr.length; x++){
  417. $(result.data).each(function(i, n) {
  418. if(saveArr[x] == n.F_DeptId) {
  419. n.checked = "true";
  420. }
  421. })
  422. }
  423. }
  424. $.fn.zTree.init($("#treeDemo"), setting, result.data);
  425. //父节点不显示checkbox
  426. //获取到zTree
  427. var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  428. //设置只能选择最后一层的子节点
  429. var allNodes= zTree.transformToArray(zTree.getNodes());//
  430. //去掉选框
  431. if(allNodes.length>0){
  432. for(var i=0;i<allNodes.length;i++){
  433. if(allNodes[i].F_IsDept==1){//找到父节点
  434. allNodes[i].nocheck=false;//nocheck为true表示没有选择框
  435. zTree.updateNode(allNodes[i]);
  436. }else{
  437. allNodes[i].nocheck=true;//nocheck为true表示没有选择框
  438. zTree.updateNode(allNodes[i]);
  439. }
  440. }
  441. }
  442. });
  443. }
  444. var setting1 = {
  445. data: {
  446. key: {
  447. name: "F_DeptName"
  448. },
  449. simpleData: {
  450. enable: true,
  451. idKey: "F_DeptId",
  452. pIdKey: "F_PartentId",
  453. rootPId: 0
  454. }
  455. },
  456. check: {
  457. enable: true,
  458. chkboxType: {"Y":"", "N":""}
  459. },
  460. view: {
  461. dblClickExpand: true
  462. },
  463. callback: {
  464. beforeClick: zTreeOnClick,
  465. onCheck: onCheck1
  466. }
  467. };
  468. function zTreeOnClick(treeId, treeNode) {
  469. var zTree = $.fn.zTree.getZTreeObj("addTreeDemo"),
  470. nodes = zTree.getCheckedNodes(true);
  471. zTree.checkNode(treeNode, !treeNode.checked, null, true);
  472. return false;
  473. };
  474. function onCheck1(e, treeId, treeNode) {
  475. var zTree = $.fn.zTree.getZTreeObj("addTreeDemo"),
  476. nodes = zTree.getCheckedNodes(true);
  477. console.log(treeNode)
  478. if(treeNode.level >= 2) {
  479. var v = "",opid='';
  480. for (var i=0, l=nodes.length; i<l; i++) {
  481. v += nodes[i].F_DeptName + ",";
  482. opid += nodes[i].F_DeptId + ","
  483. }
  484. if (v.length > 0 ) v = v.substring(0, v.length-1);
  485. var cityObj = $("#citySel1");
  486. cityObj.val(v);
  487. if (opid.length > 0 ) opid = opid.substring(0, opid.length-1);
  488. $('#PID').attr("value",opid)
  489. }
  490. }
  491. var setting = {
  492. data: {
  493. key: {
  494. name: "F_DeptName"
  495. },
  496. simpleData: {
  497. enable: true,
  498. idKey: "F_DeptId",
  499. pIdKey: "F_PartentId",
  500. rootPId: 0
  501. }
  502. },
  503. check: {
  504. enable: true,
  505. chkboxType: {"Y":"", "N":""}
  506. },
  507. view: {
  508. dblClickExpand: true
  509. },
  510. callback: {
  511. beforeClick: beforeClick,
  512. onCheck: onCheck
  513. }
  514. };
  515. function beforeClick(treeId, treeNode) {
  516. var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
  517. nodes = zTree.getCheckedNodes(true);
  518. zTree.checkNode(treeNode, !treeNode.checked, null, true);
  519. return false;
  520. }
  521. function onCheck(e, treeId, treeNode) {
  522. var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
  523. nodes = zTree.getCheckedNodes(true);
  524. console.log(treeNode)
  525. if(treeNode.level >= 2) {
  526. var v = "",opid='';
  527. for (var i=0, l=nodes.length; i<l; i++) {
  528. v += nodes[i].F_DeptName + ",";
  529. opid += nodes[i].F_DeptId + ","
  530. }
  531. if (v.length > 0 ) v = v.substring(0, v.length-1);
  532. var cityObj = $("#citySel");
  533. cityObj.val(v);
  534. if (opid.length > 0 ) opid = opid.substring(0, opid.length-1);
  535. $('#OPID').attr("value",opid)
  536. }
  537. }
  538. function showMenu() {
  539. var cityObj = $("#citySel");
  540. $("#menuContent").css({left:0, top: $("#citySel").height + "px"}).slideDown("fast");
  541. $("body").bind("mousedown", onBodyDown);
  542. }
  543. function hideMenu() {
  544. $("#menuContent").fadeOut("fast");
  545. $("body").unbind("mousedown", onBodyDown);
  546. }
  547. function onBodyDown(event) {
  548. if (!(event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
  549. hideMenu();
  550. }
  551. }
  552. //交办
  553. function JA() {
  554. $.post(huayi.config.callcenter_url + 'WorkOrder/AssignWorkOrderNew', {
  555. workorderid: wid,
  556. maindeptid: $("#PID").val(), //主办单位
  557. otherdeptids: $('#OPID').val(),//协办单位
  558. limittime: $("#startTime").val(), //办理时限
  559. assignedopinion: $('#assignedopinion').val(), //交办意见
  560. state: State,
  561. assignid: a,
  562. token: $.cookie("token")
  563. }, function(result) {
  564. result = JSON.parse(result);
  565. if(result.state.toLowerCase() == "success") {
  566. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  567. //console.log(index);
  568. parent.layer.close(index); //再执行关闭
  569. parent.$('#orderlist').bootstrapTable('refresh');
  570. var savemsgs = State==0 ? '保存成功':'交办成功';
  571. parent.layer.msg(savemsgs);
  572. }
  573. })
  574. }
  575. //发送短信
  576. function sendMessage(){
  577. $.post(huayi.config.callcenter_url + 'WorkOrder/SendSms',{
  578. workordercode:wid,
  579. deptid: $("#PID").val(), //主办单位
  580. type:0,
  581. token: $.cookie("token")
  582. },function(result){
  583. result=JSON.parse(result);
  584. if(result.state.toLowerCase()=='success'){
  585. layer.msg('发送短信成功')
  586. }
  587. })
  588. }
  589. //所属分类下拉
  590. $('#inpts').click(function() {
  591. $('.xlAdd').css('display', 'block')
  592. });
  593. $('#xls').click(function() {
  594. if($('.xlAdd').css('display') == 'block') {
  595. $('.xlAdd').css('display', 'none')
  596. } else {
  597. $('.xlAdd').css('display', 'block')
  598. }
  599. });
  600. $('.addTree').mouseleave(function() {
  601. $(this).css('display', 'none')
  602. });
  603. $('#citySel').click(function(){ showMenu() });
  604. $('#xl_one').click(function(){ showMenu() });
  605. $('#menuContent').mouseleave(function() {
  606. $(this).css('display', 'none')
  607. });
  608. //草稿详情
  609. function Detail() {
  610. $.getJSON(huayi.config.callcenter_url + 'WorkOrder/GetDraftInfo', {
  611. workorderid: wid,
  612. type: 1,
  613. token: $.cookie("token")
  614. }, function(result) {
  615. if(result.state.toLowerCase() == "success") {
  616. if(result.data.length > 0) {
  617. var lTimes = result.data[0].F_LimitTime;
  618. var lTime = lTimes.substring(0,10);
  619. $("#startTime").val(lTime);
  620. $('#assignedopinion').val(result.data[0].F_AssignedOpinion);
  621. $('#inpts').val(result.data[0].DeptName);
  622. $('#PID').val(result.data[0].F_MainDeptId);
  623. if(result.data[0].OtherDeptName){
  624. $("#citySel").val(result.data[0].OtherDeptName);
  625. $('#OPID').val(result.data[0].F_OtherDeptIds);//协办单位
  626. var arrs1 = result.data[0].F_OtherDeptIds.split(',');
  627. tree(arrs1);
  628. }
  629. a = result.data[0].F_Id;
  630. }
  631. }
  632. })
  633. }
  634. });
  635. function darptSearch() {
  636. $('.xlAdd').css('display', 'none');
  637. $(".selDpart1").css('display', 'block');
  638. depart();
  639. };
  640. $("#sponsor").on('click', 'li', function() {
  641. $(".selDpart1").css('display', 'none');
  642. $("#inpts").val($(this).html());
  643. $("#Dpment").val($(this).html());
  644. //$("#Dpment").val($(this).attr("index"));
  645. $(".Cleans").show();
  646. });
  647. ///部门
  648. function depart() {
  649. $("#sponsor").empty();
  650. $.getJSON(huayi.config.callcenter_url + "Department/GetDeptListByDept", {
  651. "token": $.cookie("token"),
  652. dept: $('.inps').val(),
  653. }, function(data) {
  654. if(data.state.toLowerCase() == "success") {
  655. var content = data.data;
  656. $(content).each(function(i, n) {
  657. $("<li index='" + n.F_DeptId + "'>" + n.F_DeptName + "</li>").appendTo("#sponsor");
  658. })
  659. }
  660. })
  661. };
  662. </script>
  663. </body>
  664. </html>