优化Grid布局

Author: SmallRuralDog

public/app.js

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=56b921be10395873e06e",
+    "/app.js": "/app.js?id=3254437a2f9d7ac84e92",
     "/manifest.js": "/manifest.js?id=8991394a854ee5cdffc3",
     "/vendor.js": "/vendor.js?id=df0be4950fcb717193ba"
 }

public/mix-manifest.json

@@ -128,7 +128,7 @@
             </div>
           </div>
         </el-header>
-        <el-main :class="{ 'el-main-fixed': fixedHeader }" style="position: relative;">
+        <el-main :class="{ 'el-main-fixed': fixedHeader }">
 
           <div class="layout-content-main">
             <router-view></router-view>

resources/js/components/Root.vue

@@ -316,9 +316,6 @@ export default {
   .form-card {
     min-height: 200px;
   }
-  .el-form-item__content {
-    //line-height: unset;
-  }
   .form-bottom-actions {
     display: flex;
     align-items: center;
@@ -329,7 +326,7 @@ export default {
       padding: 6px;
       background: #ffffff;
       border-radius: 4px;
-      border: 1px solid #EBEEF5;
+      border: 1px solid #ebeef5;
     }
   }
 

resources/js/components/form/Form.vue

@@ -1,9 +1,51 @@
 <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 }"
+        class="mb-10"
+        v-if="attrs.filter.filters.length > 0"
+      >
+        <div class="filter-form">
+          <el-form :inline="true" :model="filterFormData" v-if="filterFormData">
+            <el-form-item v-if="attrs.quickSearch">
+              <el-input
+                v-model="quickSearch"
+                :placeholder="attrs.quickSearch.placeholder"
+                :clearable="true"
+                @clear="getData"
+                @keyup.enter.native="getData"
+              ></el-input>
+            </el-form-item>
 
-      <el-card shadow="never" :body-style="{ padding: 0 }" v-if="attrs.toolbars.show">
+            <el-form-item
+              v-for="(item, index) in attrs.filter.filters"
+              :key="index"
+              :label="item.label"
+            >
+              <ItemDiaplsy
+                v-model="filterFormData[item.column]"
+                :form-item="item"
+                :form-items="attrs.filters"
+                :form-data="filterFormData"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="onFilterSubmit">搜索</el-button>
+              <el-button @click="onFilterReset">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-card>
+    </div>
+    <el-card shadow="never" :body-style="{ padding: 0 }" v-loading="loading">
+      <div class="bottom-border" ref="toolbarsView" v-if="attrs.toolbars.show">
         <div class="grid-top-container">
           <div class="grid-top-container-left">
             <BatchActions
@@ -24,7 +66,9 @@
                 @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">
@@ -43,10 +87,18 @@
               :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">
@@ -65,52 +117,18 @@
                 </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>
           </div>
         </div>
-      </el-card>
-      <el-card
-        shadow="never"
-        class="mt-10"
-        :body-style="{ padding: 0 }"
-        v-if="attrs.filter.filters.length > 0"
-      >
-        <div class="filter-form">
-          <el-form :inline="true" :model="filterFormData" v-if="filterFormData">
-            <el-form-item v-if="attrs.quickSearch">
-              <el-input
-                v-model="quickSearch"
-                :placeholder="attrs.quickSearch.placeholder"
-                :clearable="true"
-                @clear="getData"
-                @keyup.enter.native="getData"
-              ></el-input>
-            </el-form-item>
-
-            <el-form-item
-              v-for="(item, index) in attrs.filter.filters"
-              :key="index"
-              :label="item.label"
-            >
-              <ItemDiaplsy
-                v-model="filterFormData[item.column]"
-                :form-item="item"
-                :form-items="attrs.filters"
-                :form-data="filterFormData"
-              />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="onFilterSubmit">搜索</el-button>
-              <el-button @click="onFilterReset">重置</el-button>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-card>
-    </div>
-    <el-card class="mt-10" shadow="never" :body-style="{ padding: 0 }" v-loading="loading">
+      </div>
       <div>
         <el-table
           :ref="attrs.ref || 'table'"
@@ -131,8 +149,16 @@
           @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"
@@ -149,12 +175,19 @@
             >
               <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>
@@ -192,7 +225,11 @@
         />
       </div>
     </el-card>
-    <component v-if="attrs.bottom" :is="attrs.bottom.componentName" :attrs="attrs.bottom" />
+    <component
+      v-if="attrs.bottom"
+      :is="attrs.bottom.componentName"
+      :attrs="attrs.bottom"
+    />
     <DialogForm
       ref="DialogGridFrom"
       v-if="attrs.dialogForm"
@@ -218,10 +255,10 @@ export default {
     Actions,
     ItemDiaplsy,
     BatchActions,
-    DialogForm
+    DialogForm,
   },
   props: {
-    attrs: Object
+    attrs: Object,
   },
   data() {
     return {
@@ -232,15 +269,16 @@ export default {
         pageSize: this.attrs.perPage,
         total: 0,
         currentPage: 1,
-        lastPage: 1
+        lastPage: 1,
       },
       page: 1, //当前页
       quickSearch: null, //快捷搜索内容
       selectionRows: [], //已选择的row
       filterFormData: null, //表单搜索数据
       tabsSelectdata: {},
       tabsActiveName: "all",
-      topViewHeight: 0
+      topViewHeight: 0,
+      toolbarsViewHeight: 0,
     };
   },
 
@@ -283,7 +321,7 @@ export default {
     this.$bus.on("tableReload", () => {
       this.getData();
     });
-    this.$bus.on("tableSetLoading", status => {
+    this.$bus.on("tableSetLoading", (status) => {
       this.loading = status;
     });
 
@@ -294,6 +332,7 @@ export default {
 
     this.$nextTick(() => {
       this.topViewHeight = this.$refs.topView.offsetHeight;
+      this.toolbarsViewHeight = this.$refs.toolbarsView.offsetHeight;
     });
   },
   destroyed() {
@@ -333,8 +372,8 @@ export default {
             ...this.sort,
             ...this.q_search,
             ...this.filterFormData,
-            ...this.tabsSelectdata
-          }
+            ...this.tabsSelectdata,
+          },
         })
         .then(
           ({ data: { data, current_page, per_page, total, last_page } }) => {
@@ -349,24 +388,24 @@ export default {
             if (this.attrs.attributes.dataVuex) {
               this.$store.commit("setGridData", {
                 key: "tableData",
-                data: this.tableData
+                data: this.tableData,
               });
             }
 
             this.$store.commit("setGridData", { key: "sort", data: this.sort });
             this.$store.commit("setGridData", { key: "page", data: this.page });
             this.$store.commit("setGridData", {
               key: "pageData",
-              data: this.pageData
+              data: this.pageData,
             });
 
             this.$store.commit("setGridData", {
               key: "quickSearch",
-              data: this.quickSearch
+              data: this.quickSearch,
             });
             this.$store.commit("setGridData", {
               key: "filterFormData",
-              data: this.filterFormData
+              data: this.filterFormData,
             });
             /** */
           }
@@ -391,7 +430,7 @@ export default {
       this.selectionRows = selection;
       this.$store.commit("setGridData", {
         key: "selectionKeys",
-        data: this.keys
+        data: this.keys,
       });
     },
     //每页大小改变时
@@ -404,12 +443,12 @@ export default {
     onPageCurrentChange(page) {
       this.page = page;
       this.getData();
-    }
+    },
   },
   computed: {
     keys() {
       return this.selectionRows
-        .map(item => {
+        .map((item) => {
           return item[this.attrs.keyName];
         })
         .join(",");
@@ -420,7 +459,7 @@ export default {
     },
     //
     columns() {
-      return this.column_attributes.map(attributes => {
+      return this.column_attributes.map((attributes) => {
         return attributes;
       });
     },
@@ -429,7 +468,7 @@ export default {
       return this.sort
         ? {
             prop: this.sort.sort_prop,
-            order: this.sort.sort_order == "asc" ? "ascending" : "descending"
+            order: this.sort.sort_order == "asc" ? "ascending" : "descending",
           }
         : {};
     },
@@ -447,21 +486,26 @@ export default {
           55 -
           window.rootFooterHeight -
           this.topViewHeight -
-          40
+          40 -
+          this.toolbarsViewHeight
         );
       }
       return this.attrs.attributes.height;
-    }
-  }
+    },
+  },
 };
 </script>
 
 <style lang="scss">
 .grid-container {
+  .bottom-border {
+    border-bottom: 1px solid #ebeef5;
+  }
   .grid-top-container {
     padding: 8px;
     display: flex;
     justify-content: space-between;
+    min-height: 32px;
     .grid-top-container-left {
       display: flex;
       align-items: center;