add.html 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
  3. <head>
  4. <th:block th:include="include :: header('新增供应信息')" />
  5. <th:block th:include="include :: summernote-css" />
  6. <th:block th:include="include :: datetimepicker-css" />
  7. <th:block th:include="include :: jasny-bootstrap-css" />
  8. </head>
  9. <body class="white-bg">
  10. <div class="wrapper wrapper-content animated fadeInRight ibox-content">
  11. <form class="form-horizontal m" id="form-supply-add">
  12. <div class="form-group">
  13. <label class="col-sm-3 control-label"><span style="color: red; ">*</span>供应信息标题:</label>
  14. <div class="col-sm-8">
  15. <input name="supplyTitle" class="form-control" type="text" required>
  16. </div>
  17. </div>
  18. <div class="form-group">
  19. <input name="typeId" type="hidden" id="input_typeId">
  20. <label class="col-sm-3 control-label"><span style="color: red; ">*</span>商品分类:</label>
  21. <div class="col-sm-8">
  22. <div class="input-group">
  23. <input name="typeName" onclick="selectTypeTree()" id="input_typeTreeName" type="text" placeholder="请选择所属分类" class="form-control"
  24. readonly="readonly" required>
  25. <span class="input-group-addon"><i class="fa fa-search"></i></span>
  26. </div>
  27. </div>
  28. </div>
  29. <div class="row">
  30. <div class="form-group">
  31. <label class="col-sm-3 control-label"><span style="color: red; ">*</span>供应信息详情:</label>
  32. <div class="col-sm-8">
  33. <input id="supplyDetails" name="supplyDetails" type="hidden">
  34. <div class="summernote"></div>
  35. </div>
  36. </div>
  37. </div>
  38. <div class="form-group">
  39. <label class="col-sm-3 control-label"><span style="color: red; ">*</span>生产厂家:</label>
  40. <div class="col-sm-8">
  41. <input name="manufacturer" class="form-control" type="text" required>
  42. </div>
  43. </div>
  44. <div class="form-group">
  45. <label class="col-sm-3 control-label"><span style="color: red; ">*</span>联系人:</label>
  46. <div class="col-sm-8">
  47. <input name="contacts" class="form-control" type="text" required>
  48. </div>
  49. </div>
  50. <div class="form-group">
  51. <label class="col-sm-3 control-label"><span style="color: red; ">*</span>联系电话:</label>
  52. <div class="col-sm-8">
  53. <input name="telephone" class="form-control" type="text" required>
  54. </div>
  55. </div>
  56. <div class="form-group">
  57. <label class="col-sm-3 control-label"><span style="color: red; ">*</span>发布时间:</label>
  58. <div class="col-sm-8">
  59. <div class="input-group date">
  60. <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
  61. <input name="releaseTime" class="form-control" type="text">
  62. </div>
  63. </div>
  64. </div>
  65. <div class="form-group">
  66. <input id="fmzFile" name="picture" type="hidden"/>
  67. <label class="col-sm-3 control-label"><span style="color: red; ">*</span>商品图片:</label>
  68. <div class="col-sm-8">
  69. <div class="fileinput fileinput-new" data-provides="fileinput">
  70. <div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
  71. <img th:src="@{/img/profile.jpg}">
  72. </div>
  73. <div id="fmz" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;">
  74. </div>
  75. <div>
  76. <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input type="file"></span>
  77. <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. <div class="form-group">
  83. <label class="col-sm-3 control-label">供应信息状态:</label>
  84. <div class="col-sm-8">
  85. <div class="radio-box">
  86. <label class="radio-box"> <input type="radio" name="status" value="0" checked /> 征集中 </label>
  87. <label class="radio-box"> <input type="radio" name="status" value="1" /> 已结束 </label>
  88. </div>
  89. </div>
  90. </div>
  91. </form>
  92. </div>
  93. <th:block th:include="include :: footer" />
  94. <th:block th:include="include :: summernote-js" />
  95. <th:block th:include="include :: datetimepicker-js" />
  96. <th:block th:include="include :: jasny-bootstrap-js" />
  97. <script type="text/javascript">
  98. var prefix = ctx + "notice/supply"
  99. $(function(){
  100. $("input[name='releaseTime']").datetimepicker({
  101. format: "yyyy-mm-dd",
  102. minView: "month",
  103. autoclose: true
  104. });
  105. })
  106. $("#form-supply-add").validate({rules: {
  107. typeName: "required",
  108. lastname: "required",
  109. username: {
  110. required: true,
  111. minlength: 2
  112. },
  113. password: {
  114. required: true,
  115. minlength: 5
  116. },
  117. confirm_password: {
  118. required: true,
  119. minlength: 5,
  120. equalTo: "#password"
  121. },
  122. email: {
  123. required: true,
  124. email: true
  125. }
  126. },
  127. focusCleanup: true
  128. });
  129. $('.summernote').summernote({
  130. placeholder: '请输入内容',
  131. height : 192,
  132. lang : 'zh-CN',
  133. followingToolbar: false,
  134. callbacks: {
  135. onImageUpload: function (files) {
  136. sendFile(files[0], this);
  137. }
  138. }
  139. });
  140. function submitHandler() {
  141. if ($.validate.form()) {
  142. var sHTML = $('.summernote').summernote('code');
  143. $("#supplyDetails").val(sHTML);
  144. var file = $('#fmz').find('img').attr('src');
  145. if(file == undefined){
  146. $.modal.alertWarning("请上传图片");
  147. return;
  148. }
  149. $('#fmzFile').val(file);
  150. $.operate.save(prefix + "/add", $('#form-supply-add').serialize());
  151. }
  152. }
  153. /******************选择分类树**********************************/
  154. function selectTypeTree() {
  155. var typeId = "0";
  156. var url = ctx + "goods/type/selectTypeTree/" + typeId;
  157. var options1 = {
  158. title: '选择商品类型',
  159. width: "380",
  160. url: url,
  161. callBack: selectType
  162. };
  163. $.modal.openOptions(options1);
  164. }
  165. function selectType(index, layero){
  166. var tree = layero.find("iframe")[0].contentWindow.$._tree;
  167. var body = layer.getChildFrame('body', index);
  168. $("#input_typeId").val(body.find('#treeId').val());
  169. $("#input_typeTreeName").val(body.find('#treeName').val());
  170. layer.close(index);
  171. }
  172. /************************上传文件******************************/
  173. function sendFile(file, obj) {
  174. var data = new FormData();
  175. data.append("file", file);
  176. $.ajax({
  177. type: "POST",
  178. url: ctx + "common/upload",
  179. data: data,
  180. cache: false,
  181. contentType: false,
  182. processData: false,
  183. dataType: 'json',
  184. success: function(result) {
  185. if (result.code == web_status.SUCCESS) {
  186. $(obj).summernote('editor.insertImage', result.url, result.fileName);
  187. } else {
  188. $.modal.alertError(result.msg);
  189. }
  190. },
  191. error: function(error) {
  192. $.modal.alertWarning("图片上传失败。");
  193. }
  194. });
  195. }
  196. </script>
  197. </body>
  198. </html>