测试

src/views/rental/Detail.vue

@@ -69,6 +69,17 @@
               </template>
             </el-table-column>
           </el-table>
+          <div style="margin-top: 20px; display: flex; justify-content: flex-end;">
+            <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="total">
+            </el-pagination>
+          </div>
         </el-tab-pane>
         <el-tab-pane label="水费记录" name="water">
           <div class="section-header">
@@ -96,6 +107,17 @@
               </template>
             </el-table-column>
           </el-table>
+          <div style="margin-top: 20px; display: flex; justify-content: flex-end;">
+            <el-pagination
+              @size-change="handleWaterSizeChange"
+              @current-change="handleWaterCurrentChange"
+              :current-page="waterCurrentPage"
+              :page-sizes="[10, 20, 50, 100]"
+              :page-size="waterPageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="waterTotal">
+            </el-pagination>
+          </div>
         </el-tab-pane>
 
       </el-tabs>
@@ -192,6 +214,14 @@ export default {
       activeTab: 'rental',
       // 保存返回时的查询参数
       returnQuery: {},
+      // 分页相关 - 租赁档案
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      // 分页相关 - 水费记录
+      waterCurrentPage: 1,
+      waterPageSize: 10,
+      waterTotal: 0,
       waterBillDialogVisible: false,
       waterBillForm: {
         id: '',
@@ -239,6 +269,16 @@ export default {
     this.returnQuery = this.$route.query
     this.loadData()
   },
+  watch: {
+    activeTab: function() {
+      // 当tab切换时，刷新对应的数据
+      if (this.activeTab === 'rental') {
+        this.loadRentalHistory()
+      } else if (this.activeTab === 'water') {
+        this.loadWaterBills()
+      }
+    }
+  },
   methods: {
     async loadData() {
       this.isLoading = true
@@ -259,34 +299,86 @@ export default {
           this.room.apartmentName = apartment ? apartment.name : ''
         }
         
-        // 加载租房数据
-        const rentalsResponse = await rentalApi.getAll()
-        this.rentals = rentalsResponse.data || rentalsResponse
-        
-        // 加载水费数据
-        const waterBillsResponse = await waterBillApi.getAll({ roomId })
-        this.waterBills = (waterBillsResponse.data || waterBillsResponse)
-          .sort((a, b) => new Date(b.createTime) - new Date(a.createTime))
-        
         // 加载租赁历史
-        this.loadRentalHistory()
+        await this.loadRentalHistory()
+        
+        // 如果当前激活的是水费tab，加载水费数据
+        if (this.activeTab === 'water') {
+          await this.loadWaterBills()
+        }
       } catch (error) {
         this.$message.error('加载数据失败')
       } finally {
         this.isLoading = false
       }
     },
-    loadRentalHistory() {
+    async loadWaterBills() {
+      this.isLoading = true
+      try {
         const roomId = this.$route.params.id
-      this.rentalHistory = this.rentals
+        // 调用API获取水费记录，支持分页
-        .filter(r => r.roomId == roomId)
+        const response = await waterBillApi.getAll({
-        .map(rental => {
+          roomId,
+          page: this.waterCurrentPage,
+          pageSize: this.waterPageSize
+        })
+        
+        // 处理返回数据
+        this.waterBills = response.data || response
+        
+        // 设置总数
+        this.waterTotal = response.total || 0
+      } catch (error) {
+        this.$message.error('加载水费记录失败')
+      } finally {
+        this.isLoading = false
+      }
+    },
+    async loadRentalHistory() {
+      this.isLoading = true
+      try {
+        const roomId = this.$route.params.id
+        // 调用API获取当前房间的租赁记录，支持分页
+        const response = await rentalApi.getAll({
+          roomId,
+          page: this.currentPage,
+          pageSize: this.pageSize
+        })
+        
+        // 处理返回数据
+        const data = response.data || response
+        this.rentalHistory = data.map(rental => {
           return {
             ...rental,
             tenantName: rental.Tenant ? rental.Tenant.name : ''
           }
         })
-        .sort((a, b) => new Date(b.createTime) - new Date(a.createTime))
+        
+        // 设置总数
+        this.total = response.total || 0
+      } catch (error) {
+        this.$message.error('加载租赁历史失败')
+      } finally {
+        this.isLoading = false
+      }
+    },
+    handleSizeChange(size) {
+      this.pageSize = size
+      this.currentPage = 1
+      this.loadRentalHistory()
+    },
+    handleCurrentChange(current) {
+      this.currentPage = current
+      this.loadRentalHistory()
+    },
+    handleWaterSizeChange(size) {
+      this.waterPageSize = size
+      this.waterCurrentPage = 1
+      this.loadWaterBills()
+    },
+    handleWaterCurrentChange(current) {
+      this.waterCurrentPage = current
+      this.loadWaterBills()
     },
     getStatusType(status) {
       switch (status) {