修复 网格自动计算高度未考虑是否隐藏分页 #48

支持laravel8.x版本

Author: yidalh

composer.json

@@ -15,7 +15,7 @@
         "Vue"
     ],
     "require": {
-        "illuminate/support": "~5|~6|~7"
+        "illuminate/support": "~5|~6|~7|~8"
     },
     "require-dev": {
         "phpunit/phpunit": "^8.0",

config/admin.php

@@ -21,8 +21,8 @@
     'login_background_image' => 'https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg',
     //登录框默认用户
     'auto_user' => [
-        'username' => 'demo',
-        'password' => 'demo'
+        'username' => '',
+        'password' => ''
     ],
     //底部菜单
     'footerLinks' => [
@@ -109,7 +109,7 @@
     ],
     //操作日志
     'operation_log' => [
-        'enable' => true,
+        'enable' => env('ADMIN_OPERATION_LOG', false),
         /*
          * Only logging allowed methods in the list
          */

public/0.js

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=77438fd426d416cb6e8f",
+    "/app.js": "/app.js?id=d686e3c8b0aaf5de7960",
     "/manifest.js": "/manifest.js?id=8991394a854ee5cdffc3",
     "/vendor.js": "/vendor.js?id=df0be4950fcb717193ba"
 }

public/app.js

@@ -53,19 +53,10 @@
                   <span slot="title">{{ menu.title }}</span>
                 </template>
                 <template v-for="children in menu.children">
-                  <MenuItem
-                    :menu="children"
-                    :key="children.id"
-                    :is_collapsed="isCollapsed"
-                  />
+                  <MenuItem :menu="children" :key="children.id" :is_collapsed="isCollapsed" />
                 </template>
               </el-submenu>
-              <el-menu-item
-                :index="menu.route"
-                :key="menu.id"
-                :route="menu.route"
-                v-else
-              >
+              <el-menu-item :index="menu.route" :key="menu.id" :route="menu.route" v-else>
                 <i :class="menu.icon" v-if="menu.icon" size="16"></i>
                 <span slot="title">{{ menu.title }}</span>
               </el-menu-item>
@@ -91,22 +82,13 @@
         >
           <div class="layout-header-l">
             <div class="layout-header-trigger hover" @click="collapsedSide">
-              <i
-                class="el-icon-s-fold fs-20 menu-icon"
-                :class="{ 'rotate-icon': isCollapsed }"
-              />
+              <i class="el-icon-s-fold fs-20 menu-icon" :class="{ 'rotate-icon': isCollapsed }" />
             </div>
             <div class="layout-header-breadcrumb">
               <el-breadcrumb separator="/">
-                <el-breadcrumb-item :to="{ path: '/' }"
-                  >首页</el-breadcrumb-item
-                >
+                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                 <template v-for="menu in pageData.menuList">
-                  <el-breadcrumb-item
-                    v-if="menu.route == route"
-                    :key="menu.route"
-                    >{{ menu.title }}</el-breadcrumb-item
-                  >
+                  <el-breadcrumb-item v-if="menu.route == route" :key="menu.route">{{ menu.title }}</el-breadcrumb-item>
                 </template>
               </el-breadcrumb>
             </div>
@@ -125,9 +107,11 @@
               <el-dropdown>
                 <div class="layout-header-user">
                   <el-avatar :src="pageData.user.avatar" :size="25" />
-                  <span class="layout-header-user-name">{{
+                  <span class="layout-header-user-name">
+                    {{
                     pageData.user.name
-                  }}</span>
+                    }}
+                  </span>
                 </div>
                 <el-dropdown-menu slot="dropdown">
                   <a @click="onLogout">
@@ -147,7 +131,7 @@
             </div>
           </div>
         </el-header>
-        <el-main :class="{ 'el-main-fixed': fixedHeader }">
+        <el-main :class="{ 'el-main-fixed': fixedHeader }" ref="mainView">
           <div class="layout-content-main">
             <router-view></router-view>
           </div>
@@ -156,15 +140,13 @@
           <div ref="rootFooter">
             <div class="footer-links">
               <el-link
-               
                 v-for="(item, index) in pageData.footerLinks"
                 :key="index"
                 type="text"
                 :href="item.href"
                 target="_blank"
                 :underline="false"
-                >{{ item.title }}</el-link
-              >
+              >{{ item.title }}</el-link>
             </div>
             <div v-html="pageData.copyright"></div>
           </div>
@@ -179,22 +161,14 @@
           <el-badge type="success" is-dot :hidden="isDark">
             <div>
               <el-tooltip content="亮色菜单风格" placement="top">
-                <img
-                  @click="isDark = false"
-                  class="hover"
-                  src="../assets/menu-light.svg"
-                />
+                <img @click="isDark = false" class="hover" src="../assets/menu-light.svg" />
               </el-tooltip>
             </div>
           </el-badge>
           <el-badge type="success" is-dot :hidden="!isDark">
             <div class="ml-20">
               <el-tooltip content="暗色菜单风格" placement="top">
-                <img
-                  @click="isDark = true"
-                  class="hover"
-                  src="../assets/menu-dark.svg"
-                />
+                <img @click="isDark = true" class="hover" src="../assets/menu-dark.svg" />
               </el-tooltip>
             </div>
           </el-badge>
@@ -270,7 +244,7 @@ export default {
       this.route = to.path;
       this.query = to.query;
       let queryKey = [];
-      _.forEach(this.query, function(value, key) {
+      _.forEach(this.query, function (value, key) {
         queryKey.push(key + "=" + value);
       });
       this.route =
@@ -291,7 +265,7 @@ export default {
       this.$message[type](message);
     });
     this.$nextTick(() => {
-      window.rootFooterHeight = this.$refs.rootFooter.offsetHeight + 60;
+      window.rootFooterHeight = this.$refs.rootFooter.offsetHeight +20;
     });
   },
   destroyed() {

public/mix-manifest.json

@@ -1,11 +1,7 @@
 <template>
   <div class="grid-container">
     <div ref="topView">
-      <component
-        v-if="attrs.top"
-        :is="attrs.top.componentName"
-        :attrs="attrs.top"
-      />
+      <component v-if="attrs.top" :is="attrs.top.componentName" :attrs="attrs.top" />
       <el-card
         shadow="never"
         :body-style="{ padding: 0 }"
@@ -66,9 +62,7 @@
                 @clear="getData"
                 @keyup.enter.native="getData"
               >
-                <el-button @click="getData" :loading="loading" slot="append"
-                  >搜索</el-button
-                >
+                <el-button @click="getData" :loading="loading" slot="append">搜索</el-button>
               </el-input>
             </div>
             <div class="flex-c">
@@ -87,18 +81,10 @@
               :is="component.componentName"
               :attrs="component"
             />
-            <el-divider
-              direction="vertical"
-              v-if="!attrs.attributes.hideCreateButton"
-            ></el-divider>
+            <el-divider direction="vertical" v-if="!attrs.attributes.hideCreateButton"></el-divider>
             <div class="icon-actions">
               <el-dropdown trigger="click">
-                <el-tooltip
-                  class="item"
-                  effect="dark"
-                  content="密度"
-                  placement="top"
-                >
+                <el-tooltip class="item" effect="dark" content="密度" placement="top">
                   <i class="el-icon-rank hover"></i>
                 </el-tooltip>
                 <el-dropdown-menu slot="dropdown">
@@ -117,12 +103,7 @@
                 </el-dropdown-menu>
               </el-dropdown>
 
-              <el-tooltip
-                class="item"
-                effect="dark"
-                content="刷新"
-                placement="top"
-              >
+              <el-tooltip class="item" effect="dark" content="刷新" placement="top">
                 <i class="el-icon-refresh hover" @click="getData"></i>
               </el-tooltip>
             </div>
@@ -149,16 +130,8 @@
           @sort-change="onTableSortChange"
           @selection-change="onTableselectionChange"
         >
-          <el-table-column
-            v-if="attrs.attributes.selection"
-            align="center"
-            type="selection"
-          ></el-table-column>
-          <el-table-column
-            v-if="attrs.tree"
-            align="center"
-            width="50"
-          ></el-table-column>
+          <el-table-column v-if="attrs.attributes.selection" align="center" type="selection"></el-table-column>
+          <el-table-column v-if="attrs.tree" align="center" width="50"></el-table-column>
           <template v-for="column in attrs.columnAttributes">
             <el-table-column
               :type="column.type"
@@ -175,19 +148,12 @@
             >
               <template slot="header" slot-scope="scope">
                 <span>{{ scope.column.label }}</span>
-                <el-tooltip
-                  placement="top"
-                  v-if="column.help"
-                  :content="column.help"
-                >
+                <el-tooltip placement="top" v-if="column.help" :content="column.help">
                   <i class="el-icon-question hover"></i>
                 </el-tooltip>
               </template>
               <template slot-scope="scope">
-                <ColumnDisplay
-                  :scope="scope"
-                  :columns="attrs.columnAttributes"
-                />
+                <ColumnDisplay :scope="scope" :columns="attrs.columnAttributes" />
               </template>
             </el-table-column>
           </template>
@@ -211,7 +177,7 @@
           </el-table-column>
         </el-table>
       </div>
-      <div class="table-page padding-xs" v-if="!attrs.hidePage">
+      <div ref="pageView" class="table-page padding-xs" v-if="!attrs.hidePage">
         <el-pagination
           :layout="attrs.pageLayout"
           :hide-on-single-page="false"
@@ -225,11 +191,10 @@
         />
       </div>
     </el-card>
-    <component
-      v-if="attrs.bottom"
-      :is="attrs.bottom.componentName"
-      :attrs="attrs.bottom"
-    />
+    <div ref="bottomComponentView">
+      <component v-if="attrs.bottom" :is="attrs.bottom.componentName" :attrs="attrs.bottom" />
+    </div>
+
     <DialogForm
       ref="DialogGridFrom"
       v-if="attrs.dialogForm"
@@ -279,6 +244,8 @@ export default {
       tabsActiveName: "all",
       topViewHeight: 0,
       toolbarsViewHeight: 0,
+      pageViewHeight: 0,
+      bottomComponentViewHeight: 0,
     };
   },
 
@@ -332,7 +299,11 @@ export default {
 
     this.$nextTick(() => {
       this.topViewHeight = this.$refs.topView.offsetHeight;
+
       this.toolbarsViewHeight = this.$refs.toolbarsView.offsetHeight;
+
+      this.pageViewHeight = this.$refs.pageView.offsetHeight;
+      this.bottomComponentViewHeight = this.$refs.bottomComponentView.offsetHeight;
     });
   },
   destroyed() {
@@ -363,19 +334,18 @@ export default {
     //获取数据
     getData() {
       this.loading = true;
-      this.$http
-        [this.attrs.method](this.attrs.dataUrl, {
-          params: {
-            get_data: true,
-            page: this.page,
-            per_page: this.pageData.pageSize,
-            ...this.sort,
-            ...this.q_search,
-            ...this.filterFormData,
-            ...this.tabsSelectdata,
-            ...this.$route.query,
-          },
-        })
+      this.$http[this.attrs.method](this.attrs.dataUrl, {
+        params: {
+          get_data: true,
+          page: this.page,
+          per_page: this.pageData.pageSize,
+          ...this.sort,
+          ...this.q_search,
+          ...this.filterFormData,
+          ...this.tabsSelectdata,
+          ...this.$route.query,
+        },
+      })
         .then(({ data }) => {
           if (!this.attrs.hidePage) {
             this.tableData = data.data;
@@ -486,10 +456,12 @@ export default {
         return (
           window.innerHeight -
           55 -
+          20 -
           window.rootFooterHeight -
-          (this.topViewHeight > 0 ? this.topViewHeight + 10 : 0) -
-          25 -
-          this.toolbarsViewHeight
+          this.topViewHeight -
+          (this.toolbarsViewHeight > 0 ? this.toolbarsViewHeight + 12 : 0) -
+          this.pageViewHeight -
+          this.bottomComponentViewHeight
         );
       }
       return this.attrs.attributes.height;

resources/js/components/Root.vue

@@ -23,8 +23,8 @@ class Administrator extends Model implements AuthenticatableContract
 
     protected $casts = [
         'images' => 'array',
-        'created_at' => "Y-m-d H:i:s",
-        'updated_at' => "Y-m-d H:i:s",
+        'created_at' => "timestamp:Y-m-d H:i:s",
+        'updated_at' => "timestamp:Y-m-d H:i:s",
     ];
 
     /**

resources/js/components/grid/Table.vue

@@ -30,8 +30,8 @@ class Menu extends Model
 
     protected $casts = [
         'permission' => 'array',
-        'created_at' => "Y-m-d H:i:s",
-        'updated_at' => "Y-m-d H:i:s",
+        'created_at' => "timestamp:Y-m-d H:i:s",
+        'updated_at' => "timestamp:Y-m-d H:i:s",
     ];
 
     /**

src/Auth/Database/Administrator.php

@@ -22,8 +22,8 @@ class OperationLog extends Model
     ];
 
     protected $casts = [
-        'created_at'=>"Y-m-d H:i:s",
-        'updated_at'=>"Y-m-d H:i:s",
+        'created_at'=>"timestamp:Y-m-d H:i:s",
+        'updated_at'=>"timestamp:Y-m-d H:i:s",
     ];
 
     /**