通用表格传高度修改

Co-authored-by: Copilot <copilot@github.com>

frontend/src/components/BasicTable/index.vue

@@ -6,7 +6,7 @@
     :data-source="tableData"
     :columns="columns"
     :pagination="paginationConfig"
-    :scroll="{ x: '100%' }"
+    :scroll="scrollConfig "
     :row-key="rowKey"
     @change="handleTableChange"
   >
@@ -23,6 +23,8 @@ import { ref, computed, onMounted, watch } from "vue";
 // --- Types ---
 interface Props {
   columns: any[];
+
+  scrollY?: string | number;
   // 请求数据的函数，由父组件传入
   listUrl: (params: any) => Promise<any>;
   // 是否开启行选择
@@ -62,6 +64,12 @@ const size = ref(props.defaultPageSize);
 const selectedRowKeys = ref<string[]>([]);
 const selectedRows = ref<any[]>([]);
 
+// 计算表格滚动高度
+const scrollConfig = computed(() => ({
+  x: 'max-content',
+  y: props.scrollY,   // 注意：如果 scrollY 是 undefined，则不会启用垂直滚动
+}))
+
 // --- Row Selection ---
 const rowSelection = computed(() => ({
   selectedRowKeys: selectedRowKeys.value,
@@ -192,5 +200,26 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* 如有必要，添加少量样式 */
+
+:deep(.ant-table-wrapper) {
+  height: 100%; /* 让表格容器填满父级 */
+  .ant-spin-nested-loading, .ant-spin-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .ant-table {
+    flex: 1; /* 表格主体区域自动撑满剩余空间 */
+    overflow: hidden; /* 防止内容溢出 */
+  }
+  .ant-table-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .ant-table-body {
+    flex: 1; /* 表体部分撑满，实现固定表头 + 滚动内容 */
+    overflow: auto !important; /* 出现滚动条的关键 */
+  }
+}
 </style>

frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/guoYuSheShiShuJuTianBaoSearch.vue

@@ -204,8 +204,7 @@ const onValuesChange = (changedValues: any, allValues: any) => {
 
 // 下载模板
 const downloadTemplate = () => {
-  // 20260429090252740092641634938251
-  downloadFileByUrl(import.meta.env.VITE_APP_PREVIEW_URL + "/?20260429090252740092641634938251", "过鱼设施数据填报模板", "zip");
+  downloadFileByUrl(import.meta.env.VITE_APP_PREVIEW_URL + "/?20260429090252740092641634938251", "过鱼设施数据填报模板");
 };
 
 const handleReset = () => {

frontend/src/views/shuJuTianBao/guoYuSheShiShuJuTianBao/index.vue

@@ -2,6 +2,7 @@
   <div class="guoYuSheShiShuJuTianBao-page">
     <GuoYuSheShiShuJuTianBaoSearch
       ref="searchRef"
+      class="search-container"
       :guoyuStatus="guoyuStatus"
       :direction="direction"
       :handle-add="handleAdd"
@@ -14,9 +15,11 @@
       @search-finish="handleSearchFinish"
     />
     <!-- 主表格 -->
+    <div class="table-container" ref="tableContainerRef">
       <BasicTable
         ref="tableRef"
         :columns="columns"
+        :scroll-y="500"
         :list-url="getFishDraftPage"
         :search-params="{}"
         :enable-row-selection="true"
@@ -41,10 +44,7 @@
                 type="link"
                 size="small"
                 @click="handleEdit(record, 'edit')"
-              v-if="
-                record.status === 'DRAFT' ||
-                record.status === 'REJECTED'
-              "
+                v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
                 >编辑</a-button
               >
               <a-button
@@ -95,6 +95,7 @@
           </template>
         </template>
       </BasicTable>
+    </div>
     <!-- 隐藏的文件输入框 -->
     <input
       ref="fileInputRef"
@@ -574,7 +575,9 @@ const handleReject = (id: any) => {
 // 多选禁用
 const getCheckboxProps = (record: any) => {
   return {
-    disabled:  [!checkPerm(['sjtb:edit-review'])&&"PENDING", "APPROVED"].includes(record.status),
+    disabled: [!checkPerm(["sjtb:edit-review"]) && "PENDING", "APPROVED"].includes(
+      record.status
+    ),
   };
 };
 // 多选
@@ -849,8 +852,10 @@ const fileTableaAnalysis = (res: any, type: string) => {
     list = res.data.result.failedRowDetails.concat(res.data.result.successRowDetails);
   }
   list.sort((a: any, b: any) => {
-    const keyA = a.rowIndex !== undefined && a.rowIndex !== null ? Number(a.rowIndex) : -1;
-    const keyB = b.rowIndex !== undefined && b.rowIndex !== null ? Number(b.rowIndex) : -1;
+    const keyA =
+      a.rowIndex !== undefined && a.rowIndex !== null ? Number(a.rowIndex) : -1;
+    const keyB =
+      b.rowIndex !== undefined && b.rowIndex !== null ? Number(b.rowIndex) : -1;
     return keyA - keyB;
   });
 
@@ -1062,9 +1067,33 @@ const closeMediaPreview = () => {
     currentMediaIndex.value = 0;
   });
 };
+const tableContainerRef = ref<HTMLElement | null>(null)
+const tableScrollY = ref<number | undefined>(undefined)
+// 计算表格主体高度（减去表头、分页器、内边距等）
+const calcTableScrollY = () => {
+  if (!tableContainerRef.value) return
+  // 获取容器高度
+  const containerHeight = tableContainerRef.value.clientHeight
+  console.log(containerHeight)
+  // 估算表头（约 55px） + 分页器（约 64px） + 上下内边距容差（10px） = 约 130px
+  // 如果你有筛选栏等，需要额外减去
+  const otherHeight = 112
+  const y = containerHeight - otherHeight
+  tableScrollY.value = y > 0 ? y : undefined
+}
 
+// 监听容器大小变化（窗口 resize 或内容变化）
+const observer = new ResizeObserver(() => {
+  calcTableScrollY()
+})
 // --- 生命周期 ---
 onMounted(() => {
+  nextTick(() => {
+    calcTableScrollY()
+    if (tableContainerRef.value) {
+      observer.observe(tableContainerRef.value)
+    }
+  })
   getDictItemsByCode({ dictCode: "direction" }).then((res) => {
     direction.value = res.data;
   });
@@ -1080,6 +1109,19 @@ onMounted(() => {
   height: 100%;
   background-color: #ffffff;
   padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  box-sizing: border-box; /* 防止 padding 撑大高度 */
+  overflow: hidden; /* 防止整个页面出现滚动条 */
+}
+.search-container {
+  flex-shrink: 0; /* 搜索栏不压缩 */
+}
+.table-container {
+  flex: 1; /* 占据剩余所有空间 */
+  overflow: hidden; /* 关键：防止表格溢出容器 */
+  position: relative; /* 为绝对定位元素提供参考（如果需要） */
 }
 .media-list-container {
   background-color: rgb(234, 241, 251);