style: 工厂建模-列表局部滚动

src/views/erp/autocode/AutocodeIndex.vue

@@ -61,7 +61,7 @@
 
       <!-- 列表 -->
       <ContentWrap>
-        <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+        <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" ref="tableRef" :max-height="planTableMaxHeight">
           <!-- 子表的列表 -->
           <el-table-column type="expand">
             <template #default="scope">
@@ -149,6 +149,18 @@ const { t } = useI18n()
 const loading = ref(true)
 const list = ref<AutocodeRuleVO[]>([])
 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,
@@ -172,6 +184,7 @@ const formVisible = ref(false)
 /** 切换筛选框展开/折叠 */
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 
 const getBarcodeTypeLabel = (value: any) => {
@@ -190,6 +203,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -248,5 +262,11 @@ const handleExport = async () => {
 /** 初始化 **/
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

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

@@ -74,6 +74,8 @@
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      ref="tableRef"
+      :max-height="planTableMaxHeight"
       row-key="id"
       :default-expand-all="isExpandAll"
       v-if="refreshTable"
@@ -144,6 +146,19 @@ const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
 const list = ref<ProductCategoryVO[]>([]) // 列表的数据
+
+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 activeTab = ref('') // 激活的 tab
 const queryParams = reactive({
   name: undefined,
@@ -161,6 +176,7 @@ const getList = async () => {
     list.value = handleTree(data, 'id', 'parentId')
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -236,5 +252,11 @@ onMounted(() => {
     queryParams.type = typeOptions[0].value
   }
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

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

@@ -74,7 +74,7 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" ref="tableRef" :max-height="planTableMaxHeight">
       <el-table-column
         :label="t('FactoryModeling.ProductUnit.tableNameColumn')"
         align="center"
@@ -157,6 +157,19 @@ const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
 const list = ref<ProductUnitVO[]>([]) // 列表的数据
+
+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 queryParams = reactive({
   pageNo: 1,
@@ -176,6 +189,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -234,5 +248,11 @@ const handleExport = async () => {
 /** 初始化 **/
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

src/views/mes/bom/index.vue

@@ -89,7 +89,7 @@
 
       <!-- 列表 -->
       <ContentWrap>
-        <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+        <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" ref="tableRef" :max-height="planTableMaxHeight">
           <!-- 子表的列表 -->
           <el-table-column type="expand">
             <template #default="scope">
@@ -174,6 +174,18 @@ const { t } = useI18n()
 const loading = ref(true)
 const list = ref<BomVO[]>([])
 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,
@@ -195,6 +207,7 @@ const formVisible = ref(false)
 /** 切换筛选框展开/折叠 */
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 
 /** 查询列表 */
@@ -206,6 +219,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -256,6 +270,12 @@ const handleExport = async () => {
 /** 初始化 **/
 onMounted(async () => {
   await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
   productList.value = await ProductApi.getMesProductSimpleList({ categoryType: 1 })
 })
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
+})
 </script>

src/views/mes/customer/index.vue

@@ -112,7 +112,7 @@
       <el-tab-pane :label="t('MesCustomer.tabs.participant')" name="2" />
       <el-tab-pane :label="t('MesCustomer.tabs.subordinate')" name="3" />
     </el-tabs> -->
-    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true" ref="tableRef" :max-height="planTableMaxHeight">
       <el-table-column align="center" fixed="left" :label="t('MesCustomer.fields.name')" prop="name" width="160" sortable>
         <template #default="scope">
           <span>{{ scope.row.name }}</span>
@@ -237,6 +237,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,
@@ -267,6 +280,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -339,5 +353,11 @@ watch(
 /** 初始化 **/
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

src/views/mes/esopFile/index.vue

@@ -64,7 +64,7 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" ref="tableRef" :max-height="planTableMaxHeight">
 <!--      <el-table-column label="id" align="center" prop="id"  />
       <el-table-column label="配置编号" align="center" prop="configId" />-->
       <el-table-column :label="t('FactoryModeling.EsopFile.tableCodeColumn')"  align="center" prop="code" />
@@ -149,6 +149,18 @@ const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
 const list = ref<FileVO[]>([]) // 列表的数据
+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 queryParams = reactive({
   pageNo: 1,
@@ -176,6 +188,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -232,5 +245,11 @@ const handleExport = async () => {
 /** 初始化 **/
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

src/views/mes/organization/index.vue

@@ -126,6 +126,8 @@
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      ref="tableRef"
+      :max-height="planTableMaxHeight"
       row-key="id"
       :default-expand-all="isExpandAll"
       v-if="refreshTable"
@@ -209,6 +211,19 @@ const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
 const list = ref<OrganizationVO[]>([]) // 列表的数据
+
+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({
   code: undefined,
   name: undefined,
@@ -232,6 +247,7 @@ const filterCount = 4 // 筛选框数量（code、parentId、name、orgClass）
 /** 切换筛选框展开/折叠 */
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 
 /** 查询列表 */
@@ -242,6 +258,7 @@ const getList = async () => {
     list.value = handleTree(data, 'id', 'parentId')
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -305,6 +322,8 @@ const organizationTree = ref() // 树形结构
 /** 初始化 **/
 onMounted(async () => {
   await getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
   /** 获得产线工位树 */
   organizationTree.value = []
   const data = await OrganizationApi.getOrganizationList()
@@ -312,6 +331,10 @@ onMounted(async () => {
   root.children = handleTree(data, 'id', 'parentId')
   organizationTree.value.push(root)
 })
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
+})
 /** tab 切换 */
 let activeName = ''
 const handleTabClick = (tab: TabsPaneContext) => {

src/views/mes/printTemplate/index.vue

@@ -33,7 +33,7 @@
       <el-tab-pane label="打印" name="1" />
       <el-tab-pane label="报表" name="2" />
     </el-tabs>
-    <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" ref="tableRef" :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('TemplateManagement.PrintTemplate.templateCode')" align="center" prop="templateCode"
@@ -102,6 +102,19 @@ const { t } = useI18n()
 
 const loading = ref(true)
 const list = ref<PrintTemplateVO[]>([])
+
+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 queryParams = reactive({
   pageNo: 1,
@@ -122,6 +135,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -187,5 +201,11 @@ const handleSelectionChange = (rows: any[]) => {
 
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

src/views/mes/printconfig/index.vue

@@ -70,7 +70,7 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" ref="tableRef" :max-height="planTableMaxHeight">
       <!--      <el-table-column label="主键ID" align="center" prop="id" />-->
       <!--      <el-table-column type="selection" width="55" fixed="left" reserve-selection />-->
       <el-table-column :label="t('TemplateManagement.PrintConfig.hostName')" align="center" prop="hostName" />
@@ -161,6 +161,18 @@ const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
 const list = ref<ConfigVO[]>([]) // 列表的数据
+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) // 列表的总页数
 
 interface QueryParams {
@@ -431,6 +443,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -545,6 +558,12 @@ const handleExport = async () => {
 onMounted(async () => {
   await initCurrentHostName()
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>
 

src/views/mes/productionReport/index.vue

@@ -99,6 +99,8 @@
       :data="list"
       :stripe="true"
       :show-overflow-tooltip="true"
+      ref="tableRef"
+      :max-height="planTableMaxHeight"
     >
       <el-table-column :label="t('ProductionReport.Index.tableCode')" align="center" prop="code" width="200px" sortable />
       <el-table-column :label="t('ProductionReport.Index.tableOrderDate')" align="center" prop="orderDate" :formatter="dateFormatter2" sortable />
@@ -167,6 +169,18 @@ const message = useMessage()
 const loading = ref(true)
 const list = ref<TaskVO[]>([])
 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,
@@ -185,6 +199,7 @@ const filterCount = 4 // 筛选框数量
 /** 切换筛选框展开/折叠 */
 const toggleFilters = () => {
   showAllFilters.value = !showAllFilters.value
+  updatePlanTableMaxHeight()
 }
 
 const activeStatusTab = ref('')
@@ -210,6 +225,7 @@ const getList = async () => {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -248,6 +264,12 @@ const handleTabClick = (tab: any) => {
 
 onMounted(() => {
   getList()
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>