页面优化

src/components/Pagination/index.vue

@@ -112,4 +112,8 @@ export default {
 .pagination-container.hidden {
   display: none;
 }
+
+::v-deep .el-pager {
+  width: 360px !important;
+}
 </style>

src/views/manage/script/index.vue

@@ -21,8 +21,8 @@
           </div>
         </div>
       </el-col>
-      <el-col :span="19" :xs="24"
+      <el-col :span="19" :xs="24">
-        style="height:calc(100vh - 124px);display: flex;flex-wrap: wrap;flex-direction: column;justify-content: space-between;">
+        <div ref="form" class="form">
           <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
             label-width="68px">
             <el-form-item label="通用话术名称" prop="commonScriptName" label-width="100px">
@@ -53,14 +53,19 @@
               <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
-        <el-row :gutter="10" class="mb8">
+        </div>
+        <div ref="mb8" class="mb8">
+          <el-row :gutter="10" class="">
             <el-col :span="1.5">
               <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                 v-hasPermi="['manage:script:add']">新增</el-button>
             </el-col>
             <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
           </el-row>
-        <el-table v-loading="loading" :data="scriptList" @selection-change="handleSelectionChange">
+        </div>
+        <div ref="table">
+          <el-table :max-height="maxTableHeight" v-loading="loading" :data="scriptList"
+            @selection-change="handleSelectionChange">
             <el-table-column label="序号" align="center" prop="sort" type="index" />
 
             <el-table-column label="通用话术名称" align="center" prop="commonScriptName" :show-overflow-tooltip="true" />
@@ -83,7 +88,8 @@
               <el-button size="mini" icon="el-icon-folder-checked" type="text"  @click="release(scope.row)">发布</el-button> -->
                 <el-button size="mini" type="text" icon="el-icon-search" @click="handlesee(scope.row)">预览</el-button>
                 <el-button size="mini" type="text" icon="el-icon-zoom-in" @click="see(scope.row)">话术</el-button>
-              <el-button size="mini" type="text" icon="el-icon-picture-outline" @click="seescript(scope.row)">话术预览</el-button>
+                <el-button size="mini" type="text" icon="el-icon-picture-outline"
+                  @click="seescript(scope.row)">话术预览</el-button>
                 <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                   v-hasPermi="['manage:script:edit']">修改</el-button>
                 <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
@@ -91,11 +97,11 @@
               </template>
             </el-table-column>
           </el-table>
+        </div>
         <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize" @pagination="getList" />
       </el-col>
     </el-row>
-
     <!-- 添加或修改话术信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="110px" :inline="true">
@@ -310,7 +316,7 @@ export default {
       },],
 
       optionsDisease: [],
-
+      maxTableHeight: undefined,
       optionsadd: [{
 
         value: 'NORMAL',
@@ -441,6 +447,10 @@ export default {
     this.Departmentlist();
 
   },
+  mounted() {
+    this.getMaxTableHeight()
+    this.screenChange()
+  },
   watch: {
     name(val) {
       this.querydepartmen.departmentName = val
@@ -857,7 +867,30 @@ export default {
       this.download('manage/script/export', {
         ...this.queryParams
       }, `script_${new Date().getTime()}.xlsx`)
-    }
+    },
+    // 获取表格最高高度
+    getMaxTableHeight() {
+      const windowInnerHeight = window.innerHeight // 屏幕可视高度
+      const layoutDiv = this.$refs.layout
+      const formDiv = this.$refs.form
+      const mb8Div = this.$refs.mb8
+      this.maxTableHeight =
+        windowInnerHeight - 134 -
+        this.getBoxPadding(layoutDiv) -
+        this.getBoxHeight(mb8Div) -
+        this.getBoxHeight(formDiv)
+    },
+    // 屏幕resize监听
+    screenChange() {
+      // 屏幕resize监听事件：一旦屏幕宽高发生变化，就会执行resize
+      window.addEventListener('resize', this.getMaxTableHeight, true)
+      // 将屏幕监听事件移除
+      // 这步是必须的。离开页面时不移除，再返回，或者进入到别的有相同元素的页面会报错
+      // 或者将这里的方法直接写在beforeDestroy函数中也可以
+      this.$once('hook:beforeDestroy', () => {
+        window.removeEventListener('resize', this.getMaxTableHeight, true)
+      })
+    },
   }
 };
 </script>
@@ -921,4 +954,12 @@ export default {
   left: 20px;
   top: -11px;
 }
+
+.app-container {
+  padding: 20px 0 0 20px !important;
+}
+
+::v-deep .el-row {
+  height: 100% !important;
+}
 </style>

src/views/manage/template/index.vue

@@ -47,7 +47,6 @@
               <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                 v-hasPermi="['manage:template:add']">新增微信模版</el-button>
             </el-col>
-
             <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
           </el-row>
         </div>