DialogForm.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  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 num = $btn.attr('counter'), url;
  47. if (! num) {
  48. num = _this._counter;
  49. $btn.attr('counter', num);
  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, num);
  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. $(w.document).one('pjax:complete', function () { // 跳转新页面时移除弹窗
  78. _this._destory(counter);
  79. });
  80. _this.isLoading = 1;
  81. (! $btn) || $btn.button('loading');
  82. $.get(url, function (tpl) {
  83. _this.isLoading = 0;
  84. if ($btn) {
  85. $btn.button('reset');
  86. setTimeout(function () {
  87. $btn.find('.waves-ripple').remove();
  88. }, 50);
  89. }
  90. _this._popup(tpl, counter);
  91. });
  92. }
  93. _popup(tpl, counter) {
  94. let _this = this, options = _this.options;
  95. tpl = LA.AssetsLoader.filterScriptAndAutoLoad(tpl).render();
  96. let $template = $(tpl),
  97. btns = [options.lang.submit],
  98. dialogOpts = {
  99. type: 1,
  100. area: (function (v) {
  101. if (w.screen.width <= 800) {
  102. return ['100%', '100%',];
  103. }
  104. return v;
  105. })(options.area),
  106. content: tpl,
  107. title: title,
  108. yes: function () {
  109. _this._submit($template)
  110. },
  111. cancel: function () {
  112. if (options.forceRefresh) { // 是否强制刷新
  113. _this._dialogs[counter] = _this._idx[counter] = null;
  114. } else {
  115. _this._dialogs[counter].hide();
  116. return false;
  117. }
  118. }
  119. };
  120. if (! options.disableReset) {
  121. btns.push(options.lang.reset);
  122. dialogOpts.btn2 = function () { // 重置按钮
  123. _this.$form = _this.$form || $template.find('form').first();
  124. _this.$form.trigger('reset');
  125. return false;
  126. };
  127. }
  128. dialogOpts.btn = btns;
  129. _this._idx[counter] = _this._dialog.open(dialogOpts);
  130. _this._dialogs[counter] = w.$('#layui-layer' + _this._idx[counter]);
  131. }
  132. _destory(counter) {
  133. let dialogs = this._dialogs;
  134. this._dialog.close(this._idx[counter]);
  135. dialogs[counter] && dialogs[counter].remove();
  136. dialogs[counter] = null;
  137. }
  138. _submit($template) {
  139. let _this = this, options = _this.options;
  140. if (_this.isSubmitting) {
  141. return;
  142. }
  143. _this.$form = _this.$form || $template.find('form').first(); // 此处必须重新创建jq对象,否则无法操作页面元素
  144. Dcat.Form({
  145. form: _this.$form,
  146. disableRedirect: true,
  147. before: function () {
  148. _this.$form.validator('validate');
  149. if (_this.$form.find('.has-error').length > 0) {
  150. return false;
  151. }
  152. _this.isSubmitting = 1;
  153. _this._dialogs[num].find('.layui-layer-btn0').button('loading');
  154. },
  155. after: function (success, res) {
  156. _this._dialogs[num].find('.layui-layer-btn0').button('reset');
  157. _this.isSubmitting = 0;
  158. options.saved(success, res);
  159. if (!success) {
  160. return options.error(success, res);
  161. }
  162. if (res.status) {
  163. options.success(success, res);
  164. _this._destory(num);
  165. return;
  166. }
  167. options.error(success, res);
  168. Dcat.error(res.message || 'Save failed.');
  169. }
  170. });
  171. return false;
  172. }
  173. }