style: 系统管理，报表管理，模具管理-列表局部滚动

src/views/erp/mold/index.vue

@@ -48,7 +48,7 @@
         </el-form-item>
       </el-form>
 
-      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id"
+      <el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :max-height="planTableMaxHeight" row-key="id"
         style="margin-top: 16px;">
         <el-table-column :label="t('MoldManagement.MoldBrandPage.image')" align="center" width="120">
           <template #default="scope">
@@ -168,6 +168,18 @@ const loading = ref(false)
 const exportLoading = ref(false)
 const list = ref<MoldBrandVO[]>([])
 const total = ref(0)
+const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
 const productOptions = ref<ProductVO[]>([])
 const deviceOptions = ref<DeviceLedgerVO[]>([])
 const currentStatusKey = ref('all')
@@ -259,6 +271,7 @@ const getList = async () => {
     normalizePageResult(data)
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -422,6 +435,8 @@ onMounted(async () => {
   productOptions.value = await ProductApi.getMesProductSimpleList()
   deviceOptions.value = await DeviceLedgerApi.getDeviceLedgerList()
   await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener("resize", updatePlanTableMaxHeight)
 
   // 从详情页跳转过来，自动打开上下模操作
   const { operateType: queryOperateType, moldId: queryMoldId } = route.query
@@ -434,6 +449,10 @@ onMounted(async () => {
     push({ path: route.path })
   }
 })
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updatePlanTableMaxHeight)
+})
 </script>
 
 <style scoped>

src/views/mes/feedingplan/index.vue

@@ -77,7 +77,7 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :max-height="planTableMaxHeight">
       <!-- <el-table-column label="id" align="center" prop="id" /> -->
       <el-table-column label="记录" align="center" prop="recordCode"  sortable />
       <el-table-column label="记录明细" align="center" prop="recordDetailId" />
@@ -143,6 +143,19 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref<FeedingRecordPlanVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
+const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
+
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -168,6 +181,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -220,5 +234,11 @@ const handleExport = async () => {
 /** 初始化 **/
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener("resize", updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updatePlanTableMaxHeight)
 })
 </script>

src/views/mes/moldoperate/index.vue

@@ -84,7 +84,7 @@
       <el-tab-pane :label="t('MoldManagement.MoldOperate.tabUp')" name="1" />
       <el-tab-pane :label="t('MoldManagement.MoldOperate.tabDown')" name="2" />
     </el-tabs>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :max-height="planTableMaxHeight">
       <!-- <el-table-column label="ID" align="center" prop="id" /> -->
       <!-- <el-table-column label="操作类型" align="center" prop="operateType"  sortable /> -->
       <el-table-column :label="t('MoldManagement.MoldOperate.moldName')" align="center" prop="moldName" width="500px"  sortable />
@@ -148,6 +148,19 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref<MoldOperateVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
+const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
+
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -182,6 +195,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -241,5 +255,11 @@ const handleTabClick = (tab: TabsPaneContext) => {
 /** 初始化 **/
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener("resize", updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updatePlanTableMaxHeight)
 })
 </script>

src/views/mes/orgworker/index.vue

@@ -106,7 +106,7 @@
       <el-tab-pane label="塑封" name="sufeng" />
       <el-tab-pane label="制浆" name="zhijiang" />
     </el-tabs>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :max-height="planTableMaxHeight">
       <el-table-column label="ID"  prop="id" />
       <el-table-column
         label="工作日期"
@@ -192,6 +192,19 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref<OrgWorkerVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
+const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
+
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -215,6 +228,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -275,9 +289,15 @@ const getOrganizationTree = async () => {
 onMounted(async () => {
   await getList()
   await getOrganizationTree()
+  updatePlanTableMaxHeight()
+  window.addEventListener("resize", updatePlanTableMaxHeight)
   // 加载用户列表
   userList.value = await UserApi.getSimpleUserList()
 })
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updatePlanTableMaxHeight)
+})
 /** tab 切换 */
 let activeName = 'chengxing'
 const handleTabClick = (tab: TabsPaneContext) => {

src/views/mes/stockindetail/index.vue

@@ -81,7 +81,7 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :max-height="planTableMaxHeight">
       <!-- <el-table-column label="id" align="center" prop="id" /> -->
       <!-- <el-table-column label="入库单id" align="center" prop="stockInId" /> -->
       <el-table-column label="入库单编号" align="center" prop="stockInNo" sortable/>
@@ -153,8 +153,22 @@ const exportLoading = ref(false) // 导出的加载中
 const showAllFilters = ref(false)
 const filterCount = 4
 
+const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
+
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 
 /** 查询列表 */
@@ -166,6 +180,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -218,5 +233,11 @@ const handleExport = async () => {
 /** 初始化 **/
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener("resize", updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updatePlanTableMaxHeight)
 })
 </script>

src/views/mold/inspectionItems/index.vue

@@ -48,7 +48,7 @@ type="success" plain @click="handleExport" :loading="exportLoading"
   <!-- 列表 -->
   <ContentWrap>
     <el-table
-ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id"
+ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :max-height="planTableMaxHeight" row-key="id"
       @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" fixed="left" reserve-selection />
       <el-table-column :label="t('MoldManagement.MoldInspectionItems.index')" align="center" width="80" fixed="left">
@@ -126,6 +126,17 @@ const loading = ref(true) // 列表的加载中
 const list = ref<DvSubjectVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
 const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
 const selectedIds = ref<number[]>([])
 
 const handleSelectionChange = (rows: any[]) => {
@@ -148,6 +159,7 @@ const showAllFilters = ref(false)
 const filterCount = 3
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 
 const getTagDict = (dictType: string, value: any) => {
@@ -190,6 +202,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -256,6 +269,12 @@ const handleExport = async () => {
 onMounted(async () => {
   await dictStore.setDictMap()
   dictReady.value = true
-  getList()
+  await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener("resize", updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updatePlanTableMaxHeight)
 })
 </script>

src/views/mold/inspectionPlan/index.vue

@@ -68,6 +68,7 @@
       row-key="id"
       :stripe="true"
       :show-overflow-tooltip="true"
+      :max-height="planTableMaxHeight"
       @expand-change="handleExpandChange"
       @selection-change="handleSelectionChange"
     >
@@ -223,6 +224,7 @@ const showAllFilters = ref(false)
 const filterCount = 3
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 
 const queryParams = reactive({
@@ -236,6 +238,17 @@ const queryParams = reactive({
 const queryFormRef = ref()
 
 const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
 const selectedIds = ref<(number | string)[]>([])
 const handleSelectionChange = (rows: any[]) => {
   selectedIds.value = rows?.map((row) => row.id).filter((id) => id !== undefined && id !== null && id !== '') ?? []
@@ -295,6 +308,7 @@ const getList = async () => {
     total.value = normalized.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -390,6 +404,12 @@ const handleExport = async () => {
 onMounted(async () => {
   await dictStore.setDictMap()
   dictReady.value = true
-  getList()
+  await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener("resize", updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updatePlanTableMaxHeight)
 })
 </script>

src/views/mold/moldrepair/index.vue

@@ -110,7 +110,7 @@
   <ContentWrap v-if="!formVisible">
     <!-- 列表 -->
     <el-table
-      ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id"
+      ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :max-height="planTableMaxHeight" row-key="id"
       @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" fixed="left" reserve-selection />
       <el-table-column :label="t('MoldManagement.MoldRepair.repairCode')" align="center" prop="repairCode" min-width="150"  sortable />
@@ -219,6 +219,7 @@ const showAllFilters = ref(false)
 const filterCount = 9
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 const queryParams = reactive({
   pageNo: 1,
@@ -287,6 +288,17 @@ const isProcessedRepair = (value: any) => {
 }
 
 const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
 const selectedIds = ref<number[]>([])
 const handleSelectionChange = (rows: any[]) => {
   selectedIds.value = rows?.map((row) => row.id).filter((id) => id !== undefined) ?? []
@@ -307,6 +319,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -378,5 +391,11 @@ const handleExport = async () => {
 
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener("resize", updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updatePlanTableMaxHeight)
 })
 </script>

src/views/mold/repairItems/index.vue

@@ -68,6 +68,7 @@
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      :max-height="planTableMaxHeight"
       row-key="id"
       @selection-change="handleSelectionChange"
     >
@@ -140,8 +141,20 @@ const showAllFilters = ref(false)
 const filterCount = 4
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
 const selectedIds = ref<number[]>([])
 const formRef = ref()
 
@@ -164,6 +177,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -226,5 +240,11 @@ const handleExport = async () => {
 
 onMounted(async () => {
   await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener("resize", updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updatePlanTableMaxHeight)
 })
 </script>

src/views/mold/taskConfiguration/index.vue

@@ -67,10 +67,12 @@
 
   <ContentWrap>
     <el-table
+      ref="tableRef"
       v-loading="loading"
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      :max-height="planTableMaxHeight"
       @selection-change="handleSelectionChange"
     >
       <!-- <el-table-column type="selection" width="55" /> -->
@@ -155,6 +157,18 @@ const taskTypeOptions = [
 const loading = ref(true)
 const list = ref<TaskManagementVO[]>([])
 const total = ref(0)
+const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
 const exportLoading = ref(false)
 const selectedIds = ref<number[]>([])
 
@@ -177,6 +191,7 @@ const showAllFilters = ref(false)
 const filterCount = 3
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 
 const parseIdsValue = (value: any): string[] => {
@@ -213,6 +228,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -281,7 +297,13 @@ onMounted(async () => {
   try {
     await ensurePlanOptionsLoaded()
   } finally {
-    getList()
+    await getList()
   }
+  updatePlanTableMaxHeight()
+  window.addEventListener("resize", updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updatePlanTableMaxHeight)
 })
 </script>

src/views/mold/workOrderInquiry/index.vue

@@ -66,10 +66,12 @@
     </div>
 
     <el-table
+      ref="tableRef"
       v-loading="loading"
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      :max-height="planTableMaxHeight"
       @selection-change="handleSelectionChange"
       @row-click="handleRowClick"
     >
@@ -144,6 +146,18 @@ const jobResultOptions = [
 const loading = ref(true)
 const list = ref<TicketManagementVO[]>([])
 const total = ref(0)
+const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
 const selectedIds = ref<number[]>([])
 const cancelLoading = ref(false)
 const resultVisible = ref(false)
@@ -170,6 +184,7 @@ const showAllFilters = ref(false)
 const filterCount = 4
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 
 const getList = async () => {
@@ -180,6 +195,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -244,5 +260,11 @@ const handleResultSuccess = async () => {
 onMounted(async () => {
   await dictStore.setDictMap()
   await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener("resize", updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updatePlanTableMaxHeight)
 })
 </script>

src/views/system/dept/index.vue

@@ -53,10 +53,12 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table
+      ref="tableRef"
       v-loading="loading"
       :data="list"
       row-key="id"
       :default-expand-all="isExpandAll"
+      :max-height="planTableMaxHeight"
       v-if="refreshTable"
     >
       <el-table-column prop="name" :label="t('SystemManagement.Dept.name')"  sortable />
@@ -119,6 +121,19 @@ const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
 const list = ref() // 列表的数据
+const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
+
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 100,
@@ -138,6 +153,7 @@ const getList = async () => {
     list.value = handleTree(data)
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -184,9 +200,15 @@ const handleDelete = async (id: number) => {
 /** 初始化 **/
 onMounted(async () => {
   await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener("resize", updatePlanTableMaxHeight)
   // 获取用户列表
   userList.value = await UserApi.getSimpleUserList()
 })
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updatePlanTableMaxHeight)
+})
 </script>
 <style scoped>
 .dept-search-form :deep(.el-form-item__label) {

src/views/system/dict/index.vue

@@ -86,7 +86,7 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list">
+    <el-table ref="tableRef" v-loading="loading" :data="list" :max-height="planTableMaxHeight">
       <el-table-column align="center" :label="t('SystemManagement.Dict.id')" prop="id" />
       <el-table-column
         align="center"
@@ -171,6 +171,19 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 字典表格数据
+const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
+
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -191,6 +204,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -243,6 +257,12 @@ const handleExport = async () => {
 /** 初始化 **/
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener("resize", updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updatePlanTableMaxHeight)
 })
 </script>
 

src/views/system/menu/index.vue

@@ -75,10 +75,12 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table
+      ref="tableRef"
       v-if="refreshTable"
       v-loading="loading"
       :data="list"
       :default-expand-all="isExpandAll"
+      :max-height="planTableMaxHeight"
       row-key="id"
     >
       <el-table-column :show-overflow-tooltip="true" :label="t('SystemManagement.Menu.name')" prop="name" width="200"  sortable />
@@ -160,6 +162,19 @@ const message = useMessage() // 消息弹窗
 const loading = ref(true) // 列表的加载中
 const list = ref<any>([]) // 列表的数据
 const activeClientType = ref(1) // 客户端类型：1=Web，2=APP
+const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
+
 const queryParams = reactive({
   name: undefined,
   status: undefined,
@@ -177,6 +192,7 @@ const getList = async () => {
     list.value = handleTree(data)
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -258,5 +274,11 @@ const handleStatusChanged = async (menu: MenuVO, val: number) => {
 /** 初始化 **/
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener("resize", updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updatePlanTableMaxHeight)
 })
 </script>

src/views/system/post/index.vue

@@ -67,7 +67,7 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list">
+    <el-table ref="tableRef" v-loading="loading" :data="list" :max-height="planTableMaxHeight">
       <el-table-column :label="t('SystemManagement.Post.code')" align="center" prop="code"  sortable />
       <el-table-column :label="t('SystemManagement.Post.name')" align="center" prop="name"  sortable />
       <el-table-column :label="t('SystemManagement.Post.sort')" align="center" prop="sort" />
@@ -132,6 +132,19 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
+const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
+
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -151,6 +164,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -203,5 +217,11 @@ const handleExport = async () => {
 /** 初始化 **/
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener("resize", updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updatePlanTableMaxHeight)
 })
 </script>

src/views/system/role/index.vue

@@ -86,7 +86,7 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list">
+    <el-table ref="tableRef" v-loading="loading" :data="list" :max-height="planTableMaxHeight">
       <el-table-column align="center" :label="t('SystemManagement.Role.code')" prop="code"  sortable />
       <el-table-column align="center" :label="t('SystemManagement.Role.name')" prop="name"  sortable />
       <el-table-column :label="t('SystemManagement.Role.type')" align="center" prop="type" sortable>
@@ -182,6 +182,19 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
+const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
+
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -202,6 +215,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -265,6 +279,12 @@ const handleExport = async () => {
 
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener("resize", updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updatePlanTableMaxHeight)
 })
 </script>
 

src/views/system/user/index.vue

@@ -100,7 +100,7 @@
         </el-form>
       </ContentWrap>
       <ContentWrap>
-        <el-table v-loading="loading" :data="list">
+        <el-table ref="tableRef" v-loading="loading" :data="list" :max-height="planTableMaxHeight">
           <el-table-column
             :label="t('SystemManagement.User.workNo')"
             align="center"
@@ -228,6 +228,19 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数
+const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
+
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -252,6 +265,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -372,5 +386,11 @@ const handleRole = (row: UserApi.UserVO) => {
 /** 初始化 */
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener("resize", updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updatePlanTableMaxHeight)
 })
 </script>