优化

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"
             >
                 <el-form-item label="月份">
                     <el-date-picker
                         type="month"
-                        style="width: 200px"
+                        style="width: 160px"
                         value-format="yyyy-MM"
                         v-model="queryParams.month"
                         placeholder="请选择月份"
@@ -21,7 +21,7 @@
                 <el-form-item label="分包名称">
                     <el-input
                         clearable
-                        style="width: 200px"
+                        style="width: 160px"
                         placeholder="请输入分包名称"
                         v-model.trim="queryParams.subName"
                     />
@@ -29,7 +29,7 @@
                 <el-form-item label="班组名称">
                     <el-input
                         clearable
-                        style="width: 200px"
+                        style="width: 160px"
                         placeholder="请输入班组名称"
                         v-model.trim="queryParams.teamName"
                     />
@@ -37,7 +37,7 @@
                 <el-form-item label="施工人员">
                     <el-input
                         clearable
-                        style="width: 200px"
+                        style="width: 160px"
                         placeholder="请输入施工人员"
                         v-model.trim="queryParams.workerName"
                     />
@@ -63,14 +63,24 @@
                 </el-form-item>
             </el-form>
             <el-table
+                ref="tableRef"
                 border
                 stripe
                 style="width: 100%"
                 :data="tableList"
                 :header-cell-style="tableHeaderStyle"
                 :cell-style="tableCellStyle"
+                :max-height="tableMaxHeight"
                 v-loading="loading"
             >
+                <el-table-column
+                    label="序号"
+                    align="center"
+                    width="50"
+                    type="index"
+                    fixed="left"
+                />
+
                 <el-table-column
                     align="center"
                     :key="item.prop"
@@ -162,6 +172,7 @@ export default {
                 },
             ],
             attendanceDays: 0,
+            tableMaxHeight: 500, // 默认高度，会在 mounted 时重新计算
         }
     },
     watch: {
@@ -179,6 +190,16 @@ export default {
         this.getCurrentMonthDays()
         this.getAttOverviewList()
     },
+    mounted() {
+        this.$nextTick(() => {
+            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()
+            })
+        },
     },
 }
 </script>
@@ -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 {

src/views/synthesize-query/three-and-one/month-detail/components/att-details.vue

@@ -68,6 +68,13 @@
                 :header-cell-style="tableHeaderStyle"
                 :cell-style="tableCellStyle"
             >
+                <el-table-column
+                    label="序号"
+                    align="center"
+                    width="50"
+                    type="index"
+                    fixed="left"
+                />
                 <el-table-column
                     align="center"
                     :key="item.prop"