feat: history页面列表滚动高度计算

src/views/HomeView/history111.vue

@@ -2,88 +2,19 @@
   <div class="history_page">
     <div class="page_content">
       <div class="page_content_body">
-        <!-- <HeaderComponent></HeaderComponent> -->
+        <div class="history_page_body">
-        <div class="history_page_body flex">
-          <!-- <div class="history_table_search">
-            <div class="content_search_block generalModel_state">
-              <div class="generalModel_state_item">
-                <a-range-picker
-                  class="range_picker"
-                  v-model:value="rangePickerValue"
-                  :placeholder="[$t('HistoryPage.StartDate'), $t('HistoryPage.EndDate')]"
-                  valueFormat="YYYY-MM-DD"
-                >
-                  <template #suffixIcon>
-                    <span class="icon iconfont range_picker_icon icon-rili"></span>
-                  </template>
-                </a-range-picker>
-              </div>
-              <div class="generalModel_state_item">
-                <input
-                  class="search_input"
-                  :placeholder="$t('LibraryPage.inputContent1')"
-                  v-model="searchCollectionName"
-                  @keydown.enter="searchHistoryList()"
-                />
-              </div>
-              <div class="generalModel_state_item">
-                <el-cascader
-                  :options="options"
-                  filterable
-                  v-model="value.labelValue"
-                  :collapse-tags="true"
-                  :show-all-levels="false"
-                  :clearable="true"
-                  :placeholder="$t('LibraryPage.Select')"
-                  :max-collapse-tags="3"
-                  :props="props"
-                  :collapse-tags-tooltip="true"
-                  ref="cascader"
-                  popper-class="libraryPageCascader"
-                  @visible-change="dropdownVisibleChange"
-                >
-                  <template #empty>
-                    <div>
-                      {{ $t('LibraryPage.Select') }}
-                    </div>
-                  </template>
-                </el-cascader>
-              </div>
-              <div class="intersection">
-                <div
-                  :title="$t('LibraryPage.unionSet')"
-                  @click="() => (intersection = 1)"
-                  v-show="intersection == 0"
-                  :class="['icon', 'iconfont', 'icon-bingji']"
-                ></div>
-                <div
-                  :title="$t('LibraryPage.intersection')"
-                  @click="() => (intersection = 0)"
-                  v-show="intersection == 1"
-                  :class="['icon', 'iconfont', 'icon-bingji1']"
-                ></div>
-              </div>
-              <div
-                class="gallery_btn"
-                style="padding: 2rem; line-height: 1"
-                @click="searchHistoryList('')"
-              >
-                <span class="icon iconfont icon-sousuo"></span>
-              </div>
-            </div>
-          </div> -->
           <TableSearchBar
+            ref="tableSearchBar"
             :button-list="presetList"
             :placeholder="t('batchGeneration.Search')"
             @search="searchHistoryList"
           />
-          <div class="history_table_content flex-1" ref="historyTable">
+          <div class="history_table_content" ref="historyTable">
             <a-config-provider :locale="tableLocale">
               <a-table
                 row-class-name="history_table_row"
                 :columns="columns"
                 :data-source="collectionList"
-                :scroll="{ y: historyTableHeight }"
                 @change="changePage"
                 :pagination="{
                   current: currentPage,
@@ -169,6 +100,7 @@ export default defineComponent({
     const projectSetting: any = ref(null)
     let renameData: any = ref({}) //修改名字选中的数据
     let isShowMark: any = ref(false)
+    const tableSearchBar: any = ref(null)
 
     // 根据store中的语言设置返回对应的ant-design-vue语言包
     const tableLocale = computed(() => {
@@ -272,7 +204,8 @@ export default defineComponent({
       enUS,
       zhCN,
       tableLocale,
-      projectSetting
+      projectSetting,
+      tableSearchBar
     }
   },
   data() {
@@ -299,30 +232,20 @@ export default defineComponent({
       groupDetails: {}, //每个collection的详情
       collectionName: '', //选中的名字
       searchCollectionName: '',
-      resizeObserver: null // ResizeObserver 实例
+      resizeObserver: null, // ResizeObserver 实例
+      resizeTimeout: null, // 防抖定时器
+      scrolled: true
     }
   },
-  mounted() {
+  async mounted() {
-    let historyTable: any = this.$refs.historyTable
+    await this.getHistoryList()
-
+    this.$nextTick(() => {
-    this.historyTableHeight = historyTable.clientHeight - 130
+      this.calcScrollHeight()
-
+      this.setupResizeObserver()
-    // 创建 ResizeObserver 监听 historyTable 高度变化
-    this.resizeObserver = new ResizeObserver(entries => {
-      for (let entry of entries) {
-        const newHeight = entry.contentRect.height - 130
-        this.historyTableHeight = newHeight
-      }
     })
-
-    // 开始观察 historyTable 元素
-    this.resizeObserver.observe(historyTable)
-
-    this.getHistoryList()
     this.getClass()
   },
   beforeUnmount() {
-    // 清理 ResizeObserver
     if (this.resizeObserver) {
       this.resizeObserver.disconnect()
       this.resizeObserver = null
@@ -379,7 +302,7 @@ export default defineComponent({
       this.getHistoryList()
     },
 
-    getHistoryList() {
+    async getHistoryList() {
       this.isShowMark = true
       let startDate: any = this.rangePickerValue
         ? new Date(this.rangePickerValue[0]).getTime()
@@ -402,7 +325,7 @@ export default defineComponent({
         intersection: this.intersection
       }
 
-      Https.axiosPost(Https.httpUrls.historyProject, data)
+      await Https.axiosPost(Https.httpUrls.historyProject, data)
         .then(
           // Https.axiosPost( Https.httpUrls.queryUserGroup, data).then(
           (rv: any) => {
@@ -421,6 +344,11 @@ export default defineComponent({
               this.total = rv.total
             }
             this.isShowMark = false
+
+            // 数据加载完成后重新计算滚动高度
+            this.$nextTick(() => {
+              this.calcScrollHeight()
+            })
           }
         )
         .catch(res => {
@@ -545,6 +473,71 @@ export default defineComponent({
       if (el) {
         el.innerHTML = this.t('LibraryPage.NoLabel')
       }
+    },
+    setupResizeObserver() {
+      // 清理之前的观察器
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect()
+      }
+
+      // 创建ResizeObserver来监听容器尺寸变化
+      this.resizeObserver = new ResizeObserver(entries => {
+        // 使用防抖来避免频繁调用
+        clearTimeout(this.resizeTimeout)
+        this.resizeTimeout = setTimeout(() => {
+          this.calcScrollHeight()
+        }, 100)
+      })
+
+      // 观察history_page容器
+      const historyPage = document.querySelector('.history_page')
+      if (historyPage) {
+        this.resizeObserver.observe(historyPage)
+      }
+
+      // 观察表格容器
+      const table = document.querySelector('.ant-table-wrapper')
+      if (table) {
+        this.resizeObserver.observe(table)
+      }
+    },
+    calcScrollHeight() {
+      // 表格可滚动距离=页面总高度-表格上方高度-表头高度-分页器高度
+      const historyPage = document.querySelector('.history_page')
+      const historyPageTop = historyPage?.offsetTop
+      const historyPageHeight = historyPage?.clientHeight
+
+      const table = document.querySelector('.ant-table-wrapper')
+      const tableTop = table?.offsetTop
+      const tableHeight = historyPageHeight - tableTop - 64
+
+      const tableHead = document.querySelector('.ant-table-thead')
+      const tableHeadHeight = tableHead?.clientHeight
+
+      // 计算表格内容区域的最大高度
+      const maxTableBodyHeight = tableHeight - tableHeadHeight
+
+      // 获取表格内容区域
+      const tableBody = document.querySelector('.ant-table-tbody')
+      if (tableBody) {
+        // 计算所有行的高度
+        const rows = tableBody.querySelectorAll('.ant-table-row')
+        let totalContentHeight = 0
+
+        rows.forEach(row => {
+          totalContentHeight += row.offsetHeight
+        })
+
+        if (totalContentHeight <= maxTableBodyHeight) {
+          this.scrolled = 'inherit'
+        } else {
+          this.scrolled = 'scroll'
+        }
+        this.historyTableHeight = maxTableBodyHeight + 'px'
+      } else {
+        // 如果表格内容还没渲染，先设置一个默认值
+        this.historyTableHeight = maxTableBodyHeight + 'px'
+      }
     }
   }
 })
@@ -598,67 +591,34 @@ export default defineComponent({
       .history_page_body {
         width: 100%;
         height: 100%;
-        padding: 3rem 0;
+        padding: 3rem 0 0;
         box-sizing: border-box;
         flex-direction: column;
 
-        .history_header {
-          font-size: 1.8rem;
-          height: 6.3rem;
-          line-height: 6.3rem;
-          font-weight: 500;
-          color: #333333;
-        }
-
-        // .history_table_search {
-        //   display: flex;
-        //   align-items: center;
-
-        //   .ant-picker:hover,
-        //   .ant-picker-focused {
-        //     border-color: #d5d8df;
-        //   }
-        //   .content_search_block {
-        //     display: flex;
-        //     align-items: center;
-        //     width: 140rem;
-
-        //     .search_icon_block {
-        //       width: 5.2rem;
-        //       height: 2.8rem;
-        //       line-height: 2.8rem;
-        //       text-align: center;
-        //       background: #343579;
-        //       background-color: #39215b;
-        //       cursor: pointer;
-        //       border-radius: 2rem;
-        //       margin-left: 3rem;
-        //       .icon-sousuo {
-        //         font-size: 1.6rem;
-        //         color: #ffffff;
-        //       }
-        //     }
-        //     .intersection {
-        //       cursor: pointer;
-        //       margin-right: 3rem;
-        //       > div {
-        //         font-size: 3rem;
-        //         font-weight: 900;
-        //       }
-        //     }
-        //   }
-        // }
-
         .history_table_content {
-          margin-top: 2.6rem;
+          padding-top: 2.6rem;
           width: 100%;
-          // height: calc(100% - 13.7rem);
-          // background: rgba(255, 255, 255, 0.6);
           background: #f5f5f5;
-          padding-bottom: 3rem;
+          height: calc(100% - 4rem);
+          // padding-bottom: 3rem;
 
-          :deep(.ant-table) {
+          :deep(.ant-table-wrapper) {
-            background: transparent;
+            height: 100%;
+            .ant-spin-nested-loading {
+              &,
+              .ant-spin-container {
+                height: 100%;
+              }
+            }
+          }
+
+          :deep(.ant-spin-container) {
+            display: flex;
+            flex-direction: column;
+            .ant-table {
+              background: transparent;
+              flex: 1;
+            }
           }
 
           .ant-table-body {
@@ -670,6 +630,10 @@ export default defineComponent({
               width: 0 !important;
             }
           }
+          :deep(.ant-table-content) {
+            max-height: v-bind(historyTableHeight);
+            overflow-y: v-bind(scrolled);
+          }
 
           :deep(.ant-table-thead > tr > th) {
             // background: #ffffff;