From 3a18a1a7883918d384e51730113eb1cfa0c874a6 Mon Sep 17 00:00:00 2001 From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com> Date: Tue, 6 Jan 2026 14:06:10 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../attendance-count/att-overview.vue | 133 +++++++++++++++++- .../month-detail/components/att-details.vue | 7 + 2 files changed, 135 insertions(+), 5 deletions(-) diff --git a/src/views/construction-person/attendance-manage/attendance-count/att-overview.vue b/src/views/construction-person/attendance-manage/attendance-count/att-overview.vue index 0f7cc56..19b998b 100644 --- a/src/views/construction-person/attendance-manage/attendance-count/att-overview.vue +++ b/src/views/construction-person/attendance-manage/attendance-count/att-overview.vue @@ -6,12 +6,12 @@ label-width="auto" :model="queryParams" ref="queryFormRef" - style="margin-top: 20px; padding-left: 20px; display: flex" + style="margin-top: 20px; display: flex" > @@ -29,7 +29,7 @@ @@ -37,7 +37,7 @@ @@ -63,14 +63,24 @@ + + { + this.calculateTableMaxHeight() + }) + // 监听窗口大小改变 + window.addEventListener('resize', this.handleResize) + }, + beforeDestroy() { + window.removeEventListener('resize', this.handleResize) + }, methods: { getCurrentMonthDays() { if (!this.queryParams.month) { @@ -254,8 +275,102 @@ export default { this.tableList = [] } finally { this.loading = false + this.$nextTick(() => { + this.calculateTableMaxHeight() + // 数据加载完成后，延迟调整表格高度 + setTimeout(() => { + const calculatedMaxHeight = this.tableMaxHeight + this.adjustTableHeightByContent(calculatedMaxHeight) + }, 300) + }) } }, + // 计算表格最大高度 + calculateTableMaxHeight() { + this.$nextTick(() => { + const container = this.$el + if (!container) return + + // 获取表单元素和表格元素 + const formEl = this.$refs.queryFormRef?.$el + const tableEl = this.$refs.tableRef?.$el + + if (!formEl) { + // 如果没有表单，使用容器高度 + const containerHeight = + container.clientHeight || container.offsetHeight + this.tableMaxHeight = Math.max(containerHeight - 100, 300) + return + } + + // 获取容器和表单的位置信息 + const containerRect = container.getBoundingClientRect() + const formRect = formEl.getBoundingClientRect() + + // 计算从表单底部到容器底部的距离 + // 使用 getBoundingClientRect 获取精确的位置 + const formBottom = formRect.bottom + const containerBottom = containerRect.bottom + + // 计算可用高度：容器底部 - 表单底部 - 预留空间 + // 预留一些空间确保底部不被截断（包括可能的边框、间距等） + const reservedSpace = 15 + const availableHeight = + containerBottom - formBottom - reservedSpace + + // 设置最小高度，确保表格至少能显示几行数据 + const calculatedMaxHeight = Math.max(availableHeight, 300) + + // 延迟检查表格实际内容高度，如果内容不足，使用实际高度 + setTimeout(() => { + this.adjustTableHeightByContent(calculatedMaxHeight) + }, 200) + }) + }, + // 根据表格实际内容调整高度，避免内容不足时的违和感 + adjustTableHeightByContent(calculatedMaxHeight) { + const tableEl = this.$refs.tableRef?.$el + if (!tableEl) { + this.tableMaxHeight = calculatedMaxHeight + return + } + + // 获取表格头部高度 + const tableHeader = tableEl.querySelector( + '.el-table__header-wrapper', + ) + const headerHeight = tableHeader ? tableHeader.offsetHeight : 0 + + // 获取表格内容实际高度 + const tableBodyWrapper = tableEl.querySelector( + '.el-table__body-wrapper', + ) + if (!tableBodyWrapper) { + this.tableMaxHeight = calculatedMaxHeight + return + } + + // 获取表格内容高度（包括所有行） + const bodyHeight = tableBodyWrapper.scrollHeight + + // 计算表格实际需要的高度（头部 + 内容） + const actualHeight = headerHeight + bodyHeight + + // 如果实际高度小于计算出的最大高度，使用实际高度（避免底部空白） + // 如果实际高度大于等于最大高度，使用计算出的最大高度（启用滚动） + if (actualHeight > 0 && actualHeight < calculatedMaxHeight) { + // 添加一点边距，让表格看起来更自然 + this.tableMaxHeight = actualHeight + 2 + } else { + this.tableMaxHeight = calculatedMaxHeight + } + }, + // 处理窗口大小改变 + handleResize() { + this.$nextTick(() => { + this.calculateTableMaxHeight() + }) + }, }, } @@ -266,12 +381,20 @@ export default { border-radius: 12px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); overflow: hidden; + height: 100%; + display: flex; + flex-direction: column; .table-container { padding: 0; + flex: 1; + display: flex; + flex-direction: column; + min-height: 0; // 重要：允许 flex 子元素缩小 ::v-deep .el-table { border: none; + width: 100%; .el-table__header-wrapper { .el-table__header { diff --git a/src/views/synthesize-query/three-and-one/month-detail/components/att-details.vue b/src/views/synthesize-query/three-and-one/month-detail/components/att-details.vue index a006efe..3826628 100644 --- a/src/views/synthesize-query/three-and-one/month-detail/components/att-details.vue +++ b/src/views/synthesize-query/three-and-one/month-detail/components/att-details.vue @@ -68,6 +68,13 @@ :header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle" > +