feat(web-admin): viewport-fill list height for workflow menus

Wire 流程配置、待办/已办中心、我的申请 and 请假申请 lists to
useListTableViewportHeight for sticky headers and viewport-fill scrolling.

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

web-admin/src/views/system/leave/index.vue

@@ -97,7 +97,10 @@
       </div>
 
       <div class="list-body list-wrap">
-        <ListTable table-key="system-leave"
+        <div ref="leaveTableWrapRef" class="table-scroll bx-list-table-wrap">
+          <ListTable
+            ref="leaveTableRef"
+            :height="tableHeight" table-key="system-leave"
           class="list-table"
           :data="tableData"
           stripe
@@ -181,7 +184,10 @@
           />
         </ListTable>
 
-        <div class="pagination list-pager-bar">
+        
+        </div>
+        <div ref="leaveBelowRef">
+          <div class="pagination list-pager-bar">
           <div class="list-pager-selected">
             已选 <span class="sel-num">{{ selectedRows.length }}</span> 项
           </div>
@@ -196,6 +202,7 @@
             @current-change="loadData"
           />
         </div>
+        </div>
       </div>
     </section>
 
@@ -316,6 +323,7 @@ import ListQuickSearchInput from '@/components/business/list-quick-search-input/
 import ListToolbarEndActions from '@/components/business/list-toolbar-end-actions/index.vue'
 import ListExportDropdown from '@/components/business/list-export-dropdown/index.vue'
 import { usePersistedListColumns } from '@/composables/usePersistedListColumns'
+import { useListTableViewportHeight } from '@/composables/useListTableViewportHeight'
   import { Close, Check, RefreshLeft, Search, Plus, Edit, Delete, Promotion, Document } from '@element-plus/icons-vue'
   import { useDictStore } from '@/store/modules/dict'
   import { canDeleteByCreator, CREATOR_DELETE_TIP } from '@/utils/creator-delete'
@@ -352,6 +360,15 @@ import { usePersistedListColumns } from '@/composables/usePersistedListColumns'
     resetToDefault
   } = usePersistedListColumns('workflow-leave-list-columns', listColumnDefs)
 
+const leaveTableWrapRef = ref<HTMLElement | null>(null)
+const leaveBelowRef = ref<HTMLElement | null>(null)
+const leaveTableRef = ref<any>(null)
+const { tableHeight, recalc: recalcTableHeight } = useListTableViewportHeight({
+  tableEl: leaveTableWrapRef,
+  pagerEl: leaveBelowRef,
+  tableRef: leaveTableRef
+})
+
   const dictStore = useDictStore()
 
   const loading = ref(false)
@@ -614,5 +631,8 @@ import { usePersistedListColumns } from '@/composables/usePersistedListColumns'
     { debounce: 300, deep: true }
   )
 
-  onMounted(() => loadData())
+  onMounted(() => {
+  loadData()
+  nextTick(() => recalcTableHeight())
+})
 </script>

web-admin/src/views/system/workflow/my-applications/index.vue

@@ -71,7 +71,10 @@
       </div>
 
       <div class="list-body list-wrap">
-        <ListTable table-key="system-workflow-my-applications"
+        <div ref="wfMyAppsTableWrapRef" class="table-scroll bx-list-table-wrap">
+          <ListTable
+            ref="wfMyAppsTableRef"
+            :height="tableHeight" table-key="system-workflow-my-applications"
           class="list-table"
           :data="tableData"
           v-loading="loading"
@@ -139,7 +142,10 @@
             header-align="center"
           />
         </ListTable>
-        <div class="pagination list-pager-bar">
+        
+        </div>
+        <div ref="wfMyAppsBelowRef">
+          <div class="pagination list-pager-bar">
           <el-pagination
             :current-page="pagination.page"
             :page-size="pagination.pageSize"
@@ -150,6 +156,7 @@
             @current-change="(val) => ((pagination.page = val), loadData())"
           />
         </div>
+        </div>
       </div>
 
       <!-- 详情弹窗 -->
@@ -240,6 +247,7 @@
   import ListExportDropdown from '@/components/business/list-export-dropdown/index.vue'
   import ListToolbarEndActions from '@/components/business/list-toolbar-end-actions/index.vue'
   import { usePersistedListColumns } from '@/composables/usePersistedListColumns'
+import { useListTableViewportHeight } from '@/composables/useListTableViewportHeight'
   import { fetchMyInstances, fetchBusinessAllTasks, fetchExportMyInstances } from '@/api/workflow'
   import ProcessStatusTag from '../components/ProcessStatusTag.vue'
   import { Document, Search, RefreshLeft, Close } from '@element-plus/icons-vue'
@@ -261,6 +269,15 @@
     resetToDefault
   } = usePersistedListColumns('workflow-my-applications-list-columns', listColumnDefs)
 
+const wfMyAppsTableWrapRef = ref<HTMLElement | null>(null)
+const wfMyAppsBelowRef = ref<HTMLElement | null>(null)
+const wfMyAppsTableRef = ref<any>(null)
+const { tableHeight, recalc: recalcTableHeight } = useListTableViewportHeight({
+  tableEl: wfMyAppsTableWrapRef,
+  pagerEl: wfMyAppsBelowRef,
+  tableRef: wfMyAppsTableRef
+})
+
   const searchForm = reactive<{ keyword: string; status: string }>({ keyword: '', status: '' })
   const quickSearchKeyword = ref('')
 
@@ -368,7 +385,9 @@
 
   onMounted(() => {
     loadData()
-  })
+  
+  nextTick(() => recalcTableHeight())
+})
 </script>
 
 <style scoped lang="scss">

web-admin/src/views/system/workflow/process/index.vue

@@ -100,7 +100,10 @@
       </div>
 
       <div class="list-body list-wrap">
-        <ListTable table-key="system-workflow-process"
+        <div ref="wfProcessTableWrapRef" class="table-scroll bx-list-table-wrap">
+          <ListTable
+            ref="wfProcessTableRef"
+            :height="tableHeight" table-key="system-workflow-process"
           class="list-table"
           :data="tableData"
           v-loading="loading"
@@ -174,7 +177,10 @@
             header-align="center"
           />
         </ListTable>
-        <div class="pagination list-pager-bar">
+        
+        </div>
+        <div ref="wfProcessBelowRef">
+          <div class="pagination list-pager-bar">
           <div class="list-pager-selected">
             已选 <span class="sel-num">{{ selectedRows.length }}</span> 项
           </div>
@@ -189,6 +195,7 @@
             @current-change="(val) => ((pagination.page = val), loadData())"
           />
         </div>
+        </div>
       </div>
 
       <!-- 新增/编辑弹窗 -->
@@ -282,6 +289,7 @@ import ListQuickSearchInput from '@/components/business/list-quick-search-input/
 import ListExportDropdown from '@/components/business/list-export-dropdown/index.vue'
 import ListToolbarEndActions from '@/components/business/list-toolbar-end-actions/index.vue'
 import { usePersistedListColumns } from '@/composables/usePersistedListColumns'
+import { useListTableViewportHeight } from '@/composables/useListTableViewportHeight'
   import {
     canDeleteByCreator,
     filterDeletableByCreator,
@@ -330,6 +338,15 @@ import { usePersistedListColumns } from '@/composables/usePersistedListColumns'
     resetToDefault
   } = usePersistedListColumns('workflow-process-list-columns', listColumnDefs)
 
+const wfProcessTableWrapRef = ref<HTMLElement | null>(null)
+const wfProcessBelowRef = ref<HTMLElement | null>(null)
+const wfProcessTableRef = ref<any>(null)
+const { tableHeight, recalc: recalcTableHeight } = useListTableViewportHeight({
+  tableEl: wfProcessTableWrapRef,
+  pagerEl: wfProcessBelowRef,
+  tableRef: wfProcessTableRef
+})
+
   const searchForm = reactive<{ keyword: string }>({ keyword: '' })
   const quickSearchKeyword = ref('')
 
@@ -602,5 +619,7 @@ import { usePersistedListColumns } from '@/composables/usePersistedListColumns'
 
   onMounted(() => {
     loadData()
-  })
+  
+  nextTick(() => recalcTableHeight())
+})
 </script>

web-admin/src/views/system/workflow/task-completed/index.vue

@@ -59,7 +59,10 @@
       </div>
 
       <div class="list-body list-wrap">
-        <ListTable table-key="system-workflow-task-completed"
+        <div ref="wfCompletedTableWrapRef" class="table-scroll bx-list-table-wrap">
+          <ListTable
+            ref="wfCompletedTableRef"
+            :height="tableHeight" table-key="system-workflow-task-completed"
           class="list-table"
           :data="tableData"
           v-loading="loading"
@@ -142,7 +145,10 @@
             header-align="center"
           />
         </ListTable>
-        <div class="pagination list-pager-bar">
+        
+        </div>
+        <div ref="wfCompletedBelowRef">
+          <div class="pagination list-pager-bar">
           <el-pagination
             :current-page="pagination.page"
             :page-size="pagination.pageSize"
@@ -153,6 +159,7 @@
             @current-change="(val) => ((pagination.page = val), loadData())"
           />
         </div>
+        </div>
       </div>
 
       <!-- 详情弹窗 -->
@@ -245,6 +252,7 @@
   import ListExportDropdown from '@/components/business/list-export-dropdown/index.vue'
   import ListToolbarEndActions from '@/components/business/list-toolbar-end-actions/index.vue'
   import { usePersistedListColumns } from '@/composables/usePersistedListColumns'
+import { useListTableViewportHeight } from '@/composables/useListTableViewportHeight'
   import { fetchCompletedTasks, fetchInstanceDetail, fetchExportCompletedTasks } from '@/api/workflow'
   import ProcessStatusTag from '../components/ProcessStatusTag.vue'
   import { Document, Search, RefreshLeft, Close } from '@element-plus/icons-vue'
@@ -268,6 +276,15 @@
     resetToDefault
   } = usePersistedListColumns('workflow-task-completed-list-columns', listColumnDefs)
 
+const wfCompletedTableWrapRef = ref<HTMLElement | null>(null)
+const wfCompletedBelowRef = ref<HTMLElement | null>(null)
+const wfCompletedTableRef = ref<any>(null)
+const { tableHeight, recalc: recalcTableHeight } = useListTableViewportHeight({
+  tableEl: wfCompletedTableWrapRef,
+  pagerEl: wfCompletedBelowRef,
+  tableRef: wfCompletedTableRef
+})
+
   const searchForm = reactive<{ keyword: string }>({ keyword: '' })
   const quickSearchKeyword = ref('')
 
@@ -386,7 +403,9 @@
 
   onMounted(() => {
     loadData()
-  })
+  
+  nextTick(() => recalcTableHeight())
+})
 </script>
 
 <style scoped lang="scss">

web-admin/src/views/system/workflow/task-pending/index.vue

@@ -68,7 +68,10 @@
       </div>
 
       <div class="list-body list-wrap">
-        <ListTable table-key="system-workflow-task-pending"
+        <div ref="wfPendingTableWrapRef" class="table-scroll bx-list-table-wrap">
+          <ListTable
+            ref="wfPendingTableRef"
+            :height="tableHeight" table-key="system-workflow-task-pending"
           class="list-table"
           :data="tableData"
           v-loading="loading"
@@ -132,7 +135,10 @@
             header-align="center"
           />
         </ListTable>
-        <div class="pagination list-pager-bar">
+        
+        </div>
+        <div ref="wfPendingBelowRef">
+          <div class="pagination list-pager-bar">
           <div class="list-pager-selected">
             已选 <span class="sel-num">{{ selectedRows.length }}</span> 项
           </div>
@@ -147,6 +153,7 @@
             @current-change="(val) => ((pagination.page = val), loadData())"
           />
         </div>
+        </div>
       </div>
 
       <!-- 审批弹窗 -->
@@ -253,6 +260,7 @@ import ListQuickSearchInput from '@/components/business/list-quick-search-input/
 import ListExportDropdown from '@/components/business/list-export-dropdown/index.vue'
 import ListToolbarEndActions from '@/components/business/list-toolbar-end-actions/index.vue'
 import { usePersistedListColumns } from '@/composables/usePersistedListColumns'
+import { useListTableViewportHeight } from '@/composables/useListTableViewportHeight'
   import { fetchPendingTasks, fetchInstanceDetail, fetchExportPendingTasks } from '@/api/workflow'
   import ApprovalDialog from '../components/ApprovalDialog.vue'
   import ProcessStatusTag from '../components/ProcessStatusTag.vue'
@@ -275,6 +283,15 @@ import { usePersistedListColumns } from '@/composables/usePersistedListColumns'
     resetToDefault
   } = usePersistedListColumns('workflow-task-pending-list-columns', listColumnDefs)
 
+const wfPendingTableWrapRef = ref<HTMLElement | null>(null)
+const wfPendingBelowRef = ref<HTMLElement | null>(null)
+const wfPendingTableRef = ref<any>(null)
+const { tableHeight, recalc: recalcTableHeight } = useListTableViewportHeight({
+  tableEl: wfPendingTableWrapRef,
+  pagerEl: wfPendingBelowRef,
+  tableRef: wfPendingTableRef
+})
+
   const searchForm = reactive<{ keyword: string }>({ keyword: '' })
   const quickSearchKeyword = ref('')
 
@@ -421,7 +438,9 @@ import { usePersistedListColumns } from '@/composables/usePersistedListColumns'
 
   onMounted(() => {
     loadData()
-  })
+  
+  nextTick(() => recalcTableHeight())
+})
 </script>
 
 <style scoped lang="scss">