670 lines
22 KiB
TypeScript
670 lines
22 KiB
TypeScript
import { type MetaFunction } from "@remix-run/node";
|
||
import { useLoaderData, Link, useNavigate, useSearchParams, useRouteLoaderData } from "@remix-run/react";
|
||
import { useState, useEffect } from "react";
|
||
import indexStyles from "~/styles/pages/rule-groups_index.css?url";
|
||
import { Card } from "~/components/ui/Card";
|
||
import { Button } from "~/components/ui/Button";
|
||
import { StatusDot } from "~/components/ui/StatusDot";
|
||
import { Table } from "~/components/ui/Table";
|
||
import { FilterPanel, FilterSelect, SearchFilter } from "~/components/ui/FilterPanel";
|
||
// import { Pagination } from "~/components/ui/Pagination";
|
||
import { getRuleGroups, getChildGroups, type RuleGroup, deleteRuleGroup } from "~/api/evaluation_points/rule-groups";
|
||
import { toastService } from "~/components/ui";
|
||
|
||
export function links() {
|
||
return [{ rel: "stylesheet", href: indexStyles }];
|
||
}
|
||
|
||
export const meta: MetaFunction = () => {
|
||
return [
|
||
{ title: "评查点分组 - 中国烟草AI合同及卷宗审核系统" },
|
||
{ name: "description", content: "管理评查点分组，包括创建、编辑和删除分组" },
|
||
];
|
||
};
|
||
|
||
export async function loader({ request }: { request: Request }) {
|
||
try {
|
||
// 获取用户会话信息
|
||
const { getUserSession } = await import("~/api/login/auth.server");
|
||
const { frontendJWT } = await getUserSession(request);
|
||
|
||
const response = await getRuleGroups(frontendJWT);
|
||
if (response.error) {
|
||
throw new Error(response.error);
|
||
}
|
||
return Response.json({ groups: response.data, frontendJWT });
|
||
} catch (error) {
|
||
console.error('加载评查点分组失败:', error);
|
||
return Response.json({ groups: [] });
|
||
}
|
||
}
|
||
|
||
export default function RuleGroupsIndex() {
|
||
const { groups: initialGroups, frontendJWT } = useLoaderData<typeof loader>();
|
||
const rootData = useRouteLoaderData("root") as { userRole: string };
|
||
const navigate = useNavigate();
|
||
const [searchParams, setSearchParams] = useSearchParams();
|
||
const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
|
||
const [groups, setGroups] = useState<RuleGroup[]>(initialGroups || []);
|
||
const [loading, setLoading] = useState<Record<string, boolean>>({});
|
||
const [filteredChildrenMap, setFilteredChildrenMap] = useState<Record<string, RuleGroup[]>>({});
|
||
const [initialLoading, setInitialLoading] = useState<boolean>(true);
|
||
const userRole = rootData?.userRole || 'common';
|
||
const hasEditPermission = userRole.toLowerCase().includes('provin');
|
||
|
||
// 初始加载时自动加载所有子分组
|
||
useEffect(() => {
|
||
const loadAllChildGroups = async () => {
|
||
if (!initialGroups || initialGroups.length === 0) {
|
||
setInitialLoading(false);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 创建一个加载状态对象，标记所有父分组正在加载
|
||
const loadingState: Record<string, boolean> = {};
|
||
initialGroups.forEach((group: RuleGroup) => {
|
||
loadingState[group.id] = true;
|
||
});
|
||
setLoading(loadingState);
|
||
|
||
// 并行加载所有父分组的子分组
|
||
const promises = initialGroups.map(async (group: RuleGroup) => {
|
||
try {
|
||
const response = await getChildGroups(group.id, frontendJWT);
|
||
if (response.error) {
|
||
console.error(`加载分组 ${group.id} 的子分组失败:`, response.error);
|
||
return { parentId: group.id, children: [] };
|
||
}
|
||
return { parentId: group.id, children: response.data };
|
||
} catch (error) {
|
||
console.error(`加载分组 ${group.id} 的子分组出错:`, error);
|
||
return { parentId: group.id, children: [] };
|
||
}
|
||
});
|
||
|
||
const results = await Promise.all(promises);
|
||
|
||
// 更新分组数据
|
||
setGroups(prev => {
|
||
const newGroups = [...prev];
|
||
results.forEach(({ parentId, children }) => {
|
||
const parentIndex = newGroups.findIndex(g => g.id === parentId);
|
||
if (parentIndex !== -1) {
|
||
newGroups[parentIndex] = {
|
||
...newGroups[parentIndex],
|
||
children
|
||
};
|
||
}
|
||
});
|
||
return newGroups;
|
||
});
|
||
|
||
// 展开所有父分组
|
||
setExpandedGroups(initialGroups.map((group: RuleGroup) => group.id));
|
||
} catch (error) {
|
||
console.error('自动加载所有子分组失败:', error);
|
||
} finally {
|
||
// 清除所有加载状态
|
||
setLoading({});
|
||
setInitialLoading(false);
|
||
}
|
||
};
|
||
|
||
loadAllChildGroups();
|
||
}, [initialGroups]);
|
||
|
||
// 处理展开/收起
|
||
const toggleGroup = async (groupId: string) => {
|
||
if (expandedGroups.includes(groupId)) {
|
||
// 收起分组
|
||
setExpandedGroups(prev => prev.filter(id => id !== groupId));
|
||
return;
|
||
}
|
||
|
||
// 展开分组
|
||
setLoading(prev => ({ ...prev, [groupId]: true }));
|
||
try {
|
||
const parentGroup = groups.find(g => g.id === groupId);
|
||
|
||
// 如果已经加载过子分组，直接展开
|
||
if (parentGroup && parentGroup.children && parentGroup.children.length > 0) {
|
||
setExpandedGroups(prev => [...prev, groupId]);
|
||
|
||
// 应用现有的过滤条件到已加载的子分组
|
||
const nameFilter = searchParams.get('name') || '';
|
||
const codeFilter = searchParams.get('code') || '';
|
||
const statusFilter = searchParams.get('is_enabled') || '';
|
||
|
||
if ((nameFilter || codeFilter || statusFilter) && parentGroup.children) {
|
||
applyFiltersToChildren(groupId, parentGroup.children);
|
||
}
|
||
|
||
setLoading(prev => ({ ...prev, [groupId]: false }));
|
||
return;
|
||
}
|
||
|
||
// 否则加载子分组
|
||
const response = await getChildGroups(groupId, frontendJWT);
|
||
if (response.error) {
|
||
throw new Error(response.error);
|
||
}
|
||
|
||
// 更新分组数据
|
||
setGroups(prev => prev.map(group => {
|
||
if (group.id === groupId) {
|
||
return {
|
||
...group,
|
||
children: response.data
|
||
};
|
||
}
|
||
return group;
|
||
}));
|
||
|
||
setExpandedGroups(prev => [...prev, groupId]);
|
||
|
||
// 应用现有的过滤条件到新加载的子分组
|
||
const nameFilter = searchParams.get('name') || '';
|
||
const codeFilter = searchParams.get('code') || '';
|
||
const statusFilter = searchParams.get('is_enabled') || '';
|
||
|
||
if ((nameFilter || codeFilter || statusFilter) && response.data) {
|
||
applyFiltersToChildren(groupId, response.data);
|
||
}
|
||
} catch (error) {
|
||
console.error('加载子分组失败:', error);
|
||
} finally {
|
||
setLoading(prev => ({ ...prev, [groupId]: false }));
|
||
}
|
||
};
|
||
|
||
// 展开/收起全部
|
||
const toggleAll = async (expand: boolean) => {
|
||
if (expand) {
|
||
// 展开所有分组
|
||
const expandedIds = groups.map(g => g.id);
|
||
setExpandedGroups(expandedIds);
|
||
} else {
|
||
setExpandedGroups([]);
|
||
}
|
||
};
|
||
|
||
// 处理删除分组
|
||
const handleDeleteGroup = async (groupId: string) => {
|
||
if (confirm("确定要删除该分组吗？此操作将同时删除该分组下的所有评查点，且不可恢复。")) {
|
||
try {
|
||
const result = await deleteRuleGroup(groupId, frontendJWT);
|
||
if (result.success) {
|
||
// 从本地状态中移除被删除的分组
|
||
setGroups(prev => {
|
||
// 如果是一级分组，直接过滤掉
|
||
const filteredGroups = prev.filter(g => g.id !== groupId);
|
||
|
||
// 如果是二级分组，需要从父分组的 children 中移除
|
||
return filteredGroups.map(group => {
|
||
if (group.children) {
|
||
return {
|
||
...group,
|
||
children: group.children.filter(child => child.id !== groupId)
|
||
};
|
||
}
|
||
return group;
|
||
});
|
||
});
|
||
|
||
// 如果被删除的分组当前是展开状态，从展开列表中移除
|
||
setExpandedGroups(prev => prev.filter(id => id !== groupId));
|
||
|
||
// 显示成功消息
|
||
// alert('删除成功');
|
||
toastService.success('删除成功')
|
||
} else {
|
||
toastService.error(`删除失败: ${result.error}`);
|
||
console.error(`删除失败: ${result.error}`);
|
||
}
|
||
} catch (error) {
|
||
console.error('删除分组失败:', error);
|
||
toastService.error('删除分组失败，请稍后重试');
|
||
}
|
||
}
|
||
};
|
||
|
||
// 处理搜索名称
|
||
const handleNameSearch = (value: string) => {
|
||
const newParams = new URLSearchParams(searchParams);
|
||
if (value) {
|
||
newParams.set('name', value);
|
||
} else {
|
||
newParams.delete('name');
|
||
}
|
||
newParams.set('page', '1');
|
||
setSearchParams(newParams);
|
||
};
|
||
|
||
// 处理搜索编码
|
||
const handleCodeSearch = (value: string) => {
|
||
const newParams = new URLSearchParams(searchParams);
|
||
if (value) {
|
||
newParams.set('code', value);
|
||
} else {
|
||
newParams.delete('code');
|
||
}
|
||
newParams.set('page', '1');
|
||
setSearchParams(newParams);
|
||
};
|
||
|
||
// 处理状态筛选变更
|
||
const handleStatusChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||
const { value } = e.target;
|
||
const newParams = new URLSearchParams(searchParams);
|
||
if (value) {
|
||
newParams.set('is_enabled', value);
|
||
} else {
|
||
newParams.delete('is_enabled');
|
||
}
|
||
newParams.set('page', '1');
|
||
setSearchParams(newParams);
|
||
};
|
||
|
||
// 处理重置筛选
|
||
const handleReset = () => {
|
||
setSearchParams(new URLSearchParams());
|
||
setFilteredChildrenMap({});
|
||
|
||
// 清空输入框内容（通过DOM操作）
|
||
const nameInput = document.querySelector('input[placeholder="请输入分组名称"]') as HTMLInputElement;
|
||
const codeInput = document.querySelector('input[placeholder="请输入分组编码"]') as HTMLInputElement;
|
||
const statusSelect = document.querySelector('select[name="is_enabled"]') as HTMLSelectElement;
|
||
|
||
if (nameInput) nameInput.value = '';
|
||
if (codeInput) codeInput.value = '';
|
||
if (statusSelect) statusSelect.value = '';
|
||
};
|
||
|
||
// 应用筛选条件到子分组
|
||
const applyFiltersToChildren = (parentId: string, children: RuleGroup[]) => {
|
||
const nameFilter = searchParams.get('name') || '';
|
||
const codeFilter = searchParams.get('code') || '';
|
||
const statusFilter = searchParams.get('is_enabled') || '';
|
||
|
||
|
||
if (!nameFilter && !codeFilter && !statusFilter) {
|
||
setFilteredChildrenMap(prev => ({...prev, [parentId]: []}));
|
||
return;
|
||
}
|
||
|
||
const filteredChildren = children.filter(child => {
|
||
// 筛选名称
|
||
if (nameFilter && !child.name.toLowerCase().includes(nameFilter.toLowerCase())) {
|
||
return false;
|
||
}
|
||
|
||
// 筛选编码
|
||
if (codeFilter && (!child.code || !child.code.toLowerCase().includes(codeFilter.toLowerCase()))) {
|
||
return false;
|
||
}
|
||
|
||
// 筛选状态
|
||
if (statusFilter) {
|
||
const isEnabled = statusFilter === 'true';
|
||
if (child.is_enabled !== isEnabled) {
|
||
return false;
|
||
}
|
||
}
|
||
|
||
return true;
|
||
});
|
||
|
||
setFilteredChildrenMap(prev => ({...prev, [parentId]: filteredChildren}));
|
||
};
|
||
|
||
// 当筛选条件变化时，重新计算过滤结果
|
||
useEffect(() => {
|
||
const nameFilter = searchParams.get('name') || '';
|
||
const codeFilter = searchParams.get('code') || '';
|
||
const statusFilter = searchParams.get('is_enabled') || '';
|
||
|
||
if (!nameFilter && !codeFilter && !statusFilter) {
|
||
setFilteredChildrenMap({});
|
||
return;
|
||
}
|
||
|
||
// 检查所有已加载的子分组
|
||
groups.forEach(group => {
|
||
if (group.children && group.children.length > 0) {
|
||
applyFiltersToChildren(group.id, group.children);
|
||
}
|
||
});
|
||
|
||
// 查找匹配的子分组，自动展开它们的父级
|
||
const parentsToExpand: string[] = [];
|
||
|
||
groups.forEach(group => {
|
||
if (group.children && group.children.length > 0) {
|
||
const hasMatchingChild = group.children.some(child => {
|
||
const nameMatch = !nameFilter || child.name.toLowerCase().includes(nameFilter.toLowerCase());
|
||
const codeMatch = !codeFilter || (child.code && child.code.toLowerCase().includes(codeFilter.toLowerCase()));
|
||
const statusMatch = !statusFilter || (statusFilter === 'true' ? child.is_enabled : !child.is_enabled);
|
||
|
||
return nameMatch && codeMatch && statusMatch;
|
||
});
|
||
|
||
if (hasMatchingChild && !expandedGroups.includes(group.id)) {
|
||
parentsToExpand.push(group.id);
|
||
}
|
||
}
|
||
});
|
||
|
||
if (parentsToExpand.length > 0) {
|
||
setExpandedGroups(prev => [...prev, ...parentsToExpand]);
|
||
}
|
||
}, [searchParams, groups]);
|
||
|
||
// 检查父级分组是否匹配筛选条件
|
||
const parentMatchesFilter = (group: RuleGroup): boolean => {
|
||
const nameFilter = searchParams.get('name') || '';
|
||
const codeFilter = searchParams.get('code') || '';
|
||
const statusFilter = searchParams.get('is_enabled') || '';
|
||
|
||
// 筛选名称
|
||
if (nameFilter && !group.name.toLowerCase().includes(nameFilter.toLowerCase())) {
|
||
return false;
|
||
}
|
||
|
||
// 筛选编码
|
||
if (codeFilter && (!group.code || !group.code.toLowerCase().includes(codeFilter.toLowerCase()))) {
|
||
return false;
|
||
}
|
||
|
||
// 筛选状态
|
||
if (statusFilter) {
|
||
const isEnabled = statusFilter === 'true';
|
||
if (group.is_enabled !== isEnabled) {
|
||
return false;
|
||
}
|
||
}
|
||
|
||
return true;
|
||
};
|
||
|
||
// 检查父级分组是否有匹配的子分组
|
||
const hasMatchingChildren = (parentId: string): boolean => {
|
||
const filteredChildren = filteredChildrenMap[parentId];
|
||
return filteredChildren && filteredChildren.length > 0;
|
||
};
|
||
|
||
// 处理表格数据，包括父子级关系
|
||
const processedData = groups.flatMap(group => {
|
||
const parentMatches = parentMatchesFilter(group);
|
||
const hasMatched = hasMatchingChildren(group.id);
|
||
|
||
// 如果有筛选条件但父级和子级都不匹配，则不显示
|
||
const nameFilter = searchParams.get('name') || '';
|
||
const codeFilter = searchParams.get('code') || '';
|
||
const statusFilter = searchParams.get('is_enabled') || '';
|
||
const hasFilters = nameFilter || codeFilter || statusFilter;
|
||
|
||
if (hasFilters && !parentMatches && !hasMatched) {
|
||
return [];
|
||
}
|
||
|
||
// 先添加父级分组
|
||
const result: (RuleGroup & { isParent?: boolean, parentId?: string })[] = [
|
||
{ ...group, isParent: true }
|
||
];
|
||
|
||
// 如果有子级分组并且当前已展开，则添加子级分组
|
||
if (group.children && expandedGroups.includes(group.id)) {
|
||
// 如果有筛选条件并且有过滤后的子分组，则显示过滤后的子分组
|
||
if (hasFilters && filteredChildrenMap[group.id]) {
|
||
filteredChildrenMap[group.id].forEach(child => {
|
||
result.push({ ...child, parentId: group.id });
|
||
});
|
||
}
|
||
// 否则显示所有子分组
|
||
else if (!hasFilters) {
|
||
group.children.forEach(child => {
|
||
result.push({ ...child, parentId: group.id });
|
||
});
|
||
}
|
||
}
|
||
|
||
return result;
|
||
});
|
||
|
||
// 计算一级分组的评查点数量（累加其所有二级分组的评查点数量）
|
||
const calculateTotalRuleCount = (record: RuleGroup & { isParent?: boolean, parentId?: string }) => {
|
||
// 如果是二级分组，直接返回其评查点数量
|
||
if (!record.isParent) {
|
||
return record.ruleCount || 0;
|
||
}
|
||
|
||
// 如果是一级分组，累加其所有子分组的评查点数量
|
||
let totalCount = 0;
|
||
if (record.children && record.children.length > 0) {
|
||
totalCount = record.children.reduce((sum, child) => sum + (child.ruleCount || 0), 0);
|
||
}
|
||
|
||
return totalCount;
|
||
};
|
||
|
||
// 定义表格列配置
|
||
const columns = [
|
||
{
|
||
title: "分组名称",
|
||
key: "name",
|
||
width: "35%",
|
||
render: (_: unknown, record: RuleGroup & { isParent?: boolean, parentId?: string }) => (
|
||
<div className={`flex items-center ${!record.isParent ? 'ml-8' : ''}`}>
|
||
{record.isParent && (
|
||
<span
|
||
className="expand-icon"
|
||
onClick={() => toggleGroup(record.id)}
|
||
role="button"
|
||
tabIndex={0}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
e.preventDefault();
|
||
toggleGroup(record.id);
|
||
}
|
||
}}
|
||
>
|
||
{loading[record.id] ? (
|
||
<i className="ri-loader-4-line animate-spin"></i>
|
||
) : (
|
||
<i className={`ri-arrow-${expandedGroups.includes(record.id) ? 'down' : 'right'}-s-line`}></i>
|
||
)}
|
||
</span>
|
||
)}
|
||
<Link
|
||
to={`/rule-groups/new?id=${record.id}`}
|
||
className="group-name-link flex items-center ml-1 text-green-800"
|
||
>
|
||
<i className={`${record.isParent ? 'ri-folder-line' : 'ri-file-list-line'} mr-1 text-green-800`}></i> {record.name}
|
||
</Link>
|
||
<span className={`group-badge ${record.isParent ? 'parent-badge' : 'child-badge'}`}>
|
||
{record.isParent ? '一级分组' : '二级分组'}
|
||
</span>
|
||
</div>
|
||
)
|
||
},
|
||
{
|
||
title: "分组编码",
|
||
key: "code",
|
||
render: (_: unknown, record: RuleGroup) => (
|
||
<span>{record.code || '-'}</span>
|
||
)
|
||
},
|
||
{
|
||
title: "评查点数量",
|
||
key: "ruleCount",
|
||
width: "12%",
|
||
render: (_: unknown, record: RuleGroup & { isParent?: boolean, parentId?: string }) => (
|
||
<div className="badge bg-primary text-white">
|
||
{/* <button onClick={() => navigate(`/rules/list?${!record.isParent ? `ruleType=${record.parentId}&groupId=${record.id}` : `ruleType=${record.id}`}`)} className="badge bg-primary text-white"> */}
|
||
<span className="text-xs">{calculateTotalRuleCount(record)}</span>
|
||
</div>
|
||
)
|
||
},
|
||
{
|
||
title: "状态",
|
||
key: "is_enabled",
|
||
render: (_: unknown, record: RuleGroup) => (
|
||
<StatusDot
|
||
status={record.is_enabled ? 'success' : 'error'}
|
||
text={record.is_enabled ? '启用' : '禁用'}
|
||
align="left"
|
||
/>
|
||
)
|
||
},
|
||
{
|
||
title: "创建时间",
|
||
key: "createdAt",
|
||
width: "15%",
|
||
render: (_: unknown, record: RuleGroup) => (
|
||
<span>{record.createdAt || '-'}</span>
|
||
)
|
||
},
|
||
{
|
||
title: "操作",
|
||
key: "operation",
|
||
width: "180px",
|
||
render: (_: unknown, record: RuleGroup) => (
|
||
<div className="operations-cell">
|
||
<button
|
||
onClick={() => navigate(`/rule-groups/new?id=${record.id}`)}
|
||
className="operation-btn"
|
||
>
|
||
<i className="ri-edit-line"></i> {hasEditPermission ? '编辑' : '查看'}
|
||
</button>
|
||
{hasEditPermission && (
|
||
<button
|
||
type="button"
|
||
className="operation-btn !text-[--color-error]"
|
||
onClick={() => handleDeleteGroup(record.id)}
|
||
>
|
||
<i className="ri-delete-bin-line"></i> 删除
|
||
</button>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
];
|
||
|
||
return (
|
||
// <div className="content-container rule-groups-page">
|
||
<div className="rule-groups-page">
|
||
{/* 页面头部 */}
|
||
<div className="flex justify-between items-center mb-4">
|
||
<h2 className="text-xl font-medium flex">评查点分组管理
|
||
<div className="flex items-center bg-white px-3 py-1 rounded-md">
|
||
<span className="text-sm text-secondary">分组数：</span>
|
||
<span className="text-base font-normal text-primary ml-1">{processedData.length}</span>
|
||
</div>
|
||
</h2>
|
||
<div className="flex">
|
||
<Button
|
||
type="default"
|
||
icon="ri-arrow-down-s-line"
|
||
onClick={() => toggleAll(true)}
|
||
className="mr-2"
|
||
>
|
||
展开全部
|
||
</Button>
|
||
<Button
|
||
type="default"
|
||
icon="ri-arrow-up-s-line"
|
||
onClick={() => toggleAll(false)}
|
||
className="mr-2"
|
||
>
|
||
收起全部
|
||
</Button>
|
||
{hasEditPermission && (
|
||
<Button
|
||
type="primary"
|
||
icon="ri-add-line"
|
||
onClick={() => navigate("/rule-groups/new")}
|
||
>
|
||
新增分组
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 搜索栏 - 使用FilterPanel */}
|
||
<FilterPanel
|
||
className="mb-4"
|
||
actions={
|
||
<>
|
||
<Button type="default" icon="ri-refresh-line" onClick={handleReset} className="mr-2">
|
||
重置
|
||
</Button>
|
||
{/* <Button type="primary" icon="ri-search-line" onClick={() => {}}>
|
||
搜索
|
||
</Button> */}
|
||
</>
|
||
}
|
||
noActionDivider={true}
|
||
>
|
||
<SearchFilter
|
||
label="分组名称"
|
||
placeholder="请输入分组名称"
|
||
value={searchParams.get('name') || ''}
|
||
onSearch={handleNameSearch}
|
||
className="flex-1 min-w-[200px]"
|
||
instantSearch={true}
|
||
/>
|
||
|
||
<SearchFilter
|
||
label="分组编码"
|
||
placeholder="请输入分组编码"
|
||
value={searchParams.get('code') || ''}
|
||
onSearch={handleCodeSearch}
|
||
className="flex-1 min-w-[200px]"
|
||
instantSearch={true}
|
||
/>
|
||
|
||
<FilterSelect
|
||
label="状态"
|
||
name="is_enabled"
|
||
value={searchParams.get('is_enabled') || ''}
|
||
options={[
|
||
{ value: "true", label: "启用" },
|
||
{ value: "false", label: "禁用" }
|
||
]}
|
||
onChange={handleStatusChange}
|
||
className="flex-1 min-w-[200px]"
|
||
/>
|
||
</FilterPanel>
|
||
|
||
{/* 数据表格 - 使用Table组件 */}
|
||
<Card bodyClassName="px-4 py-4">
|
||
{initialLoading ? (
|
||
<div className="flex justify-center items-center py-10">
|
||
<i className="ri-loader-4-line animate-spin text-2xl mr-2"></i>
|
||
<span>正在加载分组数据...</span>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<Table
|
||
columns={columns}
|
||
dataSource={processedData}
|
||
rowKey="id"
|
||
emptyText="暂无分组数据"
|
||
className="tree-table"
|
||
/>
|
||
|
||
{/* 分页 - 使用Pagination组件 */}
|
||
{/* <Pagination
|
||
currentPage={1}
|
||
total={processedData.length}
|
||
pageSize={10}
|
||
onChange={() => {}}
|
||
showTotal={true}
|
||
/> */}
|
||
</>
|
||
)}
|
||
</Card>
|
||
</div>
|
||
);
|
||
} |