新增 文件管理分页功能

Author: yumao233

src/app/views/FileManager.vue

@@ -70,6 +70,18 @@
         </el-col>
       </el-row>
 
+      <div class="row-mt page-pagination">
+        <el-pagination
+          small
+          background
+          layout="prev, pager, next"
+          v-model:currentPage="pageParam.page"
+          :page-size="pageParam.pageSize"
+          :total="pageParam.total"
+          @current-change="currentChange"
+        />
+      </div>
+
       <div class="row-mt" v-show="percentComplete > 0">
         <el-progress
           :text-inside="true"
@@ -179,6 +191,11 @@ export default {
         addr: "",
         password: ""
       },
+      pageParam: {
+        page: 1,
+        pageSize: 40,
+        total: 1
+      },
 
       paramPath: this.$route.query.path,
 
@@ -222,6 +239,12 @@ export default {
       const p = path.normalize(path.join(this.currentDir, "../"));
       await this.list(p);
     },
+
+    // 目录下一页或上一页事件
+    currentChange() {
+      this.toDir(".");
+    },
+
     // 目录 List 功能
     async list(cwd = ".") {
       this.$route.query.path = cwd;
@@ -231,11 +254,16 @@ export default {
         params: {
           remote_uuid: this.serviceUuid,
           uuid: this.instanceUuid,
-          target: cwd
+          target: cwd,
+          page: parseInt(this.pageParam.page) - 1,
+          page_size: this.pageParam.pageSize
         }
       });
+      const { items, total, page } = data;
       this.currentDir = path.normalize(cwd);
-      this.tableFilter(data);
+      this.tableFilter(items);
+      this.pageParam.total = total;
+      this.pageParam.page = page + 1;
     },
 
     // 表格数据处理
@@ -623,4 +651,8 @@ export default {
   bottom: 20px;
   padding-left: 8px;
 }
+.page-pagination {
+  display: flex;
+  justify-content: right;
+}
 </style>