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

今天修改了一个功能，限制删除用户，在删除的时候不满足条件的时候提示用户原因，使用的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。至此，问题完美解决。

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

相关推荐