Commit 7728ba7aa1836ab30484c432d349d7605f8f52d8

Authored by ww
1 parent e0535b05

fix: data borad list page pagination not fixed page bottom

1 -<script lang="ts" setup>  
2 - import { Image } from 'ant-design-vue';  
3 -  
4 - const props = defineProps<{  
5 - value: {  
6 - src: string;  
7 - };  
8 - }>();  
9 -</script>  
10 -  
11 -<template>  
12 - <section>  
13 - <Image  
14 - :src="  
15 - props?.value?.src ||  
16 - 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'  
17 - "  
18 - />  
19 - </section>  
20 -</template>  
21 -  
22 -<style></style>  
@@ -11,8 +11,8 @@ @@ -11,8 +11,8 @@
11 import { dateUtil } from '/@/utils/dateUtil'; 11 import { dateUtil } from '/@/utils/dateUtil';
12 12
13 const props = defineProps<{ 13 const props = defineProps<{
14 - layout: PictureComponentLayout;  
15 - value: PictureComponentValue; 14 + layout?: PictureComponentLayout;
  15 + value?: PictureComponentValue;
16 radio: RadioRecord; 16 radio: RadioRecord;
17 }>(); 17 }>();
18 18
@@ -21,14 +21,13 @@ @@ -21,14 +21,13 @@
21 21
22 const getRadio = computed(() => { 22 const getRadio = computed(() => {
23 const { radio } = props.radio || DEFAULT_RADIO_RECORD; 23 const { radio } = props.radio || DEFAULT_RADIO_RECORD;
24 - console.log(props.radio);  
25 return radio; 24 return radio;
26 }); 25 });
27 26
28 const getWidth = computed(() => { 27 const getWidth = computed(() => {
29 const marign = 5; 28 const marign = 5;
30 const { width = 180 } = props.radio || {}; 29 const { width = 180 } = props.radio || {};
31 - return width - 5; 30 + return width - marign;
32 }); 31 });
33 </script> 32 </script>
34 33
@@ -14,12 +14,14 @@ @@ -14,12 +14,14 @@
14 import { DataBoardRecord } from '/@/api/dataBoard/model'; 14 import { DataBoardRecord } from '/@/api/dataBoard/model';
15 import { ViewType } from './config/panelDetail'; 15 import { ViewType } from './config/panelDetail';
16 import { useRouter } from 'vue-router'; 16 import { useRouter } from 'vue-router';
  17 + import { getBoundingClientRect } from '/@/utils/domUtils';
17 18
18 const ListItem = List.Item; 19 const ListItem = List.Item;
19 const router = useRouter(); 20 const router = useRouter();
20 21
21 const { createMessage, createConfirm } = useMessage(); 22 const { createMessage, createConfirm } = useMessage();
22 23
  24 + const listEL = ref();
23 const loading = ref(false); 25 const loading = ref(false);
24 const dataBoardList = ref<DataBoardRecord[]>([]); 26 const dataBoardList = ref<DataBoardRecord[]>([]);
25 //分页相关 27 //分页相关
@@ -118,8 +120,22 @@ @@ -118,8 +120,22 @@
118 router.push(`/data/board/detail/${record.id}`); 120 router.push(`/data/board/detail/${record.id}`);
119 }; 121 };
120 122
  123 + const handlePagenationPosition = () => {
  124 + const clientHeight = document.documentElement.clientHeight;
  125 + const rect = getBoundingClientRect(unref(listEL).$el!) as DOMRect;
  126 + const paginationHeight = 32 + 24 + 16;
  127 + const listContainerMarginBottom = 16;
  128 + const listContainerHeight =
  129 + clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
  130 + const listContainerEl = (unref(listEL).$el as HTMLElement).querySelector(
  131 + '.ant-spin-nested-loading'
  132 + ) as HTMLElement;
  133 + listContainerEl && (listContainerEl.style.minHeight = listContainerHeight + 'px');
  134 + };
  135 +
121 onMounted(() => { 136 onMounted(() => {
122 getDatasource(); 137 getDatasource();
  138 + handlePagenationPosition();
123 }); 139 });
124 </script> 140 </script>
125 141
@@ -131,6 +147,7 @@ @@ -131,6 +147,7 @@
131 </div> 147 </div>
132 <Spin :spinning="loading"> 148 <Spin :spinning="loading">
133 <List 149 <List
  150 + ref="listEL"
134 :pagination="paginationProp" 151 :pagination="paginationProp"
135 :data-source="dataBoardList" 152 :data-source="dataBoardList"
136 :grid="{ gutter: 5, column: 4, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 3 }" 153 :grid="{ gutter: 5, column: 4, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 3 }"