|
@@ -8,13 +8,13 @@
|
|
position: relative;
|
|
position: relative;
|
|
"
|
|
"
|
|
v-if="dataList.length !== 0"
|
|
v-if="dataList.length !== 0"
|
|
|
|
+ @scroll="handleScroll"
|
|
|
|
+ ref="scrollContainer"
|
|
>
|
|
>
|
|
<div v-for="item in dataList" :key="item.id" class="listClass">
|
|
<div v-for="item in dataList" :key="item.id" class="listClass">
|
|
- <span style="
|
|
|
|
-
|
|
|
|
- padding: 10px 10px 10px 0;
|
|
|
|
- cursor: pointer;
|
|
|
|
- ">{{ item.page_number }}</span>
|
|
|
|
|
|
+ <span style="padding: 0px 10px 10px 0; cursor: pointer">{{
|
|
|
|
+ item.page_number
|
|
|
|
+ }}</span>
|
|
<!-- <img
|
|
<!-- <img
|
|
:src="item.url"
|
|
:src="item.url"
|
|
alt=""
|
|
alt=""
|
|
@@ -27,7 +27,7 @@
|
|
"
|
|
"
|
|
/> -->
|
|
/> -->
|
|
<div
|
|
<div
|
|
- style="padding-bottom: 20px"
|
|
|
|
|
|
+ style="margin-bottom: 20px"
|
|
v-html="item.content"
|
|
v-html="item.content"
|
|
@click="scrollToPage(item.page_number, item.coordinate)"
|
|
@click="scrollToPage(item.page_number, item.coordinate)"
|
|
></div>
|
|
></div>
|
|
@@ -43,7 +43,7 @@
|
|
<img :src="previewImageUrl" style="width: 100%" alt="Preview" />
|
|
<img :src="previewImageUrl" style="width: 100%" alt="Preview" />
|
|
</el-dialog>
|
|
</el-dialog>
|
|
<!-- 分页控件 -->
|
|
<!-- 分页控件 -->
|
|
- <!-- <div class="pagination">
|
|
|
|
|
|
+ <!-- <div class="pagination">
|
|
<el-pagination
|
|
<el-pagination
|
|
@current-change="handleCurrentChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="queryForm.page"
|
|
:current-page="queryForm.page"
|
|
@@ -53,6 +53,7 @@
|
|
>
|
|
>
|
|
</el-pagination>
|
|
</el-pagination>
|
|
</div> -->
|
|
</div> -->
|
|
|
|
+ <div v-if="loading" class="loading-more">加载中...</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
v-else
|
|
v-else
|
|
@@ -134,7 +135,7 @@ export default {
|
|
return {
|
|
return {
|
|
queryForm: {
|
|
queryForm: {
|
|
page: 1,
|
|
page: 1,
|
|
- page_size: 9999,
|
|
|
|
|
|
+ page_size: 30,
|
|
document_id: "",
|
|
document_id: "",
|
|
},
|
|
},
|
|
dataList: [],
|
|
dataList: [],
|
|
@@ -162,6 +163,9 @@ export default {
|
|
previewImageUrl: "",
|
|
previewImageUrl: "",
|
|
pdfPageNum: "",
|
|
pdfPageNum: "",
|
|
pdfCoordinate: "",
|
|
pdfCoordinate: "",
|
|
|
|
+ loading: false,
|
|
|
|
+ hasMore: true,
|
|
|
|
+ totalPages: 0,
|
|
};
|
|
};
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
@@ -255,19 +259,31 @@ export default {
|
|
},
|
|
},
|
|
|
|
|
|
search() {
|
|
search() {
|
|
|
|
+ this.loading = true;
|
|
|
|
+ this.queryForm.page = 1;
|
|
|
|
+ this.hasMore = true;
|
|
|
|
+ this.dataList = [];
|
|
|
|
+ this.totalPages = 0;
|
|
|
|
+
|
|
searchTaskInfo(this.queryForm)
|
|
searchTaskInfo(this.queryForm)
|
|
.then((res) => {
|
|
.then((res) => {
|
|
this.dataList = res.data.tasks;
|
|
this.dataList = res.data.tasks;
|
|
this.total = res.data.pagination.total_count;
|
|
this.total = res.data.pagination.total_count;
|
|
|
|
+ this.totalPages = res.data.pagination.num_pages;
|
|
|
|
+
|
|
|
|
+ if (this.totalPages <= 1) {
|
|
|
|
+ this.hasMore = false;
|
|
|
|
+ }
|
|
|
|
+
|
|
if (this.isFileViewable) {
|
|
if (this.isFileViewable) {
|
|
this.documentUrl = res.data.documentUrl;
|
|
this.documentUrl = res.data.documentUrl;
|
|
- } else {
|
|
|
|
- console.log("文件类型不支持预览");
|
|
|
|
- // 可以在这里添加下载按钮的逻辑
|
|
|
|
}
|
|
}
|
|
})
|
|
})
|
|
.catch((error) => {
|
|
.catch((error) => {
|
|
console.error("获取数据时出错:", error);
|
|
console.error("获取数据时出错:", error);
|
|
|
|
+ })
|
|
|
|
+ .finally(() => {
|
|
|
|
+ this.loading = false;
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
|
|
@@ -323,6 +339,56 @@ export default {
|
|
filePreviewComponent.scrollToPage(pageNumber);
|
|
filePreviewComponent.scrollToPage(pageNumber);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ handleScroll() {
|
|
|
|
+ const container = this.$refs.scrollContainer;
|
|
|
|
+ if (!container) return;
|
|
|
|
+
|
|
|
|
+ // 距离底部100px时触发加载
|
|
|
|
+ const bottomOffset = 100;
|
|
|
|
+ const scrollBottom =
|
|
|
|
+ container.scrollHeight - container.scrollTop - container.clientHeight;
|
|
|
|
+
|
|
|
|
+ if (scrollBottom < bottomOffset && !this.loading && this.hasMore) {
|
|
|
|
+ this.loadMore();
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ loadMore() {
|
|
|
|
+ if (this.loading || !this.hasMore) return;
|
|
|
|
+
|
|
|
|
+ if (this.totalPages && this.queryForm.page >= this.totalPages) {
|
|
|
|
+ this.hasMore = false;
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ this.loading = true;
|
|
|
|
+ this.queryForm.page += 1;
|
|
|
|
+
|
|
|
|
+ searchTaskInfo(this.queryForm)
|
|
|
|
+ .then((res) => {
|
|
|
|
+ const newTasks = res.data.tasks;
|
|
|
|
+ this.totalPages = res.data.pagination.num_pages;
|
|
|
|
+
|
|
|
|
+ // 确保先添加新数据
|
|
|
|
+ if (newTasks && newTasks.length > 0) {
|
|
|
|
+ this.dataList = [...this.dataList, ...newTasks];
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 然后再判断是否是最后一页
|
|
|
|
+ if (this.queryForm.page >= this.totalPages) {
|
|
|
|
+ this.hasMore = false;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ this.total = res.data.pagination.total_count;
|
|
|
|
+ })
|
|
|
|
+ .catch((error) => {
|
|
|
|
+ console.error("加载更多数据时出错:", error);
|
|
|
|
+ // 发生错误时重置页码
|
|
|
|
+ this.queryForm.page -= 1;
|
|
|
|
+ })
|
|
|
|
+ .finally(() => {
|
|
|
|
+ this.loading = false;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
},
|
|
},
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
@@ -335,8 +401,8 @@ export default {
|
|
}
|
|
}
|
|
.listClass {
|
|
.listClass {
|
|
display: flex;
|
|
display: flex;
|
|
|
|
+ justify-content: flex-start;
|
|
align-items: center;
|
|
align-items: center;
|
|
- justify-content: space-between;
|
|
|
|
}
|
|
}
|
|
.excel-table {
|
|
.excel-table {
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -387,5 +453,10 @@ export default {
|
|
::v-deep .el-dialog__header {
|
|
::v-deep .el-dialog__header {
|
|
cursor: move;
|
|
cursor: move;
|
|
}
|
|
}
|
|
|
|
+.loading-more {
|
|
|
|
+ text-align: center;
|
|
|
|
+ padding: 10px 0;
|
|
|
|
+ color: #909399;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|
|
|
|
|