实现需求56 检查项目设置-》检查类型维护中的分页功能。

This commit is contained in:
HuangShun
2026-02-04 16:03:41 +08:00
parent a434dfdfff
commit 2c2bb1adb0
2 changed files with 167 additions and 62 deletions

View File

@@ -554,7 +554,26 @@
</div>
</template>
<!-- 分页区域 -->
<div class="pagination">
<div class="pagination" v-if="activeMenu === '检查类型'">
<button
class="pagination-btn"
:disabled="checkTypePagination.currentPage <= 1"
@click="handleCheckTypePageChange(checkTypePagination.currentPage - 1)"
>
</button>
<span>
{{ checkTypePagination.currentPage }}
</span>
<button
class="pagination-btn"
:disabled="checkTypePagination.currentPage >= checkTypePagination.totalPages"
@click="handleCheckTypePageChange(checkTypePagination.currentPage + 1)"
>
</button>
</div>
<div class="pagination" v-else>
<button class="pagination-btn"></button>
<span>1</span>
<button class="pagination-btn"></button>
@@ -630,6 +649,14 @@ const checkMethodData = reactive([]);
const checkPartData = reactive([]);
const packageData = reactive([]);
// 检查类型分页状态
const checkTypePagination = reactive({
currentPage: 1,
pageSize: 10,
totalItems: 0,
totalPages: 0
});
// 当前显示的表格数据
const tableData = computed(() => {
switch(activeMenu.value) {
@@ -734,7 +761,7 @@ function sortTableDataByParentChild(data) {
// 从数据库获取所有检查相关数据
onMounted(async () => {
try {
// 1. 获取科室分类字典,找到医学影像科对应的 value
// 1. 获取科室分类字典,找到"医学影像科"对应的 value
let imageClassValues = [];
try {
const dictRes = await getDicts('organization_class');
@@ -800,31 +827,8 @@ onMounted(async () => {
serviceScopeDicts.value = [];
}
// 获取检查类型表格数据(仍然从API获取)
const typeTableResponse = await listCheckType();
if (typeTableResponse && typeTableResponse.data) {
// 构建检查类型表格数据
checkTypeData.splice(0, checkTypeData.length);
const tempData = typeTableResponse.data.map((item) => ({
id: item.id, // 保存id字段用于判断是新增还是修改
row: '', // 行号将在排序后重新分配
code: item.code,
name: item.name,
type: item.type,
selected: item.selected ?? true,
department: item.department || '',
number: item.number || '999999',
remark: item.remark || '',
parentId: item.parentId || null, // 父行的 parentId 保持为 null
actions: true
}));
// 排序数据,确保父行在前,子行在父行后
const sortedData = sortTableDataByParentChild(tempData);
sortedData.forEach(item => {
checkTypeData.push(item);
});
}
// 获取检查类型表格数据(分页获取)
await loadCheckTypeDataWithPagination();
// 获取检查方法数据
const methodResponse = await listCheckMethod();
@@ -915,35 +919,8 @@ async function loadMenuData(menu) {
try {
switch(menu) {
case '检查类型':
// 清空检查类型数据
checkTypeData.splice(0, checkTypeData.length);
const typeResponse = await listCheckType();
if (typeResponse && typeResponse.data) {
// 确保data是数组类型
const typeData = Array.isArray(typeResponse.data) ? typeResponse.data : [];
// 获取所有不重复的检查类型值
checkTypes.value = [...new Set(typeData.map(item => item.type))];
// 构建临时数据
const tempData = typeData.map((item) => ({
id: item.id, // 保存id字段用于判断是新增还是修改
row: '', // 行号将在排序后重新分配
code: item.code,
name: item.name,
type: item.type,
selected: item.selected ?? true,
department: item.department || '',
number: item.number || '999999',
remark: item.remark || '',
parentId: item.parentId || null, // 父行的 parentId 保持为 null
actions: true
}));
// 排序数据,确保父行在前,子行在父行后
const sortedData = sortTableDataByParentChild(tempData);
sortedData.forEach(item => {
checkTypeData.push(item);
});
}
// 使用分页加载检查类型数据
await loadCheckTypeDataWithPagination();
break;
case '检查方法':
@@ -1067,6 +1044,86 @@ async function loadMenuData(menu) {
}
}
// 加载检查类型数据(支持分页)
async function loadCheckTypeDataWithPagination(pageNo = 1, pageSize = 10) {
try {
// 清空检查类型数据
checkTypeData.splice(0, checkTypeData.length);
const params = {
pageNo: pageNo,
pageSize: pageSize
};
const response = await listCheckType(params);
// 适配后端分页返回格式
let records = [];
let total = 0;
if (response && response.data) {
// 标准分页格式records(数据列表)、total(总记录数)
if (response.data.records) {
records = response.data.records;
total = response.data.total || 0;
checkTypePagination.currentPage = response.data.current || pageNo;
checkTypePagination.pageSize = response.data.size || pageSize;
checkTypePagination.totalPages = response.data.pages || Math.ceil(total / pageSize);
}
// 兼容直接返回数组的格式
else if (Array.isArray(response.data)) {
records = response.data;
total = records.length;
checkTypePagination.currentPage = pageNo;
checkTypePagination.pageSize = pageSize;
checkTypePagination.totalPages = Math.ceil(total / pageSize);
}
}
checkTypePagination.totalItems = total;
// 构建检查类型表格数据
if (records.length > 0) {
const tempData = records.map((item) => ({
id: item.id, // 保存id字段用于判断是新增还是修改
row: '', // 行号将在排序后重新分配
code: item.code,
name: item.name,
type: item.type,
selected: item.selected ?? true,
department: item.department || '',
number: item.number || '999999',
remark: item.remark || '',
parentId: item.parentId || null, // 父行的 parentId 保持为 null
actions: true
}));
// 排序数据,确保父行在前,子行在父行后
const sortedData = sortTableDataByParentChild(tempData);
sortedData.forEach(item => {
checkTypeData.push(item);
});
}
} catch (error) {
console.error('加载检查类型数据失败:', error);
ElMessage.error('加载检查类型数据失败,请检查网络或服务状态');
}
}
// 处理检查类型分页变化
async function handleCheckTypePageChange(pageNo) {
checkTypePagination.currentPage = pageNo;
await loadCheckTypeDataWithPagination(pageNo, checkTypePagination.pageSize);
}
// 处理检查类型每页大小变化
async function handleCheckTypePageSizeChange(pageSize) {
checkTypePagination.pageSize = pageSize;
checkTypePagination.currentPage = 1; // 重置到第一页
await loadCheckTypeDataWithPagination(1, pageSize);
}
// 处理行点击进入编辑状态
function handleRowClick(index) {
const item = tableData.value[index];