DialogForm.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. let w = top || window;
  2. export default class DialogForm {
  3. constructor(Dcat, options) {
  4. let _this = this, nullFun = function (a, b) {};
  5. _this.options = $.extend({
  6. // 弹窗标题
  7. title: '',
  8. // 默认地址
  9. defaultUrl: '',
  10. // 需要绑定的按钮选择器
  11. buttonSelector: '',
  12. // 弹窗大小
  13. area: [],
  14. // 语言包
  15. lang: {
  16. submit: Dcat.lang['submit'] || 'Submit',
  17. reset: Dcat.lang['reset'] || 'Reset',
  18. },
  19. // get参数名称
  20. query: '',
  21. // 保存成功后是否刷新页面
  22. forceRefresh: false,
  23. disableReset: false,
  24. // 执行保存操作后回调
  25. saved: nullFun,
  26. // 保存成功回调
  27. success: nullFun,
  28. // 保存失败回调
  29. error: nullFun,
  30. }, options);
  31. _this.$form = null;
  32. _this._dialog = w.layer;
  33. _this._counter = 1;
  34. _this._idx = {};
  35. _this._dialogs = {};
  36. _this.isLoading = 0;
  37. _this.isSubmitting = 0;
  38. _this._execute(options)
  39. }
  40. _execute(options) {
  41. let _this = this,
  42. defUrl = options.defaultUrl,
  43. $btn;
  44. (! options.buttonSelector) || $(options.buttonSelector).off('click').click(function () {
  45. $btn = $(this);
  46. let counter = $btn.attr('counter'), url;
  47. if (! counter) {
  48. counter = _this._counter;
  49. $btn.attr('counter', counter);
  50. _this._counter++;
  51. }
  52. url = $btn.data('url') || defUrl; // 给弹窗页面链接追加参数
  53. if (url.indexOf('?') === -1) {
  54. url += '?' + options.query + '=1'
  55. } else if (url.indexOf(options.query) === -1) {
  56. url += '&' + options.query + '=1'
  57. }
  58. _this._build($btn, url, counter);
  59. });
  60. options.buttonSelector || setTimeout(function () {
  61. _this._build($btn, defUrl, _this._counter)
  62. }, 400);
  63. }
  64. _build($btn, url, counter) {
  65. let _this = this;
  66. if (! url || _this.isLoading) {
  67. return;
  68. }
  69. if (_this._dialogs[counter]) { // 阻止同个类型的弹窗弹出多个
  70. _this._dialogs[counter].show();
  71. try {
  72. _this._dialog.restore(_this._idx[counter]);
  73. } catch (e) {
  74. }
  75. return;
  76. }
  77. // 刷新或跳转页面时移除弹窗
  78. Dcat.onPjaxComplete(() => {
  79. _this._destroy(counter);
  80. });
  81. _this.isLoading = 1;
  82. $btn && $btn.button('loading');
  83. $.get(url, function (tpl) {
  84. _this.isLoading = 0;
  85. if ($btn) {
  86. $btn.button('reset');
  87. setTimeout(function () {
  88. $btn.find('.waves-ripple').remove();
  89. }, 50);
  90. }
  91. _this._popup($btn, tpl, counter);
  92. });
  93. }
  94. _popup($btn, tpl, counter) {
  95. let _this = this,
  96. options = _this.options;
  97. tpl = Dcat.assets.filterScriptsAndLoad(tpl).render();
  98. let $template = $(tpl),
  99. btns = [options.lang.submit],
  100. dialogOpts = {
  101. type: 1,
  102. area: (function (v) {
  103. if (w.screen.width <= 800) {
  104. return ['100%', '100%',];
  105. }
  106. return v;
  107. })(options.area),
  108. content: tpl,
  109. title: options.title,
  110. yes: function () {
  111. _this._submit($btn, $template)
  112. },
  113. cancel: function () {
  114. if (options.forceRefresh) { // 是否强制刷新
  115. _this._dialogs[counter] = _this._idx[counter] = null;
  116. } else {
  117. _this._dialogs[counter].hide();
  118. return false;
  119. }
  120. }
  121. };
  122. if (! options.disableReset) {
  123. btns.push(options.lang.reset);
  124. dialogOpts.btn2 = function () { // 重置按钮
  125. _this.$form.trigger('reset');
  126. return false;
  127. };
  128. }
  129. dialogOpts.btn = btns;
  130. _this._idx[counter] = _this._dialog.open(dialogOpts);
  131. _this._dialogs[counter] = w.$('#layui-layer' + _this._idx[counter]);
  132. _this.$form = _this._dialogs[counter].find('form').first();
  133. }
  134. _destroy(counter) {
  135. let dialogs = this._dialogs;
  136. this._dialog.close(this._idx[counter]);
  137. dialogs[counter] && dialogs[counter].remove();
  138. dialogs[counter] = null;
  139. }
  140. _submit($btn) {
  141. let _this = this,
  142. options = _this.options,
  143. counter = $btn.attr('counter');
  144. if (_this.isSubmitting) {
  145. return;
  146. }
  147. Dcat.Form({
  148. form: _this.$form,
  149. disableRedirect: true,
  150. before: function () {
  151. _this.$form.validator('validate');
  152. if (_this.$form.find('.has-error').length > 0) {
  153. return false;
  154. }
  155. _this.isSubmitting = 1;
  156. Dcat.NP.start();
  157. },
  158. after: function (success, res) {
  159. Dcat.NP.done();
  160. _this.isSubmitting = 0;
  161. options.saved(success, res);
  162. if (!success) {
  163. return options.error(success, res);
  164. }
  165. if (res.status) {
  166. options.success(success, res);
  167. _this._destroy(counter);
  168. return;
  169. }
  170. options.error(success, res);
  171. Dcat.error(res.message || 'Save failed.');
  172. }
  173. });
  174. return false;
  175. }
  176. }