装备配置率配置问题修改
This commit is contained in:
parent
559a7babc4
commit
70d537e7ad
|
|
@ -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: '暂无数据' }
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 核心修改2:定义内部可修改的分页状态,初始化继承Prop值
|
||||||
|
innerPageNum: this.pageNum,
|
||||||
|
innerPageSize: this.pageSize
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 核心修改3:监听父组件Prop变化,同步更新内部data(保证父改子同步)
|
||||||
|
pageNum(newVal) {
|
||||||
|
this.innerPageNum = newVal
|
||||||
},
|
},
|
||||||
// 新增:是否显示新增按钮(true显示/false隐藏)
|
pageSize(newVal) {
|
||||||
showAddBtn: {
|
this.innerPageSize = newVal
|
||||||
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: '暂无数据'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
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;
|
||||||
|
|
|
||||||
|
|
@ -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)
|
||||||
tabConfig.pageNum = 1
|
const tabConfig = this.tableData[tabKey.key]
|
||||||
this.loadMainTabData(tab.name)
|
// 核心优化:先校验tabConfig是否为有效对象,再执行赋值
|
||||||
|
if (tabConfig && typeof tabConfig === 'object') {
|
||||||
|
tabConfig.pageNum = 1
|
||||||
|
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
|
||||||
|
|
|
||||||
|
|
@ -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() {
|
||||||
|
return {
|
||||||
|
// 核心修改2:定义子组件内部可修改的分页状态,初始化继承Prop值
|
||||||
|
innerPageNum: this.pageNum,
|
||||||
|
innerPageSize: this.pageSize
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 核心修改3:监听父组件Prop变化,同步更新子组件内部data
|
||||||
|
// 保证父组件修改分页(如标签页切换重置pageNum=1)时,子组件视图同步
|
||||||
|
pageNum(newVal) {
|
||||||
|
this.innerPageNum = newVal
|
||||||
},
|
},
|
||||||
// 表格列配置
|
pageSize(newVal) {
|
||||||
tableColumns: {
|
this.innerPageSize = newVal
|
||||||
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: {
|
||||||
// 计算表格序号:基于父组件传递的分页参数
|
// 计算表格序号:基于内部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;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue