bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

装备配置率配置问题修改

This commit is contained in:
jiang 2026-01-30 14:35:28 +08:00
parent 559a7babc4
commit 70d537e7ad
3 changed files with 103 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
src/views/system/equipment/correlationTable.vue
View File

@ -2,9 +2,7 @@
<div class="tab-table-wrapper"> <div class="tab-table-wrapper">
<!-- 表格头部：标题自定义 + 新增按钮（显隐可控） --> <!-- 表格头部：标题自定义 + 新增按钮（显隐可控） -->
<div class="table-header"> <div class="table-header">
<!-- 标题：父组件传递，默认空 -->
<h3>{{ tableTitle }}</h3> <h3>{{ tableTitle }}</h3>
<!-- 新增按钮：通过showAddBtn控制显隐 -->
<div> <div>
<el-button <el-button
v-if="showAddBtn" v-if="showAddBtn"
@ -43,7 +41,6 @@
外租新增 外租新增
</el-button> </el-button>
</div> </div>
</div> </div>
<!-- 表格滚动容器：独立滚动，表头固定 --> <!-- 表格滚动容器：独立滚动，表头固定 -->
@ -63,7 +60,6 @@
align="center" align="center"
:index="calcTableIndex" :index="calcTableIndex"
/> />
<!-- 改造后完整表格列代码（兼容Vue2/Vue3） -->
<el-table-column <el-table-column
v-for="(column, index) in tableColumns" v-for="(column, index) in tableColumns"
:key="index" :key="index"
@ -73,19 +69,15 @@
align="center" align="center"
show-overflow-tooltip show-overflow-tooltip
> >
<!-- 作用域插槽：获取当前行数据scope.row，当前列配置column --> <template slot-scope="scope">
<template slot-scope="scope"> <!-- Vue3可写v-slot="scope"，效果一致 -->
<!-- 判断：当前列有dictMap映射 → 渲染映射文字，无则渲染原始值 -->
<span v-if="column.dictMap"> <span v-if="column.dictMap">
<!-- 若字段值可能为null/undefined，添加兜底显示 -->
{{ column.dictMap[scope.row[column.prop]] || '未知' }} {{ column.dictMap[scope.row[column.prop]] || '未知' }}
</span> </span>
<span v-else> <span v-else>
{{ scope.row[column.prop] || '-' }} <!-- 原始值兜底：空值显示- --> {{ scope.row[column.prop] || '-' }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<!-- 操作列：通过showActionCol控制显隐 -->
<el-table-column <el-table-column
v-if="showActionCol" v-if="showActionCol"
label="操作" label="操作"
@ -99,12 +91,12 @@
</el-table> </el-table>
</div> </div>
<!-- 分页组件：无数据时隐藏 --> <!-- 分页组件：无数据时隐藏 → 核心修改1：移除.sync，绑定内部data -->
<div class="pagination-wrapper" v-if="total > 0"> <div class="pagination-wrapper" v-if="total > 0">
<pagination <pagination
:total="total" :total="total"
:page.sync="pageNum" :page="innerPageNum"
:limit.sync="pageSize" :limit="innerPageSize"
@pagination="handlePageChange" @pagination="handlePageChange"
background background
layout="total, sizes, prev, pager, next" layout="total, sizes, prev, pager, next"
@ -116,75 +108,45 @@
<script> <script>
export default { export default {
name: 'EquipmentTable', name: 'EquipmentTable',
// 父组件传递的属性：新增标题、新增按钮显隐、操作列显隐配置，均添加默认值
props: { props: {
// 新增：表格标题（自定义） // 新增配置项
tableTitle: { tableTitle: { type: String, default: '' },
type: String, showAddBtn: { type: Boolean, default: true },
default: '' 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: '暂无数据' }
}, },
// 新增：是否显示新增按钮（true显示/false隐藏） data() {
showAddBtn: { return {
type: Boolean, // 核心修改2：定义内部可修改的分页状态，初始化继承Prop值
default: true innerPageNum: this.pageNum,
innerPageSize: this.pageSize
}
}, },
showOwnBtn: { watch: {
type: Boolean, // 核心修改3：监听父组件Prop变化，同步更新内部data（保证父改子同步）
default: true pageNum(newVal) {
this.innerPageNum = newVal
}, },
showSharingBtn: { pageSize(newVal) {
type: Boolean, this.innerPageSize = newVal
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: '暂无数据'
} }
}, },
methods: { methods: {
// 计算表格序号：基于父组件传递的分页参数 // 核心修改4：序号计算基于内部data（保证序号与分页器一致）
calcTableIndex(index) { calcTableIndex(index) {
return (this.pageNum - 1) * this.pageSize + index + 1 return (this.innerPageNum - 1) * this.innerPageSize + index + 1
}, },
// 触发新增事件：通知父组件打开新增弹窗 // 原有事件方法（保持不变）
handleAddClick() { handleAddClick() {
this.$emit('add') this.$emit('add')
}, },
@ -197,15 +159,18 @@ export default {
handleRentalClick() { handleRentalClick() {
this.$emit('rental') this.$emit('rental')
}, },
// 触发删除事件：传递当前行数据给父组件
handleDeleteClick(row) { handleDeleteClick(row) {
this.$emit('delete', row) this.$emit('delete', row)
}, },
// 触发分页切换事件：传递新的分页参数给父组件 // 核心修改5：分页事件处理，先更内部状态再通知父组件
handlePageChange() { handlePageChange({ page, limit }) {
// 1. 更新子组件内部分页状态
this.innerPageNum = page
this.innerPageSize = limit
// 2. 触发事件，将最新分页参数传递给父组件
this.$emit('pagination', { this.$emit('pagination', {
pageNum: this.pageNum, pageNum: this.innerPageNum,
pageSize: this.pageSize pageSize: this.innerPageSize
}) })
} }
} }
@ -213,7 +178,7 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 完全复用原有表格样式，兼容无标题/无按钮的布局 // 样式完全保持不变，无需修改
.tab-table-wrapper { .tab-table-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -226,7 +191,7 @@ export default {
margin-bottom: 12px; margin-bottom: 12px;
flex-shrink: 0; flex-shrink: 0;
justify-content: space-between; justify-content: space-between;
// 兼容无标题时的布局，避免按钮左移
h3 { h3 {
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
@ -283,7 +248,6 @@ export default {
} }
} }
// 空数据样式
:deep(.el-table__empty-text) { :deep(.el-table__empty-text) {
color: #909399; color: #909399;
font-size: 14px; font-size: 14px;

13
src/views/system/equipment/index.vue
View File

@ -39,7 +39,7 @@
> >
<el-tab-pane <el-tab-pane
v-for="tab in mainTabList" v-for="tab in mainTabList"
:key="tab.name" :key="tab.key"
:label="tab.label" :label="tab.label"
:name="tab.name" :name="tab.name"
class="tab-pane-container" class="tab-pane-container"
@ -1029,7 +1029,7 @@ export default {
} }
}, },
handleNodeClick(data) { handleNodeClick(data) {
this.currentDeptId = data.id || data.deptId this.currentDeptId = data.deptId
}, },
handleDeptSearchClear() { handleDeptSearchClear() {
this.deptName = '' this.deptName = ''
@ -1043,9 +1043,16 @@ export default {
}, },
handleTabClick(tab) { handleTabClick(tab) {
this.activeTab = tab.name this.activeTab = tab.name
const tabConfig = this.tableData[tab.key] 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 tabConfig.pageNum = 1
this.loadMainTabData(tab.name) this.loadMainTabData(tab.name)
} else {
// 可选：打印友好提示，方便排查问题
console.warn(`未找到key为${tab.key}的标签页配置，请检查tableData初始化`)
}
}, },
async loadMainTabData(tabName) { async loadMainTabData(tabName) {
if (!this.currentDeptId) return if (!this.currentDeptId) return

90
src/views/system/equipment/table.vue
View File

@ -44,12 +44,12 @@
</el-table> </el-table>
</div> </div>
<!-- 分页组件：无数据时隐藏 --> <!-- 分页组件：无数据时隐藏 → 核心修改1：移除.sync，绑定内部data属性 -->
<div class="pagination-wrapper" v-if="total > 0"> <div class="pagination-wrapper" v-if="total > 0">
<pagination <pagination
:total="total" :total="total"
:page.sync="pageNum" :page="innerPageNum"
:limit.sync="pageSize" :limit="innerPageSize"
@pagination="handlePageChange" @pagination="handlePageChange"
background background
layout="total, sizes, prev, pager, next" layout="total, sizes, prev, pager, next"
@ -61,74 +61,63 @@
<script> <script>
export default { export default {
name: 'EquipmentTable', name: 'EquipmentTable',
// 父组件传递的属性：规范类型，添加默认值 // 父组件传递的属性：规范类型，添加默认值（保持不变）
props: { props: {
// 表格数据 tableData: { type: Array, required: true, default: () => [] },
tableData: { tableColumns: { type: Array, required: true, default: () => [] },
type: Array, loading: { type: Boolean, default: false },
required: true, total: { type: Number, default: 0 },
default: () => [] pageNum: { type: Number, required: true, default: 1 }, // 父传子只读Prop
pageSize: { type: Number, required: true, default: 10 }, // 父传子只读Prop
emptyText: { type: String, default: '暂无数据' }
}, },
// 表格列配置 data() {
tableColumns: { return {
type: Array, // 核心修改2：定义子组件内部可修改的分页状态，初始化继承Prop值
required: true, innerPageNum: this.pageNum,
default: () => [] innerPageSize: this.pageSize
}
}, },
// 加载状态 watch: {
loading: { // 核心修改3：监听父组件Prop变化，同步更新子组件内部data
type: Boolean, // 保证父组件修改分页（如标签页切换重置pageNum=1）时，子组件视图同步
default: false pageNum(newVal) {
this.innerPageNum = newVal
}, },
// 总条数 pageSize(newVal) {
total: { this.innerPageSize = newVal
type: Number,
default: 0
},
// 当前页码
pageNum: {
type: Number,
required: true,
default: 1
},
// 每页条数
pageSize: {
type: Number,
required: true,
default: 10
},
// 空数据提示文本（支持不同标签页自定义）
emptyText: {
type: String,
default: '暂无数据'
} }
}, },
methods: { methods: {
// 计算表格序号：基于父组件传递的分页参数 // 计算表格序号：基于内部data的分页参数（与原逻辑一致，无修改）
calcTableIndex(index) { calcTableIndex(index) {
return (this.pageNum - 1) * this.pageSize + index + 1 return (this.innerPageNum - 1) * this.innerPageSize + index + 1
}, },
// 触发新增事件：通知父组件打开新增弹窗 // 触发新增事件（无修改）
handleAddClick() { handleAddClick() {
this.$emit('add') this.$emit('add')
}, },
// 触发关联事件：传递当前行数据给父组件 // 触发关联事件（无修改）
handleRelateClick(row) { handleRelateClick(row) {
this.$emit('relate', row) this.$emit('relate', row)
}, },
// 触发编辑事件：传递当前行数据给父组件 // 触发编辑事件（无修改）
handleEditClick(row) { handleEditClick(row) {
this.$emit('edit', row) this.$emit('edit', row)
}, },
// 触发删除事件：传递当前行数据给父组件 // 触发删除事件（无修改）
handleDeleteClick(row) { handleDeleteClick(row) {
this.$emit('delete', row) this.$emit('delete', row)
}, },
// 触发分页切换事件：传递新的分页参数给父组件 // 核心修改4：处理分页变化，更新内部data并通知父组件
handlePageChange() { handlePageChange({ page, limit }) {
// 1. 先更新子组件内部的分页状态
this.innerPageNum = page
this.innerPageSize = limit
// 2. 触发pagination事件，将最新分页参数传递给父组件
this.$emit('pagination', { this.$emit('pagination', {
pageNum: this.pageNum, pageNum: this.innerPageNum,
pageSize: this.pageSize pageSize: this.innerPageSize
}) })
} }
} }
@ -136,7 +125,7 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 完全复用原有表格样式，无修改 // 样式保持完全不变，无需修改
.tab-table-wrapper { .tab-table-wrapper {
height: calc(99vh - 84px); height: calc(99vh - 84px);
display: flex; display: flex;
@ -202,7 +191,6 @@ export default {
} }
} }
// 空数据样式
:deep(.el-table__empty-text) { :deep(.el-table__empty-text) {
color: #909399; color: #909399;
font-size: 14px; font-size: 14px;