通用表格传高度修改

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>
-/* 如有必要，添加少量样式 */
+
-</style>
+: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", "过鱼设施数据填报模板");
-  downloadFileByUrl(import.meta.env.VITE_APP_PREVIEW_URL + "/?20260429090252740092641634938251", "过鱼设施数据填报模板", "zip");
 };
 
 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,87 +15,87 @@
       @search-finish="handleSearchFinish"
     />
     <!-- 主表格 -->
-    <BasicTable
+    <div class="table-container" ref="tableContainerRef">
-      ref="tableRef"
+      <BasicTable
-      :columns="columns"
+        ref="tableRef"
-      :list-url="getFishDraftPage"
+        :columns="columns"
-      :search-params="{}"
+        :scroll-y="500"
-      :enable-row-selection="true"
+        :list-url="getFishDraftPage"
-      :get-checkbox-props="getCheckboxProps"
+        :search-params="{}"
-      :transform-data="customTransform"
+        :enable-row-selection="true"
-      @selection-change="handleSelectionChange"
+        :get-checkbox-props="getCheckboxProps"
-    >
+        :transform-data="customTransform"
-      <!-- 使用 bodyCell 插槽自定义单元格渲染 -->
+        @selection-change="handleSelectionChange"
-      <template #bodyCell="{ column, record }">
+      >
-        <template v-if="column.key === 'action' || column.dataIndex === 'action'">
+        <!-- 使用 bodyCell 插槽自定义单元格渲染 -->
-          <div class="flex">
+        <template #bodyCell="{ column, record }">
-            <a-button
+          <template v-if="column.key === 'action' || column.dataIndex === 'action'">
-              type="link"
+            <div class="flex">
-              size="small"
+              <a-button
-              @click="handleSubmit([record.id])"
+                type="link"
-              v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
+                size="small"
-              >提交</a-button
+                @click="handleSubmit([record.id])"
-            >
+                v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
-            
+                >提交</a-button
-            <a-button
+              >
-              v-hasPerm="['sjtb:import-add']"
+
-              type="link"
+              <a-button
-              size="small"
+                v-hasPerm="['sjtb:import-add']"
-              @click="handleEdit(record, 'edit')"
+                type="link"
-              v-if="
+                size="small"
-                record.status === 'DRAFT' ||
+                @click="handleEdit(record, 'edit')"
-                record.status === 'REJECTED'
+                v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
-              "
+                >编辑</a-button
-              >编辑</a-button
+              >
-            >
+              <a-button
-            <a-button
+                v-hasPerm="['sjtb:edit-review']"
-              v-hasPerm="['sjtb:edit-review']"
+                type="link"
-              type="link"
+                size="small"
-              size="small"
+                @click="handleEdit(record, 'edit')"
-              @click="handleEdit(record, 'edit')"
+                v-if="
-              v-if="
+                  record.status === 'PENDING' ||
-                record.status === 'PENDING' ||
+                  record.status === 'REJECTED' ||
-                record.status === 'REJECTED'||
+                  record.status === 'PENDING'
-                record.status === 'PENDING'
+                "
-              "
+                >编辑</a-button
-              >编辑</a-button
+              >
-            >
+              <a-button
-            <a-button
+                type="link"
-              type="link"
+                danger
-              danger
+                size="small"
-              size="small"
+                @click="handleDelete([record.id])"
-              @click="handleDelete([record.id])"
+                v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
-              v-if="record.status === 'DRAFT' || record.status === 'REJECTED'"
+                >删除</a-button
-              >删除</a-button
+              >
-            >
+              <a-button
-            <a-button
+                type="link"
-              type="link"
+                size="small"
-              size="small"
+                @click="handleEdit(record, 'view')"
-              @click="handleEdit(record, 'view')"
+                v-if="record.status === 'PENDING' || record.status === 'APPROVED'"
-              v-if="record.status === 'PENDING' || record.status === 'APPROVED'"
+                >查看</a-button
-              >查看</a-button
+              >
-            >
+              <a-button
-            <a-button
+                v-hasPerm="['sjtb:edit-review']"
-              v-hasPerm="['sjtb:edit-review']"
+                type="link"
-              type="link"
+                size="small"
-              size="small"
+                @click="handleSuccess([record.id])"
-              @click="handleSuccess([record.id])"
+                v-if="record.status === 'PENDING'"
-              v-if="record.status === 'PENDING'"
+                >审批</a-button
-              >审批</a-button
+              >
-            >
+              <a-button
-            <a-button
+                v-hasPerm="['sjtb:edit-review']"
-              v-hasPerm="['sjtb:edit-review']"
+                type="link"
-              type="link"
+                danger
-              danger
+                size="small"
-              size="small"
+                @click="handleReject(record.id)"
-              @click="handleReject(record.id)"
+                v-if="record.status === 'PENDING'"
-              v-if="record.status === 'PENDING'"
+                >驳回</a-button
-              >驳回</a-button
+              >
-            >
+            </div>
-          </div>
+          </template>
         </template>
-      </template>
+      </BasicTable>
-    </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 keyA =
-    const keyB = b.rowIndex !== undefined && b.rowIndex !== null ? Number(b.rowIndex) : -1;
+      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);