分享一下解決Dcat Admin左側選單不重新整理的問題

Ly_ii發表於2021-06-19

起因

遇到一個需求,客戶要選單欄提示當前欄目下未處理資料的數量

解決過程

  • 首先我想到的是直接在後端獲取到相關的資料,然後前端渲染,修改app\Admin\bootstrap.php 

       \Dcat\Admin\Layout\Content::resolving(function (\Dcat\Admin\Layout\Content $content) {
      //未稽核文章數
      $unCheckedArticle = \App\Models\Article::query()->where('status', false)->count();
      //未稽核需求數
      $unCheckedNeed = \App\Models\Need::query()->where('status', false)->count();
      //未稽核作品數
      $unCheckedProduct = \App\Models\Product::query()->where('status', false)->count();

      $total = $unVerifyProduct + $unVerifyNeed + $unVerifyArticle;
      view()->share([
         'unCheckedArticle' => $unCheckedArticle,
          'unCheckedNeed' => $unCheckedNeed,
          'unCheckedProduct' => $unCheckedProduct,
          'total' => $total
      ]);
  });

  • 修改前端頁面後展示沒有問題

  • 後面測試發現,在編輯,修改過後選單欄的數量是不更新的(必須手動重新整理頁面),想了一下,哦,可能是pjax的問題

    於是我想禁用pjax,全站重新整理,修改app\Admin\bootstrap.php 

      Admin::disablePjax();

    結果是沒有效果的,去看一下,這個是不是有點小問題~ [@Jiangqh] (learnku.com/users/38389)


    換個寫法(依然沒用!)

       (new Admin())->pjax(false);

去查了很多資料(百度,手動狗頭),也沒有解決問題的方法,偶然看到了pjax的事件,然後有了思路

新建admin-extend.js 

     (function($){
        var AdminExtended = {
            init: function(){
                var self = this;
                $(document).on('pjax:start', function() {

                });

                $(document).on('pjax:end', function() {

                });

                $(document).on('pjax:complete', function() {
                    self.refreshPage();
                });
                // 正常頁面載入成功後的初始化
                self.refreshPage()
            },
            refreshPage: function() {
              window.location.reload()

            }

        };
        window.AdminExtended = AdminExtended;
    })(jQuery);

    $(document).ready(function()
    {
        AdminExtended.init();
    });

全域性載入寫好的JS檔案,回到app\Admin\bootstrap.php 

if (\Illuminate\Support\Facades\Route::current()->uri() != 'admin/auth/login') {
    Admin::js('/vendor/dcat-admin/dcat/js/admin-extend.js');
}

在回頭去測試,pjax重新整理後會重新整站重新整理頁面(右邊內容區會重新整理兩次),功能基本實現了,可是體驗太差(忍不了)

優化

    refreshPage: function() {
        //  window.location.reload()
        $.ajax({
        url: 'xxx',
        success: function(result) {
        //jquery操作DOM
        }
        })
    }

refreshPage方法改為了非同步去獲取資料,jquery去操作DOM,體驗好多了

結束

想問下大佬@Jiangqh 有沒簡單點的解決方法:neutral_face:

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章