content_input.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  1. <style>
  2. .measure-input{
  3. background:transparent url("${ctxPath}/static/images/ruler.gif") repeat-x scroll 0 bottom
  4. }
  5. .mutiUpload{
  6. max-width: 510px;
  7. height:auto;
  8. font-size: 18px;
  9. margin-left: 90px;
  10. margin-top: -10px;
  11. }
  12. .mutiUpload div{
  13. line-height: 1.8;
  14. }
  15. .mutiUpload p{
  16. font-size: 20px;
  17. }
  18. .bjui-pageContent{
  19. margin: 0 auto;
  20. }
  21. </style>
  22. <script type="text/javascript">
  23. function thumb_upload_success(file, data) {
  24. var json = $.parseJSON(data)
  25. $(this).bjuiajax('ajaxDone', json)
  26. if (json[BJUI.keys.statusCode] == BJUI.statusCode.ok) {
  27. $('#j_content_thumb').val(json.filename).trigger('validate')
  28. $('#j_custom_pic').val(json.filename)
  29. $('#j_custom_span_pic').html('<img src="'+ json.filename +'" style="margin: 10px 0 0 0" WIDTH="200" HEIGHT="120"/>')
  30. }
  31. }
  32. function content_save_post(){
  33. $("#status").val("1");
  34. }
  35. function content_save(){
  36. $("#status").val("0");
  37. }
  38. function CKEditorup(){
  39. // var htm= $("#CKEditor").val();
  40. var editor = CKEDITOR.instances.autoformat;
  41. //FormatText(htm);
  42. formatText(editor,2,'SimSun','16');
  43. }
  44. </script>
  45. @if(isWindow=="NO"){
  46. <div class="bjui-pageHeader">
  47. <div class="bjui-searchBar">
  48. <a class="btn btn-default" data-icon="reply" href="${ctxPath}/system/cms/content/page?categoryId=${category.categoryId!}" data-toggle="ajaxload" data-target="#layout-content">返回栏目</a>&nbsp;
  49. <div class="pull-right">
  50. @if(has(content)){
  51. <!--<a class="btn btn-default" data-icon="desktop" href="${ctxPath}/system/cms/content/input?categoryId=${category.categoryId!}&contentId=${content.content_id!}&isWindow=YES" data-toggle="dialog" data-width="850" data-height="650" data-id="post-content-window-tab" data-mask="true">窗口模式</a>&nbsp;-->
  52. @}else{
  53. <!--<a class="btn btn-default" data-icon="desktop" href="${ctxPath}/system/cms/content/input?categoryId=${category.categoryId!}&isWindow=YES" data-toggle="dialog" data-width="900" data-height="600" data-id="post-content-window-tab" data-mask="true">窗口模式</a>&nbsp;-->
  54. @}
  55. </div>
  56. </div>
  57. </div>
  58. @}
  59. <div class="bjui-pageContent">
  60. <form method="post" action="${ctxPath}/system/cms/content/save" id="j_model_form" data-toggle="validate" data-autorefresh="true" data-alertmsg="false">
  61. <input TYPE="hidden" name="contentId" value="${content.contentId!}">
  62. <input TYPE="hidden" name="userId" value="${session.SysUser.userId!}">
  63. <input TYPE="hidden" name="siteId" value="${session.SysUser.siteId!}">
  64. <input type="hidden" name="tableName" value="${model.tableName!}" >
  65. <input TYPE="hidden" id="status" name="status" >
  66. <script>
  67. var id = '${category.categoryId!}';
  68. if(id=='220'){
  69. $(".tc").attr("style","display:none;");
  70. }
  71. </script>
  72. <div class="form-group tc">
  73. <label for="j_title" class="control-label x85">标题:</label>
  74. <input type="text" name="title" id="j_title" class="input-nm measure-input" value="${content.title!,xss}" placeholder="请填写标题" size="50" >
  75. </div>
  76. <hr class="tc" style="margin-top: 3px!important;padding-top: 3px;margin-bottom: 3px!important;">
  77. <div class="form-group tc">
  78. <label for="j_keyword" class="control-label x85">关键字:</label>
  79. <input type="text" name="keywords" id="j_keyword" class="input-nm" value="${content.keywords!,xss}" placeholder="关键字请用逗号,隔开" size="50" >
  80. </div>
  81. <hr class="tc" style="margin-top: 3px!important;padding-top: 3px;margin-bottom: 3px!important;">
  82. <div class="form-group tc">
  83. <label for="j_inputdate" class="control-label x85">日期:</label>
  84. <input style="width:225px;margin-left:0px" name="inputdate" id="j_inputdate" data-rule="required;" value="${content.inputdate!,xss}" class="laydate-icon timeUstyle stateUTime"
  85. onclick="laydate({istime: true,format:'YYYY-MM-DD hh:mm:ss'})"/>
  86. </div>
  87. <hr class="tc" style="margin-top: 3px!important;padding-top: 3px;margin-bottom: 3px!important;">
  88. <div class="form-group tc">
  89. <label for="j_des" class="control-label x85">描述:</label>
  90. <textarea id="j_des" name="description" placeholder="请填写文章描述" cols="50">${content.description!,xss}</textarea>
  91. </div>
  92. <hr class="tc" style="margin-top: 3px!important;padding-top: 3px;margin-bottom: 3px!important;">
  93. <div class="form-group tc">
  94. <label for="categoryId" class="control-label x85">栏目:</label>
  95. <select id="categoryId" data-toggle="selectpicker" class="input-nm" readonly="readonly" name="categoryId">
  96. ${ContentSelectCategoryFunction(session.SysUser.siteId!0,category.categoryId!0)}
  97. </select>
  98. </div>
  99. <hr class="tc" style="margin-top: 3px!important;padding-top: 3px;margin-bottom: 3px!important;">
  100. <div class="form-group tc">
  101. <label class="control-label x85">封面图片:</label>
  102. <div style="display: inline-block; vertical-align: middle;">
  103. <div id="j_content_thumb" data-toggle="upload" data-uploader="${ctxPath}/uploads"
  104. data-file-size-limit="1024000000"
  105. data-file-type-exts="*.jpg;*.png;*.gif;*.mpg;*.JPEG"
  106. data-multi="false"
  107. data-on-upload-success="thumb_upload_success"
  108. data-icon="cloud-upload"></div>
  109. <input type="hidden" name="thumb" value="${content.thumb!}" id="j_custom_pic">
  110. <span id="j_custom_span_pic">
  111. @if(isNotEmpty(content.thumb)){
  112. <IMG WIDTH="200" HEIGHT="120" style="margin: 10px 0 0 0" src="${content.thumb!}">
  113. @}
  114. </span>
  115. </div>
  116. </div>
  117. <hr class="tc" style="margin-top: 3px!important;padding-top: 3px;margin-bottom: 3px!important;">
  118. <div class="form-group tc">
  119. <label for="j_url" class="control-label x85">外部链接:</label>
  120. <input type="text" name="url" id="j_url" value="${content.url!,xss}" class="input-nm" placeholder="如果填写为外部链接,则文章链接以外部链接为准" size="50" data-rule="url;" >
  121. </div>
  122. <hr class="tc" style="margin-top: 3px!important;padding-top: 3px;margin-bottom: 3px!important;">
  123. <div class="form-group tc">
  124. <label class="control-label x85">推荐顶置:</label>
  125. <input type="checkbox" id="recommend" name="recommend" data-toggle="icheck" data-label="推荐" ${(isNotEmpty(content.recommend)&&content.recommend)?'checked':''}>
  126. <input type="checkbox" id="top" name="top" data-toggle="icheck" data-label="顶置" ${(isNotEmpty(content.top)&&content.top)?'checked':''}>
  127. </div>
  128. <hr class="tc" style="margin-top: 3px!important;padding-top: 3px;margin-bottom: 3px!important;">
  129. <div class="form-group tc">
  130. <label for="j_viewnum" class="control-label x85">浏览次数:</label>
  131. <input type="text" name="viewNum" id="j_viewnum" class="input-nm" placeholder="浏览量" value="${content.viewNum!0}" size="20" data-rule="required;integer(+0)" >
  132. </div>
  133. <hr class="tc" style="margin-top: 3px!important;padding-top: 3px;margin-bottom: 3px!important;">
  134. <div class="form-group tc">
  135. <label for="j_author" class="control-label x85">作者:</label>
  136. <input type="text" name="author" id="j_author" class="input-nm" placeholder="文章作者" value="${isEmpty(content.author)?session.SysUser.username:content.author!,xss}" size="20" data-rule="required;" >
  137. </div>
  138. <hr class="tc" style="margin-top: 3px!important;padding-top: 3px;margin-bottom: 3px!important;">
  139. <div class="form-group">
  140. <label for="j_sorts" class="control-label x85">排序:</label>
  141. <input type="text" name="sorts" id="j_sorts" size="20"
  142. value="${content.sorts!999}" data-rule="integer;" placeholder="排序">
  143. </div>
  144. <hr class="tc" style="margin-top: 3px!important;padding-top: 3px;margin-bottom: 3px!important;">
  145. <div class="form-group tc">
  146. <label class="control-label x85">标签:</label>
  147. <input type="text" name="tags" data-toggle="tags" VALUE="" data-url="${ctxPath}/system/cms/tag/json" data-width="500" placeholder="输入关键字,回车提交">
  148. </div>
  149. @for(filed in modelFiled){
  150. <hr style="margin-top: 3px!important;padding-top: 3px;margin-bottom: 3px!important;">
  151. <div class="form-group">
  152. @if(filed.filedClass=="input"){
  153. <!--TODO 有待做详细的表单验证-->
  154. <!--普通表单输入-->
  155. @var t="";
  156. @if(filed.notNull){
  157. @t ="data-rule=\"required;";
  158. @if(filed.filedType=='int'){
  159. @t=t+"'integer;'";
  160. @if(filed.filedLength>1){
  161. @t=t+"length(1~"+filed.filedLength+");";
  162. @}else{
  163. @t=t+"length("+filed.filedLength+");";
  164. @}
  165. @}
  166. @t=t+"\"";
  167. @}
  168. <label for="${filed.filedName!}" class="control-label x85">${filed.alias}:</label>
  169. <input type='text' name='${filed.filedName!}' id='${filed.filedName!}' class='input-nm' placeholder='${filed.alias!}' value='${(!has(content)?filed.filedValue!:content[filed.filedName]!),xss}' size='50' ${t!}>
  170. @}
  171. @if(filed.filedClass=="image"){
  172. <!--判断是否为图片上传字段-->
  173. <!--TODO 有待做自定义文件类型-->
  174. <label for="${filed.filedName!}" class="control-label x85">${filed.alias}:</label>
  175. <input type="file" class="form-control" data-name="${filed.filedName!}" data-toggle="webuploader" data-options="
  176. {
  177. pick: {label: '点击选择图片'},
  178. server: '${ctxPath}/uploads',
  179. fileNumLimit: 20,
  180. formData: {dir:'${filed.filedName!}'},
  181. required: true,
  182. uploaded: '',
  183. basePath: '',
  184. accept: {
  185. title: '图片',
  186. extensions: 'jpg,JPG,jpeg,JPEG,png,gif,pdf,doc,txt,xls,xlsx,docx',
  187. mimeTypes: '.jpg,.JPG,.jpeg,.JPEG,.png,gif,.pdf,.doc,.txt,.xls,.xlsx,.docx'
  188. }
  189. }"
  190. >
  191. <input TYPE="hidden" name="${filed.filedName!}" value="${!has(content)?'':content[filed.filedName]}" >
  192. @}
  193. @if(filed.filedClass=="file"){
  194. <!--判断是否为文件上传字段-->
  195. <script type="text/javascript">
  196. function ${filed.filedName!}_upload_success(file, data) {
  197. var json = $.parseJSON(data)
  198. $(this).bjuiajax('ajaxDone', json)
  199. if (json[BJUI.keys.statusCode] == BJUI.statusCode.ok) {
  200. $('#${filed.filedName!}').val(json.filename).trigger('validate');
  201. $('#${filed.filedName!}_file').val(json.filename);
  202. }
  203. }
  204. </script>
  205. <label for="${filed.filedName!}" class="control-label x85">${filed.alias}:</label>
  206. <div style="display: inline-block; vertical-align: middle;">
  207. <!--遍历获取运行上传的文件类型-->
  208. @var strs = strutil.split(filed.filedValue,"#");
  209. @var str="";
  210. @if(isNotEmpty(strs)){
  211. @for(s in strs){
  212. @str=str+"*."+s+";";
  213. @}
  214. @}
  215. <div id="${filed.filedName!}" data-toggle="upload" data-uploader="${ctxPath}/uploads"
  216. data-file-size-limit="1024000000"
  217. data-file-type-exts="${isNotEmpty(str)?strutil.subStringTo(str,0,strutil.length(str)-1):'*.jpg;*.png;*.gif;*.mpg;*.docx;*.doc;*.xls;*.mp4;*.JPEG;*.pdf'}"
  218. data-multi="false"
  219. data-on-upload-success="${filed.filedName!}_upload_success"
  220. data-icon="cloud-upload"></div>
  221. <span>
  222. <input type="text" class="input-nm" style="margin: 5px 0 0 0" size="50" name="${filed.filedName!}" placeholder="${filed.alias!}" value="${(!has(content)?'':content[filed.filedName]!),xss='escape'}" id="${filed.filedName!}_file">
  223. </span>
  224. </div>
  225. @}
  226. @if(filed.filedClass=="editor"){
  227. <!--判断是否为文本编辑器-->
  228. <textarea data-toggle="CKEditor" id="autoformat" data-upload="${ctxPath}/upload/CKEditorUpload" style="height:650px;max-height:750px;margin:10px 0 0 0" name="${filed.filedName!}" ${filed.notNull?'data-rule=\"required;\"':''}>${(has(content)?content[filed.filedName]:filed.filedValue),xss="escape"}</textarea>
  229. <input type="button" value="一键排版" onclick="CKEditorup()"/>
  230. @}
  231. @if(filed.filedClass=="textarea"){
  232. <label for="${filed.filedName!}" class="control-label x85">${filed.alias}:</label>
  233. <!--判断是否为文本编辑器-->
  234. <textarea id="${filed.filedName!}" name="${filed.filedName!}" value="" PLACEHOLDER="${filed.filedValue!}" cols="50" ${filed.notNull?'data-rule=\"required;\"':''}>${(!has(content)?filed.filedValue:content[filed.filedName]),xss="escape"}</textarea>
  235. @}
  236. @if(filed.filedClass=="dateInput"){
  237. <label for="${filed.filedName!}" class="control-label x85">${filed.alias}:</label>
  238. <!--判断是否为日期输入框-->
  239. <input type="text" name="${filed.filedName!}" data-toggle="datepicker" value="${(!has(content)?filed.filedValue!:content[filed.filedName]),xss}" data-pattern="yyyy-MM-dd HH:mm:ss">
  240. @}
  241. @if(filed.filedClass=="radio"){
  242. <label class="control-label x85">${filed.alias}:</label>
  243. <!--判断是否为单选按钮-->
  244. @if(isNotEmpty(filed.filedValue)){
  245. @var radios = strutil.split(filed.filedValue,"#");
  246. @for(radio in radios){
  247. @var checked ="";
  248. @if(has(content)){
  249. @if(radio==content[filed.filedName]){
  250. @checked="checked";
  251. @}
  252. @}
  253. <input type="radio" name="${filed.filedName!}" id="${filed.filedName!}_${radio}" ${checked!} data-toggle="icheck" data-label="[${radio}]" value="${radio}" ${filed.notNull?'data-rule=\"required;\"':''}></input>
  254. @}
  255. @}
  256. @}
  257. @if(filed.filedClass=="checkbox"){
  258. <label for="${filed.filedName!}" class="control-label x85">${filed.alias}:</label>
  259. <!--判断是为多选按钮-->
  260. @if(isNotEmpty(filed.filedValue)){
  261. @var checkboxs = strutil.split(filed.filedValue,"#");
  262. @for(checkbox in checkboxs){
  263. @var checked ="";
  264. @if(has(content)){
  265. @if(checkbox==content[filed.filedName]){
  266. @checked="checked";
  267. @}
  268. @}
  269. <input type="checkbox" name="${filed.filedName!}" id="${filed.filedName!}" ${checked!} data-toggle="icheck" data-label="${checkbox}" value="${checkbox}" ${filed.notNull?'data-rule=\"required;\"':''}></input>
  270. @}
  271. @}
  272. @}
  273. @if(filed.filedClass=="select"){
  274. <label for="${filed.filedName!}" class="control-label x85">${filed.alias}:</label>
  275. <!--判断是为单选菜单-->
  276. @if(isNotEmpty(filed.filedValue)){
  277. @var selects = strutil.split(filed.filedValue,"#");
  278. <select name="${filed.filedName!}" data-toggle="selectpicker" ${filed.notNull?'data-rule=\"required\"':''}>
  279. <option value="" selected>所有</option>
  280. @for(s in selects){
  281. @var selected ="";
  282. @if(has(content)){
  283. @if(s==content[filed.filedName]){
  284. @selected="selected";
  285. @}
  286. @}
  287. <option value="${s}" ${selected!}>${s}</option>
  288. @}
  289. </select>
  290. @}
  291. @}
  292. </div>
  293. @}
  294. </form>
  295. </div>
  296. <div class="bjui-pageFooter">
  297. <ul>
  298. <li><button onclick="content_save()" type="submit" class="btn btn-blue" data-icon="pencil">暂存草稿</button></li>
  299. <li><button onclick="content_save_post()" type="submit" class="btn btn-green" data-icon="send">保存发布</button></li>
  300. </ul>
  301. </div>