装备配置率配置问题修改

2026-01-30 14:35:28 +08:00 · 2026-01-30 14:35:28 +08:00 · 70d537e7ad
parent 559a7babc4
commit 70d537e7ad
3 changed files with 103 additions and 144 deletions
--- 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;
--- 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
--- 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;