aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: history页面列表滚动高度计算

Browse Source
This commit is contained in:
zhangyh
2025-09-17 15:48:21 +08:00
parent 873b02b343
commit 67d72f38a8
1 changed files with 111 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
src/views/HomeView/history111.vue
View File

@@ -2,88 +2,19 @@
<div class="history_page">
<div class="page_content">
<div class="page_content_body">
<!-- <HeaderComponent></HeaderComponent> -->
<div class="history_page_body flex">
<!-- <div class="history_table_search">
<div class="content_search_block generalModel_state">
<div class="generalModel_state_item">
<a-range-picker
class="range_picker"
v-model:value="rangePickerValue"
:placeholder="[$t('HistoryPage.StartDate'), $t('HistoryPage.EndDate')]"
valueFormat="YYYY-MM-DD"
>
<template #suffixIcon>
<span class="icon iconfont range_picker_icon icon-rili"></span>
</template>
</a-range-picker>
</div>
<div class="generalModel_state_item">
<input
class="search_input"
:placeholder="$t('LibraryPage.inputContent1')"
v-model="searchCollectionName"
@keydown.enter="searchHistoryList()"
/>
</div>
<div class="generalModel_state_item">
<el-cascader
:options="options"
filterable
v-model="value.labelValue"
:collapse-tags="true"
:show-all-levels="false"
:clearable="true"
:placeholder="$t('LibraryPage.Select')"
:max-collapse-tags="3"
:props="props"
:collapse-tags-tooltip="true"
ref="cascader"
popper-class="libraryPageCascader"
@visible-change="dropdownVisibleChange"
>
<template #empty>
<div>
{{ $t('LibraryPage.Select') }}
</div>
</template>
</el-cascader>
</div>
<div class="intersection">
<div
:title="$t('LibraryPage.unionSet')"
@click="() => (intersection = 1)"
v-show="intersection == 0"
:class="['icon', 'iconfont', 'icon-bingji']"
></div>
<div
:title="$t('LibraryPage.intersection')"
@click="() => (intersection = 0)"
v-show="intersection == 1"
:class="['icon', 'iconfont', 'icon-bingji1']"
></div>
</div>
<div
class="gallery_btn"
style="padding: 2rem; line-height: 1"
@click="searchHistoryList('')"
>
<span class="icon iconfont icon-sousuo"></span>
</div>
</div>
</div> -->
<div class="history_page_body">
<TableSearchBar
ref="tableSearchBar"
:button-list="presetList"
:placeholder="t('batchGeneration.Search')"
@search="searchHistoryList"
/>
<div class="history_table_content flex-1" ref="historyTable">
<div class="history_table_content" ref="historyTable">
<a-config-provider :locale="tableLocale">
<a-table
row-class-name="history_table_row"
:columns="columns"
:data-source="collectionList"
:scroll="{ y: historyTableHeight }"
@change="changePage"
:pagination="{
current: currentPage,
@@ -169,6 +100,7 @@ export default defineComponent({
const projectSetting: any = ref(null)
let renameData: any = ref({}) //修改名字选中的数据
let isShowMark: any = ref(false)
const tableSearchBar: any = ref(null)
// 根据store中的语言设置返回对应的ant-design-vue语言包
const tableLocale = computed(() => {
@@ -272,7 +204,8 @@ export default defineComponent({
enUS,
zhCN,
tableLocale,
projectSetting
projectSetting,
tableSearchBar
}
},
data() {
@@ -299,30 +232,20 @@ export default defineComponent({
groupDetails: {}, //每个collection的详情
collectionName: '', //选中的名字
searchCollectionName: '',
resizeObserver: null // ResizeObserver 实例
resizeObserver: null, // ResizeObserver 实例
resizeTimeout: null, // 防抖定时器
scrolled: true
}
},
mounted() {
let historyTable: any = this.$refs.historyTable
this.historyTableHeight = historyTable.clientHeight - 130
// 创建 ResizeObserver 监听 historyTable 高度变化
this.resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
const newHeight = entry.contentRect.height - 130
this.historyTableHeight = newHeight
}
async mounted() {
await this.getHistoryList()
this.$nextTick(() => {
this.calcScrollHeight()
this.setupResizeObserver()
})
// 开始观察 historyTable 元素
this.resizeObserver.observe(historyTable)
this.getHistoryList()
this.getClass()
},
beforeUnmount() {
// 清理 ResizeObserver
if (this.resizeObserver) {
this.resizeObserver.disconnect()
this.resizeObserver = null
@@ -379,7 +302,7 @@ export default defineComponent({
this.getHistoryList()
},
getHistoryList() {
async getHistoryList() {
this.isShowMark = true
let startDate: any = this.rangePickerValue
? new Date(this.rangePickerValue[0]).getTime()
@@ -402,7 +325,7 @@ export default defineComponent({
intersection: this.intersection
}
Https.axiosPost(Https.httpUrls.historyProject, data)
await Https.axiosPost(Https.httpUrls.historyProject, data)
.then(
// Https.axiosPost( Https.httpUrls.queryUserGroup, data).then(
(rv: any) => {
@@ -421,6 +344,11 @@ export default defineComponent({
this.total = rv.total
}
this.isShowMark = false
// 数据加载完成后重新计算滚动高度
this.$nextTick(() => {
this.calcScrollHeight()
})
}
)
.catch(res => {
@@ -545,6 +473,71 @@ export default defineComponent({
if (el) {
el.innerHTML = this.t('LibraryPage.NoLabel')
}
},
setupResizeObserver() {
// 清理之前的观察器
if (this.resizeObserver) {
this.resizeObserver.disconnect()
}
// 创建ResizeObserver来监听容器尺寸变化
this.resizeObserver = new ResizeObserver(entries => {
// 使用防抖来避免频繁调用
clearTimeout(this.resizeTimeout)
this.resizeTimeout = setTimeout(() => {
this.calcScrollHeight()
}, 100)
})
// 观察history_page容器
const historyPage = document.querySelector('.history_page')
if (historyPage) {
this.resizeObserver.observe(historyPage)
}
// 观察表格容器
const table = document.querySelector('.ant-table-wrapper')
if (table) {
this.resizeObserver.observe(table)
}
},
calcScrollHeight() {
// 表格可滚动距离=页面总高度-表格上方高度-表头高度-分页器高度
const historyPage = document.querySelector('.history_page')
const historyPageTop = historyPage?.offsetTop
const historyPageHeight = historyPage?.clientHeight
const table = document.querySelector('.ant-table-wrapper')
const tableTop = table?.offsetTop
const tableHeight = historyPageHeight - tableTop - 64
const tableHead = document.querySelector('.ant-table-thead')
const tableHeadHeight = tableHead?.clientHeight
// 计算表格内容区域的最大高度
const maxTableBodyHeight = tableHeight - tableHeadHeight
// 获取表格内容区域
const tableBody = document.querySelector('.ant-table-tbody')
if (tableBody) {
// 计算所有行的高度
const rows = tableBody.querySelectorAll('.ant-table-row')
let totalContentHeight = 0
rows.forEach(row => {
totalContentHeight += row.offsetHeight
})
if (totalContentHeight <= maxTableBodyHeight) {
this.scrolled = 'inherit'
} else {
this.scrolled = 'scroll'
}
this.historyTableHeight = maxTableBodyHeight + 'px'
} else {
// 如果表格内容还没渲染，先设置一个默认值
this.historyTableHeight = maxTableBodyHeight + 'px'
}
}
}
})
@@ -598,67 +591,34 @@ export default defineComponent({
.history_page_body {
width: 100%;
height: 100%;
padding: 3rem 0;
padding: 3rem 0 0;
box-sizing: border-box;
flex-direction: column;
.history_header {
font-size: 1.8rem;
height: 6.3rem;
line-height: 6.3rem;
font-weight: 500;
color: #333333;
}
// .history_table_search {
// display: flex;
// align-items: center;
// .ant-picker:hover,
// .ant-picker-focused {
// border-color: #d5d8df;
// }
// .content_search_block {
// display: flex;
// align-items: center;
// width: 140rem;
// .search_icon_block {
// width: 5.2rem;
// height: 2.8rem;
// line-height: 2.8rem;
// text-align: center;
// background: #343579;
// background-color: #39215b;
// cursor: pointer;
// border-radius: 2rem;
// margin-left: 3rem;
// .icon-sousuo {
// font-size: 1.6rem;
// color: #ffffff;
// }
// }
// .intersection {
// cursor: pointer;
// margin-right: 3rem;
// > div {
// font-size: 3rem;
// font-weight: 900;
// }
// }
// }
// }
.history_table_content {
margin-top: 2.6rem;
padding-top: 2.6rem;
width: 100%;
// height: calc(100% - 13.7rem);
// background: rgba(255, 255, 255, 0.6);
background: #f5f5f5;
padding-bottom: 3rem;
height: calc(100% - 4rem);
// padding-bottom: 3rem;
:deep(.ant-table) {
background: transparent;
:deep(.ant-table-wrapper) {
height: 100%;
.ant-spin-nested-loading {
&,
.ant-spin-container {
height: 100%;
}
}
}
:deep(.ant-spin-container) {
display: flex;
flex-direction: column;
.ant-table {
background: transparent;
flex: 1;
}
}
.ant-table-body {
@@ -670,6 +630,10 @@ export default defineComponent({
width: 0 !important;
}
}
:deep(.ant-table-content) {
max-height: v-bind(historyTableHeight);
overflow-y: v-bind(scrolled);
}
:deep(.ant-table-thead > tr > th) {
// background: #ffffff;