feat: add blank lines and jump pages

This commit is contained in:
cheng 2024-05-23 15:34:06 +08:00
parent 506dd9ed37
commit 50187a8ddc
2 changed files with 52 additions and 16 deletions

View File

@ -44,6 +44,7 @@ export type Triple = {
subject: string; subject: string;
relation: string; relation: string;
object: string; object: string;
is_empty: boolean;
}; };
export type GetTriplesResult = { export type GetTriplesResult = {

View File

@ -55,6 +55,7 @@
</el-table-column> </el-table-column>
<el-table-column label="操作"> <el-table-column label="操作">
<template #default="scope"> <template #default="scope">
<template v-if="!scope.row.is_empty">
<el-button <el-button
@click="openUpdateDialog(scope.row)" @click="openUpdateDialog(scope.row)"
type="primary" type="primary"
@ -68,6 +69,7 @@
>删除</el-button >删除</el-button
> >
</template> </template>
</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="pagination"> <div class="pagination">
@ -78,6 +80,16 @@
layout="prev, pager, next" layout="prev, pager, next"
:total="total" :total="total"
/> />
<div class="jump-to-page">
<el-input
v-model="goToPage"
placeholder="跳转到页"
type="number"
style="width: 100px; margin-left: 10px"
@keyup.enter="goToPageNumber"
/>
<el-button @click="goToPageNumber">跳转</el-button>
</div>
</div> </div>
<!-- 删除确认对话框 --> <!-- 删除确认对话框 -->
<el-dialog <el-dialog
@ -159,6 +171,7 @@ export default {
const limit = ref(10); const limit = ref(10);
const keyword = ref(""); const keyword = ref("");
const total = ref(0); const total = ref(0);
const goToPage = ref(null);
const deleteDialogVisible = ref(false); const deleteDialogVisible = ref(false);
const updateDialogVisible = ref(false); const updateDialogVisible = ref(false);
@ -186,6 +199,7 @@ export default {
const response = await getTraids(page.value, limit.value); const response = await getTraids(page.value, limit.value);
triples.value = response.data; triples.value = response.data;
total.value = response.total; total.value = response.total;
goToPage.value = null;
} catch (error) { } catch (error) {
console.error("Failed to fetch triples:", error); console.error("Failed to fetch triples:", error);
ElMessage.error("获取三元组失败"); ElMessage.error("获取三元组失败");
@ -212,6 +226,20 @@ export default {
fetchTriples(); fetchTriples();
}; };
const goToPageNumber = () => {
const pageNumber = parseInt(goToPage.value, 10);
if (
pageNumber &&
pageNumber > 0 &&
pageNumber <= Math.ceil(total.value / limit.value)
) {
page.value = pageNumber;
fetchTriples();
} else {
ElMessage.error("页码超出范围");
}
};
const confirmDelete = row => { const confirmDelete = row => {
deleteForm.value = { ...row }; deleteForm.value = { ...row };
deleteDialogVisible.value = true; deleteDialogVisible.value = true;
@ -300,6 +328,7 @@ export default {
limit, limit,
keyword, keyword,
total, total,
goToPage,
deleteDialogVisible, deleteDialogVisible,
updateDialogVisible, updateDialogVisible,
addDialogVisible, addDialogVisible,
@ -310,6 +339,7 @@ export default {
fetchTriples, fetchTriples,
searchTriples, searchTriples,
handlePageChange, handlePageChange,
goToPageNumber,
confirmDelete, confirmDelete,
deleteTraidConfirm, deleteTraidConfirm,
openUpdateDialog, openUpdateDialog,
@ -341,9 +371,6 @@ export default {
} }
.search-container { .search-container {
/* display: flex; */
/* align-items: center; */
float: right; float: right;
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -354,10 +381,18 @@ export default {
} }
.pagination { .pagination {
float: right; display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 20px; margin-top: 20px;
} }
.jump-to-page {
display: flex;
align-items: center;
margin-left: 10px;
}
.ellipsis { .ellipsis {
display: inline-block; display: inline-block;
max-width: 200px; max-width: 200px;