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/graphify-out/.graphify_labels.json

@@ -267,39 +267,31 @@
   "265": "Community 265",
   "266": "crypto.ts",
   "267": "fetchData",
-  "268": "zh_CN.js",
   "269": "Community 269",
   "270": "Community 270",
   "271": "SettingDrawer.vue",
   "272": "customerPool.ts",
-  "273": "handleConfirmApproval",
   "274": "pl-plan-stop-product-arrange-required.ts",
   "275": "index.js",
   "276": "tabs.ts",
   "277": "handleKeyDown",
   "278": "index.vue",
-  "279": "handleDisburse",
   "280": "Community 280",
   "281": "index.js",
-  "282": "product.ts",
   "283": "Community 283",
   "284": "Community 284",
   "285": "Community 285",
   "286": "Community 286",
-  "287": "view-fields.ts",
   "288": "syncStatsColumnWidths",
   "289": "handleEdit",
   "290": "index.js",
-  "291": "crm-owner-candidates.ts",
   "292": "Community 292",
   "293": "index.vue",
   "294": "menuFavorite.ts",
   "295": "Community 295",
   "296": "Community 296",
   "297": "index.vue",
-  "298": "index.vue",
   "299": "zh_CN.js",
-  "300": "index.vue",
   "301": "ProcessStatusTag.vue",
   "302": "Community 302",
   "303": "Community 303",
@@ -312,7 +304,6 @@
   "310": "Community 310",
   "311": "handleExportPdf",
   "312": "loadUserOptions",
-  "313": "loadUserOptions",
   "314": "assignmentMatchesFilter",
   "315": "Community 315",
   "316": "Community 316",

web-admin/graphify-out/2026-09-01/.graphify_labels.json

@@ -271,24 +271,35 @@
   "269": "Community 269",
   "270": "Community 270",
   "271": "SettingDrawer.vue",
+  "272": "customerPool.ts",
+  "273": "handleConfirmApproval",
+  "274": "pl-plan-stop-product-arrange-required.ts",
   "275": "index.js",
   "276": "tabs.ts",
   "277": "handleKeyDown",
   "278": "index.vue",
+  "279": "handleDisburse",
   "280": "Community 280",
   "281": "index.js",
+  "282": "product.ts",
   "283": "Community 283",
   "284": "Community 284",
   "285": "Community 285",
   "286": "Community 286",
+  "287": "view-fields.ts",
+  "288": "syncStatsColumnWidths",
   "289": "handleEdit",
   "290": "index.js",
+  "291": "crm-owner-candidates.ts",
   "292": "Community 292",
   "293": "index.vue",
   "294": "menuFavorite.ts",
   "295": "Community 295",
   "296": "Community 296",
+  "297": "index.vue",
+  "298": "index.vue",
   "299": "zh_CN.js",
+  "300": "index.vue",
   "301": "ProcessStatusTag.vue",
   "302": "Community 302",
   "303": "Community 303",
@@ -300,6 +311,8 @@
   "309": "Community 309",
   "310": "Community 310",
   "311": "handleExportPdf",
+  "312": "loadUserOptions",
+  "313": "loadUserOptions",
   "314": "assignmentMatchesFilter",
   "315": "Community 315",
   "316": "Community 316",
@@ -329,6 +342,7 @@
   "340": "Community 340",
   "341": "Community 341",
   "342": "error-handle.ts",
+  "343": "v2.4.2.1 - 2025-06-16",
   "344": "ArtException.vue",
   "346": "Community 346",
   "347": "Community 347",

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">