浏览代码

文件下发通知弹窗改为分页显示

FengChaoYu 1 周之前
父节点
当前提交
86855d58b7
共有 1 个文件被更改,包括 38 次插入5 次删除
  1. 38 5
      src/layout/index.vue

+ 38 - 5
src/layout/index.vue

@@ -19,6 +19,17 @@
           </template>
         </el-table-column>
       </el-table>
+      <div class="pagination-container" style="margin-top: 15px; text-align: right;">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="totalCount">
+        </el-pagination>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -64,22 +75,44 @@ export default {
   data() {
     return {
       dialogTableVisible: false,
-      ListDownload: []
+      ListDownload: [],
+      currentPage: 1,
+      pageSize: 10,
+      totalCount: 0
     }
   },
   mounted() {
     if (window.localStorage.getItem('dakaitishichuangkou')) {
       window.localStorage.removeItem('dakaitishichuangkou')
       // 打开提示窗口
-      comListDownloadGet({ pageNo: 1, pageSize: -1 }).then(res => {
+      this.loadDownloadList()
+    }
+  },
+  methods: {
+    // 加载下载列表数据
+    loadDownloadList() {
+      comListDownloadGet({ 
+        pageNo: this.currentPage,
+        pageSize: this.pageSize 
+      }).then(res => {
         this.ListDownload = res.data.records
+        this.totalCount = res.data.total
         if (this.ListDownload.length) {
           this.dialogTableVisible = true
         }
       })
-    }
-  },
-  methods: {
+    },
+    // 分页大小改变
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.loadDownloadList()
+    },
+    // 当前页码改变
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.loadDownloadList()
+    },
+    // 处理点击事件
     handleClick(item) {
       if (item.isPwd) {
         this.$prompt('请输入下载密码', '提示', {