style: IoT和仓储管理-列表局部滚动

src/views/erp/product/product/index.vue

@@ -82,7 +82,7 @@
         <!-- 右侧产品表格 -->
         <div class="product-page-right">
           <ContentWrap>
-            <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :row-class-name="getRowClassName">
+            <el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :max-height="planTableMaxHeight" :row-class-name="getRowClassName">
               <el-table-column :label="t('FactoryModeling.ProductInformation.tableBarCodeColumn')" align="center" prop="barCode"
                 sortable />
               <el-table-column :label="t('FactoryModeling.ProductInformation.dialogCategoryTypeLabel')" align="center" prop="categoryType" sortable>
@@ -329,6 +329,18 @@ const { t } = useI18n()
 const loading = ref(true)
 const list = ref<ProductVO[]>([])
 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,
@@ -420,6 +432,7 @@ const getList = async () => {
     }
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -475,6 +488,12 @@ onMounted(async () => {
     queryParams.categoryType = typeOptions[0].value
   }
   await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 
 const bomFormRef = ref()

src/views/erp/purchase/supplier/index.vue

@@ -63,7 +63,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="名称" align="center" prop="name"  sortable />
       <el-table-column label="联系人" align="center" prop="contact" />
       <el-table-column label="手机号码" align="center" prop="mobile" />
@@ -126,6 +126,18 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref<SupplierVO[]>([]) // 列表的数据
 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,
@@ -145,6 +157,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -197,5 +210,11 @@ const handleExport = async () => {
 /** 初始化 **/
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

src/views/erp/stock/checkExecution/index.vue

@@ -90,9 +90,11 @@
 
   <ContentWrap>
     <el-table
+      ref="tableRef"
       v-loading="loading"
       :data="list"
       stripe
+      :max-height="planTableMaxHeight"
       row-key="id"
       @selection-change="handleSelectionChange"
     >
@@ -278,6 +280,18 @@ const message = useMessage()
 const loading = ref(false)
 const list = ref<StockCheckVO[]>([])
 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 warehouseList = ref<WarehouseVO[]>([])
 const selectionList = ref<StockCheckVO[]>([])
 const queryFormRef = ref()
@@ -319,6 +333,7 @@ const getList = async () => {
     total.value = data?.total || 0
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -455,5 +470,11 @@ onMounted(async () => {
   ])
   warehouseList.value = warehouses || []
   await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

src/views/erp/stock/checkRecord/index.vue

@@ -156,10 +156,12 @@
 
   <ContentWrap>
     <el-table
+      ref="tableRef"
       v-loading="loading"
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      :max-height="planTableMaxHeight"
       row-key="id"
       @selection-change="handleSelectionChange"
     >
@@ -250,6 +252,18 @@ const dictStore = useDictStoreWithOut()
 const loading = ref(false)
 const list = ref<StockCheckRecordVO[]>([])
 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 queryFormRef = ref()
 const productList = ref<ProductVO[]>([])
 const warehouseList = ref<WarehouseVO[]>([])
@@ -283,6 +297,7 @@ const filteredAreaList = computed(() => {
 
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 
 const buildQueryParams = () => {
@@ -302,6 +317,7 @@ const getList = async () => {
     total.value = data?.total || 0
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -414,6 +430,12 @@ onMounted(async () => {
     })
   ])
   await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>
 

src/views/erp/stock/in/index.vue

@@ -157,10 +157,12 @@
         </el-tabs>
 
         <el-table
+          ref="tableRef"
           v-loading="loading"
           :data="list"
           :stripe="true"
           :show-overflow-tooltip="true"
+          :max-height="planTableMaxHeight"
           @selection-change="handleSelectionChange"
         >
           <el-table-column width="30" :label="t('common.select')" type="selection" />
@@ -337,6 +339,18 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref<StockInVO[]>([]) // 列表的数据
 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,
@@ -367,6 +381,7 @@ const useInitialStatusFilter = ref(true)
 const filterCount = 7
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 const productList = ref<ProductVO[]>([]) // 产品列表
 const warehouseList = ref<WarehouseVO[]>([]) // 仓库列表
@@ -413,6 +428,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -568,12 +584,18 @@ watch(stockInTypeOptions, (options) => {
 onMounted(async () => {
   syncDefaultInType()
   await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
   // 加载产品、仓库列表、供应商
   productList.value = await ProductApi.getProductSimpleList()
   warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
   supplierList.value = await SupplierApi.getSupplierSimpleList()
   userList.value = await UserApi.getSimpleUserList()
 })
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
+})
 const handleTabClick = (tab: TabsPaneContext) => {
   queryParams.inType = String(tab.paneName || '')
   activeName.value = queryParams.inType

src/views/erp/stock/move/index.vue

@@ -132,10 +132,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 :label="t('action.select')" type="selection" />
@@ -298,6 +300,18 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref<StockMoveVO[]>([]) // 列表的数据
 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,
@@ -351,6 +365,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -474,11 +489,17 @@ const handleSelectionChange = (rows: StockMoveVO[]) => {
 /** 初始化 **/
 onMounted(async () => {
   await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
   // 加载产品、仓库列表、客户
   productList.value = await ProductApi.getProductSimpleList()
   warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
   userList.value = await UserApi.getSimpleUserList()
 })
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
+})
 // TODO 芋艿：可优化功能：列表界面，支持导入
 // TODO 芋艿：可优化功能：详情界面，支持打印
 </script>

src/views/erp/stock/out/index.vue

@@ -157,10 +157,12 @@
         </el-tabs>
 
         <el-table
+          ref="tableRef"
           v-loading="loading"
           :data="list"
           :stripe="true"
           :show-overflow-tooltip="true"
+          :max-height="planTableMaxHeight"
           @selection-change="handleSelectionChange"
         >
           <el-table-column width="30" :label="t('common.select')" type="selection" />
@@ -336,6 +338,18 @@ const { t } = useI18n() // 鍥介檯鍖?
 const loading = ref(true) // 鍒楄〃鐨勫姞杞戒腑
 const list = ref<StockOutVO[]>([]) // 鍒楄〃鐨勬暟鎹?
 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,
@@ -367,6 +381,7 @@ const useInitialStatusFilter = ref(true)
 const filterCount = 7
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 const productList = ref<ProductVO[]>([]) // 浜у搧鍒楄〃
 const warehouseList = ref<WarehouseVO[]>([]) // 浠撳簱鍒楄〃
@@ -412,6 +427,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -566,11 +582,17 @@ watch(stockOutTypeOptions, (options) => {
 onMounted(async () => {
   syncDefaultOutType()
   await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
   // 鍔犺浇浜у搧銆佷粨搴撳垪琛ㄣ€佷緵搴斿晢
   productList.value = await ProductApi.getProductSimpleList()
   warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
   userList.value = await UserApi.getSimpleUserList()
 })
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
+})
 const handleTabClick = (tab: TabsPaneContext) => {
   queryParams.outType = String(tab.paneName || '')
   activeName.value = queryParams.outType

src/views/erp/stock/packagingSolution/index.vue

@@ -60,10 +60,12 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table
+      ref="tableRef"
       v-loading="loading"
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      :max-height="planTableMaxHeight"
     >
       <el-table-column :label="t('ErpStock.PackagingScheme.code')" align="center" prop="code" sortable />
       <el-table-column :label="t('ErpStock.PackagingScheme.name')" align="center" prop="name" sortable />
@@ -133,6 +135,18 @@ const { t } = useI18n()
 const loading = ref(true)
 const list = ref<PackagingSchemeVO[]>([])
 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,
@@ -151,6 +165,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -185,5 +200,11 @@ const handleDelete = async (id: number) => {
 /** 初始化 **/
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

src/views/erp/stock/pallet/index.vue

@@ -57,7 +57,7 @@
   </ContentWrap>
 
   <ContentWrap>
-    <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">
       <el-table-column :label="t('ErpStock.Pallet.code')" align="center" prop="code" min-width="150" sortable />
       <el-table-column :label="t('ErpStock.Pallet.palletType')" align="center" prop="palletType" min-width="100">
         <template #default="scope">
@@ -128,6 +128,18 @@ const message = useMessage()
 const loading = ref(true)
 const list = ref<PalletVO[]>([])
 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,
@@ -151,6 +163,7 @@ const filteredAreaList = computed(() => {
 
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 
 const getWarehouseName = (warehouseId: number) => {
@@ -174,6 +187,7 @@ const getList = async () => {
     total.value = data.total ?? 0
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -218,5 +232,11 @@ onMounted(() => {
   getWarehouseList()
   getAreaList()
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

src/views/erp/stock/record/index.vue

@@ -65,7 +65,7 @@
       <el-tab-pane v-for="item in categoryTypeOptions" :key="item.value" :label="item.label"
         :name="String(item.value)" />
     </el-tabs>
-    <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"
       @selection-change="handleSelectionChange">
       <el-table-column width="30" :label="t('action.select')" type="selection" />
       <el-table-column :label="t('ErpStock.Record.bizNo')" align="center" prop="bizNo" min-width="180" sortable />
@@ -130,6 +130,18 @@ const dictStore = useDictStoreWithOut()
 const loading = ref(true) // 列表的加载中
 const list = ref<StockRecordVO[]>([]) // 列表的数据
 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: number
   pageSize: number
@@ -156,6 +168,7 @@ const activeName = ref('')
 const filterCount = 5
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 const productList = ref<ProductVO[]>([]) // 产品列表
 const warehouseList = ref<WarehouseVO[]>([]) // 仓库列表
@@ -212,6 +225,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -289,10 +303,16 @@ onActivated(() => {
 onMounted(async () => {
   await dictStore.setDictMap()
   await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
   // 加载产品、仓库列表
   productList.value = await ProductApi.getProductSimpleList()
   warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
 })
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
+})
 </script>
 
 <style scoped lang="scss">

src/views/erp/stock/stock/index.vue

@@ -80,10 +80,12 @@
       />
     </el-tabs>
     <el-table
+      ref="tableRef"
       v-loading="loading"
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      :max-height="planTableMaxHeight"
       row-key="id"
       @selection-change="handleSelectionChange"
     >
@@ -193,6 +195,18 @@ const dictStore = useDictStoreWithOut()
 const loading = ref(true) // 列表的加载中
 const list = ref<StockVO[]>([]) // 列表的数据
 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: number
   pageSize: number
@@ -281,6 +295,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -356,10 +371,16 @@ const handleSelectionChange = (rows: StockVO[]) => {
 onMounted(async () => {
   await dictStore.setDictMap()
   await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
   // 加载产品、仓库列表
   await getProductList()
   warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
 })
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
+})
 </script>
 
 <style scoped>

src/views/erp/stock/warehouse/index.vue

@@ -82,10 +82,12 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table
+      ref="tableRef"
       v-loading="loading"
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      :max-height="planTableMaxHeight"
       row-key="id"
       @selection-change="handleSelectionChange"
     >
@@ -267,6 +269,18 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref<WarehouseVO[]>([]) // 列表的数据
 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,
@@ -280,6 +294,7 @@ const showAllFilters = ref(false)
 const filterCount = 2
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 const detailDialogVisible = ref(false) // 详情弹窗的是否展示
 const detailData = ref<WarehouseVO | null>(null) // 详情的数据
@@ -294,6 +309,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -390,5 +406,11 @@ const handleSelectionChange = (rows: WarehouseVO[]) => {
 /** 初始化 **/
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

src/views/erp/warehousearea/index.vue

@@ -79,10 +79,12 @@
 
   <ContentWrap>
     <el-table
+      ref="tableRef"
       v-loading="loading"
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      :max-height="planTableMaxHeight"
       row-key="id"
     >
       <el-table-column :label="t('ErpStock.WarehouseArea.warehouseId')" align="center" prop="warehouseId" sortable>
@@ -147,6 +149,18 @@ const { t } = useI18n()
 const loading = ref(true)
 const list = ref<WarehouseAreaVO[]>([])
 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,
@@ -160,6 +174,7 @@ const showAllFilters = ref(false)
 const filterCount = 4
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 const warehouseList = ref<any[]>([])
 
@@ -175,6 +190,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -209,5 +225,11 @@ const handleDelete = async (id: number) => {
 onMounted(() => {
   getWarehouseList()
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

src/views/iot/device/index.vue

@@ -94,7 +94,7 @@
   <ContentWrap>
     <div v-show="currentView === 'table'" class="simple-table-view">
     <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" @row-click="handleShowAttribute">
       <el-table-column type="selection" width="55" reserve-selection />
       <el-table-column :label="t('DataCollection.Device.deviceCode')" align="left" prop="deviceCode" sortable/>
@@ -923,6 +923,17 @@ const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
 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 loading = ref(true) // 列表的加载中
 const showDetailForm =ref(true)
@@ -1085,6 +1096,7 @@ const getList = async (showLoading = true) => {
     if (showLoading) {
       loading.value = false
     }
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -1903,6 +1915,8 @@ const stopDeviceTimer = () => {
 onMounted(() => {
   getList()
   startDeviceTimer()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
 })
 
 onActivated(() => {
@@ -1915,6 +1929,7 @@ onDeactivated(() => {
 
 onBeforeUnmount(() => {
   stopDeviceTimer()
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 
 const deviceAlarmDialogVisible = ref(false)

src/views/iot/deviceattributetype/index.vue

@@ -93,6 +93,7 @@
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      :max-height="planTableMaxHeight"
       row-key="id"
       @selection-change="handleSelectionChange"
     >
@@ -158,7 +159,17 @@ const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
 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 loading = ref(true) // 列表的加载中
 const list = ref<DeviceAttributeTypeVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
@@ -187,6 +198,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -261,5 +273,11 @@ const handleExport = async () => {
 /** 初始化 **/
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

src/views/iot/historyData/index.vue

@@ -72,6 +72,8 @@
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      ref="tableRef"
+      :max-height="planTableMaxHeight"
       row-key="id"
       @selection-change="handleSelectionChange"
     >
@@ -155,12 +157,26 @@ const { t } = useI18n()
 
 const loading = ref(true)
 const list = ref<LineDeviceVO[]>([])
+
+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 total = ref(0)
 const exportLoading = ref(false)
 const showAllFilters = ref(false)
 const filterCount = 4
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 const queryParams = reactive({
   pageNo: 1,
@@ -217,6 +233,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -263,6 +280,12 @@ const handleSingleAnalyseView = (row: LineDeviceVO) => {
 
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 
 const activatedOnce = ref(false)

src/views/iot/realTimeMonitoring/index.vue

@@ -72,6 +72,8 @@
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      ref="tableRef"
+      :max-height="planTableMaxHeight"
       row-key="id"
       @selection-change="handleSelectionChange"
     >
@@ -160,12 +162,26 @@ const { t } = useI18n()
 
 const loading = ref(true)
 const list = ref<LineDeviceVO[]>([])
+
+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 total = ref(0)
 const exportLoading = ref(false)
 const showAllFilters = ref(false)
 const filterCount = 4
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 const queryParams = reactive({
   pageNo: 1,
@@ -217,6 +233,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -260,6 +277,12 @@ const handleExport = async () => {
 
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>
 

src/views/iot/runReport/index.vue

@@ -53,7 +53,7 @@
   </ContentWrap>
 
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id">
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :max-height="planTableMaxHeight" row-key="id">
       <el-table-column
         :label="t('DataCollection.RunReport.tableDeviceCodeColumn')"
         align="left"
@@ -150,6 +150,19 @@ const { t } = useI18n()
 
 const loading = ref(false)
 const list = ref<DeviceOperationRecordVO[]>([])
+
+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 total = ref(0)
 const exportLoading = ref(false)
 
@@ -191,6 +204,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -219,6 +233,12 @@ const handleExport = async () => {
 
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>