require-form.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. define(['jquery', 'bootstrap', 'backend', 'config', 'toastr', 'upload', 'bootstrap-validator', 'bootstrap-checkbox', 'bootstrap-radio', 'bootstrap-switch'], function ($, undefined, Backend, Config, Toastr, Upload, undefined) {
  2. var Form = {
  3. config: {
  4. },
  5. api: {
  6. submit: function (form, onBeforeSubmit, onAfterSubmit) {
  7. if (form.size() == 0)
  8. return Toastr.error("表单未初始化完成,无法提交");
  9. //提交前事件
  10. var beforeSubmit = form.data("before-submit");
  11. //元素绑定函数
  12. if (beforeSubmit && typeof Form.api.custom[beforeSubmit] == 'function') {
  13. if (!Form.api.custom[beforeSubmit].call(form)) {
  14. return false;
  15. }
  16. }
  17. //自定义函数
  18. if (typeof onBeforeSubmit == 'function') {
  19. if (!onBeforeSubmit.call(form)) {
  20. return false;
  21. }
  22. }
  23. var type = form.attr("method");
  24. type = type && (type == 'GET' || type == 'POST') ? type : 'GET';
  25. url = form.attr("action");
  26. url = url ? url : location.href;
  27. $.ajax({
  28. type: type,
  29. url: url,
  30. data: form.serialize(),
  31. dataType: 'json',
  32. success: function (data) {
  33. if (data.hasOwnProperty("code")) {
  34. var content = data.hasOwnProperty("content") && data.content != "" ? data.content : "";
  35. if (data.code === 1) {
  36. $('.form-group', form).removeClass('has-feedback has-success has-error');
  37. //成功提交后事件
  38. var afterSubmit = form.data("after-submit");
  39. //元素绑定函数
  40. if (afterSubmit && typeof Form.api.custom[afterSubmit] == 'function') {
  41. if (!Form.api.custom[afterSubmit].call(form, content)) {
  42. return false;
  43. }
  44. }
  45. //自定义函数
  46. if (typeof onAfterSubmit == 'function') {
  47. if (!onAfterSubmit.call(form, content)) {
  48. return false;
  49. }
  50. }
  51. Toastr.success(content ? content : __('Operation completed'));
  52. } else {
  53. Toastr.error(content ? content : __('Operation failed'));
  54. }
  55. } else {
  56. Toastr.error(__('Unknown data format'));
  57. }
  58. }, error: function () {
  59. Toastr.error(__('Network error'));
  60. }, complete: function (e) {
  61. }
  62. });
  63. return false;
  64. },
  65. bindevent: function (form, onBeforeSubmit, onAfterSubmit) {
  66. form.validator().on('submit', function (e) {
  67. if (e.isDefaultPrevented()) {
  68. //验证不通过
  69. Toastr.error("验证失败,请检查表单输入是否正确");
  70. //Backend.api.error();
  71. } else {
  72. //验证通过提交表单
  73. Form.api.submit(form, onBeforeSubmit, function (content) {
  74. if (typeof onAfterSubmit == 'function') {
  75. if (!onAfterSubmit.call(form, content)) {
  76. return false;
  77. }
  78. }
  79. //提示及关闭当前窗口
  80. parent.Layer.msg(__('Operation completed'), {
  81. offset: 0, icon: 1
  82. });
  83. parent.$(".btn-refresh").trigger("click");
  84. var index = parent.Layer.getFrameIndex(window.name);
  85. parent.Layer.close(index);
  86. });
  87. return false;
  88. }
  89. });
  90. // Activate the switches with icons
  91. if ($('.switch').length != 0) {
  92. $('.switch')['bootstrapSwitch']();
  93. }
  94. // Activate regular switches
  95. if ($("[data-toggle='switch']").length != 0) {
  96. $("[data-toggle='switch']").wrap('<div class="switch" />').parent().bootstrapSwitch();
  97. }
  98. //绑定select元素事件
  99. if ($(".selectpicker", form).size() > 0) {
  100. require(['bootstrap-select'], function () {
  101. $('.selectpicker', form).selectpicker();
  102. });
  103. }
  104. if ($(".typeahead").size() > 0 || $(".tagsinput").size() > 0) {
  105. require(['bloodhound'], function () {
  106. var remotesource = function (input) {
  107. return new Bloodhound({
  108. datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  109. queryTokenizer: Bloodhound.tokenizers.whitespace,
  110. remote: {
  111. url: '/ajax/typeahead?search=%QUERY&field=' + $(input).attr("name"),
  112. wildcard: '%QUERY',
  113. transform: function (data) {
  114. return data.content.searchlist;
  115. }
  116. }
  117. });
  118. };
  119. //绑定typeahead事件
  120. if ($(".typeahead", form).size() > 0) {
  121. require(['typeahead'], function () {
  122. $(".typeahead", form).each(function () {
  123. $(this).typeahead({
  124. hint: true,
  125. highlight: true,
  126. minLength: 0
  127. }, {
  128. name: 'typeahead',
  129. limit: 20,
  130. displayKey: 'id',
  131. source: remotesource(this),
  132. templates: {
  133. empty: '<li class="notfound">' + __('No matches found') + '</li>',
  134. suggestion: function (item) {
  135. return '<li>' + item.name + '</li>';
  136. }
  137. }
  138. });
  139. });
  140. });
  141. }
  142. //绑定tagsinput事件
  143. if ($(".tagsinput", form).size() > 0) {
  144. require(['bootstrap-tagsinput'], function () {
  145. $('.tagsinput', form).each(function () {
  146. $(this).tagsinput({
  147. freeInput: false,
  148. typeaheadjs: {
  149. name: 'tagsinput',
  150. limit: 20,
  151. displayKey: 'name',
  152. valueKey: 'id',
  153. source: remotesource(this),
  154. templates: {
  155. empty: '<li class="notfound">' + __('No matches found') + '</li>',
  156. suggestion: function (item) {
  157. return '<li>' + item.name + '</li>';
  158. }
  159. }
  160. }
  161. });
  162. });
  163. $('.bootstrap-tagsinput .twitter-typeahead').css('display', 'inline');
  164. });
  165. }
  166. });
  167. }
  168. //绑定日期时间元素事件
  169. if ($(".datetimepicker", form).size() > 0) {
  170. require(['bootstrap-datetimepicker'], function () {
  171. $('.datetimepicker', form).parent().css('position', 'relative');
  172. $('.datetimepicker', form)
  173. .datetimepicker({
  174. format: 'YYYY-MM-DD HH:mm:ss',
  175. icons: {
  176. time: 'fa fa-clock-o',
  177. date: 'fa fa-calendar',
  178. up: 'fa fa-chevron-up',
  179. down: 'fa fa-chevron-down',
  180. previous: 'fa fa-chevron-left',
  181. next: 'fa fa-chevron-right',
  182. today: 'fa fa-history',
  183. clear: 'fa fa-trash',
  184. close: 'fa fa-remove'
  185. },
  186. showTodayButton: true,
  187. showClose: true
  188. });
  189. });
  190. }
  191. //绑定summernote事件
  192. if ($(".summernote", form).size() > 0) {
  193. require(['summernote'], function () {
  194. $(".summernote", form).summernote({
  195. height: 250,
  196. lang: 'zh-CN',
  197. dialogsInBody: true,
  198. callbacks: {
  199. onChange: function (contents) {
  200. $(this).val(contents);
  201. $(this).trigger('change');
  202. },
  203. onInit: function () {
  204. },
  205. onImageUpload: function (files) {
  206. var that = this;
  207. //依次上传图片
  208. for (var i = 0; i < files.length; i++) {
  209. Upload.api.send(files[i], function (data) {
  210. var url = Config.upload.cdnurl + data.content;
  211. $(that).summernote("insertImage", url, 'filename');
  212. });
  213. }
  214. }
  215. }
  216. });
  217. });
  218. }
  219. //绑定plupload上传元素事件
  220. if ($(".plupload", form).size() > 0) {
  221. Upload.api.plupload();
  222. }
  223. },
  224. custom: {}
  225. },
  226. };
  227. return Form;
  228. });