infoForm.jsp 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
  1. <%@ page import="com.thinkgem.jeesite.common.config.Global" %>
  2. <%@ taglib prefix="input" uri="/struts-tags" %>
  3. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  4. <%@ include file="/WEB-INF/views/include/taglib.jsp" %>
  5. <html>
  6. <head>
  7. <title>编辑文章</title>
  8. <meta name="decorator" content="default"/>
  9. <style>
  10. .red{color:red}
  11. #inputForm{max-width:1200px;width:100%}
  12. #inputForm table{width:100%;line-height:18px;margin-bottom:50px}
  13. #inputForm th,#inputForm td{font-weight:normal;text-align:left;padding:8px 5px;border-bottom:1px solid rgb(238,238,238)}
  14. #inputForm th{width:15%;text-align:right;white-space:nowrap;font-weight:bold}
  15. #inputForm td input[type="text"]{width:320px;height:16px;line-height:16px}
  16. .init-label label{margin:5px 10px;color:gray}
  17. </style>
  18. </head>
  19. <body>
  20. <ul class="nav nav-tabs">
  21. <li><a href="${ctx}/info/info/">文章列表</a></li>
  22. <li class="active"><a href="${ctx}/info/info/form?id=${info.id}&ltype=${ltype}">文章<shiro:hasPermission name="info:info:edit">${not empty info.id?'编辑':'添加'}</shiro:hasPermission><shiro:lacksPermission name="info:info:edit">查看</shiro:lacksPermission></a></li>
  23. </ul>
  24. <form:form id="inputForm" modelAttribute="info" action="${ctx}/info/info/save?ltype=${ltype}" method="post" class="form-horizontal">
  25. <form:hidden path="id"/>
  26. <sys:message content="${message}"/>
  27. <table border="0" cellspacing="0" cellpadding="0" width="100%">
  28. <tr>
  29. <th><span class="red">*</span>文章标题:</th>
  30. <td colspan="3"><form:input path="title" htmlEscape="false" maxlength="100" class="input-xxlarge required"/></td>
  31. </tr>
  32. <tr>
  33. <th><span class="red">*</span>文章标签:</th>
  34. <td colspan="3">
  35. <form:input path="label" htmlEscape="false" maxlength="100" class="input-xxlarge required"/>
  36. <span class="help-inline">多个标签之间请用逗号分隔开</span>
  37. <div class="init-label"></div>
  38. <input id="labelName" type="text" placeholder="在此处输入标签,将自动关联到文章标签" class="input-xlarge"/>
  39. <a href="javascript:addLeable();">添加</a>
  40. </td>
  41. </tr>
  42. <tr>
  43. <th><span class="red">*</span>SEO关键词:</th>
  44. <td colspan="3"><form:input path="keyword" htmlEscape="false" maxlength="50" class="input-xxlarge required"/></td>
  45. </tr>
  46. <tr>
  47. <th><span class="red">*</span>发布人:</th>
  48. <td colspan="3"><form:input path="publisher" htmlEscape="false" maxlength="50" class="input-xxlarge required"/></td>
  49. </tr>
  50. <tr>
  51. <th><span class="red">*</span>来源:</th>
  52. <td colspan="3"><form:input path="source" htmlEscape="false" maxlength="50" class="input-xlarge"/></td>
  53. </tr>
  54. <tr>
  55. <th><span class="red">*</span>推荐语(描述):</th>
  56. <td colspan="3"><form:textarea path="recommendContent" htmlEscape="false" maxlength="1000" class="input-xxlarge required"/></td>
  57. </tr>
  58. <tr>
  59. <th><span class="red">*</span>文章内容:</th>
  60. <td colspan="3">
  61. <div class="detailInfoEditor" style="width:760px;">
  62. <form:textarea path="infoContent" class="input-xlarge hide"/>
  63. <!-- 富文本编辑器 -->
  64. <div id="infoDetailEditor">${info.infoContent}</div>
  65. </div>
  66. </td>
  67. </tr>
  68. <tr>
  69. <th><span class="red">*</span>文章分类:</th>
  70. <td colspan="3">
  71. <form:select path="infoType.id" class="input-small required">
  72. <form:options items="${typeList}" itemLabel="name" itemValue="id" htmlEscape="false"/>
  73. </form:select>
  74. </td>
  75. </tr>
  76. <tr>
  77. <th><span class="red">*</span>引导图:</th>
  78. <td colspan="3">
  79. <form:hidden id="nameImage" path="guidanceImage" htmlEscape="false" maxlength="255" class="input-xlarge required"/>
  80. <sys:ckfinder input="nameImage" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
  81. </td>
  82. </tr>
  83. <tr>
  84. <th>商城首页图:</th>
  85. <td colspan="3">
  86. <form:hidden id="homePageImage" path="homePageImage" htmlEscape="false" maxlength="255" class="input-xlarge"/>
  87. <sys:ckfinder input="homePageImage" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
  88. <label style="margin-left: 20px">建议图片分辨率252px*252px</label>
  89. </td>
  90. </tr>
  91. <tr>
  92. <th><span class="red">*</span>发布时间:</th>
  93. <td colspan="3">
  94. <input name="pubdate" type="text" maxlength="20" class="input-medium Wdate required"
  95. value="<fmt:formatDate value="${info.pubdate}" pattern="yyyy-MM-dd HH:mm:ss"/>"
  96. onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false});"/>
  97. </td>
  98. </tr>
  99. <tr>
  100. <th><span class="red">*</span>推荐状态:</th>
  101. <td colspan="3">
  102. <form:radiobuttons path="recommendStatus" items="${fns:getDictList('enabled_status')}" itemLabel="label" itemValue="value" htmlEscape="false" class="required"/>
  103. </td>
  104. </tr>
  105. <tr>
  106. <th><span class="red">*</span>状态:</th>
  107. <td colspan="3">
  108. <form:radiobuttons path="enabledStatus" items="${fns:getDictList('enabled_status')}" itemLabel="label" itemValue="value" htmlEscape="false" class="required"/>
  109. </td>
  110. </tr>
  111. <tr>
  112. <th><span class="red">*</span>基础点赞:</th>
  113. <td colspan="3">
  114. <form:input path="basePraise" htmlEscape="false" maxlength="11" class="input-xlarge required digits" value="${empty info.basePraise?0:(info.basePraise)}"/>
  115. </td>
  116. </tr>
  117. <c:if test="${not empty info.id}">
  118. <tr>
  119. <th><span class="red">*</span>实际点赞:</th>
  120. <td colspan="3">
  121. ${empty info.realPraise?0:(info.realPraise)}
  122. </td>
  123. </tr>
  124. </c:if>
  125. <tr>
  126. <th><span class="red">*</span>基础浏览量:</th>
  127. <td colspan="3">
  128. <form:input path="basePv" htmlEscape="false" maxlength="11" class="input-xlarge required digits" value="${empty info.basePv?0:(info.basePv)}"/>
  129. </td>
  130. </tr>
  131. <c:if test="${not empty info.id}">
  132. <tr>
  133. <th><span class="red">*</span>实际浏览量:</th>
  134. <td colspan="3">
  135. ${empty info.pv?0:(info.pv)}
  136. </td>
  137. </tr>
  138. </c:if>
  139. <tr>
  140. <td colspan="4" style="text-align:center;">
  141. <shiro:hasPermission name="info:info:edit">
  142. <input id="btnSave" class="btn btn-primary" type="submit" value="保 存" onclick="checkInfo()"/>
  143. </shiro:hasPermission>
  144. <input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
  145. </td>
  146. </tr>
  147. </table>
  148. </form:form>
  149. <!-- 富文本编辑器 -->
  150. <% request.setAttribute("caimeiCore", Global.getConfig("caimei.core"));%>
  151. <%--<script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>--%>
  152. <script type="text/javascript" src="${ctxStatic}/jquery-validation/1.19.3/jquery.validate.js"></script>
  153. <script type="text/javascript" src="${ctxStatic}/ckeditor5-new/ckeditor.js"></script>
  154. <script type="text/javascript">
  155. $(document).ready(function() {
  156. //$("#name").focus();
  157. $("#inputForm").validate({
  158. ignore:"",
  159. submitHandler: function(form){
  160. if ($("#title").val() == '') {
  161. alertx("请输入文章标题");
  162. return false;
  163. }
  164. if ($("#label").val() == '') {
  165. alertx("请输入文章标签");
  166. return false;
  167. }
  168. if ($("#keyword").val() == '') {
  169. alertx("请输入SEO关键词");
  170. return false;
  171. }
  172. if ($("#publisher").val() == '') {
  173. alertx("请输入发布人");
  174. return false;
  175. }
  176. if ($("#pubdate").val() == '') {
  177. alertx("请输入发布时间");
  178. return false;
  179. }
  180. if ($("#recommendContent").val() == '') {
  181. alertx("请输入推荐语(描述)");
  182. return false;
  183. }
  184. if ($("#infoContent").val() == '') {
  185. alertx("请输入文章内容");
  186. return false;
  187. }
  188. if ($("#guidanceImage").val() == '') {
  189. alertx("请上传引导图");
  190. return false;
  191. }
  192. if ($("#basePraise").val() == '') {
  193. alertx("请输入基础点赞");
  194. return false;
  195. }
  196. if ($("#basePv").val() == '') {
  197. alertx("请输入基础浏览量");
  198. return false;
  199. }
  200. loading('正在提交,请稍等...');
  201. form.submit();
  202. },
  203. errorContainer: "#messageBox",
  204. errorPlacement: function(error, element) {
  205. $("#messageBox").text("输入有误,请先更正。");
  206. if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
  207. error.appendTo(element.parent().parent());
  208. } else {
  209. error.insertAfter(element);
  210. }
  211. }
  212. });
  213. });
  214. //初始化标签
  215. $(function () {
  216. $(".init-label label").bind("click",function(){
  217. var label=$(this).text();
  218. var label1=label+",";
  219. var _label=$("#label").val()+",";
  220. if(_label.indexOf(label1)>-1){
  221. alert("文章标签中已包含该标签!!");
  222. }else{
  223. setLabel(label);
  224. }
  225. });
  226. });
  227. $(window).load(function () {
  228. LabelInit();
  229. });
  230. //富文本框编辑
  231. function checkInfo() {
  232. var infoContent = infoDetailEditor.getData();
  233. $("#infoContent").val(infoContent);
  234. console.log(infoContent);
  235. }
  236. $(document).ready(function () {
  237. //富文本框
  238. ClassicEditor.create(document.querySelector('#infoDetailEditor'), {
  239. ckfinder: {
  240. uploadUrl: '${caimeiCore}/tools/image/upload/ckeditor'
  241. }
  242. }).then(function(editor) {
  243. window.infoDetailEditor = editor;
  244. }).catch(function(error){
  245. console.log(error);
  246. });
  247. });
  248. function LabelInit(){
  249. var items="${fns:getDictValue('label','sys_config','')}"+",";
  250. /* var _labels="${info.label}";
  251. var _label=_labels.split(",");
  252. for (var i = 0; i < _label.length; i++) {
  253. items=items.replace(_label[i]+",","");
  254. } */
  255. /* var items="美白,祛斑,祛痘,补水,瘦脸,去皱,缩毛孔,减肥瘦身,提拉紧致,嫩肤,去眼袋,去法令纹,脱毛,纹眉,去黑眼圈,美白嫩肤,面部提升,祛斑祛痣,除皱,去红血丝,祛疤,祛妊娠纹,纹身,纤体塑性,纹眉"; */
  256. var info=items.split(",");
  257. var html='';
  258. for (var i = 0; i < info.length; i++) {
  259. if(''!=info[i]){
  260. html+="<label>"+info[i]+"</label>";
  261. if((i+1)%9==0){
  262. html+="<br>";
  263. }
  264. }
  265. }
  266. $(".init-label").append(html);
  267. $("#labelName").typeahead({
  268. property : 'name',
  269. source:function(typeahead, query){
  270. query = $.trim(query);
  271. if(''==query){return;}
  272. $.ajax({
  273. type:"POST", dataType:"JSON", async:false,
  274. url: "${ctx}/info/infoLabel/findByName",
  275. data:{name: query},
  276. success:function(data){
  277. typeahead.process(data);
  278. }
  279. });
  280. },
  281. onselect : function(data) {
  282. setLabel(data.name);
  283. $("#labelName").focus(); //选择完后 回到当前输入框以便下一个动作的验证
  284. }
  285. });
  286. }
  287. function setLabel(name){
  288. if(name!=''){
  289. var label=$("#label").val();
  290. if(label==''){
  291. label=name;
  292. }else{
  293. label=label+","+name;
  294. }
  295. $("#label").val(label);
  296. $("#labelName").val("");
  297. }
  298. }
  299. function addLeable(){
  300. var label=$("#labelName").val();
  301. if(''==label){
  302. $.jBox.tip('添加的标签不能为空!','error');
  303. }else{
  304. setLabel(label);
  305. }
  306. }
  307. </script>
  308. </body>
  309. </html>