继续重构模块列表前端样式

app/Gdoo/Model/Controllers/BillController.php

@@ -16,6 +16,12 @@ class BillController extends DefaultController
 {
     public function indexAction()
     {
+        $search = search_form([
+            'advanced' => '',
+        ], [
+            ['form_type' => 'text', 'name' => '名称', 'field' => 'model_bill.name', 'value' => '', 'options' => []],
+        ], 'model');
+
         $header = [
             'master_name' => '单据',
             'simple_search_form' => 1,
@@ -24,12 +30,6 @@ class BillController extends DefaultController
             'create_btn' => 1,
         ];
 
-        $search = search_form([
-            'advanced' => '',
-        ], [
-            ['form_type' => 'text', 'name' => '名称', 'field' => 'model_bill.name', 'value' => '', 'options' => []],
-        ], 'model');
-
         $header['cols'] = [
             'checkbox' => [
                 'width' => 40,
@@ -157,6 +157,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') {
@@ -193,18 +200,12 @@ class BillController extends DefaultController
                 $row['model_name'] = $row['model_name'].'('.$row['model_table'].')';
                 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/Model/Grid.php

@@ -98,29 +98,6 @@ class Grid
             }
         }
 
-        $_header = $header;
-        unset($_header['columns']);
-        unset($_header['cols']);
-        unset($_header['dialogs']);
-        unset($_header['join']);
-        unset($_header['js']);
-        unset($_header['raw_select']);
-        unset($_header['search']);
-        unset($_header['select']);
-
-        // 重新组合字段给前端
-        $columns = [];
-        foreach ($header['cols'] as $field => $col) {
-            if ($field == 'action' && empty($col['events'])) {
-                continue;
-            }
-            if ($col['field'] == 'created_by') {
-                $col['formatter'] = 'created_by';
-            }
-            $columns[] = $col;
-        }
-        $_header['columns'] = $columns;
-
         $header['runs'] = $runs;
         $header['dialogs'] = $dialogs;
         $header['regions'] = $regions;
@@ -136,10 +113,45 @@ class Grid
         } else {
             $ret = collect(['data' => $rows]);
         }
-        $ret['header'] = $_header;
+
+        $ret['header'] = static::getColumns($header);
         return $ret;
     }
 
+    /**
+     * 重新组合字段(主要给前端使用)
+     */
+    public static function getColumns($header)
+    {
+        $columns = [];
+        foreach ($header['cols'] as $field => $col) {
+            if ($field == 'action' && empty($col['events'])) {
+                continue;
+            }
+            if ($col['field'] == 'created_by') {
+                $col['formatter'] = 'created_by';
+            }
+            $columns[] = $col;
+        }
+
+        unset($header['cols']);
+        unset($header['dialogs']);
+        unset($header['join']);
+        unset($header['js']);
+        unset($header['raw_select']);
+        unset($header['search']);
+        unset($header['select']);
+        unset($header['runs']);
+        unset($header['regions']);
+
+        $header['columns'] = $columns;
+        
+        if (empty($header['bill_uri'])) {
+            $header['bill_uri'] = Request::module().'/'.Request::controller();
+        }
+        return $header;
+    }
+
     public static function dataFilter($item, $header, $callback = null)
     {
         $master_prefix = $header['master_prefix'];

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

@@ -1,19 +1,43 @@
-{{$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 class="gdoo-list-page" id="{{$header['master_table']}}-page">
+    <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';
+<script>
+Vue.createApp({
+    components: {
+        gdooGridHeader,
+    },
+    setup(props, ctx) {
+        var table = '{{$header["master_table"]}}';
+
+        var config = new gdoo.grid(table);
+
+        var grid = config.grid;
+        grid.remoteDataUrl = '{{url()}}';
+        grid.autoColumnsToFit = true;
+
+        // 自定义行按钮渲染
+        grid.actionCellBeforeRender = function(html, act, data) {
+            if (act.action == 'flow') {
+                if (data.audit_type == 1) {
+                    return html;
+                }
+                return '';
+            } else {
+                return html;
+            }
+        }
+
+        var action = config.action;
+        // 双击行执行的方法
+        action.rowDoubleClick = action.edit;
 
         action.view = function(data) {
             var me = this;
@@ -51,52 +75,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.actionCellBeforeRender = function(html, act, data) {
-            if (act.action == 'flow') {
-                if (data.audit_type == 1) {
-                    return html;
-                }
-                return '';
-            } else {
-                return html;
-            }
-        }
-
-        // 读取数据
-        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(93);
+            // 初始化数据
+            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/Model/views/model/index.blade.php

@@ -2,7 +2,7 @@
 
 <div class="panel no-border" id="{{$header['master_table']}}-controller">
     @include('headers')
-    <div class='list-jqgrid'>
+    <div class='gdoo-list-grid'>
         <div id="{{$header['master_table']}}-grid" style="width:100%;" class="ag-theme-balham"></div>
     </div>
 </div>

app/Gdoo/Model/views/module/index.blade.php

@@ -2,7 +2,7 @@
 
 <div class="panel no-border" id="{{$header['master_table']}}-controller">
     @include('headers')
-    <div class='list-jqgrid'>
+    <div class='gdoo-list-grid'>
         <div id="{{$header['master_table']}}-grid" style="width:100%;" class="ag-theme-balham"></div>
     </div>
 </div>

app/Gdoo/Model/views/template/create.blade.php

@@ -472,7 +472,7 @@
 @verbatim
 <div id="app">
     <div class="dragDemo">
-        <draggable class="list-group"
+        <gdooDraggable class="list-group"
             element="div"
             v-model="listLeft"
             :move="onMove"
@@ -482,8 +482,8 @@
             <div v-for="(item, key) in listLeft" :key="key">
                 {{item.name}}-{{item.value}}
             </div>
-        </draggable>
-        <draggable class="list-group"
+        </gdooDraggable>
+        <gdooDraggable class="list-group"
             element="div"
             v-model="listLeft1"
             :move="onMove"
@@ -493,8 +493,8 @@
             <div v-for="(item, key) in listLeft1" :key="key">
                 {{item.name}}-{{item.value}}
             </div>
-        </draggable>
-        <draggable class="list-group"
+        </gdooDraggable>
+        <gdooDraggable class="list-group"
             element="div"
             v-model="listRight"
             :move="onMove"
@@ -504,7 +504,7 @@
             <div v-for="(item,key) in listRight" :key="key">
                 {{item.name}}-{{item.value}}
             </div>
-        </draggable>
+        </gdooDraggable>
     </div>
 </div>
 @endverbatim

app/Gdoo/Model/views/template/create2.blade.php

@@ -19,7 +19,7 @@
             <div class="panel-heading">
                 <div>字段列表</div>
             </div>
-            <draggable class="list-group"
+            <gdooDraggable class="list-group"
                 v-model="listLeft"
                 item-key="name"
                 group="people"
@@ -31,7 +31,7 @@
                         {{element.name}}
                     </a>
                 </template>
-            </draggable>
+            </gdooDraggable>
 
         </div>
     </div>
@@ -41,7 +41,7 @@
                 <div>字段列表</div>
             </div>
 
-            <draggable class="list-group"
+            <gdooDraggable class="list-group"
                 v-model="listRight"
                 item-key="name"
                 group="people"
@@ -52,7 +52,7 @@
                         {{element.name}}
                     </a>
                 </template>
-            </draggable>
+            </gdooDraggable>
         </div>
     </div>
     </div>
@@ -139,11 +139,12 @@
 }
 </style>
 <script>
+
 var template = JSON.parse('{{json_encode($template, JSON_UNESCAPED_UNICODE)}}');
 var rightIndex = -1;
 var vueData = {
     components: {
-        draggable: GdooVueComponents.draggable,
+        gdooDraggable,
     },
     data() {
         return {

app/Gdoo/Model/views/todo/widget.blade.php

@@ -8,7 +8,7 @@
 </div>
 
 <div class="todo-grid-box">
-    <div class="list-jqgrid" id="todo-grid-controller">
+    <div class="gdoo-list-grid" id="todo-grid-controller">
         <div id="todo-grid" class="ag-theme-balham" style="width:100%;height:200px;"></div>
     </div>
 </div>