商丘12345 前端

jiaoban.html 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663
  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="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 class="btn_box" style="text-align: center;">
  291. <button class="btns BC">保存</button>
  292. <button class="btns Submit">保存并交办</button>
  293. </div>
  294. </div>
  295. <script src="../css/laydate/laydate.js"></script>
  296. <script src="../js/zTree/jquery.ztree.core.js"></script>
  297. <script src="../js/zTree/jquery.ztree.excheck.min.js"></script>
  298. <script src="../js/adjustHeight.js"></script>
  299. <script>
  300. var wid = helper.request.queryString("wid");
  301. var State = 0;
  302. var a = $("#ID").val();
  303. $("#inpts").val($("#Dpment").val());
  304. var saveArrs = [];
  305. $(document).ready(function() {
  306. Detail();
  307. if (wid) {
  308. $.getJSON(huayi.config.callcenter_url + 'WorkOrder/GetWorkOrder', { workorderid: wid, "token": $.cookie("token") }, function (result) {
  309. if (result.state.toLowerCase() == "success") {
  310. var content = result.data;
  311. //console.log( content);
  312. $(".gdbhs").text(content.data[0].F_WorkOrderId);//工单
  313. $(".tsfs").text(content.data[0].SourceName);
  314. $(".lxr").text(content.data[0].F_CusName);
  315. $('.lxdh').text(content.data[0].F_CusPhone);
  316. $(".lxr ").text(content.data[0].F_ComContent);//内容
  317. var T= content.data[0].F_CreateTime;//受理时间
  318. if(T){
  319. var S=T.substring(0, T.indexOf(' '));
  320. $('.tssj').text(S);
  321. }
  322. if(content.jbdata.length > 0){
  323. var qst = content.jbdata[0].F_SureTime;//签收时间
  324. if(qst){
  325. var qs = qst.substring(0,qst.indexOf(' '));
  326. $('.QSHJ').text(qs);
  327. }
  328. }
  329. $(".gdbh").text(content.data[0].F_CusName);//投诉人
  330. $(".mmdj").text(content.data[0].F_SourceAddress);//地址
  331. $(".tslx").text(content.data[0].TypeName1);//偶投诉类型
  332. $(".bljg").text(content.data[0].F_Result);
  333. //密级程度
  334. if(content.data[0].F_IsProtect == 0) {
  335. $('.MJ').text("普通");
  336. } else {
  337. $('.MJ').text("保密");
  338. }
  339. var n=content.psdata.length;
  340. if (n > 0) {
  341. var ldps = content.psdata[n - 1].F_SuperOpinion;
  342. $(".ldps").html(ldps);
  343. }
  344. }
  345. })
  346. }
  347. $("#inpts").val($("#Dpment").val());
  348. laydate.skin('blue');
  349. laydate({
  350. elem: '#startTime',
  351. event: 'focus'
  352. });
  353. //保存
  354. $('.BC').click(function() {
  355. if($("#PID").val() == ""){
  356. layer.msg("主办单位不能为空");
  357. }else if($("#startTime").val() == ""){
  358. layer.msg("办理时限不能为空");
  359. }else
  360. if($("#assignedopinion").val() == "") {
  361. layer.msg("调度意见不能为空");
  362. } else {
  363. State = 0;
  364. JA();
  365. }
  366. });
  367. //保存并提交
  368. $('.Submit').click(function() {
  369. if($("#PID").val() == ""){
  370. layer.msg("主办单位不能为空");
  371. }else if($("#startTime").val() == ""){
  372. layer.msg("办理时限不能为空");
  373. }else if($("#assignedopinion").val() == "") {
  374. layer.msg("调度意见不能为空");
  375. } else {
  376. State = 1;
  377. JA();
  378. }
  379. });
  380. tree(saveArrs);
  381. function tree(saveArr) {
  382. $.get(huayi.config.callcenter_url + 'Department/GetDeptList', {
  383. "token": $.cookie("token"),"iscbdw":1
  384. // "pid": pid
  385. }, function(result) {
  386. result = $.parseJSON(result);
  387. if(saveArr.length>0){
  388. for(var x = 0; x < saveArr.length; x++){
  389. $(result.data).each(function(i, n) {
  390. if(saveArr[x] == n.F_DeptId) {
  391. n.checked = "true";
  392. }
  393. })
  394. }
  395. }
  396. $.fn.zTree.init($("#addTreeDemo"), setting1, result.data); //实例化树形图
  397. //父节点不显示checkbox
  398. //获取到zTree
  399. var zTree1 = $.fn.zTree.getZTreeObj("addTreeDemo");
  400. //设置只能选择最后一层的子节点
  401. var allNodes1= zTree1.transformToArray(zTree1.getNodes());//
  402. //去掉选框
  403. if(allNodes1.length>0){
  404. for(var i=0;i<allNodes1.length;i++){
  405. if(allNodes1[i].isParent){//找到父节点
  406. allNodes1[i].nocheck=true;//nocheck为true表示没有选择框
  407. zTree1.updateNode(allNodes1[i]);
  408. }
  409. }
  410. }
  411. $.fn.zTree.init($("#treeDemo"), setting, result.data);
  412. //父节点不显示checkbox
  413. //获取到zTree
  414. var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  415. //设置只能选择最后一层的子节点
  416. var allNodes= zTree.transformToArray(zTree.getNodes());//
  417. //去掉选框
  418. if(allNodes.length>0){
  419. for(var i=0;i<allNodes.length;i++){
  420. if(allNodes[i].isParent){//找到父节点
  421. allNodes[i].nocheck=true;//nocheck为true表示没有选择框
  422. zTree.updateNode(allNodes[i]);
  423. }
  424. }
  425. }
  426. });
  427. }
  428. var setting1 = {
  429. data: {
  430. key: {
  431. name: "F_DeptName"
  432. },
  433. simpleData: {
  434. enable: true,
  435. idKey: "F_DeptId",
  436. pIdKey: "F_PartentId",
  437. rootPId: 0
  438. }
  439. },
  440. check: {
  441. enable: true,
  442. chkboxType: {"Y":"", "N":""}
  443. },
  444. view: {
  445. dblClickExpand: true
  446. },
  447. callback: {
  448. beforeClick: zTreeOnClick,
  449. onCheck: onCheck1
  450. }
  451. };
  452. function zTreeOnClick(treeId, treeNode) {
  453. var zTree = $.fn.zTree.getZTreeObj("addTreeDemo"),
  454. nodes = zTree.getCheckedNodes(true);
  455. zTree.checkNode(treeNode, !treeNode.checked, null, true);
  456. return false;
  457. };
  458. function onCheck1(e, treeId, treeNode) {
  459. var zTree = $.fn.zTree.getZTreeObj("addTreeDemo"),
  460. nodes = zTree.getCheckedNodes(true);
  461. console.log(treeNode)
  462. if(treeNode.level >= 2) {
  463. var v = "",opid='';
  464. for (var i=0, l=nodes.length; i<l; i++) {
  465. v += nodes[i].F_DeptName + ",";
  466. opid += nodes[i].F_DeptId + ","
  467. }
  468. if (v.length > 0 ) v = v.substring(0, v.length-1);
  469. var cityObj = $("#citySel1");
  470. cityObj.val(v);
  471. if (opid.length > 0 ) opid = opid.substring(0, opid.length-1);
  472. $('#PID').attr("value",opid)
  473. }
  474. }
  475. var setting = {
  476. data: {
  477. key: {
  478. name: "F_DeptName"
  479. },
  480. simpleData: {
  481. enable: true,
  482. idKey: "F_DeptId",
  483. pIdKey: "F_PartentId",
  484. rootPId: 0
  485. }
  486. },
  487. check: {
  488. enable: true,
  489. chkboxType: {"Y":"", "N":""}
  490. },
  491. view: {
  492. dblClickExpand: true
  493. },
  494. callback: {
  495. beforeClick: beforeClick,
  496. onCheck: onCheck
  497. }
  498. };
  499. function beforeClick(treeId, treeNode) {
  500. var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
  501. nodes = zTree.getCheckedNodes(true);
  502. zTree.checkNode(treeNode, !treeNode.checked, null, true);
  503. return false;
  504. }
  505. function onCheck(e, treeId, treeNode) {
  506. var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
  507. nodes = zTree.getCheckedNodes(true);
  508. console.log(treeNode)
  509. if(treeNode.level >= 2) {
  510. var v = "",opid='';
  511. for (var i=0, l=nodes.length; i<l; i++) {
  512. v += nodes[i].F_DeptName + ",";
  513. opid += nodes[i].F_DeptId + ","
  514. }
  515. if (v.length > 0 ) v = v.substring(0, v.length-1);
  516. var cityObj = $("#citySel");
  517. cityObj.val(v);
  518. if (opid.length > 0 ) opid = opid.substring(0, opid.length-1);
  519. $('#OPID').attr("value",opid)
  520. }
  521. }
  522. function showMenu() {
  523. var cityObj = $("#citySel");
  524. $("#menuContent").css({left:0, top: $("#citySel").height + "px"}).slideDown("fast");
  525. $("body").bind("mousedown", onBodyDown);
  526. }
  527. function hideMenu() {
  528. $("#menuContent").fadeOut("fast");
  529. $("body").unbind("mousedown", onBodyDown);
  530. }
  531. function onBodyDown(event) {
  532. if (!(event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
  533. hideMenu();
  534. }
  535. }
  536. //交办
  537. function JA() {
  538. $.post(huayi.config.callcenter_url + 'WorkOrder/AssignWorkOrder', {
  539. workorderid: wid,
  540. maindeptid: $("#PID").val(), //主办单位
  541. otherdeptids: $('#OPID').val(),//协办单位
  542. limittime: $("#startTime").val(), //办理时限
  543. assignedopinion: $('#assignedopinion').val(), //交办意见
  544. state: State,
  545. assignid: a,
  546. token: $.cookie("token")
  547. }, function(result) {
  548. result = JSON.parse(result);
  549. if(result.state.toLowerCase() == "success") {
  550. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  551. //console.log(index);
  552. parent.layer.close(index); //再执行关闭
  553. parent.$('#orderlist').bootstrapTable('refresh');
  554. var savemsgs = State==0 ? '保存成功':'交办成功';
  555. parent.layer.msg(savemsgs);
  556. }
  557. })
  558. }
  559. //所属分类下拉
  560. $('#inpts').click(function() {
  561. $('.xlAdd').css('display', 'block')
  562. });
  563. $('#xls').click(function() {
  564. if($('.xlAdd').css('display') == 'block') {
  565. $('.xlAdd').css('display', 'none')
  566. } else {
  567. $('.xlAdd').css('display', 'block')
  568. }
  569. });
  570. $('.addTree').mouseleave(function() {
  571. $(this).css('display', 'none')
  572. });
  573. $('#citySel').click(function(){ showMenu() });
  574. $('#xl_one').click(function(){ showMenu() });
  575. $('#menuContent').mouseleave(function() {
  576. $(this).css('display', 'none')
  577. });
  578. //草稿详情
  579. function Detail() {
  580. $.getJSON(huayi.config.callcenter_url + 'WorkOrder/GetDraftInfo', {
  581. workorderid: wid,
  582. type: 1,
  583. token: $.cookie("token")
  584. }, function(result) {
  585. if(result.state.toLowerCase() == "success") {
  586. if(result.data.length > 0) {
  587. var lTimes = result.data[0].F_LimitTime;
  588. var lTime = lTimes.substring(0,10);
  589. $("#startTime").val(lTime);
  590. $('#assignedopinion').val(result.data[0].F_AssignedOpinion);
  591. $('#inpts').val(result.data[0].DeptName);
  592. $('#PID').val(result.data[0].F_MainDeptId);
  593. if(result.data[0].OtherDeptName){
  594. $("#citySel").val(result.data[0].OtherDeptName);
  595. $('#OPID').val(result.data[0].F_OtherDeptIds);//协办单位
  596. var arrs1 = result.data[0].F_OtherDeptIds.split(',');
  597. tree(arrs1);
  598. }
  599. a = result.data[0].F_Id;
  600. }
  601. }
  602. })
  603. }
  604. });
  605. function darptSearch() {
  606. $('.xlAdd').css('display', 'none');
  607. $(".selDpart1").css('display', 'block');
  608. depart();
  609. };
  610. $("#sponsor").on('click', 'li', function() {
  611. $(".selDpart1").css('display', 'none');
  612. $("#inpts").val($(this).html());
  613. $("#Dpment").val($(this).html());
  614. //$("#Dpment").val($(this).attr("index"));
  615. $(".Cleans").show();
  616. });
  617. ///部门
  618. function depart() {
  619. $("#sponsor").empty();
  620. $.getJSON(huayi.config.callcenter_url + "Department/GetDeptListByDept", {
  621. "token": $.cookie("token"),
  622. dept: $('.inps').val(),
  623. }, function(data) {
  624. if(data.state.toLowerCase() == "success") {
  625. var content = data.data;
  626. $(content).each(function(i, n) {
  627. $("<li index='" + n.F_DeptId + "'>" + n.F_DeptName + "</li>").appendTo("#sponsor");
  628. })
  629. }
  630. })
  631. };
  632. </script>
  633. </body>
  634. </html>