formform.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  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="formform-edit">
  8. <input type="hidden" name="id" value="{$form.id}">
  9. <div class="layui-form-item">
  10. <label class="layui-form-label"><span style="color:#f90c05;">*</span>表单名称</label>
  11. <div class="layui-input-block">
  12. <input type="text" name="title" value="{$form.title}" lay-verify="required" placeholder="请输入..."
  13. autocomplete="off" class="layui-input">
  14. </div>
  15. </div>
  16. <div class="layui-form-item">
  17. <label class="layui-form-label">表单说明</label>
  18. <div class="layui-input-block">
  19. <textarea class="layui-textarea" name="explain" id="explain" placeholder="请输入..." style="display: none" lay-verify="editcontent">
  20. {$form.explain}
  21. </textarea>
  22. </div>
  23. </div>
  24. <div class="layui-form-item">
  25. <label class="layui-form-label"><span style="color:#f90c05;">*</span>提交次数</label>
  26. <div class="layui-input-block">
  27. <input type="text" name="usernumber" value="{$form.usernumber|default=0}" lay-verify="required" placeholder="请输入..."
  28. autocomplete="off" class="layui-input">
  29. <div class="layui-form-mid layui-word-aux">本次自定义表单,每个用户最大提交次数;0表示不限。</div>
  30. </div>
  31. </div>
  32. <div class="layui-form-item">
  33. <label class="layui-form-label"><span style="color:#f90c05;">*</span>分享标题</label>
  34. <div class="layui-input-block">
  35. <input type="text" name="sharetil" value="{$form.sharetil}" lay-verify="required" placeholder="请输入..." autocomplete="off" class="layui-input">
  36. </div>
  37. </div>
  38. <div class="layui-form-item">
  39. <label class="layui-form-label">分享图片</label>
  40. <div class="layui-input-block">
  41. <div class="layui-upload">
  42. <button type="button" class="layui-btn attachment-upload-images" data-input="sharepic" data-amount="1">上传图片</button>
  43. <div class="layui-inline layui-word-aux"> 用户自定义页分享图片,最佳尺寸:500px*400px。
  44. </div>
  45. <div class="layui-upload-list echo-attachment-image-list" id="sharepic">
  46. {notempty name="form.sharepic"}
  47. <div>
  48. <input type="hidden" name="sharepic" value="{$form.sharepic}">
  49. <img src="{$form.sharepic}">
  50. </div>
  51. {/notempty}
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. <div class="layui-form-item">
  57. <div class="layui-input-block">
  58. <input type="button" lay-submit lay-filter="formform-edit-submit" value="确认提交" class="layui-btn">
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. <script>
  68. layui.config({
  69. base: '/static/echoui/' //静态资源所在路径
  70. }).extend({
  71. index: 'lib/index' //主入口模块
  72. }).use(['index', 'form', 'set', 'layedit', 'upload'], function() {
  73. var $ = layui.$,
  74. setter = layui.setter,
  75. admin = layui.admin,
  76. form = layui.form,
  77. layedit = layui.layedit,
  78. upload = layui.upload;
  79. form.render();
  80. var explain = layedit.build('explain', {
  81. uploadImage: { url: setter.baseAdminUrl + 'attachment/tplfieldimage', type: 'post' }
  82. });
  83. form.verify({
  84. editcontent: function(value) {
  85. layedit.sync(explain);
  86. }
  87. });
  88. form.on('submit(formform-edit-submit)', function(obj) {
  89. var index = parent.layer.getFrameIndex(window.name);
  90. admin.req({
  91. url: setter.baseAdminUrl + 'form/editform',
  92. data: obj.field,
  93. done: function(res) {
  94. layer.msg("提交成功", {
  95. icon: 1
  96. });
  97. parent.layui.table.reload('formlist-table'); //重载表格
  98. parent.layer.close(index);
  99. }
  100. });
  101. });
  102. $('.echo-attachment-image-list').on('click', '.attachmentdel', function() {
  103. $(this).parent().remove();
  104. });
  105. upload.render({
  106. elem: '.attachment-upload-images',
  107. url: setter.baseAdminUrl + 'attachment/tplfieldimage',
  108. accept: 'images',
  109. exits: 'jpg|png|jpeg',
  110. acceptMime: 'image/*',
  111. size: 2048,
  112. number: 1,
  113. method: 'post',
  114. before: function(obj) {
  115. var item = this.item;
  116. upload_input = $(item).data('input');
  117. upload_amount = $(item).data('amount');
  118. layer.load();
  119. },
  120. done: function(res, index, upload) {
  121. layer.closeAll('loading');
  122. var html = "";
  123. if (upload_amount == 1) {
  124. html += '<div> <input type="hidden" name="' + upload_input + '" value="' + res.data.src + '"> ';
  125. html += '<img src="' + res.data.src + '"></div>';
  126. $("#" + upload_input).html(html);
  127. } else {
  128. html += '<div> <input type="hidden" name="' + upload_input + '[]" value="' + res.data.src + '"> ';
  129. html += '<img src="' + res.data.src +
  130. '"> <button type="button" class="attachmentdel layui-btn layui-btn-primary layui-btn-xs layui-btn-fluid">删除</button></div>';
  131. $("#" + upload_input).append(html);
  132. }
  133. },
  134. error: function(index, upload) {
  135. layer.closeAll('loading');
  136. }
  137. });
  138. });
  139. </script>