From 70d537e7ad31963dc49e0f7911bb68a95336ade3 Mon Sep 17 00:00:00 2001
From: jiang <BnsGit@123!>
Date: Fri, 30 Jan 2026 14:35:28 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A3=85=E5=A4=87=E9=85=8D=E7=BD=AE=E7=8E=87?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=97=AE=E9=A2=98=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/equipment/correlationTable.vue     | 136 +++++++-----------
 src/views/system/equipment/index.vue          |  17 ++-
 src/views/system/equipment/table.vue          |  94 ++++++------
 3 files changed, 103 insertions(+), 144 deletions(-)

diff --git a/src/views/system/equipment/correlationTable.vue b/src/views/system/equipment/correlationTable.vue
index 5189044f..e8b955be 100644
--- a/src/views/system/equipment/correlationTable.vue
+++ b/src/views/system/equipment/correlationTable.vue
@@ -2,9 +2,7 @@
   <div class="tab-table-wrapper">
     <!-- 表格头部：标题自定义 + 新增按钮（显隐可控） -->
     <div class="table-header">
-      <!-- 标题：父组件传递，默认空 -->
       <h3>{{ tableTitle }}</h3>
-      <!-- 新增按钮：通过showAddBtn控制显隐 -->
       <div>
         <el-button
           v-if="showAddBtn"
@@ -43,7 +41,6 @@
           外租新增
         </el-button>
       </div>
-
     </div>
 
     <!-- 表格滚动容器：独立滚动，表头固定 -->
@@ -63,7 +60,6 @@
           align="center"
           :index="calcTableIndex"
         />
-        <!-- 改造后完整表格列代码（兼容Vue2/Vue3） -->
         <el-table-column
           v-for="(column, index) in tableColumns"
           :key="index"
@@ -73,19 +69,15 @@
           align="center"
           show-overflow-tooltip
         >
-          <!-- 作用域插槽：获取当前行数据scope.row，当前列配置column -->
-          <template slot-scope="scope"> <!-- Vue3可写v-slot="scope"，效果一致 -->
-            <!-- 判断：当前列有dictMap映射 → 渲染映射文字，无则渲染原始值 -->
+          <template slot-scope="scope">
             <span v-if="column.dictMap">
-      <!-- 若字段值可能为null/undefined，添加兜底显示 -->
-      {{ column.dictMap[scope.row[column.prop]] || '未知' }}
-    </span>
+              {{ column.dictMap[scope.row[column.prop]] || '未知' }}
+            </span>
             <span v-else>
-      {{ scope.row[column.prop] || '-' }} <!-- 原始值兜底：空值显示- -->
-    </span>
+              {{ scope.row[column.prop] || '-' }}
+            </span>
           </template>
         </el-table-column>
-        <!-- 操作列：通过showActionCol控制显隐 -->
         <el-table-column
           v-if="showActionCol"
           label="操作"
@@ -99,12 +91,12 @@
       </el-table>
     </div>
 
-    <!-- 分页组件：无数据时隐藏 -->
+    <!-- 分页组件：无数据时隐藏 → 核心修改1：移除.sync，绑定内部data -->
     <div class="pagination-wrapper" v-if="total > 0">
       <pagination
         :total="total"
-        :page.sync="pageNum"
-        :limit.sync="pageSize"
+        :page="innerPageNum"
+        :limit="innerPageSize"
         @pagination="handlePageChange"
         background
         layout="total, sizes, prev, pager, next"
@@ -116,75 +108,45 @@
 <script>
 export default {
   name: 'EquipmentTable',
-  // 父组件传递的属性：新增标题、新增按钮显隐、操作列显隐配置，均添加默认值
   props: {
-    // 新增：表格标题（自定义）
-    tableTitle: {
-      type: String,
-      default: ''
+    // 新增配置项
+    tableTitle: { type: String, default: '' },
+    showAddBtn: { type: Boolean, default: true },
+    showOwnBtn: { type: Boolean, default: true },
+    showSharingBtn: { type: Boolean, default: true },
+    showRentalBtn: { type: Boolean, default: true },
+    showActionCol: { type: Boolean, default: true },
+    // 原有属性（保持不变）
+    tableData: { type: Array, required: true, default: () => [] },
+    tableColumns: { type: Array, required: true, default: () => [] },
+    loading: { type: Boolean, default: false },
+    total: { type: Number, default: 0 },
+    pageNum: { type: Number, required: true, default: 1 }, // 父传子只读Prop
+    pageSize: { type: Number, required: true, default: 10 }, // 父传子只读Prop
+    emptyText: { type: String, default: '暂无数据' }
+  },
+  data() {
+    return {
+      // 核心修改2：定义内部可修改的分页状态，初始化继承Prop值
+      innerPageNum: this.pageNum,
+      innerPageSize: this.pageSize
+    }
+  },
+  watch: {
+    // 核心修改3：监听父组件Prop变化，同步更新内部data（保证父改子同步）
+    pageNum(newVal) {
+      this.innerPageNum = newVal
     },
-    // 新增：是否显示新增按钮（true显示/false隐藏）
-    showAddBtn: {
-      type: Boolean,
-      default: true
-    },
-    showOwnBtn: {
-      type: Boolean,
-      default: true
-    },
-    showSharingBtn: {
-      type: Boolean,
-      default: true
-    },
-    showRentalBtn: {
-      type: Boolean,
-      default: true
-    },
-    // 新增：是否显示操作列（true显示/false隐藏）
-    showActionCol: {
-      type: Boolean,
-      default: true
-    },
-    // 原有属性：保持不变
-    tableData: {
-      type: Array,
-      required: true,
-      default: () => []
-    },
-    tableColumns: {
-      type: Array,
-      required: true,
-      default: () => []
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    total: {
-      type: Number,
-      default: 0
-    },
-    pageNum: {
-      type: Number,
-      required: true,
-      default: 1
-    },
-    pageSize: {
-      type: Number,
-      required: true,
-      default: 10
-    },
-    emptyText: {
-      type: String,
-      default: '暂无数据'
+    pageSize(newVal) {
+      this.innerPageSize = newVal
     }
   },
   methods: {
-    // 计算表格序号：基于父组件传递的分页参数
+    // 核心修改4：序号计算基于内部data（保证序号与分页器一致）
     calcTableIndex(index) {
-      return (this.pageNum - 1) * this.pageSize + index + 1
+      return (this.innerPageNum - 1) * this.innerPageSize + index + 1
     },
-    // 触发新增事件：通知父组件打开新增弹窗
+    // 原有事件方法（保持不变）
     handleAddClick() {
       this.$emit('add')
     },
@@ -197,15 +159,18 @@ export default {
     handleRentalClick() {
       this.$emit('rental')
     },
-    // 触发删除事件：传递当前行数据给父组件
     handleDeleteClick(row) {
       this.$emit('delete', row)
     },
-    // 触发分页切换事件：传递新的分页参数给父组件
-    handlePageChange() {
+    // 核心修改5：分页事件处理，先更内部状态再通知父组件
+    handlePageChange({ page, limit }) {
+      // 1. 更新子组件内部分页状态
+      this.innerPageNum = page
+      this.innerPageSize = limit
+      // 2. 触发事件，将最新分页参数传递给父组件
       this.$emit('pagination', {
-        pageNum: this.pageNum,
-        pageSize: this.pageSize
+        pageNum: this.innerPageNum,
+        pageSize: this.innerPageSize
       })
     }
   }
@@ -213,7 +178,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-// 完全复用原有表格样式，兼容无标题/无按钮的布局
+// 样式完全保持不变，无需修改
 .tab-table-wrapper {
   display: flex;
   flex-direction: column;
@@ -226,7 +191,7 @@ export default {
     margin-bottom: 12px;
     flex-shrink: 0;
     justify-content: space-between;
-    // 兼容无标题时的布局，避免按钮左移
+
     h3 {
       margin: 0;
       white-space: nowrap;
@@ -283,7 +248,6 @@ export default {
   }
 }
 
-// 空数据样式
 :deep(.el-table__empty-text) {
   color: #909399;
   font-size: 14px;
diff --git a/src/views/system/equipment/index.vue b/src/views/system/equipment/index.vue
index 34372f5b..d24b0b9a 100644
--- a/src/views/system/equipment/index.vue
+++ b/src/views/system/equipment/index.vue
@@ -39,7 +39,7 @@
         >
           <el-tab-pane
             v-for="tab in mainTabList"
-            :key="tab.name"
+            :key="tab.key"
             :label="tab.label"
             :name="tab.name"
             class="tab-pane-container"
@@ -1029,7 +1029,7 @@ export default {
       }
     },
     handleNodeClick(data) {
-      this.currentDeptId = data.id || data.deptId
+      this.currentDeptId = data.deptId
     },
     handleDeptSearchClear() {
       this.deptName = ''
@@ -1043,9 +1043,16 @@ export default {
     },
     handleTabClick(tab) {
       this.activeTab = tab.name
-      const tabConfig = this.tableData[tab.key]
-      tabConfig.pageNum = 1
-      this.loadMainTabData(tab.name)
+      const tabKey = this.mainTabList.find(item => item.name === tab.name)
+      const tabConfig = this.tableData[tabKey.key]
+      // 核心优化：先校验tabConfig是否为有效对象，再执行赋值
+      if (tabConfig && typeof tabConfig === 'object') {
+        tabConfig.pageNum = 1
+        this.loadMainTabData(tab.name)
+      } else {
+        // 可选：打印友好提示，方便排查问题
+        console.warn(`未找到key为${tab.key}的标签页配置，请检查tableData初始化`)
+      }
     },
     async loadMainTabData(tabName) {
       if (!this.currentDeptId) return
diff --git a/src/views/system/equipment/table.vue b/src/views/system/equipment/table.vue
index e121f0ba..45dd00eb 100644
--- a/src/views/system/equipment/table.vue
+++ b/src/views/system/equipment/table.vue
@@ -44,12 +44,12 @@
       </el-table>
     </div>
 
-    <!-- 分页组件：无数据时隐藏 -->
+    <!-- 分页组件：无数据时隐藏 → 核心修改1：移除.sync，绑定内部data属性 -->
     <div class="pagination-wrapper" v-if="total > 0">
       <pagination
         :total="total"
-        :page.sync="pageNum"
-        :limit.sync="pageSize"
+        :page="innerPageNum"
+        :limit="innerPageSize"
         @pagination="handlePageChange"
         background
         layout="total, sizes, prev, pager, next"
@@ -61,74 +61,63 @@
 <script>
 export default {
   name: 'EquipmentTable',
-  // 父组件传递的属性：规范类型，添加默认值
+  // 父组件传递的属性：规范类型，添加默认值（保持不变）
   props: {
-    // 表格数据
-    tableData: {
-      type: Array,
-      required: true,
-      default: () => []
+    tableData: { type: Array, required: true, default: () => [] },
+    tableColumns: { type: Array, required: true, default: () => [] },
+    loading: { type: Boolean, default: false },
+    total: { type: Number, default: 0 },
+    pageNum: { type: Number, required: true, default: 1 }, // 父传子只读Prop
+    pageSize: { type: Number, required: true, default: 10 }, // 父传子只读Prop
+    emptyText: { type: String, default: '暂无数据' }
+  },
+  data() {
+    return {
+      // 核心修改2：定义子组件内部可修改的分页状态，初始化继承Prop值
+      innerPageNum: this.pageNum,
+      innerPageSize: this.pageSize
+    }
+  },
+  watch: {
+    // 核心修改3：监听父组件Prop变化，同步更新子组件内部data
+    // 保证父组件修改分页（如标签页切换重置pageNum=1）时，子组件视图同步
+    pageNum(newVal) {
+      this.innerPageNum = newVal
     },
-    // 表格列配置
-    tableColumns: {
-      type: Array,
-      required: true,
-      default: () => []
-    },
-    // 加载状态
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    // 总条数
-    total: {
-      type: Number,
-      default: 0
-    },
-    // 当前页码
-    pageNum: {
-      type: Number,
-      required: true,
-      default: 1
-    },
-    // 每页条数
-    pageSize: {
-      type: Number,
-      required: true,
-      default: 10
-    },
-    // 空数据提示文本（支持不同标签页自定义）
-    emptyText: {
-      type: String,
-      default: '暂无数据'
+    pageSize(newVal) {
+      this.innerPageSize = newVal
     }
   },
   methods: {
-    // 计算表格序号：基于父组件传递的分页参数
+    // 计算表格序号：基于内部data的分页参数（与原逻辑一致，无修改）
     calcTableIndex(index) {
-      return (this.pageNum - 1) * this.pageSize + index + 1
+      return (this.innerPageNum - 1) * this.innerPageSize + index + 1
     },
-    // 触发新增事件：通知父组件打开新增弹窗
+    // 触发新增事件（无修改）
     handleAddClick() {
       this.$emit('add')
     },
-    // 触发关联事件：传递当前行数据给父组件
+    // 触发关联事件（无修改）
     handleRelateClick(row) {
       this.$emit('relate', row)
     },
-    // 触发编辑事件：传递当前行数据给父组件
+    // 触发编辑事件（无修改）
     handleEditClick(row) {
       this.$emit('edit', row)
     },
-    // 触发删除事件：传递当前行数据给父组件
+    // 触发删除事件（无修改）
     handleDeleteClick(row) {
       this.$emit('delete', row)
     },
-    // 触发分页切换事件：传递新的分页参数给父组件
-    handlePageChange() {
+    // 核心修改4：处理分页变化，更新内部data并通知父组件
+    handlePageChange({ page, limit }) {
+      // 1. 先更新子组件内部的分页状态
+      this.innerPageNum = page
+      this.innerPageSize = limit
+      // 2. 触发pagination事件，将最新分页参数传递给父组件
       this.$emit('pagination', {
-        pageNum: this.pageNum,
-        pageSize: this.pageSize
+        pageNum: this.innerPageNum,
+        pageSize: this.innerPageSize
       })
     }
   }
@@ -136,7 +125,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-// 完全复用原有表格样式，无修改
+// 样式保持完全不变，无需修改
 .tab-table-wrapper {
   height: calc(99vh - 84px);
   display: flex;
@@ -202,7 +191,6 @@ export default {
   }
 }
 
-// 空数据样式
 :deep(.el-table__empty-text) {
   color: #909399;
   font-size: 14px;