project-detail.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--#include file="common/_header.html"-->
  5. <title>项目详情页</title>
  6. </head>
  7. <body>
  8. <article class="page-container">
  9. <form class="form form-horizontal" id="form1">
  10. <input type="hidden" class="input-text" id="projectId" name="projectId">
  11. <div class="row cl">
  12. <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>所属园区:</label>
  13. <div class="formControls col-xs-8 col-sm-9">
  14. <span class="select-box">
  15. <select class="select" id="parkId" name="parkId">
  16. </select>
  17. </span>
  18. </div>
  19. </div>
  20. <div class="row cl">
  21. <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>项目名称:</label>
  22. <div class="formControls col-xs-8 col-sm-9">
  23. <input type="text" class="input-text" id="title" name="title">
  24. </div>
  25. </div>
  26. <div class="row cl">
  27. <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>项目签约时间:</label>
  28. <div class="formControls col-xs-8 col-sm-9">
  29. <input id="startTime" name="startTime" class="input-text" style="width:180px;" onfocus="WdatePicker({dateFmt:'yyyy-MM',readOnly:true})" />
  30. </div>
  31. </div>
  32. <div class="row cl">
  33. <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>计划投资:</label>
  34. <div class="formControls col-xs-8 col-sm-9">
  35. <input type="text" class="input-text" id="size" name="size">
  36. </div>
  37. </div>
  38. <div class="row cl">
  39. <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>选址位于:</label>
  40. <div class="formControls col-xs-8 col-sm-9">
  41. <input type="text" class="input-text" id="address" name="address">
  42. </div>
  43. </div>
  44. <div class="row cl">
  45. <label class="form-label col-xs-4 col-sm-3">用地面积:</label>
  46. <div class="formControls col-xs-8 col-sm-9">
  47. <input type="text" class="input-text" id="landScale" name="landScale">
  48. </div>
  49. </div>
  50. <!-- <div class="row cl">
  51. <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>责任单位:</label>
  52. <div class="formControls col-xs-8 col-sm-9">
  53. <input type="text" class="input-text" id="unit" name="unit">
  54. </div>
  55. </div> -->
  56. <div class="row cl">
  57. <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>相关情况:</label>
  58. <div class="formControls col-xs-8 col-sm-9">
  59. <input type="text" class="input-text" id="detail" name="detail">
  60. </div>
  61. </div>
  62. <div class="row cl">
  63. <label class="form-label col-xs-4 col-sm-3">相关乡镇场:</label>
  64. <div class="formControls col-xs-8 col-sm-9">
  65. <select class="select2" style="width:100%;" id="townshipAdminId" name="townshipAdminId">
  66. </select>
  67. </div>
  68. </div>
  69. <div class="row cl">
  70. <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>项目秘书:</label>
  71. <div class="formControls col-xs-8 col-sm-9">
  72. <span class="select-box">
  73. <select class="select2" style="width:200px" id="secretaryAdminId" name="secretaryAdminId">
  74. <option value=""></option>
  75. </select>
  76. </span>
  77. </div>
  78. </div>
  79. <div class="row cl">
  80. <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>包联领导:</label>
  81. <div class="formControls col-xs-8 col-sm-9">
  82. <span class="select-box">
  83. <select class="select2" style="width:200px" id="leaderAdminId" name="leaderAdminId">
  84. <option value=""></option>
  85. </select>
  86. </span>
  87. </div>
  88. </div>
  89. <div class="row cl">
  90. <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>项目方所属管理员:</label>
  91. <div class="formControls col-xs-8 col-sm-9">
  92. <span class="select-box">
  93. <select class="select2" style="width:200px" id="projectAdminId" name="projectAdminId" >
  94. <option value=""></option>
  95. </select>
  96. </span>
  97. </div>
  98. </div>
  99. <input type="hidden" class="input-text" id="fileUrls" name="fileUrls">
  100. </form>
  101. <div class="form form-horizontal" >
  102. <div class="row cl">
  103. <label class="form-label col-xs-4 col-sm-3">联系函附件:</label>
  104. <!--用来存放文件信息-->
  105. <div class="formControls col-xs-8 col-sm-9">
  106. <div id="thelist" class="uploader-list"></div>
  107. <div class="btns">
  108. <div id="picker">选择文件</div>
  109. <button class="btn btn-default" id="uploadbtn">开始上传</button>
  110. </div>
  111. </div>
  112. </div>
  113. </form>
  114. <div class="row cl">
  115. <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
  116. <input class="btn btn-primary radius" type="button" id="subForm" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
  117. </div>
  118. </div>
  119. </article>
  120. <!--_footer 作为公共模版分离出去-->
  121. <!--#include file="common/_footer.html"-->
  122. <!--/_footer 作为公共模版分离出去-->
  123. <!--请在下方写此页面业务相关的脚本-->
  124. <script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
  125. <script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
  126. <script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
  127. <script type="text/javascript" src="scripts/global.js"></script>
  128. <!--引入webuploader-->
  129. <link rel="stylesheet" type="text/css" href="lib/webuploader/0.1.5/webuploader.css">
  130. <script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.js"></script>
  131. <!-- select2 start-->
  132. <link rel="stylesheet" type="text/css" href="lib/select2/select2.min.css" />
  133. <script src="lib/select2/select2.full.js" type="text/javascript"></script>
  134. <script src="lib/select2/select2.zh-CN.js" type="text/javascript"></script>
  135. <!-- select2 end -->
  136. <script type="text/javascript">
  137. var path = global_backend_url;
  138. $(document).ready(function(){
  139. //获取url中传参
  140. var id = getQueryString("id");
  141. var needLoad = false;
  142. var remoteUrl = path + "/project/add";
  143. if(id!=null && id.length>0){
  144. remoteUrl = path + "/project/update";
  145. needLoad = true;
  146. }
  147. $("#form1").validate({
  148. rules:{
  149. title:{
  150. required:true
  151. },
  152. startTime:{
  153. required:true
  154. },
  155. size:{
  156. required:true
  157. },
  158. address:{
  159. required:true
  160. },
  161. // unit:{
  162. // required:true
  163. // },
  164. detail:{
  165. required:true
  166. },
  167. secretaryAdminId:{
  168. required:true
  169. },
  170. leaderAdminId:{
  171. required:true
  172. },
  173. projectAdminId:{
  174. required:true
  175. }
  176. },
  177. onkeyup:false,
  178. focusCleanup:true,
  179. success:"valid",
  180. submitHandler:function(form){
  181. var loadingIndex = layer.load(1, {shade: [0.1,'#fff']});
  182. $(form).ajaxSubmit({
  183. type: 'post',
  184. url: remoteUrl,
  185. success: function(data){
  186. layer.close(loadingIndex);
  187. if(data.result){
  188. layer.msg('添加成功!',{icon:1,time:1000});
  189. var index = parent.layer.getFrameIndex(window.name);
  190. if(index>=0){
  191. parent.reloadList();
  192. parent.layer.close(index);
  193. }
  194. }
  195. else{
  196. layer.msg(data.message,{icon:1,time:1000});
  197. }
  198. },
  199. error: function(XmlHttpRequest, textStatus, errorThrown){
  200. layer.msg('error!',{icon:1,time:1000});
  201. }
  202. });
  203. }
  204. });
  205. if(needLoad){
  206. var loadingIndex = layer.load(1, {shade: [0.1,'#fff']});
  207. $.get(path + "/project/detail/" + id,null, function(json){
  208. layer.close(loadingIndex);
  209. if(json.result){
  210. json2Form(json.data,"form1");
  211. // if(json.data.procInstId != null ){
  212. // $("#projectAdminId").attr("disabled", true);
  213. // }
  214. getSelectMany("townshipAdminId",json.data.townshipAdminId,json.data.townshipAdminName);
  215. getSelect("secretaryAdminId",json.data.secretaryAdmin);
  216. getSelect("leaderAdminId",json.data.leaderAdmin);
  217. getSelect("projectAdminId",json.data.projectAdmin);
  218. getParkList(json.data.parkId);
  219. loadFile(json.data.pfList);
  220. }
  221. else{
  222. layer.msg(json.message);
  223. }
  224. },"json");
  225. }else{
  226. getParkList("");
  227. getSelectMany("townshipAdminId",null,null);
  228. getSelect("secretaryAdminId",null);
  229. getSelect("leaderAdminId",null);
  230. getSelect("projectAdminId",null);
  231. }
  232. $("#subForm").click(function(){
  233. $("#form1").submit();
  234. });
  235. //swf: 'lib/webuploader/0.1.5/Uploader.swf',
  236. var $list = $("#thelist");
  237. var uploader = WebUploader.create({
  238. // swf文件路径
  239. swf: 'lib/webuploader/0.1.5/Uploader.swf',
  240. // 文件接收服务端。
  241. server: path + "/projectFile/fileUpload",
  242. // 选择文件的按钮。可选。
  243. // 内部根据当前运行是创建,可能是input元素,也可能是flash.
  244. pick: '#picker',
  245. // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
  246. resize: false
  247. });
  248. // 当有文件被添加进队列的时候
  249. uploader.on('uploadBeforeSend', function(obj, data, headers) {
  250. $.extend(headers, {
  251. "Authorization": sessionStorage.getItem("token")
  252. });
  253. });
  254. // 当有文件被添加进队列的时候
  255. uploader.on( 'fileQueued', function( file ) {
  256. $list.append( '<div id="' + file.id + '" class="item">' +
  257. '<h6 class="info">' + file.name + '</h6>' +
  258. '<p class="state">等待上传...</p>' +
  259. '</div>' );
  260. });
  261. // 文件上传过程中创建进度条实时显示。
  262. uploader.on( 'uploadProgress', function( file, percentage ) {
  263. var $li = $( '#'+file.id ),
  264. $percent = $li.find('.progress .progress-bar');
  265. // 避免重复创建
  266. if ( !$percent.length ) {
  267. $percent = $('<div class="progress progress-striped active">' +
  268. '<div class="progress-bar" role="progressbar" style="width: 0%">' +
  269. '</div>' +
  270. '</div>').appendTo( $li ).find('.progress-bar');
  271. }
  272. $li.find('p.state').text('上传中');
  273. $percent.css( 'width', percentage * 100 + '%' );
  274. });
  275. uploader.on( 'uploadSuccess', function( file ,response) {
  276. $( '#'+file.id ).find('p.state').text('已上传');
  277. var fileUrls = $("#fileUrls").val();
  278. $("#fileUrls").val(response.data.fileUrls + "*" + fileUrls);
  279. });
  280. uploader.on( 'uploadError', function( file ) {
  281. $( '#'+file.id ).find('p.state').text('上传出错');
  282. });
  283. uploader.on( 'uploadComplete', function( file ) {
  284. $( '#'+file.id ).find('.progress').fadeOut();
  285. });
  286. $("#uploadbtn").click(function(){
  287. uploader.upload();
  288. });
  289. });
  290. function getSelect(id,value){
  291. if(value != null){
  292. var Html = "<option value='"+value.id+"' selected>" + value.realName + "</option>";
  293. $('#' + id).append(Html);
  294. //$('#' + id).select2();
  295. }
  296. $("#" + id).select2({
  297. language: "zh-CN",
  298. placeholder:"请输入用户姓名",//文本框的提示信息
  299. minimumInputLength:0, //至少输入n个字符,才去加载数据
  300. allowClear: true, //是否允许用户清除文本信息
  301. ajax:{
  302. url:path + "/jpAdmin/selectUser", //地址
  303. type: "POST",
  304. dataType:'json', //接收的数据类型
  305. delay:250,
  306. cache: true,
  307. processResults: function (data) {
  308. var results = data.map(function(item){
  309. return {
  310. id : item.userId,
  311. text : item.realName,
  312. userName: item.userName,
  313. orgName : item.orgName
  314. }
  315. });
  316. return {
  317. results: results
  318. }
  319. }
  320. },
  321. language: "zh-CN",
  322. templateResult: function (state) {
  323. var html = "<div>";
  324. html += "<strong>姓名:" + state.text + "</strong>(" + state.userName + ")<br/>";
  325. html += "单位:" + state.orgName;
  326. html += "</div>";
  327. return $(html);
  328. }
  329. });
  330. }
  331. function getSelectMany(id,userId,userName){
  332. $("#" + id).select2({
  333. language: "zh-CN",
  334. placeholder:"请输入用户姓名",//文本框的提示信息
  335. minimumInputLength:0, //至少输入n个字符,才去加载数据
  336. allowClear: false, //是否允许用户清除文本信息
  337. multiple:true,
  338. ajax:{
  339. url:path + "/jpAdmin/selectUser", //地址
  340. type: "POST",
  341. dataType:'json', //接收的数据类型
  342. delay:250,
  343. cache: true,
  344. processResults: function (data) {
  345. var results = data.map(function(item){
  346. return {
  347. id : item.userId,
  348. text : item.realName,
  349. userName: item.userName,
  350. orgName : item.orgName
  351. }
  352. });
  353. return {
  354. results: results
  355. }
  356. }
  357. },
  358. language: "zh-CN",
  359. templateResult: function (state) {
  360. var html = "<div>";
  361. html += "<strong>姓名:" + state.text + "</strong>(" + state.userName + ")<br/>";
  362. html += "单位:" + state.orgName;
  363. html += "</div>";
  364. return $(html);
  365. }
  366. });
  367. $("#" + id).on("select2-clearing",function(e){
  368. //alert(true);
  369. });
  370. if(userId!=null && userId.length>0){
  371. var ids = userId.split(",");
  372. var names = userName.split(",");
  373. $('option', $("#" + id)).remove();
  374. for(var i=0;i<ids.length;i++){
  375. if(ids[i] != ""){
  376. $("#" + id).append(new Option(names[i],ids[i], false, false));//第一个参数时id,第二个参数是text
  377. }
  378. }
  379. $($("#" + id)).val(ids).trigger('change');
  380. }
  381. else{
  382. $('option', $("#" + id)).remove();
  383. $($("#" + id)).val(null).trigger('change');
  384. }
  385. }
  386. function getParkList(parkId){
  387. $.post(path + "/park/allList",function(json){
  388. if(json.result){
  389. $.each(json.data,function(index,obj){
  390. if(parkId!=""){
  391. if(obj.parkId==parkId){
  392. $("#parkId").append("<option value='"+obj.parkId+"' selected>"+obj.title+"</option>")
  393. }else{
  394. $("#parkId").append("<option value='"+obj.parkId+"'>"+obj.title+"</option>")
  395. }
  396. }
  397. else{
  398. $("#parkId").append("<option value='"+obj.parkId+"'>"+obj.title+"</option>")
  399. }
  400. })
  401. }
  402. else{
  403. layer.msg(json.message);
  404. }
  405. },"json")
  406. }
  407. function loadFile(fileList){
  408. if(fileList.length > 0){
  409. $("#thelist").append('<h4 class="info">已上传附件</h4>');
  410. for(var i=0;i<fileList.length;i++){
  411. $("#thelist").append( '<div id="' + fileList[i].fileId + '" class="item">' +
  412. '<h6 class="info"><a href="' + fileList[i].realAddress + '" download = "' + fileList[i].fileName + "." + fileList[i].fileType.toLowerCase() + '" target="_blank">' + fileList[i].fileName + "." + fileList[i].fileType.toLowerCase() + '</a>' +
  413. '<a href="javacript:void(0);" onclick=delFile("' + fileList[i].fileId + '")>删除</a>' +
  414. '</h6>' +
  415. '</div>' );
  416. }
  417. }
  418. }
  419. function delFile(fileId){
  420. layer.confirm("是否删除?",{
  421. btns:["是","否"]
  422. },function(){
  423. $.post(path + "/projectFile/deleteReturnFile/" + fileId,null,function(json){
  424. if(json.result){
  425. layer.msg("删除成功!",{icon:1,time:2000});
  426. var fileList = json.data.fileList;
  427. $("#thelist").empty();
  428. if(fileList.length > 0){
  429. $("#thelist").append('<h4 class="info">已上传附件</h4>');
  430. for(var i=0;i<fileList.length;i++){
  431. $("#thelist").append( '<div id="' + fileList[i].fileId + '" class="item">' +
  432. '<h6 class="info"><a href="' + fileList[i].realAddress + '" download = "' + fileList[i].fileName + "." + fileList[i].fileType.toLowerCase() + '" target="_blank">' + fileList[i].fileName + "." + fileList[i].fileType.toLowerCase() + '</a>' +
  433. '<a href="javacript:void(0);" onclick=delFile("' + fileList[i].fileId + '")>删除</a>' +
  434. '</h6>' +
  435. '</div>' );
  436. }
  437. }
  438. }
  439. else{
  440. layer.msg("删除失败!" + json.message);
  441. }
  442. });
  443. });
  444. }
  445. </script>
  446. <!--/请在上方写此页面业务相关的脚本-->
  447. </body>
  448. </html>