add_change.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6. <script src="../../../admin/index.js" door type="text/javascript" charset="utf-8"></script>
  7. <!--下拉选择模板-->
  8. <script type="text/html" id="selectTpl">
  9. <option value="">{{d.name}}</option>
  10. {{# if(!d.list){d.list = []}}} {{# for(var i=0;i<d.list.length;i++){}}
  11. <option value="{{d.list[i].id}}">{{d.list[i].name}}</option>
  12. {{#}}}
  13. </script>
  14. </head>
  15. <body>
  16. <form class="layui-form" action="" lay-filter="addForm" style="padding: 20px 30px 0 0">
  17. <div class="layui-form-item">
  18. <label class="layui-form-label ui-required">类别</label>
  19. <div class="layui-input-block" id="bigTypeSelect">
  20. </div>
  21. </div>
  22. <div class="layui-form-item">
  23. <label class="layui-form-label ui-required">产品名称</label>
  24. <div class="layui-input-block">
  25. <input type="text" name="name" lay-verify="required" maxlength="16" placeholder="请输入产品名称" class="layui-input">
  26. </div>
  27. </div>
  28. <div class="layui-form-item">
  29. <label class="layui-form-label ui-required">产品图片</label>
  30. <div class="layui-input-inline">
  31. <div class="imgBox"><img src="" /></div>
  32. </div>
  33. <button style="float: left;" type="button" class="layui-btn" id="uploadImg">选择图片</button>
  34. </div>
  35. <div class="layui-form-item layui-hide">
  36. <button class="layui-btn" lay-submit lay-filter="formSubmit" id="formSubmit">保存</button>
  37. </div>
  38. </form>
  39. <script type="text/javascript">
  40. layui.config({
  41. base: "../../../admin/js/layuiPlugins/"
  42. }).use(["form", 'layer', 'cascade', 'laytpl', 'upload'], function() {
  43. var form = layui.form,
  44. $ = layui.$,
  45. layer = layui.layer,
  46. laytpl = layui.laytpl,
  47. cascade = layui.cascade,
  48. upload = layui.upload;
  49. var object = {
  50. id: (JSON.stringify(location.searchObj()) != "{}") ? location.searchObj().id || null : null, //带参传入ID
  51. currentData: {},
  52. urls: {
  53. formUrl: "productFormUrl",
  54. byIdUrl: "productByIdUrl",
  55. uploadFileUrl: 'uploadFileUrl'
  56. },
  57. formLayFilter: "addForm", //表单容器
  58. closeModal: function() { //关闭当前窗口
  59. parent.layer.close(parent.layer.getFrameIndex(window.name));
  60. }
  61. };
  62. //初始化
  63. object.main = function() {
  64. var _this = this;
  65. if (_this.id) {
  66. _this.getCurrent(_this.id);
  67. } else {
  68. _this.initialization();
  69. }
  70. _this.bigTypeCascade = cascade.render({
  71. elem: "#bigTypeSelect",
  72. hostParm: {
  73. idName: 'bigTypeId'
  74. },
  75. url: {
  76. productBigTypeId: 'productBigTypeUrl',
  77. productTypeId: 'productSmallTypeUrl'
  78. },
  79. placeholder: {
  80. productBigTypeId: "请选择大类别",
  81. productTypeId: "请选择小类别"
  82. },
  83. data: {
  84. type: 'productType'
  85. },
  86. listParamName: {
  87. valueName: 'id',
  88. name: 'name'
  89. },
  90. verify: {
  91. productBigTypeId: "required",
  92. productTypeId: "required"
  93. }
  94. });
  95. // 上传图片
  96. upload.render({
  97. elem: '#uploadImg',
  98. url: 'uploadFileUrl',
  99. accept: 'images',
  100. method: 'get',
  101. acceptMime: 'image/*',
  102. size: 5 * 1024,
  103. before: function(obj) {
  104. obj.preview(function(index, file, result) {
  105. $('.imgBox img').attr('src', result);
  106. });
  107. layer.msg('正在上传中', {
  108. icon: 16,
  109. shade: 0.01
  110. });
  111. },
  112. done: function(res) {
  113. layer.closeAll();
  114. if (res.code == 0) {
  115. _this.currentData.imgUrl = res.data[0].url;
  116. } else {
  117. return layer.msg('上传失败');
  118. }
  119. }
  120. });
  121. form.on('submit(formSubmit)', function(obj) {
  122. return _this.mergeData(obj.field).submitInfo();
  123. });
  124. return _this;
  125. };
  126. //初始化
  127. object.initialization = function() {
  128. var _this = this;
  129. return _this;
  130. };
  131. //合并表单内容
  132. object.mergeData = function(obj) {
  133. this.currentData = $.extend(this.currentData, obj);
  134. return this;
  135. };
  136. //获取当前信息
  137. object.getCurrent = function(id) {
  138. var _this = this;
  139. $.ajax({
  140. url: _this.urls.byIdUrl,
  141. data: {
  142. id: id || _this.id //当前ID
  143. },
  144. success: function(res) {
  145. _this.currentData = res.data[0];
  146. $('.imgBox img').attr('src', window.hywa.config.href + '/' + res.data[0].imgUrl);
  147. _this.formVal();
  148. }
  149. });
  150. return this;
  151. };
  152. //表单赋值
  153. object.formVal = function() {
  154. var _this = this;
  155. form.val(_this.formLayFilter, _this.currentData);
  156. _this.bigTypeCascade.val(_this.currentData);
  157. return _this;
  158. };
  159. //提交新增修改
  160. object.submitInfo = function() {
  161. var _this = this;
  162. if (!_this.currentData.imgUrl) {
  163. layer.msg('请上传产品图片', {
  164. icon: 7
  165. });
  166. return false;
  167. }
  168. $.ajax({
  169. type: 'POST',
  170. url: _this.id ? 'productUpdateFormUrl' : 'productAddFormUrl',
  171. data: JSON.stringify(_this.currentData),
  172. contentType: 'application/json',
  173. success: function(res) {
  174. if (res.code == 0) {
  175. parent.layer.msg(res.msg, {
  176. icon: 1
  177. });
  178. parent.layui.table.reload('tableData');
  179. _this.closeModal();
  180. } else {
  181. layer.msg(res.msg, {
  182. icon: 2
  183. });
  184. }
  185. }
  186. });
  187. return false;
  188. };
  189. object.main();
  190. //验证规则
  191. form.verify({
  192. nickname: function(value) {
  193. if (!new RegExp("^[a-zA-Z][a-zA-Z0-9_]*$").test(value)) {
  194. return '用户名必须以英文字母开头,只能包含英文字母、数字、下划线';
  195. }
  196. if (/(^\_)|(\__)|(\_+$)/.test(value)) {
  197. return '用户名首尾不能出现下划线\'_\'';
  198. }
  199. },
  200. phoneNumber: function(value) {
  201. if (value) {
  202. if (!(/^1[3|4|5|7|8]\d{9}$/).test(value)) {
  203. return '请输入正确的手机号码';
  204. }
  205. }
  206. return false;
  207. }
  208. });
  209. });
  210. </script>
  211. </body>
  212. </html>