add.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396
  1. <!DOCTYPE HTML>
  2. <html xmlns:th="http://www.thymeleaf.org"
  3. xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  4. layout:decorate="~{admin/common/common}">
  5. <head>
  6. <title>添加</title>
  7. <style>
  8. multiple:hover .dropdown-clear-all, .dropdown-single:hover .dropdown-clear-all {
  9. display: none;
  10. }
  11. .line {
  12. display: block;
  13. text-align: left;
  14. background-color: #fff;
  15. color: #333;
  16. border-bottom: 1px solid #0a6999;
  17. border-color: #fff;
  18. border-bottom: 1px solid #0a6999;
  19. margin-top: 10px;
  20. vertical-align: middle;
  21. padding: 4px 12px;
  22. height: 31px;
  23. line-height: 31px;
  24. font-size: 14px;
  25. font-weight: bold;
  26. }
  27. </style>
  28. </head>
  29. <body layout:fragment="content">
  30. <article class="page-container">
  31. <form class="form form-horizontal" id="form-add">
  32. <div class="line">基本信息</div>
  33. <div class="row cl">
  34. <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>项目标题:</label>
  35. <div class="formControls col-xs-8 col-sm-9">
  36. <input type="text" class="input-text" placeholder="请输入项目标题" id="title" name="title"/>
  37. </div>
  38. </div>
  39. <div class="row cl">
  40. <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>项目用地:</label>
  41. <div class="formControls col-xs-8 col-sm-9">
  42. <input type="text" class="input-text" placeholder="请输入项目用地" id="location" name="location"/>
  43. </div>
  44. </div>
  45. <div class="row cl">
  46. <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>项目介绍:</label>
  47. <div class="formControls col-xs-8 col-sm-9">
  48. <textarea id="content" name="content" required></textarea>
  49. </div>
  50. </div>
  51. <div class="row cl" th:id="upload_file">
  52. <label class="form-label col-xs-4 col-sm-2"><span>项目附件:</span></label>
  53. <div class="formControls col-xs-8 col-sm-9">
  54. <!-- <div class="uploader-thum-container">-->
  55. <!-- <div id="fileListPre" class="uploader-list"></div>-->
  56. <!-- <div id="filePicker">选择文件</div>-->
  57. <!-- </div>-->
  58. <div><i class="Hui-iconfont" style="cursor: pointer;"
  59. th:onclick="'javascript:addFileLine(\'upload_file\')'">&#xe600; 添加</i></div>
  60. <table class="table table-border table-bordered table-bg table-hover ">
  61. <thead>
  62. <tr class="text-c">
  63. <th>文件</th>
  64. <th>操作</th>
  65. </tr>
  66. </thead>
  67. <tbody class="add_file_line" th:id="'tbody_upload_file'">
  68. <!-- <tr class="text-c">-->
  69. <!-- <td class="td_material">-->
  70. <!-- <div>-->
  71. <!-- <input class="uploadFileName btn btn-upload radius" name="uploadFileName"-->
  72. <!-- readonly="readonly"-->
  73. <!-- type="text" value="上传文件"-->
  74. <!-- th:onclick="'javascript:addFileByName(\'/land_supply/addApplyFile\',this);'"/>-->
  75. <!-- <input class="uploadFileId" type="hidden"-->
  76. <!-- th:name="'fileList[0].file_id'"/>-->
  77. <!-- </div>-->
  78. <!-- </td>-->
  79. <!-- <td class="icon_font"><i class='Hui-iconfont' onclick='removeLine(this)'>&#xe6a1; 删除</i>-->
  80. <!-- </td>-->
  81. <!-- </tr>-->
  82. </tbody>
  83. </table>
  84. </div>
  85. </div>
  86. <div th:if="*{canAsk}" th:each="item,itemStat: ${consulDepartmentList}">
  87. <div class="line">[[${item.name}]]</div>
  88. <div class="row cl" th:id=" 'department'+${item.id}">
  89. <label class="form-label col-xs-4 col-sm-2"></label>
  90. <div class="formControls col-xs-8 col-sm-9">
  91. <div><i class="Hui-iconfont" style="cursor: pointer;"
  92. th:onclick="'javascript:addQuestionLine(\''+'department'+${item.id}+'\')'">&#xe600; 添加</i>
  93. </div>
  94. <table class="table table-border table-bordered table-bg table-hover ">
  95. <thead>
  96. <tr class="text-c">
  97. <th>咨询问题</th>
  98. <th>操作</th>
  99. </tr>
  100. </thead>
  101. <tbody class="add_file_line" th:id="'tbody_department'+${item.id}">
  102. <tr class="text-c">
  103. <td class="td_material">
  104. <input type="text" class="input-text consultation" placeholder="请输入咨询的问题"
  105. th:name="'consultationList['+${itemStat.index}+'].consultation'"/>
  106. <input class="department_id" type="hidden"
  107. th:name="'consultationList['+${itemStat.index}+'].department_id'"
  108. th:value="${item.id}"/>
  109. </td>
  110. <td class="icon_font"><i class='Hui-iconfont' onclick='removeLine(this)'>&#xe6a1; 删除</i>
  111. </td>
  112. </tr>
  113. </tbody>
  114. </table>
  115. </div>
  116. </div>
  117. </div>
  118. <div class="row cl text-c" style="background-color: white">
  119. <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
  120. <a onclick="save()" class="btn btn-secondary radius"><i class="Hui-iconfont">&#xe632;</i>保存草稿</a>
  121. <a onclick="release()" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe632;</i>提交 </a>
  122. <a onClick="removeIframe();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</a>
  123. </div>
  124. </div>
  125. </form>
  126. </article>
  127. <script type="text/javascript" th:src="@{/h-ui/lib/webuploader/0.1.5/webuploader.min.js}"></script>
  128. <script th:inline="javascript">
  129. //富文本kindeditor初始化
  130. var editor;
  131. KindEditor.ready(function (K) {
  132. editor = K.create('#content', {
  133. uploadJson: pagePath + '/upload/kindEditorUpload',
  134. cssData: 'body {font-family: "微软雅黑"; font-size: 14px}',
  135. allowFileManager: false,
  136. allowUpload: true,
  137. width: "100%",
  138. height: "350px",
  139. items: array,
  140. syncType: "auto",
  141. filterMode: false,
  142. afterBlur: function () {
  143. this.sync();
  144. }
  145. });
  146. });
  147. $(function () {
  148. // 初始化上传
  149. var options = {
  150. uploadBtnId: '#filePicker',
  151. picturePreId: 'fileListPre',
  152. hiddenPictureUrl: 'img',
  153. hiddenPictureName: 'imgName',
  154. width: 81,
  155. height: 81,
  156. fileSizeLimit: 100 * 1024 * 1024,
  157. fileSingleSizeLimit: 100 * 1024 * 1024
  158. };
  159. var webUploadDoc = new $WebUploadDoc(options);
  160. webUploadDoc.init();
  161. // var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
  162. // var isOpera = userAgent.indexOf("Opera") > -1;
  163. // //判断是否IE浏览器
  164. // if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
  165. // $("#apply_startdate").remove();
  166. // $("#apply_enddate").remove();
  167. // } else {
  168. // $("#apply_startdateIE").remove();
  169. // $("#apply_enddateIE").remove();
  170. // var startDate = laydate.render({
  171. // elem: '#apply_startdate',
  172. // type: 'datetime',
  173. // done: function (value, date) {
  174. // setTimeout(function () {
  175. // $("#form-add").validate().element($("#apply_startdate"));
  176. // }, 100)
  177. // if (value !== '') {
  178. // endDate.config.min.year = date.year;
  179. // endDate.config.min.month = date.month - 1;
  180. // endDate.config.min.date = date.date;
  181. // endDate.config.min.hours = date.hours;
  182. // endDate.config.min.minutes = date.minutes;
  183. // endDate.config.min.seconds = date.seconds;
  184. // } else {
  185. // endDate.config.min.year = '1900';
  186. // endDate.config.min.month = '0';
  187. // endDate.config.min.date = '1';
  188. // endDate.config.min.hours = '0';
  189. // endDate.config.min.minutes = '0';
  190. // endDate.config.min.seconds = '0';
  191. // }
  192. // }
  193. // });
  194. //
  195. // var endDate = laydate.render({
  196. // elem: '#apply_enddate',
  197. // type: 'datetime',
  198. // done: function (value, date) {
  199. // setTimeout(function () {
  200. // $("#form-add").validate().element($("#apply_enddate"));
  201. // }, 100)
  202. // if (value !== '') {
  203. // startDate.config.max.year = date.year;
  204. // startDate.config.max.month = date.month - 1;
  205. // startDate.config.max.date = date.date;
  206. // startDate.config.max.hours = date.hours;
  207. // startDate.config.max.minutes = date.minutes;
  208. // startDate.config.max.seconds = date.seconds;
  209. // } else {
  210. // startDate.config.max.year = '2100';
  211. // startDate.config.max.month = '0';
  212. // startDate.config.max.date = '1';
  213. // startDate.config.max.hours = '0';
  214. // startDate.config.max.minutes = '0';
  215. // startDate.config.max.seconds = '0';
  216. // }
  217. // }
  218. // });
  219. // }
  220. });
  221. //取消
  222. function removeIframe() {
  223. var index = parent.layer.getFrameIndex(window.name);
  224. parent.layer.close(index);
  225. }
  226. //默认状态为草稿
  227. var state = '0';
  228. $("#form-add").validate({
  229. rules: {
  230. title: {
  231. required: true,
  232. },
  233. location: {
  234. required: true,
  235. },
  236. content: {
  237. required: true,
  238. }
  239. },
  240. onkeyup: false,
  241. focusCleanup: true,
  242. focusInvalid: false,
  243. success: "valid",
  244. submitHandler: function (form) {
  245. if (editor.isEmpty()) {
  246. errorMessage('请输入项目介绍');
  247. return false;
  248. } else if (editor.text().length > 2000) {
  249. //errorMessage('项目内容最多2000字');
  250. //return false;
  251. }
  252. $(form).ajaxSubmit({
  253. type: 'post',
  254. url: pagePath + "/land_supply/save",
  255. dataType: "json",
  256. data: {
  257. state: state,
  258. content_text: editor.text()
  259. },
  260. success: function (result) {
  261. if (result.success) {
  262. succeedMessage(result.message);
  263. setTimeClose();
  264. } else {
  265. // $(form).find(":submit").attr("disabled", false);
  266. errorMessage(result.message);
  267. }
  268. },
  269. error: function () {
  270. errorMessage('系统错误!');
  271. }
  272. });
  273. return false; // 非常重要,如果是false,则表明是不跳转,在本页上处理,也就是ajax,如果是非false,则传统的form跳转。
  274. }
  275. });
  276. //发布
  277. function release() {
  278. state = "1";
  279. $("#form-add").submit();
  280. }
  281. //保存草稿
  282. function save() {
  283. state = "0";
  284. $("#form-add").ajaxSubmit({
  285. type: 'post',
  286. url: pagePath + "/land_supply/save",
  287. dataType: "json",
  288. data: {
  289. state: state,
  290. content_text: editor.text()
  291. },
  292. success: function (data) {
  293. if (data.success) {
  294. succeedMessage(data.message);
  295. setTimeClose();
  296. } else {
  297. // $(form).find(":submit").attr("disabled", false);
  298. errorMessage(data.message);
  299. }
  300. },
  301. error: function () {
  302. errorMessage('系统错误!');
  303. }
  304. });
  305. }
  306. var departmentList = [[${departmentList}]];
  307. var index = departmentList.length;
  308. function addQuestionLine(divId) {
  309. var length = index;
  310. if ($("#" + divId).find('.add_file_line>tr').length > 0) {
  311. var html = "<i class='Hui-iconfont' onclick='removeLine(this)'>&#xe6a1; 删除</i>";
  312. $("#" + divId).find(".add_file_line tr:eq(0)").clone().insertAfter($("#" + divId).find('.add_file_line>tr').eq(-1))
  313. .find(".consultation").removeAttr("name").attr("name", "consultationList[" + length + "].consultation").val("").end()
  314. .find(".department_id").removeAttr("name").attr("name", "consultationList[" + length + "].department_id").end()
  315. .find(".icon_font").html(html).end();
  316. } else {
  317. var str = "";
  318. str += "<tr class='text-c'>"
  319. str += "<td class='td_material'>"
  320. str += "<input type='text' class='input-text consultation' placeholder='请输入咨询的问题' name='consultationList[" + length + "].consultation'/>"
  321. str += "<input class='department_id' type='hidden' value='" + divId.split("department")[1] + "' name='consultationList[" + length + "].department_id' />"
  322. str += "</td>"
  323. str += "<td class='icon_font'><i class='Hui-iconfont' onclick='removeLine(this)'>&#xe6a1; 删除</i>"
  324. str += "</td>"
  325. str += "</tr>"
  326. $("#tbody_" + divId).html(str);
  327. }
  328. $('#layui-layer2').height(48);
  329. index++;
  330. }
  331. var file_index = 0;
  332. function addFileLine(divId) {
  333. if (file_index == undefined) {
  334. file_index = 0
  335. }
  336. var length = file_index;
  337. if ($("#" + divId).find('.add_file_line>tr').length > 0) {
  338. var html = "<i class='Hui-iconfont' onclick='removeLine(this)'>&#xe6a1; 删除</i>";
  339. $("#" + divId).find(".add_file_line tr:eq(0)").clone().insertAfter($("#" + divId).find('.add_file_line>tr').eq(-1))
  340. .find(".uploadFileId").removeAttr("name").attr("name", "fileList[" + length + "].file_id").val("").end()
  341. .find(".uploadFileName").val("上传文件").end()
  342. .find(".icon_font").html(html).end();
  343. } else {
  344. var str = "";
  345. str += "<tr class='text-c'>"
  346. str += "<td class='td_material'>"
  347. str += "<div>"
  348. str += "<input class='uploadFileName btn btn-upload radius' name='uploadFileName' readonly='readonly' type='text' value='上传文件' onclick=\"addFileByName('/land_supply/addApplyFile',this);\"/>"
  349. str += "<input class='uploadFileId' hidden name='fileList[" + length + "].file_id'/>"
  350. str += "</div>"
  351. str += "</td>"
  352. str += "<td class='icon_font'><i class='Hui-iconfont' onclick='removeLine(this)'>&#xe6a1; 删除</i>"
  353. str += "</td>"
  354. str += "</tr>"
  355. $("#tbody_" + divId).html(str);
  356. }
  357. $('#layui-layer2').height(48);
  358. file_index++;
  359. }
  360. //添加相应name的文件
  361. function addFileByName(url, obj) {
  362. var name = $(obj).next().attr("name");
  363. url += "?fileIdName=" + name;
  364. layer_show('添加文件', pagePath + url, 800, 350);
  365. }
  366. function removeLine(obj) {
  367. $(obj).parent().parent().remove();
  368. }
  369. </script>
  370. </body>
  371. </html>