重构联查功能

尝试把列表构建改成由前端渲染

app/Gdoo/Article/Controllers/ArticleController.php

@@ -43,6 +43,16 @@ class ArticleController extends DefaultController
             'display' => $this->access['edit'],
         ]];
 
+        $header['buttons'] = [
+            ['name' => '删除', 'icon' => 'fa-remove', 'action' => 'delete', 'display' => $this->access['delete']],
+            ['name' => '导出', 'icon' => 'fa-share', 'action' => 'export', 'display' => 1],
+        ];
+
+        $header['cols'] = $cols;
+        $header['tabs'] = Article::$tabs;
+        $header['bys'] = Article::$bys;
+        $header['js'] = Grid::js($header);
+
         $search = $header['search_form'];
         $query = $search['query'];
 
@@ -64,13 +74,14 @@ class ArticleController extends DefaultController
                 $model->permission('receive_id', null, false, true, false, 'created_id');
             }
     
-            // 查询是否已经阅读
+            // 是否已经阅读
             $reader = function ($q) {
                 $q->selectRaw('1')
                 ->from('article_reader')
                 ->whereRaw('article_reader.article_id = article.id')
                 ->where('article_reader.created_id', auth()->id());
             };
+
             if ($query['tab'] == 'done') {
                 $model->whereExists($reader);
             }
@@ -81,27 +92,11 @@ class ArticleController extends DefaultController
             $model->select($header['select']);
             $rows = $model->paginate($query['limit'])->appends($query);
 
-            $header['cols'] = $cols;
-            $header['tabs'] = Article::$tabs;
-            $header['bys'] = Article::$bys;
-            $header['js'] = Grid::js($header);
-
-            $items = Grid::dataFilters($rows, $header, function($item) {
+            return Grid::dataFilters($rows, $header, function($item) {
                 return $item;
             });
-            return $items;
         }
 
-        $header['buttons'] = [
-            ['name' => '删除', 'icon' => 'fa-remove', 'action' => 'delete', 'display' => $this->access['delete']],
-            ['name' => '导出', 'icon' => 'fa-share', 'action' => 'export', 'display' => 1],
-        ];
-
-        $header['cols'] = $cols;
-        $header['tabs'] = Article::$tabs;
-        $header['bys'] = Article::$bys;
-        $header['js'] = Grid::js($header);
-
         return $this->display([
             'header' => $header,
         ]);

app/Gdoo/Article/Controllers/WidgetController.php

@@ -30,7 +30,7 @@ class WidgetController extends DefaultController
             };
             $model->whereNotExists($reader);
 
-            $rows = $model->get(['id', 'title', 'created_at']);
+            $rows = $model->get(['id', 'name', 'created_at']);
             
             $json['total'] = sizeof($rows);
             $json['data'] = $rows;

app/Gdoo/Article/views/article/index.blade.php

@@ -1,59 +1,66 @@
-{{$header["js"]}}
-
-<div class="panel no-border" id="{{$header['master_table']}}-controller">
-    @include('headers')
-    <div class='list-jqgrid'>
-        <div id="{{$header['master_table']}}-grid" style="width:100%;" class="ag-theme-balham"></div>
+<div id="{{$header['master_table']}}-controller">
+    <div class="panel no-border">
+        @include('headers')
+        <div class='list-jqgrid'>
+            <div id="{{$header['master_table']}}-grid" style="width:100%;" class="ag-theme-balham"></div>
+        </div>
     </div>
 </div>
+
+{{$header["js"]}}
+
 <script>
-    (function ($) {
-        var table = '{{$header["master_table"]}}';
-        var config = gdoo.grids[table];
-        var action = config.action;
-        var search = config.search;
 
-        action.dialogType = 'layer';
+(function ($) {
+    var header = {{json_encode($header, JSON_UNESCAPED_UNICODE)}};
 
-        // 自定义搜索方法
-        search.searchInit = function (e) {
-            var self = this;
+    var table = '{{$header["master_table"]}}';
+    var config = gdoo.grids[table];
+    var action = config.action;
+    var search = config.search;
+
+    action.dialogType = 'layer';
+
+    // 自定义搜索方法
+    search.searchInit = function (e) {
+        var self = this;
+    }
+    
+    var options = new agGridOptions();
+    var gridDiv = document.querySelector("#{{$header['master_table']}}-grid");
+    gridDiv.style.height = getPanelHeight(48);
+
+    options.remoteDataUrl = '{{url()}}';
+    options.remoteParams = search.advanced.query;
+    options.columnDefs = config.cols;
+    options.onRowDoubleClicked = function (params) {
+        if (params.node.rowPinned) {
+            return;
         }
-        
-        var options = new agGridOptions();
-        var gridDiv = document.querySelector("#{{$header['master_table']}}-grid");
-        gridDiv.style.height = getPanelHeight(48);
+        if (params.data == undefined) {
+            return;
+        }
+        if (params.data.master_id > 0) {
+            action.show(params.data);
+        }
+    };
 
-        options.remoteDataUrl = '{{url()}}';
-        options.remoteParams = search.advanced.query;
-        options.columnDefs = config.cols;
-        options.onRowDoubleClicked = function (params) {
-            if (params.node.rowPinned) {
-                return;
-            }
-            if (params.data == undefined) {
-                return;
-            }
-            if (params.data.master_id > 0) {
-                action.show(params.data);
-            }
-        };
+    new agGrid.Grid(gridDiv, options);
 
-        new agGrid.Grid(gridDiv, options);
+    // 读取数据
+    options.remoteData({page: 1});
 
-        // 读取数据
-        options.remoteData({page: 1});
-
-        // 绑定自定义事件
-        var $gridDiv = $(gridDiv);
-        $gridDiv.on('click', '[data-toggle="event"]', function () {
-            var data = $(this).data();
-            if (data.master_id > 0) {
-                action[data.action](data);
-            }
-        });
-        config.grid = options;
-    })(jQuery);
+    // 绑定自定义事件
+    var $gridDiv = $(gridDiv);
+    $gridDiv.on('click', '[data-toggle="event"]', function () {
+        var data = $(this).data();
+        if (data.master_id > 0) {
+            action[data.action](data);
+        }
+    });
+    config.grid = options;
 
+})(jQuery);
 </script>
+
 @include('footers')

app/Gdoo/Article/views/article/index2.blade.php

@@ -0,0 +1,105 @@
+<style>
+.vue-list-page .search-inline-form .form-group {
+    margin-left: 4px;
+}
+.vue-list-page .btn-group {
+    margin-left: 4px;
+}
+</style>
+
+<div class="vue-list-page" id="{{$header['master_table']}}-controller">
+    <div class="panel no-border">
+        @include('headers3')
+        <div class='list-jqgrid'>
+            <div id="{{$header['master_table']}}-grid" style="width:100%;" class="ag-theme-balham"></div>
+        </div>
+    </div>
+</div>
+
+{{$header["js"]}}
+
+<script>
+
+(function ($) {
+    var header = {{json_encode($header, JSON_UNESCAPED_UNICODE)}};
+
+    var table = '{{$header["master_table"]}}';
+    var config = gdoo.grids[table];
+    var action = config.action;
+    var search = config.search;
+
+    const vueData = {
+        data() {
+            return {
+                header: {},
+                tab_active: '',
+            }
+        },mounted() {
+            abc(this);
+        },
+        methods: {
+            url(url, query) {
+                var me = this;
+                let params = Vue.toRaw(me.header.search_form.params);
+                for (const key in query) {
+                    params[key] = query[key];
+                }
+                return app.url(url, params);
+            }
+        }
+    }
+    Vue.createApp(vueData).mount("#{{$header['master_table']}}-controller");
+
+    function abc(vue) {
+
+        action.dialogType = 'layer';
+
+        // 自定义搜索方法
+        search.searchInit = function (e) {
+            var self = this;
+        }
+        
+        var options = new agGridOptions();
+        var gridDiv = document.querySelector("#{{$header['master_table']}}-grid");
+        gridDiv.style.height = getPanelHeight(48);
+
+        options.remoteDataUrl = '{{url()}}';
+        options.remoteParams = search.advanced.query;
+        options.columnDefs = config.cols;
+        options.onRowDoubleClicked = function (params) {
+            if (params.node.rowPinned) {
+                return;
+            }
+            if (params.data == undefined) {
+                return;
+            }
+            if (params.data.master_id > 0) {
+                action.show(params.data);
+            }
+        };
+
+        new agGrid.Grid(gridDiv, options);
+
+        // 读取数据
+        options.remoteData({page: 1});
+
+        options.remoteSuccessed = function(res) {
+            vue.header = res.header;
+            vue.tab_active = vue.header.search_form.params['tab'] ? vue.header.search_form.params['tab'] : vue.header.tabs.items[0].value;
+        };
+
+        // 绑定自定义事件
+        var $gridDiv = $(gridDiv);
+        $gridDiv.on('click', '[data-toggle="event"]', function () {
+            var data = $(this).data();
+            if (data.master_id > 0) {
+                action[data.action](data);
+            }
+        });
+        config.grid = options;
+    }
+
+})(jQuery);
+</script>
+
+@include('footers')