edit.html 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  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 :: bootstrap-fileinput-css"/>
  6. </head>
  7. <body class="white-bg">
  8. <div class="wrapper wrapper-content animated fadeInRight ibox-content">
  9. <form class="form-horizontal m" id="form-mall-edit" th:object="${qmjsShoppingMall}">
  10. <input name="id" th:field="*{id}" type="hidden">
  11. <div class="col-xs-12">
  12. <div class="form-group">
  13. <label class="col-sm-3 control-label is-required">商品名称:</label>
  14. <div class="col-sm-8">
  15. <input name="goodsName" th:field="*{goodsName}" class="form-control" type="text" maxlength="15" required>
  16. </div>
  17. </div>
  18. </div>
  19. <!-- <div class="col-xs-12">-->
  20. <!-- <div class="form-group">-->
  21. <!-- <label class="col-sm-3 control-label">商品条码:</label>-->
  22. <!-- <div class="col-sm-8">-->
  23. <!-- <input name="goodsCode" th:field="*{goodsCode}" class="form-control" type="text" required>-->
  24. <!-- </div>-->
  25. <!-- </div>-->
  26. <!-- </div>-->
  27. <div class="col-xs-12">
  28. <div class="form-group">
  29. <label class="col-sm-3 control-label">商品种类:</label>
  30. <div class="col-sm-8">
  31. <select name="goodsType" class="form-control" th:with="type=${@dict.getType('goods_type')}">
  32. <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{goodsType}"></option>
  33. </select>
  34. </div>
  35. </div>
  36. </div>
  37. <!-- <div class="col-xs-12">-->
  38. <!-- <div class="form-group">-->
  39. <!-- <label class="col-sm-3 control-label">计量单位:</label>-->
  40. <!-- <div class="col-sm-8">-->
  41. <!-- <input name="goodsUnit" th:field="*{goodsUnit}" class="form-control" type="text" required>-->
  42. <!-- </div>-->
  43. <!-- </div>-->
  44. <!-- </div>-->
  45. <div class="col-xs-12">
  46. <div class="form-group">
  47. <label class="col-sm-3 control-label">时价商品:</label>
  48. <div class="col-sm-8">
  49. <select name="goodsCurrentPrice" class="form-control" th:with="type=${@dict.getType('sys_yes_no')}">
  50. <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{goodsCurrentPrice}"></option>
  51. </select>
  52. </div>
  53. </div>
  54. </div>
  55. <div class="col-xs-12">
  56. <div class="form-group">
  57. <label class="col-sm-3 control-label is-required">销售单价:</label>
  58. <div class="col-sm-8">
  59. <input name="salePrice" th:field="*{salePrice}" class="form-control" type="text" maxlength="15" required>
  60. </div>
  61. </div>
  62. </div>
  63. <div class="col-xs-12">
  64. <div class="form-group">
  65. <label class="col-sm-3 control-label is-required">建议售价:</label>
  66. <div class="col-sm-8">
  67. <input name="suggestionPrice" th:field="*{suggestionPrice}" class="form-control" type="text" maxlength="15" required>
  68. </div>
  69. </div>
  70. </div>
  71. <!-- <div class="col-xs-12">-->
  72. <!-- <div class="form-group">-->
  73. <!-- <label class="col-sm-3 control-label">商品库存:</label>-->
  74. <!-- <div class="col-sm-8">-->
  75. <!-- <input name="goodsInventory" th:field="*{goodsInventory}" class="form-control" type="text" required>-->
  76. <!-- </div>-->
  77. <!-- </div>-->
  78. <!-- </div>-->
  79. <!-- <div class="col-xs-12">-->
  80. <!-- <div class="form-group">-->
  81. <!-- <label class="col-sm-3 control-label">库存成本:</label>-->
  82. <!-- <div class="col-sm-8">-->
  83. <!-- <input name="inventoryCost" th:field="*{inventoryCost}" class="form-control" type="text" required>-->
  84. <!-- </div>-->
  85. <!-- </div>-->
  86. <!-- </div>-->
  87. <div class="col-xs-12">
  88. <div class="form-group">
  89. <label class="col-sm-3 control-label">商品状态:</label>
  90. <div class="col-sm-8">
  91. <select name="goodsState" class="form-control" th:with="type=${@dict.getType('goods_state')}" disabled>
  92. <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{goodsState}"></option>
  93. </select>
  94. </div>
  95. </div>
  96. </div>
  97. <div class="col-xs-12">
  98. <div class="form-group">
  99. <label class="col-sm-3 control-label">商品图片:</label>
  100. <div class="col-sm-8">
  101. <input type="hidden" name="goodsImg" th:field="*{goodsImg}">
  102. <div class="file-loading">
  103. <input class="form-control file-upload" id="goodsImg" name="file" type="file" multiple>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. <div class="col-xs-12">
  109. <div class="form-group">
  110. <label class="col-sm-3 control-label">商品说明:</label>
  111. <div class="col-sm-8">
  112. <textarea name="goodsDescribe" class="form-control" type="text" maxlength="200">[[*{goodsDescribe}]]</textarea>
  113. </div>
  114. </div>
  115. </div>
  116. </form>
  117. </div>
  118. <th:block th:include="include :: footer" />
  119. <th:block th:include="include :: bootstrap-fileinput-js"/>
  120. <script th:inline="javascript">
  121. var prefix = ctx + "system/mall";
  122. $("#form-mall-edit").validate({
  123. focusCleanup: true,
  124. rules:{
  125. salePrice:{
  126. double:true
  127. },
  128. suggestionPrice:{
  129. double:true
  130. },
  131. },
  132. });
  133. function submitHandler() {
  134. if ($.validate.form()) {
  135. $.operate.save(prefix + "/edit", $('#form-mall-edit').serialize());
  136. }
  137. }
  138. $(".file-upload").each(function (i) {
  139. var inputName = this.id;
  140. var val = $("input[name='" + inputName + "']").val();
  141. // 将已上传的图片路径分割成数组
  142. var initialPreview = val ? val.split(',') : [];
  143. $(this).fileinput({
  144. 'uploadUrl': ctx + 'common/upload',
  145. initialPreviewAsData: true,
  146. initialPreview: initialPreview,
  147. maxFileCount: 5,
  148. allowedFileExtensions: ['jpg', 'png'],
  149. maxFileSize: 10240,
  150. multiple: true,
  151. }).on('fileuploaded', function (event, data, previewId, index) {
  152. var inputName = event.currentTarget.id;
  153. var existingValue = $("input[name='" + inputName + "']").val();
  154. var newValue = data.response.url;
  155. // 如果已经存在值,则在后面加上逗号分隔的新值
  156. if (existingValue) {
  157. $("input[name='" + inputName + "']").val(existingValue + ',' + newValue);
  158. } else {
  159. $("input[name='" + inputName + "']").val(newValue);
  160. }
  161. }).on('fileremoved', function (event, id, index) {
  162. var inputName = event.currentTarget.id;
  163. var existingValue = $("input[name='" + inputName + "']").val();
  164. var fileUrls = existingValue.split(',');
  165. // 移除对应的文件路径
  166. fileUrls.splice(index, 1);
  167. // 重新拼接文件路径
  168. $("input[name='" + inputName + "']").val(fileUrls.join(','));
  169. });
  170. $(this).fileinput('_initFileActions');
  171. });
  172. </script>
  173. </body>
  174. </html>