关于abp中使用的sweetalert对话框组件的confirm确认对话框中的一个坑的解决过程

软件设计 2017-07-21

今天修改了一个功能,限制删除用户,在删除的时候不满足条件的时候提示用户原因,使用的sweet alert组件。 abp框架前端集成了sweet alert 对http请求的error做了全局处理,我在后台程序直接抛出的UserFriendlyExcption,开始的时候发现能提示,然后再次操作发现没显示提示了, 卧槽,一脸懵逼啊,哪里的问题啊,赶忙把代码从头到尾检查一遍没问题啊,然后测试其他有这种错误提示的地方,发现没问题啊,都有提示的,就只有这里出现问题。。。 那就调试吧,在abp.ng.js源文件中打了一个断点调试,然后操作一步一步走,结果发现sweet alert是显示出来了的,只不过又马上被隐藏了。

具体的sweet alert的elements如下:

<div class="sweet-alert showSweetAlert visible" tabindex="-1" data-custom-class="" data-has-cancel-button="false" data-allow-ouside-click="false" data-has-done-function="true" data-animation="pop" data-timer="null" style="display: none; margin-top: -190px; opacity: -0.06;">
    <div class="icon error animateErrorIcon" style="display: block;"></div>
    <div class="icon warning" style="display: none;">   </div> 
<div class="icon info" style="display: none;"></div>
 <div class="icon success" style="display: none;">   <div class="placeholder"></div> <div class="fix"></div> </div>
 <div class="icon custom" style="display: none;"></div> <h2>您不能删除该当班用户,请等待用户交班后再进行删除!</h2><p style="display: block;"></p><button class="cancel" tabindex="2" style="display: none; box-shadow: none;">Cancel</button><button class="confirm" tabindex="1" style="background-color: rgb(174, 222, 244); box-shadow: rgba(174, 222, 244, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;">Ok</button></div>

一看div容器的class是visible,表示是显示了的,只不过是style上的display为none,被隐藏了,又是一脸懵逼,想到难道是其他地方的代码直接修改了div的行内样式?但是仔细一分析也不对啊,其他地方的代码又没有专门对sweet alert的elements修改,就算是有代码使用的div选择器那么修改的也是页面所有的div,而不会仅仅是sweet下的div。 这样看来应该还是sweet alert组件自己修改的,为了确认这个问题,在浏览器elements选卡下 选中sweet alert的elements,使用 break on功能进行调试,经过几次操作发现确实是sweet alert自身修改的样式。

问题确认那么就找找是哪里触发的,通过连续的操作,仔细观察,发现在sweet alert confirm确认对话框关闭的过程中,后台处理已经处理完成直接弹出sweet alert的提示框了,然后confirm关闭的时候直接把提示对话框也关闭了。

我了割草,终于发现问题了,因为sweet alert所有的对话框,提示框都是公用的一块elements,所以两个提示框不能同时出现,不然就会出现混乱。 找到问题点了,处理起来就简单了,找到abp.sweet-alert.js文件,找到abp.message.confirm函数修改最后的return部分代码:

return $.Deferred(function ($dfd) {
            sweetAlert(opts, function (isConfirmed) {
                callback && callback(isConfirmed);
                $dfd.resolve(isConfirmed);
            });
        });

改为:

return $.Deferred(function ($dfd) {
            sweetAlert(opts, function (isConfirmed) {
                setTimeout(function () { callback && callback(isConfirmed); },300);
                $dfd.resolve(isConfirmed);
            });
        });

使用settimeout函数,延迟300毫秒去执行callback回调函数,这样就不会冲突了。 修改这地方是为了统一处理confirm对话框的情况,也可以直接修改调用confirm的地方,callback函数里面使用settimeout延迟执行业务操作,只不过这样只能处理一处,非特殊情况建议还是直接修改abp.sweet-alert.js。 至此,问题完美解决。

相关推荐