今天修改了一個功能，限制刪除用戶，在刪除的時候不滿足條件的時候提示用戶原因，使用的sweet alert組件。 abp框架前端集成了sweet alert 對http請求的error做了全局處理，我在後臺程式直接拋出的UserFriendlyExcption，開始的時候發現能提示，然後再次操作發現沒 ...
今天修改了一個功能，限制刪除用戶，在刪除的時候不滿足條件的時候提示用戶原因，使用的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;"><span class="x-mark animateXMark"><span class="line left"></span><span class="line right"></span></span></div>
<div class="icon warning" style="display: none;"> <span class="body"></span> <span class="dot"></span> </div>
<div class="icon info" style="display: none;"></div>
<div class="icon success" style="display: none;"> <span class="line tip"></span> <span class="line long"></span> <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。
至此，問題完美解決。
