去掉无用的模板文件

封装ajax提示方法

app/Gdoo/Workflow/Controllers/BillController.php

@@ -145,6 +145,13 @@ class BillController extends DefaultController
                 'filter' => false,
             ],
         ];
+
+        $header['buttons'] = [
+            ['name' => '删除', 'icon' => 'fa-remove', 'action' => 'delete', 'display' => $this->access['delete']],
+            ['name' => '导出', 'icon' => 'fa-share', 'action' => 'export', 'display' => 1],
+        ];
+
+        $header['search_form'] = $search;
         $query = $search['query'];
 
         if (Request::method() == 'POST') {
@@ -171,18 +178,11 @@ class BillController extends DefaultController
                 $row['sn_rule'] = $row['sn_prefix'].$row['sn_rule'].($row['sn_length'] > 0 ? $row['sn_length'] : '');
                 return $row;
             });
-            return $rows;
+            $ret = $rows->toArray();
+            $ret['header'] = Grid::getColumns($header);
+            return $ret;
         }
 
-        $header['buttons'] = [
-            ['name' => '删除', 'icon' => 'fa-remove', 'action' => 'delete', 'display' => $this->access['delete']],
-            ['name' => '导出', 'icon' => 'fa-share', 'action' => 'export', 'display' => 1],
-        ];
-
-        $header['search_form'] = $search;
-        $header['js'] = Grid::js($header);
-
-        // 配置权限
         return $this->display([
             'header' => $header,
         ]);

app/Gdoo/Workflow/Controllers/CategoryController.php

@@ -116,6 +116,13 @@ class CategoryController extends DefaultController
                 'filter' => false,
             ],
         ];
+
+        $header['buttons'] = [
+            ['name' => '删除', 'icon' => 'fa-remove', 'action' => 'delete', 'display' => $this->access['delete']],
+            ['name' => '导出', 'icon' => 'fa-share', 'action' => 'export', 'display' => 1],
+        ];
+
+        $header['search_form'] = $search;
         $query = $search['query'];
 
         if (Request::method() == 'POST') {
@@ -135,18 +142,11 @@ class CategoryController extends DefaultController
                 $row['updated_dt'] = format_datetime($row['updated_at']);
                 return $row;
             });
-            return $rows;
+            $ret = $rows->toArray();
+            $ret['header'] = Grid::getColumns($header);
+            return $ret;
         }
 
-        $header['buttons'] = [
-            ['name' => '删除', 'icon' => 'fa-remove', 'action' => 'delete', 'display' => $this->access['delete']],
-            ['name' => '导出', 'icon' => 'fa-share', 'action' => 'export', 'display' => 1],
-        ];
-
-        $header['search_form'] = $search;
-        $header['js'] = Grid::js($header);
-
-        // 配置权限
         return $this->display([
             'header' => $header,
         ]);

app/Gdoo/Workflow/views/bill/index.blade.php

@@ -1,19 +1,34 @@
-{{$header["js"]}}
+<div class="gdoo-list-page" id="{{$header['master_table']}}-page">
 
-<div class="panel no-border" id="{{$header['master_table']}}-controller">
-    @include('headers')
-    <div class='gdoo-list-grid'>
-        <div id="{{$header['master_table']}}-grid" style="width:100%;" class="ag-theme-balham"></div>
+    <div class="gdoo-list panel">
+        <div class="gdoo-list-header">
+            <gdoo-grid-header :header="header" :grid="grid" :action="action" />
+        </div>
+
+        <div class='gdoo-list-grid'>
+            <div id="{{$header['master_table']}}-grid" class="ag-theme-balham"></div>
+        </div>
     </div>
-</div>
-<script>
-    (function ($) {
-        var table = '{{$header["master_table"]}}';
-        var config = gdoo.grids[table];
-        var action = config.action;
-        var search = config.search;
 
-        action.dialogType = 'dialog';
+</div>
+
+<script>
+Vue.createApp({
+    components: {
+        gdooGridHeader,
+    },
+    setup(props, ctx) {
+        var table = '{{$header["master_table"]}}';
+
+        var config = new gdoo.grid(table);
+
+        var grid = config.grid;
+        grid.autoColumnsToFit = true;
+        grid.remoteDataUrl = '{{url()}}';
+
+        var action = config.action;
+        // 双击行执行的方法
+        action.rowDoubleClick = action.edit;
 
         action.view = function(data) {
             var me = this;
@@ -51,39 +66,16 @@
             });
         }
 
-        var options = new agGridOptions();
-        var gridDiv = document.querySelector("#{{$header['master_table']}}-grid");
-        gridDiv.style.height = getPanelHeight(48);
+        var setup = config.setup;
 
-        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.edit(params.data);
-            }
-        };
-
-        new agGrid.Grid(gridDiv, options);
-
-        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);
-            }
+        Vue.onMounted(function() {
+            var gridDiv = config.div(136);
+            // 初始化数据
+            grid.remoteData({page: 1}, function(res) {
+                config.init(res);
+            });
         });
-        config.grid = options;
-    })(jQuery);
-
-</script>
-@include('footers')
+        return setup;
+    }
+}).mount("#{{$header['master_table']}}-page");
+</script>

app/Gdoo/Workflow/views/category/index.blade.php

@@ -1,53 +1,45 @@
-{{$header["js"]}}
+<div class="gdoo-list-page" id="{{$header['master_table']}}-page">
 
-<div class="panel no-border" id="{{$header['master_table']}}-controller">
-    @include('headers')
-    <div class='gdoo-list-grid'>
-        <div id="{{$header['master_table']}}-grid" style="width:100%;" class="ag-theme-balham"></div>
+    <div class="gdoo-list panel">
+        <div class="gdoo-list-header">
+            <gdoo-grid-header :header="header" :grid="grid" :action="action" />
+        </div>
+
+        <div class='gdoo-list-grid'>
+            <div id="{{$header['master_table']}}-grid" class="ag-theme-balham"></div>
+        </div>
     </div>
+
 </div>
+
 <script>
-    (function ($) {
+Vue.createApp({
+    components: {
+        gdooGridHeader,
+    },
+    setup(props, ctx) {
         var table = '{{$header["master_table"]}}';
-        var config = gdoo.grids[table];
+
+        var config = new gdoo.grid(table);
+
+        var grid = config.grid;
+        grid.autoColumnsToFit = true;
+        grid.remoteDataUrl = '{{url()}}';
+
         var action = config.action;
-        var search = config.search;
+        // 双击行执行的方法
+        action.rowDoubleClick = action.edit;
 
-        action.dialogType = 'dialog';
+        var setup = config.setup;
 
-        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.edit(params.data);
-            }
-        };
-
-        new agGrid.Grid(gridDiv, options);
-
-        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);
-            }
+        Vue.onMounted(function() {
+            var gridDiv = config.div(136);
+            // 初始化数据
+            grid.remoteData({page: 1}, function(res) {
+                config.init(res);
+            });
         });
-        config.grid = options;
-    })(jQuery);
-
-</script>
-@include('footers')
+        return setup;
+    }
+}).mount("#{{$header['master_table']}}-page");
+</script>