商丘12345 前端

jiaoban.html 17KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625
  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 type="text" autocomplete="off" class="inps" id="inpts" onkeyup="darptSearch()" >
  193. <i class="xl xl_one" id="xls"></i>
  194. <div class="addTree xlAdd">
  195. <ul id="addTreeDemo" class="ztree">
  196. </ul>
  197. </div>
  198. </div>
  199. <div class="selDpart1">
  200. <ul id="sponsor">
  201. </ul>
  202. </div>
  203. </div>
  204. <div class="company">
  205. <span>协办单位:</span>
  206. <div class="inpBox" id="organizer">
  207. <input id="citySel" class="inps" readonly />
  208. <input type="hidden" id="OPID" />
  209. <i class="xl xl_one" id="xl_one"></i>
  210. <div id="menuContent" class="menuContent">
  211. <ul id="treeDemo" class="ztree"></ul>
  212. </div>
  213. </div>
  214. </div>
  215. </div>
  216. <table class="alignC" border="1" cellpadding="4" cellspacing="0" bordercolor="#cbcbcb">
  217. <tbody>
  218. <tr style="min-height: 49px;">
  219. <td rowspan="2" width="10%">编号
  220. </td>
  221. <td rowspan="2" width="22%">
  222. <span class="gdbhs"></span>
  223. </td>
  224. <td rowspan="2" width="13%">受理时间
  225. </td>
  226. <td rowspan="2" width="16%">
  227. <span class="tssj"></span>
  228. </td>
  229. <td width="16%">签收时间
  230. </td>
  231. <td>
  232. <span class="QSHJ"></span>
  233. </td>
  234. </tr>
  235. <tr style="min-height: 49px;">
  236. <td>
  237. 办理时限
  238. </td>
  239. <td>
  240. <input type="text" id="startTime" class="laydate-icon" style="height: 32px;width: 96%;">
  241. </td>
  242. </tr>
  243. <tr style="min-height: 49px;">
  244. <td>
  245. 投诉人
  246. </td>
  247. <td>
  248. <span class="gdbh"></span>
  249. </td>
  250. <td>
  251. 联系电话
  252. </td>
  253. <td>
  254. <span class="lxdh"></span>
  255. </td>
  256. <td>
  257. 秘密等级
  258. </td>
  259. <td>
  260. <span class="MJ"></span>
  261. </td>
  262. </tr>
  263. <tr style="min-height: 49px;">
  264. <td>
  265. 地址
  266. </td>
  267. <td colspan="5" style="text-align: left;text-indent: .3em; padding: 4px;">
  268. <span class="mmdj"></span>
  269. </td>
  270. </tr>
  271. <tr style="height: 180px;">
  272. <td class="style1">内容<br/>摘要
  273. </td>
  274. <td colspan="5" style="text-align:justify; padding:4px;text-indent: 2em;">
  275. <span class="lxr"></span>
  276. </td>
  277. </tr>
  278. <tr style="height: 110px;">
  279. <td>
  280. <span>调度<br/>意见</span>
  281. </td>
  282. <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>
  283. <input type="hidden" id="ID" />
  284. <input type="hidden" id="PID" />
  285. <input type="hidden" id="Dpment" />
  286. </tr>
  287. </tbody>
  288. </table>
  289. <div class="btn_box" style="text-align: center;">
  290. <button class="btns BC">保存</button>
  291. <button class="btns Submit">保存并交办</button>
  292. </div>
  293. </div>
  294. <script src="../css/laydate/laydate.js"></script>
  295. <script src="../js/zTree/jquery.ztree.core.js"></script>
  296. <script src="../js/zTree/jquery.ztree.excheck.min.js"></script>
  297. <script src="../js/adjustHeight.js"></script>
  298. <script>
  299. var wid = helper.request.queryString("wid");
  300. var State = 0;
  301. var a = $("#ID").val();
  302. $("#inpts").val($("#Dpment").val());
  303. var saveArrs = [];
  304. $(document).ready(function() {
  305. Detail();
  306. if (wid) {
  307. $.getJSON(huayi.config.callcenter_url + 'WorkOrder/GetWorkOrder', { workorderid: wid, "token": $.cookie("token") }, function (result) {
  308. if (result.state.toLowerCase() == "success") {
  309. var content = result.data;
  310. //console.log( content);
  311. $(".gdbhs").text(content.data[0].F_WorkOrderId);//工单
  312. $(".tsfs").text(content.data[0].SourceName);
  313. $(".lxr").text(content.data[0].F_CusName);
  314. $('.lxdh').text(content.data[0].F_CusPhone);
  315. $(".lxr ").text(content.data[0].F_ComContent);//内容
  316. var T= content.data[0].F_CreateTime;//受理时间
  317. if(T){
  318. var S=T.substring(0, T.indexOf(' '));
  319. $('.tssj').text(S);
  320. }
  321. if(content.jbdata.length > 0){
  322. var qst = content.jbdata[0].F_SureTime;//签收时间
  323. if(qst){
  324. var qs = qst.substring(0,qst.indexOf(' '));
  325. $('.QSHJ').text(qs);
  326. }
  327. }
  328. $(".gdbh").text(content.data[0].F_CusName);//投诉人
  329. $(".mmdj").text(content.data[0].F_SourceAddress);//地址
  330. $(".tslx").text(content.data[0].TypeName1);//偶投诉类型
  331. $(".bljg").text(content.data[0].F_Result);
  332. //密级程度
  333. if(content.data[0].F_IsProtect == 0) {
  334. $('.MJ').text("普通");
  335. } else {
  336. $('.MJ').text("保密");
  337. }
  338. var n=content.psdata.length;
  339. if (n > 0) {
  340. var ldps = content.psdata[n - 1].F_SuperOpinion;
  341. $(".ldps").html(ldps);
  342. }
  343. }
  344. })
  345. }
  346. $("#inpts").val($("#Dpment").val());
  347. laydate.skin('blue');
  348. laydate({
  349. elem: '#startTime',
  350. event: 'focus'
  351. });
  352. //保存
  353. $('.BC').click(function() {
  354. if($("#PID").val() == ""){
  355. layer.msg("主办单位不能为空");
  356. }else if($("#startTime").val() == ""){
  357. layer.msg("办理时限不能为空");
  358. }else
  359. if($("#assignedopinion").val() == "") {
  360. layer.msg("调度意见不能为空");
  361. } else {
  362. State = 0;
  363. JA();
  364. }
  365. });
  366. //保存并提交
  367. $('.Submit').click(function() {
  368. if($("#PID").val() == ""){
  369. layer.msg("主办单位不能为空");
  370. }else if($("#startTime").val() == ""){
  371. layer.msg("办理时限不能为空");
  372. }else if($("#assignedopinion").val() == "") {
  373. layer.msg("调度意见不能为空");
  374. } else {
  375. State = 1;
  376. JA();
  377. }
  378. });
  379. tree(saveArrs);
  380. function tree(saveArr) {
  381. $.get(huayi.config.callcenter_url + 'Department/GetDeptList', {
  382. "token": $.cookie("token"),"iscbdw":1
  383. // "pid": pid
  384. }, function(result) {
  385. result = $.parseJSON(result);
  386. if(saveArr.length>0){
  387. for(var x = 0; x < saveArr.length; x++){
  388. $(result.data).each(function(i, n) {
  389. if(saveArr[x] == n.F_DeptId) {
  390. n.checked = "true";
  391. }
  392. })
  393. }
  394. }
  395. $.fn.zTree.init($("#addTreeDemo"), setting1, result.data); //实例化树形图
  396. $.fn.zTree.init($("#treeDemo"), setting, result.data);
  397. //父节点不显示checkbox
  398. //获取到zTree
  399. var zTree = $.fn.zTree.getZTreeObj("treeDemo");
  400. //设置只能选择最后一层的子节点
  401. var allNodes= zTree.transformToArray(zTree.getNodes());//
  402. //去掉选框
  403. if(allNodes.length>0){
  404. for(var i=0;i<allNodes.length;i++){
  405. if(allNodes[i].isParent){//找到父节点
  406. allNodes[i].nocheck=true;//nocheck为true表示没有选择框
  407. zTree.updateNode(allNodes[i]);
  408. }
  409. }
  410. }
  411. });
  412. }
  413. var setting1 = {
  414. data: {
  415. key: {
  416. name: "F_DeptName"
  417. },
  418. simpleData: {
  419. enable: true,
  420. idKey: "F_DeptId",
  421. pIdKey: "F_PartentId",
  422. rootPId: 0
  423. }
  424. },
  425. callback: {
  426. onClick: zTreeOnClick
  427. }
  428. };
  429. function zTreeOnClick(event, treeId, treeNode) {
  430. if(treeNode.level >= 2) {
  431. $('#inpts').val(treeNode.F_DeptName);
  432. $("#PID").val(treeNode.F_DeptId);
  433. $("#Dpment").val(treeNode.F_DeptName);
  434. }
  435. };
  436. var setting = {
  437. data: {
  438. key: {
  439. name: "F_DeptName"
  440. },
  441. simpleData: {
  442. enable: true,
  443. idKey: "F_DeptId",
  444. pIdKey: "F_PartentId",
  445. rootPId: 0
  446. }
  447. },
  448. check: {
  449. enable: true,
  450. chkboxType: {"Y":"", "N":""}
  451. },
  452. view: {
  453. dblClickExpand: true
  454. },
  455. callback: {
  456. beforeClick: beforeClick,
  457. onCheck: onCheck
  458. }
  459. };
  460. function beforeClick(treeId, treeNode) {
  461. var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
  462. nodes = zTree.getCheckedNodes(true);
  463. zTree.checkNode(treeNode, !treeNode.checked, null, true);
  464. return false;
  465. }
  466. function onCheck(e, treeId, treeNode) {
  467. var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
  468. nodes = zTree.getCheckedNodes(true);
  469. console.log(treeNode)
  470. if(treeNode.level >= 2) {
  471. var v = "",opid='';
  472. for (var i=0, l=nodes.length; i<l; i++) {
  473. v += nodes[i].F_DeptName + ",";
  474. opid += nodes[i].F_DeptId + ","
  475. }
  476. if (v.length > 0 ) v = v.substring(0, v.length-1);
  477. var cityObj = $("#citySel");
  478. cityObj.val(v);
  479. if (opid.length > 0 ) opid = opid.substring(0, opid.length-1);
  480. $('#OPID').attr("value",opid)
  481. }
  482. }
  483. function showMenu() {
  484. var cityObj = $("#citySel");
  485. $("#menuContent").css({left:0, top: $("#citySel").height + "px"}).slideDown("fast");
  486. $("body").bind("mousedown", onBodyDown);
  487. }
  488. function hideMenu() {
  489. $("#menuContent").fadeOut("fast");
  490. $("body").unbind("mousedown", onBodyDown);
  491. }
  492. function onBodyDown(event) {
  493. if (!(event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
  494. hideMenu();
  495. }
  496. }
  497. //交办
  498. function JA() {
  499. $.post(huayi.config.callcenter_url + 'WorkOrder/AssignWorkOrder', {
  500. workorderid: wid,
  501. maindeptid: $("#PID").val(), //主办单位
  502. otherdeptids: $('#OPID').val(),//协办单位
  503. limittime: $("#startTime").val(), //办理时限
  504. assignedopinion: $('#assignedopinion').val(), //交办意见
  505. state: State,
  506. assignid: a,
  507. token: $.cookie("token")
  508. }, function(result) {
  509. result = JSON.parse(result);
  510. if(result.state.toLowerCase() == "success") {
  511. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  512. //console.log(index);
  513. parent.layer.close(index); //再执行关闭
  514. parent.load();
  515. var savemsgs = State==0 ? '保存成功':'交办成功';
  516. parent.layer.msg(savemsgs);
  517. }
  518. })
  519. }
  520. //所属分类下拉
  521. $('#inpts').click(function() {
  522. $('.xlAdd').css('display', 'block')
  523. });
  524. $('#xls').click(function() {
  525. if($('.xlAdd').css('display') == 'block') {
  526. $('.xlAdd').css('display', 'none')
  527. } else {
  528. $('.xlAdd').css('display', 'block')
  529. }
  530. });
  531. $('.addTree').mouseleave(function() {
  532. $(this).css('display', 'none')
  533. });
  534. $('#citySel').click(function(){ showMenu() });
  535. $('#xl_one').click(function(){ showMenu() });
  536. $('#menuContent').mouseleave(function() {
  537. $(this).css('display', 'none')
  538. });
  539. //草稿详情
  540. function Detail() {
  541. $.getJSON(huayi.config.callcenter_url + 'WorkOrder/GetDraftInfo', {
  542. workorderid: wid,
  543. type: 1,
  544. token: $.cookie("token")
  545. }, function(result) {
  546. if(result.state.toLowerCase() == "success") {
  547. if(result.data.length > 0) {
  548. var lTimes = result.data[0].F_LimitTime;
  549. var lTime = lTimes.substring(0,10);
  550. $("#startTime").val(lTime);
  551. $('#assignedopinion').val(result.data[0].F_AssignedOpinion);
  552. $('#inpts').val(result.data[0].DeptName);
  553. $('#PID').val(result.data[0].F_MainDeptId);
  554. if(result.data[0].OtherDeptName){
  555. $("#citySel").val(result.data[0].OtherDeptName);
  556. $('#OPID').val(result.data[0].F_OtherDeptIds);//协办单位
  557. var arrs1 = result.data[0].F_OtherDeptIds.split(',');
  558. tree(arrs1);
  559. }
  560. a = result.data[0].F_Id;
  561. }
  562. }
  563. })
  564. }
  565. });
  566. function darptSearch() {
  567. $('.xlAdd').css('display', 'none');
  568. $(".selDpart1").css('display', 'block');
  569. depart();
  570. };
  571. $("#sponsor").on('click', 'li', function() {
  572. $(".selDpart1").css('display', 'none');
  573. $("#inpts").val($(this).html());
  574. $("#Dpment").val($(this).html());
  575. //$("#Dpment").val($(this).attr("index"));
  576. $(".Cleans").show();
  577. });
  578. ///部门
  579. function depart() {
  580. $("#sponsor").empty();
  581. $.getJSON(huayi.config.callcenter_url + "Department/GetDeptListByDept", {
  582. "token": $.cookie("token"),
  583. dept: $('.inps').val(),
  584. }, function(data) {
  585. if(data.state.toLowerCase() == "success") {
  586. var content = data.data;
  587. $(content).each(function(i, n) {
  588. $("<li index='" + n.F_DeptId + "'>" + n.F_DeptName + "</li>").appendTo("#sponsor");
  589. })
  590. }
  591. })
  592. };
  593. </script>
  594. </body>
  595. </html>