分页器

src/views/components/Pagination/index.vue

@@ -0,0 +1,185 @@
+<template>
+    <div class="pagination">
+        <button style="background-color: #ffff">共 {{ totalPage }} 条</button>
+        <el-select v-model="currentpageSize" placeholder="请选择" style="width: 100px;" size="mini" @change="changesize">
+            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+        </el-select>
+        <button @click="updateCPage(currentPage - 1)" :disabled="currentPage <= 1">上一页</button>
+        <button v-if="startEnd.start > 1" @click="updateCPage(1)">1</button>
+        <button v-if="startEnd.start > 2" icon="el-icon-more" @click="updateCPage(currentPage - 5)"
+            :class="[quickprevIconClass, { buttonactive: quickprevIconClass == 'el-icon-d-arrow-left' }]"
+            @mouseenter="onMouseenter('left')" @mouseleave="quickprevIconClass = 'el-icon-more'">
+        </button>
+        <template v-for="(item, index) in totalPage">
+            <button :class="{ active: currentPage === item }" :key="index"
+                v-if="item >= startEnd.start && item <= startEnd.end" @click="updateCPage(item)">{{ item }}</button>
+        </template>
+        <button v-if="startEnd.end < totalPage - 1" icon="el-icon-more"
+            :class="[quicknextIconClass, { buttonactive: quicknextIconClass == 'el-icon-d-arrow-right' }]"
+            @click="updateCPage(currentPage + 5)" @mouseenter="onMouseenter('right')"
+            @mouseleave="quicknextIconClass = 'el-icon-more'">
+        </button>
+        <button v-if="startEnd.end < totalPage" @click="updateCPage(totalPage)">{{ totalPage }}</button>
+        <button @click="updateCPage(currentPage + 1)" :disabled="currentPage >= totalPage">下一页</button>
+    </div>
+</template>
+
+<script>
+export default {
+    /*
+       1. total,总条数 (外部使用Pagination组件的区域传递进来的数据)
+       2. pageSize,每页显示多少条(外部使用Pagination组件的区域传递进来的数据)
+       3. totalPage, 根据1,2派生出总页数
+       4. lxyms,连续页码数(外部使用Pagination组件的区域传递进来的数据)
+       5. currentPage,当前页(内部数据)
+       6. startEnd,连续页码的起始页 & 最终页
+       7. indexFromWrap: 外部逻辑传入的当前页下标
+   */
+    name: "Pagination",
+    //由父组件传递总条数 每页显示数  连续页码数  当前页下标
+    props: ["total", "pageSize", "indexFromWrap"],
+    data() {
+        return {
+            lxyms: 7,
+            currentPage: this.indexFromWrap,
+            quickprevIconClass: "el-icon-more",
+            quicknextIconClass: 'el-icon-more',
+            options: [{
+                value: 10,
+                label: '10条/页'
+            }, {
+                value: 20,
+                label: '20条/页'
+            }, {
+                value: 30,
+                label: '30条/页'
+            }, {
+                value: 50,
+                label: '50条/页'
+            }, {
+                value: 100,
+                label: '100条/页'
+            }],
+            currentpageSize: 10
+        }
+    },
+    mounted() {
+    },
+    computed: {
+        //总页数
+        totalPage() {
+            return Math.ceil(this.total / this.pageSize)
+        },
+        //最终页-起始页 = 连续页码数-1
+        startEnd() {
+            let { currentPage, lxyms, totalPage } = this
+            // return console.log(this)
+            let start;
+            let end;
+            //计算连续页码的起始页
+            start = currentPage - Math.floor(lxyms / 2)
+            if (start < 1) {
+                start = 1
+                this.quickprevIconClass = 'el-icon-more'
+            }
+            //结束页
+            end = start + lxyms - 1  //此时当start<1时 在计算end时已经进行补位了
+            // end>totalPage ?end=totalPage:""
+            if (end > totalPage) {
+                end = totalPage;
+                start = end - lxyms + 1;  //此处当结束位置超出时,用start进行补位
+                start < 1 ? start = 1 : ""  // 要满足start处于一个正常的范围
+            }
+            if (start >= 2 && end < totalPage - 1) {
+                start += 2
+            }
+            if (end == totalPage - 1 && start > 1) {
+                start += 1
+                end -= 1
+            }
+            return { start, end }
+        }
+    },
+    methods: {
+        changesize() {
+            this.$emit("updateCPage", this.currentPage, this.currentpageSize)
+        },
+        onMouseenter(direction) {
+            if (direction === 'left') {
+                this.quickprevIconClass = 'el-icon-d-arrow-left';
+            } else {
+                this.quicknextIconClass = 'el-icon-d-arrow-right';
+            }
+        },
+        updateCPage(currentPage) {
+            if (currentPage < 1) return
+            if (currentPage === this.currentPage) return;
+            if (currentPage > this.totalPage - 3) {
+                this.quicknextIconClass = 'el-icon-more'
+            }
+            if (currentPage > this.totalPage) {
+                this.currentPage = this.totalPage
+            } else {
+                this.currentPage = currentPage;
+            }
+            //将当前页的数据,与外部的父组件进行数据交互
+            this.$emit("updateCPage", this.currentPage, this.currentpageSize)
+        }
+    },
+    watch: {
+        //监听当前页下标
+        indexFromWrap: {
+            handler(val) {
+                this.currentPage = val
+            },
+            deep: true,
+            immediate: true
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.pagination {
+    position: absolute;
+    bottom: 5px;
+    right: 20px;
+    height: 40px;
+    margin: 0 !important;
+    padding: 0 !important;
+
+    button {
+        margin: 0 5px;
+        background-color: #f4f4f5;
+        color: #606266;
+        outline: none;
+        border-radius: 2px;
+        padding: 0 8px;
+        vertical-align: top;
+        display: inline-block;
+        font-size: 13px;
+        min-width: 35.5px;
+        height: 28px;
+        line-height: 28px;
+        cursor: pointer;
+        box-sizing: border-box;
+        text-align: center;
+        border: 0;
+
+        &[disabled] {
+            color: #c0c4cc;
+            cursor: not-allowed;
+        }
+
+        &.active {
+            background-color: #409eff;
+            color: #fff;
+        }
+
+        &.buttonactive {
+            color: #409eff;
+        }
+    }
+}
+</style>

src/views/monitor/operlog/index.vue

@@ -50,8 +50,8 @@
       </el-row>
     </div>
     <div ref="table">
-      <el-table ref="tables"  :max-height="maxTableHeight" v-loading="loading" :data="list" @selection-change="handleSelectionChange"
+      <el-table ref="tables" :max-height="maxTableHeight" v-loading="loading" :data="list"
-        :default-sort="defaultSort" @sort-change="handleSortChange">
+        @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="日志编号" align="center" prop="operId" />
         <el-table-column label="系统模块" align="center" prop="title" />
@@ -84,8 +84,10 @@
         </el-table-column>
       </el-table>
     </div>
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+    <Pagination :total="total" :pageSize="queryParams.pageSize" :indexFromWrap="queryParams.pageNum"
-      @pagination="getList" />
+      @updateCPage="updateCPage"></Pagination>
+    <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" /> -->
     <!-- 操作日志详细 -->
     <el-dialog title="操作日志详细" :visible.sync="open" width="700px" append-to-body>
       <el-form ref="form" :model="form" label-width="100px" size="mini">
@@ -130,13 +132,16 @@
 
 <script>
 import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog";
-
+import Pagination from '../../components/Pagination'
 export default {
+  components: {
+    Pagination,
+  },
   name: "Operlog",
   dicts: ['sys_oper_type', 'sys_common_status'],
   data() {
     return {
-      maxTableHeight:undefined,
+      maxTableHeight: undefined,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -176,6 +181,11 @@ export default {
     this.screenChange()
   },
   methods: {
+    updateCPage(index, size) {
+      this.queryParams.pageNum = index
+      this.queryParams.pageSize = size
+      this.getList();
+    },
     /** 查询登录日志 */
     getList() {
       this.loading = true;
@@ -269,3 +279,39 @@ export default {
   }
 };
 </script>
+
+<style lang="less" scoped>
+.pagination {
+  text-align: center;
+
+  button {
+    margin: 0 5px;
+    background-color: #f4f4f5;
+    color: #606266;
+    outline: none;
+    border-radius: 2px;
+    padding: 0 4px;
+    vertical-align: top;
+    display: inline-block;
+    font-size: 13px;
+    min-width: 35.5px;
+    height: 28px;
+    line-height: 28px;
+    cursor: pointer;
+    box-sizing: border-box;
+    text-align: center;
+    border: 0;
+
+    &[disabled] {
+      color: #c0c4cc;
+      cursor: not-allowed;
+    }
+
+    &.active {
+      cursor: not-allowed;
+      background-color: #409eff;
+      color: #fff;
+    }
+  }
+}
+</style>