DialogForm.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  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. // 表单
  32. _this.$form = null;
  33. // 目标按钮
  34. _this.$target = null;
  35. _this._dialog = w.layer;
  36. _this._counter = 1;
  37. _this._idx = {};
  38. _this._dialogs = {};
  39. _this.isLoading = 0;
  40. _this.isSubmitting = 0;
  41. _this._execute(options)
  42. }
  43. _execute(options) {
  44. let _this = this,
  45. defUrl = options.defaultUrl;
  46. (! options.buttonSelector) || $(options.buttonSelector).off('click').click(function () {
  47. _this.$target = $(this);
  48. let counter = _this.$target.attr('counter'), url;
  49. if (! counter) {
  50. counter = _this._counter;
  51. _this.$target.attr('counter', counter);
  52. _this._counter++;
  53. }
  54. url = _this.$target.data('url') || defUrl; // 给弹窗页面链接追加参数
  55. if (url.indexOf('?') === -1) {
  56. url += '?' + options.query + '=1'
  57. } else if (url.indexOf(options.query) === -1) {
  58. url += '&' + options.query + '=1'
  59. }
  60. _this._build(url, counter);
  61. });
  62. options.buttonSelector || setTimeout(function () {
  63. _this._build(defUrl, _this._counter)
  64. }, 400);
  65. }
  66. // 构建表单
  67. _build(url, counter) {
  68. let _this = this,
  69. $btn = _this.$target;
  70. if (! url || _this.isLoading) {
  71. return;
  72. }
  73. if (_this._dialogs[counter]) { // 阻止同个类型的弹窗弹出多个
  74. _this._dialogs[counter].show();
  75. try {
  76. _this._dialog.restore(_this._idx[counter]);
  77. } catch (e) {
  78. }
  79. return;
  80. }
  81. // 刷新或跳转页面时移除弹窗
  82. Dcat.onPjaxComplete(() => {
  83. _this._destroy(counter);
  84. });
  85. _this.isLoading = 1;
  86. $btn && $btn.button('loading');
  87. // 请求表单内容
  88. $.get(url, function (template) {
  89. _this.isLoading = 0;
  90. if ($btn) {
  91. $btn.button('reset');
  92. setTimeout(function () {
  93. $btn.find('.waves-ripple').remove();
  94. }, 50);
  95. }
  96. _this._popup(template, counter);
  97. });
  98. }
  99. // 弹出弹窗
  100. _popup(template, counter) {
  101. let _this = this,
  102. options = _this.options;
  103. // 加载js代码
  104. template = Dcat.assets.filterScriptsAndLoad(template).render();
  105. let btns = [options.lang.submit],
  106. dialogOpts = {
  107. type: 1,
  108. area: (function (v) {
  109. // 屏幕小于800则最大化展示
  110. if (w.screen.width <= 800) {
  111. return ['100%', '100%',];
  112. }
  113. return v;
  114. })(options.area),
  115. content: template,
  116. title: options.title,
  117. yes: function () {
  118. _this._submit()
  119. },
  120. cancel: function () {
  121. if (options.forceRefresh) { // 是否强制刷新
  122. _this._dialogs[counter] = _this._idx[counter] = null;
  123. } else {
  124. _this._dialogs[counter].hide();
  125. return false;
  126. }
  127. }
  128. };
  129. if (! options.disableReset) {
  130. btns.push(options.lang.reset);
  131. dialogOpts.btn2 = function () { // 重置按钮
  132. _this.$form.trigger('reset');
  133. return false;
  134. };
  135. }
  136. dialogOpts.btn = btns;
  137. _this._idx[counter] = _this._dialog.open(dialogOpts);
  138. _this._dialogs[counter] = w.$('#layui-layer' + _this._idx[counter]);
  139. _this.$form = _this._dialogs[counter].find('form').first();
  140. }
  141. // 销毁弹窗
  142. _destroy(counter) {
  143. let dialogs = this._dialogs;
  144. this._dialog.close(this._idx[counter]);
  145. dialogs[counter] && dialogs[counter].remove();
  146. dialogs[counter] = null;
  147. }
  148. // 提交表单
  149. _submit() {
  150. let _this = this,
  151. options = _this.options,
  152. counter = _this.$target.attr('counter');
  153. if (_this.isSubmitting) {
  154. return;
  155. }
  156. Dcat.Form({
  157. form: _this.$form,
  158. disableRedirect: true,
  159. before: function () {
  160. // 验证表单
  161. _this.$form.validator('validate');
  162. if (_this.$form.find('.has-error').length > 0) {
  163. return false;
  164. }
  165. _this.isSubmitting = 1;
  166. Dcat.NP.start();
  167. },
  168. after: function (success, res) {
  169. Dcat.NP.done();
  170. _this.isSubmitting = 0;
  171. options.saved(success, res);
  172. if (!success) {
  173. return options.error(success, res);
  174. }
  175. if (res.status) {
  176. options.success(success, res);
  177. _this._destroy(counter);
  178. return;
  179. }
  180. options.error(success, res);
  181. Dcat.error(res.message || 'Save failed.');
  182. }
  183. });
  184. return false;
  185. }
  186. }