articleform.html 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. <div class="layui-fluid">
  2. <div class="layui-row layui-col-space15">
  3. <div class="layui-col-md12">
  4. <div class="layui-card">
  5. <div class="layui-card-header">文章资讯信息</div>
  6. <div class="layui-card-body" pad15>
  7. <div class="layui-form layui-form-pane" lay-filter="LAY-artapp-article-articleform-edit">
  8. <input type="hidden" name="id" value="{$article.id}">
  9. <div class="layui-form-item">
  10. <label class="layui-form-label">分类</label>
  11. <div class="layui-input-block">
  12. <select name="cateid">
  13. {volist name="catelist" id="vo"}
  14. <option value="{$vo.id}" {$article.cateid==$vo.id ? 'selected' : '' }>{$vo.title}</option>
  15. {/volist}
  16. </select>
  17. </div>
  18. </div>
  19. <div class="layui-form-item">
  20. <label class="layui-form-label"><span style="color:#f90c05;">*</span>标题</label>
  21. <div class="layui-input-block">
  22. <input type="text" name="title" value="{$article.title}" lay-verify="required" placeholder="请输入标题" autocomplete="off"
  23. class="layui-input">
  24. </div>
  25. </div>
  26. <div class="layui-form-item">
  27. <label class="layui-form-label">标图</label>
  28. <div class="layui-input-block">
  29. <div class="layui-upload">
  30. <button type="button" class="layui-btn attachment-upload-images" data-input="tilpic" data-amount="1">上传图片</button>
  31. <div class="layui-inline layui-word-aux"> 最佳尺寸:750px*375px </div>
  32. <div class="layui-upload-list echo-attachment-image-list" id="tilpic">
  33. {notempty name="article.tilpic"}
  34. <div>
  35. <input type="hidden" name="tilpic" value="{$article.tilpic}">
  36. <img src="{$article.tilpic}">
  37. </div>
  38. {/notempty}
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. <div class="layui-form-item">
  44. <label class="layui-form-label"><span style="color:#f90c05;">*</span>作者</label>
  45. <div class="layui-input-block">
  46. <input type="text" name="author" value="{$article.author}" lay-verify="required" placeholder="请输入作者"
  47. autocomplete="off" class="layui-input">
  48. </div>
  49. </div>
  50. <div class="layui-form-item">
  51. <label class="layui-form-label"><span style="color:#f90c05;">*</span>概要</label>
  52. <div class="layui-input-block">
  53. <textarea name="summary" lay-verify="required" placeholder="请输入概要" class="layui-textarea">{$article.summary}</textarea>
  54. </div>
  55. </div>
  56. <div class="layui-form-item" pane>
  57. <label class="layui-form-label">类型</label>
  58. <div class="layui-input-block">
  59. <input type="radio" name="atype" lay-filter="atype" value="1" title="文章详情" {eq name="article.atype|default=1" value="1" }checked{/eq}>
  60. <input type="radio" name="atype" lay-filter="atype" value="2" title="系统链接" {eq name="article.atype" value="2" }checked{/eq}>
  61. <input type="radio" name="atype" lay-filter="atype" value="3" title="网络链接" {eq name="article.atype" value="3" }checked{/eq}>
  62. </div>
  63. </div>
  64. <div class="layui-form-item" id="formdetails">
  65. <label class="layui-form-label">详情</label>
  66. <div class="layui-input-block">
  67. <textarea class="layui-textarea" name="details" id="details" placeholder="请输入详情" style="display: none"
  68. lay-verify="editcontent">
  69. {$article.details}
  70. </textarea>
  71. </div>
  72. </div>
  73. <div class="layui-form-item" id="formtilurl">
  74. <label class="layui-form-label">跳转链接</label>
  75. <div class="layui-input-block">
  76. <input type="text" name="tilurl" value="{$article.tilurl}" placeholder="请输入跳转链接" autocomplete="off" class="layui-input">
  77. <div class="layui-form-mid layui-word-aux">
  78. <b>系统链接:</b>通过系统各栏目复制的链接,以“/pages/”开头;
  79. <b>网络链接:</b>普通的url链接,以“http://”或“https://”开头。
  80. </div>
  81. </div>
  82. </div>
  83. <div class="layui-form-item">
  84. <label class="layui-form-label"><span style="color:#f90c05;">*</span>发布时间</label>
  85. <div class="layui-input-block">
  86. <input type="text" name="createtime" id="createtime" value="{$article.createtime}" lay-verify="required"
  87. placeholder="请选择发布时间" autocomplete="off" class="layui-input">
  88. </div>
  89. </div>
  90. <div class="layui-form-item">
  91. <label class="layui-form-label">置顶</label>
  92. <div class="layui-input-block">
  93. <select name="priority">
  94. <option value="0" {$article.priority===0 ? 'selected' : '' }>不置顶</option>
  95. <option value="1" {$article.priority===1 ? 'selected' : '' }>置顶一</option>
  96. <option value="2" {$article.priority===2 ? 'selected' : '' }>置顶二</option>
  97. <option value="3" {$article.priority===3 ? 'selected' : '' }>置顶三</option>
  98. <option value="4" {$article.priority===4 ? 'selected' : '' }>置顶四</option>
  99. <option value="5" {$article.priority===5 ? 'selected' : '' }>置顶五</option>
  100. <option value="6" {$article.priority===6 ? 'selected' : '' }>置顶六</option>
  101. <option value="7" {$article.priority===7 ? 'selected' : '' }>置顶七</option>
  102. <option value="8" {$article.priority===8 ? 'selected' : '' }>置顶八</option>
  103. <option value="9" {$article.priority===9 ? 'selected' : '' }>置顶九</option>
  104. </select>
  105. <div class="layui-form-mid layui-word-aux">倒序,值越大越靠前</div>
  106. </div>
  107. </div>
  108. <div class="layui-form-item" pane>
  109. <label class="layui-form-label">状态</label>
  110. <div class="layui-input-block">
  111. <input type="checkbox" lay-filter="switch" name="status" {eq name="article.status|default=1" value="1"}checked{/eq} lay-skin="switch" lay-text="已发布|待修改" value="1">
  112. </div>
  113. </div>
  114. <div class="layui-form-item">
  115. <label class="layui-form-label">浏览量</label>
  116. <div class="layui-input-block">
  117. <input type="text" name="volume" value="{$article.volume|default=0}" lay-verify="required|number" placeholder="请输入浏览量"
  118. autocomplete="off" class="layui-input">
  119. </div>
  120. </div>
  121. <div class="layui-form-item">
  122. <div class="layui-input-block">
  123. <input type="button" lay-submit lay-filter="LAY-artapp-article-articleform-edit-submit" value="确认提交" class="layui-btn">
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  132. <script>
  133. layui.config({
  134. base: '/static/echoui/' //静态资源所在路径
  135. }).extend({
  136. index: 'lib/index' //主入口模块
  137. }).use(['index', 'form', 'set', 'layedit', 'laydate', 'upload'], function() {
  138. var $ = layui.$,
  139. setter = layui.setter,
  140. admin = layui.admin,
  141. layedit = layui.layedit,
  142. laydate = layui.laydate,
  143. form = layui.form,
  144. upload = layui.upload;
  145. form.render();
  146. var details = layedit.build('details', {
  147. uploadImage: { url: setter.baseAdminUrl + 'attachment/tplfieldimage', type: 'post' }
  148. });
  149. laydate.render({
  150. elem: '#createtime',
  151. type: 'datetime'
  152. });
  153. form.verify({
  154. editcontent: function(value) {
  155. layedit.sync(details);
  156. }
  157. });
  158. function atypeChange(value) {
  159. if (value == 1) {
  160. $("#formdetails").show();
  161. $("#formtilurl").hide();
  162. } else {
  163. $("#formdetails").hide();
  164. $("#formtilurl").show();
  165. };
  166. }
  167. atypeChange({$article['atype']|default=1});
  168. form.on('radio(atype)', function(data) {
  169. atypeChange(data.value);
  170. });
  171. form.on('submit(LAY-artapp-article-articleform-edit-submit)', function(obj) {
  172. var index = parent.layer.getFrameIndex(window.name);
  173. admin.req({
  174. url: setter.baseAdminUrl + 'article/editarticle',
  175. type: 'post',
  176. data: obj.field,
  177. done: function(res) {
  178. layer.msg("提交成功", {
  179. icon: 1
  180. });
  181. parent.layui.table.reload('LAY-artapp-article-articlelist-table'); //重载表格
  182. parent.layer.close(index);
  183. }
  184. });
  185. });
  186. $('.echo-attachment-image-list').on('click', '.attachmentdel', function() {
  187. $(this).parent().remove();
  188. });
  189. upload.render({
  190. elem: '.attachment-upload-images',
  191. url: setter.baseAdminUrl + 'attachment/tplfieldimage',
  192. accept: 'images',
  193. exits: 'jpg|png|jpeg',
  194. acceptMime: 'image/*',
  195. size: 2048,
  196. number: 1,
  197. method: 'post',
  198. before: function(obj) {
  199. var item = this.item;
  200. upload_input = $(item).data('input');
  201. upload_amount = $(item).data('amount');
  202. layer.load();
  203. },
  204. done: function(res, index, upload) {
  205. layer.closeAll('loading');
  206. var html = "";
  207. if (upload_amount == 1) {
  208. html += '<div> <input type="hidden" name="' + upload_input + '" value="' + res.data.src + '"> ';
  209. html += '<img src="' + res.data.src + '"></div>';
  210. $("#" + upload_input).html(html);
  211. } else {
  212. html += '<div> <input type="hidden" name="' + upload_input + '[]" value="' + res.data.src + '"> ';
  213. html += '<img src="' + res.data.src +
  214. '"> <button type="button" class="attachmentdel layui-btn layui-btn-primary layui-btn-xs layui-btn-fluid">删除</button></div>';
  215. $("#" + upload_input).append(html);
  216. }
  217. },
  218. error: function(index, upload) {
  219. layer.closeAll('loading');
  220. }
  221. });
  222. });
  223. </script>