require-form.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326
  1. define(['jquery', 'bootstrap', 'backend', 'toastr', 'upload', 'validator'], function ($, undefined, Backend, Toastr, Upload, Validator) {
  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").toUpperCase();
  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 (ret) {
  33. if (ret.hasOwnProperty("code")) {
  34. var data = ret.hasOwnProperty("data") && ret.data != "" ? ret.data : null;
  35. var msg = ret.hasOwnProperty("msg") && ret.msg != "" ? ret.msg : "";
  36. if (ret.code === 1) {
  37. $('.form-group', form).removeClass('has-feedback has-success has-error');
  38. //成功提交后事件
  39. var afterSubmit = form.data("after-submit");
  40. //元素绑定函数
  41. if (afterSubmit && typeof Form.api.custom[afterSubmit] == 'function') {
  42. if (!Form.api.custom[afterSubmit].call(form, data)) {
  43. return false;
  44. }
  45. }
  46. //自定义函数
  47. if (typeof onAfterSubmit == 'function') {
  48. if (!onAfterSubmit.call(form, data)) {
  49. return false;
  50. }
  51. }
  52. Toastr.success(msg ? msg : __('Operation completed'));
  53. } else {
  54. if (data && typeof data === 'object' && typeof data.token !== 'undefined') {
  55. $("input[name='__token__']").val(data.token);
  56. }
  57. Toastr.error(msg ? msg : __('Operation failed'));
  58. }
  59. } else {
  60. Toastr.error(__('Unknown data format'));
  61. }
  62. }, error: function () {
  63. Toastr.error(__('Network error'));
  64. }, complete: function (e) {
  65. }
  66. });
  67. return false;
  68. },
  69. bindevent: function (form, onBeforeSubmit, onAfterSubmit) {
  70. form.validator($.extend({
  71. validClass: 'has-success',
  72. invalidClass: 'has-error',
  73. bindClassTo: '.form-group',
  74. formClass: 'n-default n-bootstrap',
  75. msgClass: 'n-right',
  76. stopOnError: true,
  77. display: function (elem) {
  78. return $(elem).closest('.form-group').find(".control-label").text().replace(/\:/, '');
  79. },
  80. target: function (input) {
  81. var $formitem = $(input).closest('.form-group'),
  82. $msgbox = $formitem.find('span.msg-box');
  83. if (!$msgbox.length) {
  84. return [];
  85. }
  86. return $msgbox;
  87. },
  88. valid: function (ret) {
  89. //验证通过提交表单
  90. Form.api.submit($(ret), onBeforeSubmit, function (data) {
  91. if (typeof onAfterSubmit == 'function') {
  92. if (!onAfterSubmit.call($(ret), data)) {
  93. return false;
  94. }
  95. }
  96. //提示及关闭当前窗口
  97. parent.Toastr.success(__('Operation completed'));
  98. parent.$(".btn-refresh").trigger("click");
  99. var index = parent.Layer.getFrameIndex(window.name);
  100. parent.Layer.close(index);
  101. });
  102. return false;
  103. }
  104. }, form.data("validator-options") || {}));
  105. //绑定select元素事件
  106. if ($(".selectpicker", form).size() > 0) {
  107. require(['bootstrap-select', 'bootstrap-select-ajax'], function () {
  108. var selectlist = $('.selectpicker', form).selectpicker();
  109. $.each(selectlist, function () {
  110. var that = this;
  111. if ($(this).data("live-search")) {
  112. $(this).ajaxSelectPicker({
  113. ajax: {
  114. url: 'ajax/selectpicker',
  115. beforeSend: function (xhr, setting) {
  116. setting.url = Backend.api.fixurl(setting.url);
  117. },
  118. data: function () {
  119. var params = {
  120. search: '{{{q}}}',
  121. field: $(that).attr("name")
  122. };
  123. return params;
  124. },
  125. dataType: 'json'
  126. },
  127. locale: {
  128. emptyTitle: 'Search...'
  129. },
  130. preprocessData: function (ret) {
  131. var list = [];
  132. if (ret.hasOwnProperty('data') && ret.data) {
  133. var len = ret.data.length;
  134. for (var i = 0; i < len; i++) {
  135. var curr = ret.data[i];
  136. list.push(curr);
  137. }
  138. }
  139. return list;
  140. },
  141. preserveSelected: true
  142. });
  143. }
  144. });
  145. });
  146. }
  147. //绑定cxselect元素事件
  148. if ($("[data-toggle='cxselect']").size() > 0) {
  149. require(['cxselect'], function () {
  150. $.cxSelect.defaults.jsonName = 'name';
  151. $.cxSelect.defaults.jsonValue = 'value';
  152. $.cxSelect.defaults.jsonSpace = 'data';
  153. $("[data-toggle='cxselect']").cxSelect();
  154. });
  155. }
  156. if ($(".typeahead").size() > 0 || $(".tagsinput").size() > 0) {
  157. require(['bloodhound'], function () {
  158. var remotesource = function (input) {
  159. var url = $(input).data("url") ? $(input).data("url") : "ajax/typeahead";
  160. return new Bloodhound({
  161. datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  162. queryTokenizer: Bloodhound.tokenizers.whitespace,
  163. remote: {
  164. url: url + '?search=%QUERY&field=' + $(input).attr("name"),
  165. wildcard: '%QUERY',
  166. transform: function (ret) {
  167. return ret.data.searchlist;
  168. }
  169. }
  170. });
  171. };
  172. //绑定typeahead事件
  173. if ($(".typeahead", form).size() > 0) {
  174. require(['typeahead'], function () {
  175. $(".typeahead", form).each(function () {
  176. $(this).typeahead({
  177. hint: true,
  178. highlight: true,
  179. minLength: 0
  180. }, {
  181. name: 'typeahead',
  182. limit: 20,
  183. displayKey: 'id',
  184. source: remotesource(this),
  185. templates: {
  186. empty: '<li class="notfound">' + __('No matches found') + '</li>',
  187. suggestion: function (item) {
  188. return '<li>' + item.name + '</li>';
  189. }
  190. }
  191. });
  192. });
  193. });
  194. }
  195. //绑定tagsinput事件
  196. if ($(".tagsinput", form).size() > 0) {
  197. require(['bootstrap-tagsinput'], function () {
  198. $('.tagsinput', form).each(function () {
  199. $(this).tagsinput({
  200. freeInput: false,
  201. itemValue: 'id',
  202. itemText: 'name',
  203. typeaheadjs: {
  204. name: 'tagsinput',
  205. limit: 20,
  206. displayKey: 'name',
  207. source: remotesource(this),
  208. templates: {
  209. empty: '<li class="notfound">' + __('No matches found') + '</li>',
  210. suggestion: function (item) {
  211. return '<li>' + item.name + '</li>';
  212. }
  213. }
  214. }
  215. });
  216. });
  217. });
  218. }
  219. });
  220. }
  221. //绑定日期时间元素事件
  222. if ($(".datetimepicker", form).size() > 0) {
  223. require(['bootstrap-datetimepicker'], function () {
  224. $('.datetimepicker', form).parent().css('position', 'relative');
  225. $('.datetimepicker', form)
  226. .datetimepicker({
  227. format: 'YYYY-MM-DD HH:mm:ss',
  228. icons: {
  229. time: 'fa fa-clock-o',
  230. date: 'fa fa-calendar',
  231. up: 'fa fa-chevron-up',
  232. down: 'fa fa-chevron-down',
  233. previous: 'fa fa-chevron-left',
  234. next: 'fa fa-chevron-right',
  235. today: 'fa fa-history',
  236. clear: 'fa fa-trash',
  237. close: 'fa fa-remove'
  238. },
  239. showTodayButton: true,
  240. showClose: true
  241. });
  242. });
  243. }
  244. //绑定summernote事件
  245. if ($(".summernote", form).size() > 0) {
  246. require(['summernote'], function () {
  247. $(".summernote", form).summernote({
  248. height: 250,
  249. lang: 'zh-CN',
  250. fontNames: [
  251. 'Arial', 'Arial Black', 'Serif', 'Sans', 'Courier',
  252. 'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande',
  253. "Open Sans", "Hiragino Sans GB", "Microsoft YaHei",
  254. '微软雅黑', '宋体', '黑体', '仿宋', '楷体', '幼圆',
  255. ],
  256. fontNamesIgnoreCheck: [
  257. "Open Sans", "Microsoft YaHei",
  258. '微软雅黑', '宋体', '黑体', '仿宋', '楷体', '幼圆'
  259. ],
  260. dialogsInBody: true,
  261. callbacks: {
  262. onChange: function (contents) {
  263. $(this).val(contents);
  264. $(this).trigger('change');
  265. },
  266. onInit: function () {
  267. },
  268. onImageUpload: function (files) {
  269. var that = this;
  270. //依次上传图片
  271. for (var i = 0; i < files.length; i++) {
  272. Upload.api.send(files[i], function (data) {
  273. var url = Backend.api.cdnurl(data.url);
  274. $(that).summernote("insertImage", url, 'filename');
  275. });
  276. }
  277. }
  278. }
  279. });
  280. });
  281. }
  282. //绑定plupload上传元素事件
  283. if ($(".plupload", form).size() > 0) {
  284. Upload.api.plupload();
  285. }
  286. //绑定fachoose选择附件事件
  287. if ($(".fachoose", form).size() > 0) {
  288. $(document).on('click', ".fachoose", function () {
  289. var multiple = $(this).data("multiple") ? $(this).data("multiple") : false;
  290. var mimetype = $(this).data("mimetype") ? $(this).data("mimetype") : '';
  291. Backend.api.open("general/attachment/select?callback=refreshchoose&element_id=" + $(this).attr("id") + "&multiple=" + multiple + "&mimetype=" + mimetype, __('Choose'));
  292. return false;
  293. });
  294. //刷新选择的元素
  295. window.refreshchoose = function (id, data, multiple) {
  296. var input_id = $("#" + id).data("input-id");
  297. if (multiple) {
  298. var urlArr = [];
  299. var inputObj = $("#" + input_id);
  300. if (inputObj.val() != "") {
  301. urlArr.push(inputObj.val());
  302. }
  303. urlArr.push(data.url);
  304. inputObj.val(urlArr.join(",")).trigger("change");
  305. } else {
  306. $("#" + input_id).val(data.url).trigger("change");
  307. }
  308. layer.closeAll();
  309. };
  310. }
  311. },
  312. custom: {}
  313. },
  314. };
  315. return Form;
  316. });