解决管理功能的表前端 分页问题

This commit is contained in:
junleea 2025-05-10 14:55:31 +08:00
parent 751220d22b
commit 870a70222c
7 changed files with 246 additions and 33 deletions

View File

@ -183,6 +183,8 @@ const handleSelectionChange = (selection: any[]) => {
//
const handleCurrentChange = (val: number) => {
//console.log("currentPage:", val)
//console.log("props.changePage:", props.changePage)
props.changePage(val)
}

View File

@ -3,7 +3,7 @@
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" :refresh="getData" />
<div class="container">
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit" :genOperate="handleGenOperate" :refresh="getData">
:delFunc="handleDelete" :changePage="changePage" :currentPage="page.index" :editFunc="handleEdit" :genOperate="handleGenOperate" :refresh="getData">
<template #toolbarBtn>
<el-button type="warning" :icon="CirclePlusFilled" @click="visible_add = true">上传文件</el-button>
</template>
@ -38,6 +38,7 @@ import TableDetail from '@/components/table-detail.vue';
import TableSearch from '@/components/table-search.vue';
import UploadFile from '@/components/upload-file.vue';
import { FormOption, FormOptionList } from '@/types/form-option';
import { pa } from 'element-plus/es/locale';
const page = reactive({
@ -46,6 +47,7 @@ const page = reactive({
total: 122,
})
const tableData = ref<File[]>([]);
const allData = ref<File[]>([]);
//
const query = reactive({
@ -69,8 +71,19 @@ const handleSearch = async () => {
return;
}
let result = await FindUserFileService(req);
tableData.value = result.data;
page.total = result.data.length;
page.index = 1;
allData.value = result.data;
//
let start = (page.index - 1) * page.size;
let end = start + page.size;
if (end > page.total) {
end = page.total;
}
if (start > page.total) {
start = page.total;
}
tableData.value = result.data.slice(start, end);
};
//
@ -91,14 +104,34 @@ const getData = async () => {
type: "all"
}
let result = await FindUserFileService(req);
tableData.value = result.data;
page.total = result.data.length;
page.index = 1;
allData.value = result.data;
//
let start = (page.index - 1) * page.size;
let end = start + page.size;
if (end > page.total) {
end = page.total;
}
if (start > page.total) {
start = page.total;
}
tableData.value = result.data.slice(start, end);
};
getData();
const changePage = (val: number) => {
page.index = val;
getData();
//
let start = (page.index - 1) * page.size;
let end = start + page.size;
if (end > page.total) {
end = page.total;
}
if (start > page.total) {
start = page.total;
}
tableData.value = allData.value.slice(start, end);
};
//

View File

@ -3,7 +3,7 @@
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" :refresh="getData" />
<div class="container">
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit" :refresh="getData">
:delFunc="handleDelete" :changePage="changePage" :currentPage="page.index" :editFunc="handleEdit" :refresh="getData">
<template #toolbarBtn>
<el-button type="warning" :icon="CirclePlusFilled" @click="visible_add = true">新增</el-button>
</template>
@ -58,8 +58,19 @@ const handleSearch = async () => {
id: parseInt(query.name)
}
let result = await FindFunctionService(req);
tableData.value = result.data;
page.total = result.data.length;
page.index = 1;
allData.value = result.data;
//
let start = (page.index - 1) * page.size;
let end = start + page.size;
if (end > page.total) {
end = page.total;
}
if (start > page.total) {
start = page.total;
}
tableData.value = result.data.slice(start, end);
};
//
@ -79,6 +90,7 @@ const page = reactive({
total: 122,
})
const tableData = ref<Function[]>([]);
const allData = ref<Function[]>([]);
const model_select_opts = ref([]);
const getData = async () => {
let req={
@ -94,14 +106,34 @@ const getData = async () => {
})
}
let result = await FindFunctionService(req);
tableData.value = result.data;
page.total = 12;
page.total = result.data.length;
page.index = 1;
allData.value = result.data;
//
let start = (page.index - 1) * page.size;
let end = start + page.size;
if (end > page.total) {
end = page.total;
}
if (start > page.total) {
start = page.total;
}
tableData.value = result.data.slice(start, end);
};
getData();
const changePage = (val: number) => {
page.index = val;
getData();
//
let start = (page.index - 1) * page.size;
let end = start + page.size;
if (end > page.total) {
end = page.total;
}
if (start > page.total) {
start = page.total;
}
tableData.value = allData.value.slice(start, end);
};

View File

@ -3,7 +3,7 @@
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" :refresh="getData" />
<div class="container">
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit" :genOperate="handleGenOperate" :refresh="getData">
:delFunc="handleDelete" :changePage="changePage" :currentPage="page.index" :editFunc="handleEdit" :genOperate="handleGenOperate" :refresh="getData">
<template #toolbarBtn>
<el-button type="warning" :icon="CirclePlusFilled" @click="visible_add = true">新增</el-button>
</template>
@ -63,8 +63,19 @@ const handleSearch = async () => {
id: parseInt(query.name)
}
let result = await FindKnowledgeBaseService(req);
tableData.value = result.data;
page.total = result.data.length;
page.index = 1;
allData.value = result.data;
//
let start = (page.index - 1) * page.size;
let end = start + page.size;
if (end > page.total) {
end = page.total;
}
if (start > page.total) {
start = page.total;
}
tableData.value = result.data.slice(start, end);
};
//
@ -84,6 +95,7 @@ const page = reactive({
total: 122,
})
const tableData = ref<KBase[]>([]);
const allData = ref<KBase[]>([]);
const file_ids_select_opts = ref([]);
const getData = async () => {
let req={
@ -104,10 +116,10 @@ const getData = async () => {
value: userFile.ID
})
}
tableData.value = result.data;
allData.value = result.data;
//id
for (let i = 0; i < tableData.value.length; i++) {
let file_ids = JSON.parse(tableData.value[i].FileIDs.toString())
for (let i = 0; i < allData.value.length; i++) {
let file_ids = JSON.parse(allData.value[i].FileIDs.toString())
let file_id_list = []
for (let j = 0; j < file_ids.length; j++) {
file_id_list.push(file_ids[j]["file_id"])
@ -122,16 +134,37 @@ const getData = async () => {
}
}
}
tableData.value[i].FileNameList = file_name_list.join(",")
allData.value[i].FileNameList = file_name_list.join(",")
// console.log("file_name_list:", file_name_list)
}
page.total = result.data.length;
page.index = 1;
//
let start = (page.index - 1) * page.size;
let end = start + page.size;
if (end > page.total) {
end = page.total;
}
if (start > page.total) {
start = page.total;
}
tableData.value = allData.value.slice(start, end);
};
getData();
const changePage = (val: number) => {
page.index = val;
getData();
//
let start = (page.index - 1) * page.size;
let end = start + page.size;
if (end > page.total) {
end = page.total;
}
if (start > page.total) {
start = page.total;
}
tableData.value = allData.value.slice(start, end);
};
//

View File

@ -3,7 +3,7 @@
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" :refresh="getData" />
<div class="container">
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit" :genOperate="handleGenOperate" :refresh="getData">
:delFunc="handleDelete" :changePage="changePage2" :currentPage="page.currentPage" :editFunc="handleEdit" :genOperate="handleGenOperate" :refresh="getData">
<template #toolbarBtn>
<el-button type="warning" :icon="CirclePlusFilled" @click="visible_add = true">新增</el-button>
</template>
@ -38,6 +38,7 @@ import TableCustom from '@/components/table-custom.vue';
import TableDetail from '@/components/table-detail.vue';
import TableSearch from '@/components/table-search.vue';
import { FormOption, FormOptionList } from '@/types/form-option';
import { pa } from 'element-plus/es/locale';
//
@ -63,8 +64,23 @@ const handleSearch = async () => {
id: parseInt(query.name)
}
let result = await FindModelService(req);
tableData.value = result.data;
if (result["data"]==null){
ElMessage.error("没有该模型");
return;
}
page.total = result.data.length;
page.index = 1;
allData.value = result.data;
//
let start = (page.index - 1) * page.size;
let end = start + page.size;
if (end > page.total) {
end = page.total;
}
if (start > page.total) {
start = page.total;
}
tableData.value = result.data.slice(start, end);
};
//
@ -83,24 +99,56 @@ const page = reactive({
index: 1,
size: 10,
total: 122,
pageSizes: [10, 20, 30, 40],
currentPage: 1,
})
const tableData = ref<Model[]>([]);
const allData = ref<Model[]>([]);
const getData = async () => {
let req={
token: localStorage.getItem('token'),
type: "UserID"
}
let result = await FindModelService(req);
tableData.value = result.data;
page.total = result.data.length;
page.index = 1;
allData.value = result.data;
//
let start = (page.index - 1) * page.size;
let end = start + page.size;
if (end > page.total) {
end = page.total;
}
if (start > page.total) {
start = page.total;
}
tableData.value = result.data.slice(start, end);
};
getData();
const changePage = (val: number) => {
const changePage = async (val: number) => {
console.log("page index:", page.index);
page.index = val;
getData();
};
const changePage2 = async (val: number) => {
//console.log("page index:", page.index);
page.index = val;
//
let start = (page.index - 1) * page.size;
let end = start + page.size;
if (end > page.total) {
end = page.total;
}
if (start > page.total) {
start = page.total;
}
tableData.value = allData.value.slice(start, end);
page.currentPage = val;
};
//
let options = ref<FormOption>({
labelWidth: '100px',

View File

@ -3,7 +3,7 @@
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" :refresh="getData" />
<div class="container">
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit" :genOperate="handleGenOperate" :refresh="getData">
:delFunc="handleDelete" :changePage="changePage" :currentPage="page.index" :editFunc="handleEdit" :genOperate="handleGenOperate" :refresh="getData">
<template #toolbarBtn>
<el-button type="warning" :icon="CirclePlusFilled" @click="visible_add = true">新增</el-button>
</template>
@ -47,6 +47,7 @@ const page = reactive({
total: 122,
})
const tableData = ref<Session[]>([]);
const allData = ref<Session[]>([]);
//
const query = reactive({
@ -77,8 +78,19 @@ const handleSearch = async () => {
}
let result = await FindSessionService(req);
tableData.value = result.data;
page.total = result.data.length;
page.index = 1;
allData.value = result.data;
//
let start = (page.index - 1) * page.size;
let end = start + page.size;
if (end > page.total) {
end = page.total;
}
if (start > page.total) {
start = page.total;
}
tableData.value = result.data.slice(start, end);
};
//
@ -101,14 +113,35 @@ const getData = async () => {
session_type: -1,
}
let result = await FindSessionService(req);
tableData.value = result.data;
page.total = result.data.length;
page.index = 1;
allData.value = result.data;
//
let start = (page.index - 1) * page.size;
let end = start + page.size;
if (end > page.total) {
end = page.total;
}
if (start > page.total) {
start = page.total;
}
tableData.value = result.data.slice(start, end);
};
getData();
const changePage = (val: number) => {
page.index = val;
getData();
//
let start = (page.index - 1) * page.size;
let end = start + page.size;
if (end > page.total) {
end = page.total;
}
if (start > page.total) {
start = page.total;
}
tableData.value = allData.value.slice(start, end);
//page.currentPage = val;
};
const handleGenOperate = async (row: File) => {

View File

@ -3,7 +3,7 @@
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" :refresh="getData" />
<div class="container">
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
:delFunc="handleDelete" :changePage="changePage" :currentPage="page.index" :editFunc="handleEdit">
<!-- <template #toolbarBtn>
<el-button type="warning" :icon="CirclePlusFilled" @click="visible_add = true">新增</el-button>
</template> -->
@ -52,11 +52,11 @@ const handleSearch = async () => {
ElMessage.error('请输入用户名或ID');
return;
}
try{
search_id = parseInt(query.name);
}catch(e){
search_id = -1;
// query.name
if (isNaN(Number(query.name))) {
keyword_ = query.name;
} else {
search_id = parseInt(query.name);
}
let req={
token: localStorage.getItem('token'),
@ -64,8 +64,19 @@ const handleSearch = async () => {
keyword: keyword_,
}
let result = await SearchUserService(req);
tableData.value = result.data;
page.total = result.data.length;
page.index = 1;
allData.value = result.data;
//
let start = (page.index - 1) * page.size;
let end = start + page.size;
if (end > page.total) {
end = page.total;
}
if (start > page.total) {
start = page.total;
}
tableData.value = result.data.slice(start, end);
};
//
@ -85,6 +96,7 @@ const page = reactive({
total: 122,
})
const tableData = ref<UserInfo[]>([]);
const allData = ref<UserInfo[]>([]);
const getData = async () => {
let req={
token: localStorage.getItem('token'),
@ -92,14 +104,34 @@ const getData = async () => {
keyword: "_121",
}
let result = await SearchUserService(req);
tableData.value = result.data;
page.total = result.data.length;
page.index = 1;
allData.value = result.data;
//
let start = (page.index - 1) * page.size;
let end = start + page.size;
if (end > page.total) {
end = page.total;
}
if (start > page.total) {
start = page.total;
}
tableData.value = result.data.slice(start, end);
};
getData();
const changePage = (val: number) => {
page.index = val;
getData();
page.index = val;
//
let start = (page.index - 1) * page.size;
let end = start + page.size;
if (end > page.total) {
end = page.total;
}
if (start > page.total) {
start = page.total;
}
tableData.value = allData.value.slice(start, end);
};
//