feat(web-admin): viewport-fill scroll on reimburse apply list

Wire ListTable height to the shared composable and stop double-scroll on wraps.

Co-authored-by: Cursor <cursoragent@cursor.com>

web-admin/src/styles/bx/index.scss

@@ -69,8 +69,8 @@
 }
 
 .table-scroll {
-  overflow-x: auto;
-  overflow-y: hidden;
+  min-width: 0;
+  overflow: visible;
 }
 
 .table-scroll .bx-table {

web-admin/src/views/bx/reimburse/apply/index.vue

@@ -120,8 +120,11 @@
 
       <div class="list-body list-wrap">
         <div ref="reimburseApplyTableWrapRef" class="table-scroll bx-list-table-wrap">
-          <ListTable table-key="bx-reimburse-apply"
+          <ListTable
+            ref="reimburseApplyTableRef"
+            table-key="bx-reimburse-apply"
             class="list-table"
+            :height="tableHeight"
             :data="filteredRows"
             v-loading="loading"
             stripe
@@ -329,6 +332,8 @@
               </template>
             </el-table-column>
           </ListTable>
+        </div>
+        <div ref="reimburseApplyBelowRef">
           <ListColumnStatsRow
             ref="reimburseApplyStatsRowRef"
             storage-key="bx-reimburse-apply-column-stats"
@@ -337,22 +342,22 @@
             :table-wrap-el="reimburseApplyTableWrapRef"
             :get-cell-value="getReimburseApplyStatCellValue"
           />
-        </div>
 
-        <div class="pagination list-pager-bar">
-          <div class="list-pager-selected">
-            已选 <span class="sel-num">{{ selectedRows.length }}</span> 项
-          </div>
+          <div class="pagination list-pager-bar">
+            <div class="list-pager-selected">
+              已选 <span class="sel-num">{{ selectedRows.length }}</span> 项
+            </div>
 
-          <span class="list-range">{{ rangeText }}</span>
-          <el-pagination
-            v-model:current-page="currentPage"
-            v-model:page-size="pageSize"
-            :total="total"
-            layout="total, sizes, prev, pager, next"
-            :page-sizes="[10, 20, 100, 500]"
-            @size-change="onSizeChange"
-          />
+            <span class="list-range">{{ rangeText }}</span>
+            <el-pagination
+              v-model:current-page="currentPage"
+              v-model:page-size="pageSize"
+              :total="total"
+              layout="total, sizes, prev, pager, next"
+              :page-sizes="[10, 20, 100, 500]"
+              @size-change="onSizeChange"
+            />
+          </div>
         </div>
       </div>
     </section>
@@ -803,12 +808,13 @@ import ListColumnStatsRow from '@/components/business/list-column-stats-row/inde
 import ColumnHeaderFilter from '@/components/business/column-header-filter/index.vue'
 import { useDbInstantSearch } from '@/composables/useDbInstantSearch'
 import { usePersistedListColumns } from '@/composables/usePersistedListColumns'
+import { useListTableViewportHeight } from '@/composables/useListTableViewportHeight'
 import {
   useClientColumnFilters,
   type ColumnFilterDef
 } from '@/composables/useClientColumnFilters'
 import ListQuickSearchInput from '@/components/business/list-quick-search-input/index.vue'
-import { reactive, ref, computed, onMounted } from 'vue'
+import { reactive, ref, computed, onMounted, nextTick } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import {
   Plus,
@@ -971,8 +977,16 @@ const {
 } = usePersistedListColumns('bx-reimburse-apply-list-columns', listColumnDefs)
 
 const reimburseApplyTableWrapRef = ref<HTMLElement | null>(null)
+const reimburseApplyBelowRef = ref<HTMLElement | null>(null)
+const reimburseApplyTableRef = ref<any>(null)
 const reimburseApplyStatsRowRef = ref<{ resync?: () => void } | null>(null)
 
+const { tableHeight, recalc: recalcTableHeight } = useListTableViewportHeight({
+  tableEl: reimburseApplyTableWrapRef,
+  pagerEl: reimburseApplyBelowRef,
+  tableRef: reimburseApplyTableRef
+})
+
 const reimburseApplyStatsRowColumns = computed((): StatsRowColumn[] => {
   const cols: StatsRowColumn[] = [
     { key: '__selection', interactive: false },
@@ -1536,6 +1550,7 @@ function buildSearchQuery() {
 function handleSearch() {
   quickSearchKeyword.value = ''
   search(buildSearchQuery())
+  nextTick(() => recalcTableHeight())
 }
 
 useDbInstantSearch(
@@ -1552,6 +1567,7 @@ function handleReset() {
   quickSearchKeyword.value = ''
   Object.assign(filterForm, { keyword: '', status: '', expenseName: '', applyDateRange: null })
   search()
+  nextTick(() => recalcTableHeight())
 }
 
 function handleQuickSearch() {