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

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

@@ -1,44 +1,38 @@
-<div class="vue-list-page" id="{{$header['master_table']}}-controller">
-    <div class="panel no-border">
-        <div class="panel-header">
-            @include('headers2')
+<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='list-jqgrid'>
-            <div id="{{$header['master_table']}}-grid" style="width:100%;" class="ag-theme-balham"></div>
+        <div class='gdoo-list-grid'>
+            <div id="{{$header['master_table']}}-grid" class="ag-theme-balham"></div>
         </div>
     </div>
 </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()}}';
-        grid.onRowDoubleClicked = function (params) {
-            if (params.node.rowPinned) {
-                return;
-            }
-            if (params.data == undefined) {
-                return;
-            }
-            if (params.data.master_id > 0) {
-                action.show(params.data);
-            }
-        };
 
         var action = config.action;
+        // 详情页打开方式
         action.dialogType = 'layer';
+        // 双击行执行的方法
+        action.rowDoubleClick = action.show;
 
         var setup = config.setup;
 
         Vue.onMounted(function() {
-            var gridDiv = document.querySelector("#" + table + "-grid");
-            gridDiv.style.height = getPanelHeight(136);
-            new agGrid.Grid(gridDiv, grid);
+            var gridDiv = config.div(136);
             // 初始化数据
             grid.remoteData({page: 1}, function(res) {
                 config.init(res);
@@ -46,5 +40,5 @@ Vue.createApp({
         });
         return setup;
     }
-}).mount("#{{$header['master_table']}}-controller");
+}).mount("#{{$header['master_table']}}-page");
 </script>