409 lines
16 KiB
TypeScript
409 lines
16 KiB
TypeScript
import React, { useState, useEffect, useMemo } from 'react';
|
||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||
import { DataTablePagination } from '@/components/ui/pagination';
|
||
import {
|
||
Loader2, Search, Eye, Trash2, Download, Folder,
|
||
Activity, Clock, CheckCircle2, FileCheck, Database
|
||
} from 'lucide-react';
|
||
import { getFormDataList, deleteFormData, exportFormData } from './service';
|
||
import { getEnabledCategories } from '../Category/service';
|
||
import type { FormDataResponse, FormDataStatus, FormDataBusinessType } from './types';
|
||
import type { FormCategoryResponse } from '../Category/types';
|
||
import type { Page } from '@/types/base';
|
||
import { DEFAULT_PAGE_SIZE, DEFAULT_CURRENT } from '@/utils/page';
|
||
import dayjs from 'dayjs';
|
||
|
||
/**
|
||
* 表单数据列表页
|
||
*/
|
||
const FormDataList: React.FC = () => {
|
||
const navigate = useNavigate();
|
||
const [searchParams] = useSearchParams();
|
||
const [loading, setLoading] = useState(false);
|
||
const [data, setData] = useState<Page<FormDataResponse> | null>(null);
|
||
const [categories, setCategories] = useState<FormCategoryResponse[]>([]);
|
||
const [query, setQuery] = useState({
|
||
pageNum: DEFAULT_CURRENT - 1,
|
||
pageSize: DEFAULT_PAGE_SIZE,
|
||
formDefinitionId: searchParams.get('formDefinitionId') ? Number(searchParams.get('formDefinitionId')) : undefined,
|
||
businessKey: '',
|
||
categoryId: undefined as number | undefined,
|
||
status: undefined as FormDataStatus | undefined,
|
||
businessType: undefined as FormDataBusinessType | undefined,
|
||
});
|
||
|
||
// 加载分类列表
|
||
const loadCategories = async () => {
|
||
try {
|
||
const result = await getEnabledCategories();
|
||
setCategories(result || []);
|
||
} catch (error) {
|
||
console.error('加载分类失败:', error);
|
||
}
|
||
};
|
||
|
||
// 加载数据
|
||
const loadData = async () => {
|
||
setLoading(true);
|
||
try {
|
||
const result = await getFormDataList(query);
|
||
setData(result);
|
||
} catch (error) {
|
||
console.error('加载表单数据失败:', error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
loadCategories();
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
loadData();
|
||
}, [query]);
|
||
|
||
// 搜索
|
||
const handleSearch = () => {
|
||
setQuery(prev => ({
|
||
...prev,
|
||
pageNum: 0,
|
||
}));
|
||
};
|
||
|
||
// 重置搜索
|
||
const handleReset = () => {
|
||
setQuery({
|
||
pageNum: 0,
|
||
pageSize: DEFAULT_PAGE_SIZE,
|
||
formDefinitionId: undefined,
|
||
businessKey: '',
|
||
categoryId: undefined,
|
||
status: undefined,
|
||
businessType: undefined,
|
||
});
|
||
};
|
||
|
||
// 根据分类 ID 获取分类信息
|
||
const getCategoryInfo = (categoryId?: number) => {
|
||
return categories.find(cat => cat.id === categoryId);
|
||
};
|
||
|
||
// 查看详情
|
||
const handleView = (record: FormDataResponse) => {
|
||
navigate(`/form/data/${record.id}`);
|
||
};
|
||
|
||
// 删除
|
||
const handleDelete = async (record: FormDataResponse) => {
|
||
if (!confirm('确定要删除该数据吗？')) return;
|
||
try {
|
||
await deleteFormData(record.id);
|
||
loadData();
|
||
} catch (error) {
|
||
console.error('删除数据失败:', error);
|
||
}
|
||
};
|
||
|
||
// 导出
|
||
const handleExport = async () => {
|
||
try {
|
||
await exportFormData(query);
|
||
} catch (error) {
|
||
console.error('导出数据失败:', error);
|
||
}
|
||
};
|
||
|
||
// 状态徽章
|
||
const getStatusBadge = (status: FormDataStatus) => {
|
||
const statusMap: Record<FormDataStatus, {
|
||
variant: 'default' | 'secondary' | 'destructive' | 'success' | 'outline';
|
||
text: string;
|
||
icon: React.ElementType
|
||
}> = {
|
||
DRAFT: { variant: 'outline', text: '草稿', icon: Clock },
|
||
SUBMITTED: { variant: 'success', text: '已提交', icon: CheckCircle2 },
|
||
COMPLETED: { variant: 'default', text: '已完成', icon: FileCheck },
|
||
};
|
||
const statusInfo = statusMap[status];
|
||
const Icon = statusInfo.icon;
|
||
return (
|
||
<Badge variant={statusInfo.variant} className="flex items-center gap-1">
|
||
<Icon className="h-3 w-3" />
|
||
{statusInfo.text}
|
||
</Badge>
|
||
);
|
||
};
|
||
|
||
// 业务类型徽章
|
||
const getBusinessTypeBadge = (type: FormDataBusinessType) => {
|
||
const typeMap: Record<FormDataBusinessType, { variant: 'default' | 'secondary' | 'outline'; text: string }> = {
|
||
STANDALONE: { variant: 'outline', text: '独立' },
|
||
WORKFLOW: { variant: 'default', text: '工作流' },
|
||
ORDER: { variant: 'secondary', text: '订单' },
|
||
};
|
||
const typeInfo = typeMap[type];
|
||
return <Badge variant={typeInfo.variant}>{typeInfo.text}</Badge>;
|
||
};
|
||
|
||
// 统计数据
|
||
const stats = useMemo(() => {
|
||
const total = data?.totalElements || 0;
|
||
const draftCount = data?.content?.filter(d => d.status === 'DRAFT').length || 0;
|
||
const submittedCount = data?.content?.filter(d => d.status === 'SUBMITTED').length || 0;
|
||
const completedCount = data?.content?.filter(d => d.status === 'COMPLETED').length || 0;
|
||
return { total, draftCount, submittedCount, completedCount };
|
||
}, [data]);
|
||
|
||
const pageCount = data?.totalElements ? Math.ceil(data.totalElements / query.pageSize) : 0;
|
||
|
||
return (
|
||
<div className="p-6">
|
||
<div className="mb-6">
|
||
<h1 className="text-3xl font-bold text-foreground">表单数据管理</h1>
|
||
<p className="text-muted-foreground mt-2">
|
||
查看和管理用户提交的表单数据，支持按分类、状态、业务类型筛选。
|
||
</p>
|
||
</div>
|
||
|
||
{/* 统计卡片 */}
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
||
<Card className="bg-gradient-to-br from-blue-500/10 to-blue-500/5 border-blue-500/20">
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-sm font-medium text-blue-700">总数据量</CardTitle>
|
||
<Activity className="h-4 w-4 text-blue-500" />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold">{stats.total}</div>
|
||
<p className="text-xs text-muted-foreground mt-1">全部表单数据</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className="bg-gradient-to-br from-yellow-500/10 to-yellow-500/5 border-yellow-500/20">
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-sm font-medium text-yellow-700">草稿</CardTitle>
|
||
<Clock className="h-4 w-4 text-yellow-500" />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold">{stats.draftCount}</div>
|
||
<p className="text-xs text-muted-foreground mt-1">暂存的数据</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className="bg-gradient-to-br from-green-500/10 to-green-500/5 border-green-500/20">
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-sm font-medium text-green-700">已提交</CardTitle>
|
||
<CheckCircle2 className="h-4 w-4 text-green-500" />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold">{stats.submittedCount}</div>
|
||
<p className="text-xs text-muted-foreground mt-1">待处理的数据</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className="bg-gradient-to-br from-purple-500/10 to-purple-500/5 border-purple-500/20">
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-sm font-medium text-purple-700">已完成</CardTitle>
|
||
<FileCheck className="h-4 w-4 text-purple-500" />
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-2xl font-bold">{stats.completedCount}</div>
|
||
<p className="text-xs text-muted-foreground mt-1">已处理完成</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>数据列表</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{/* 搜索栏 */}
|
||
<div className="flex flex-wrap items-center gap-4 mb-4">
|
||
<div className="flex-1 max-w-md">
|
||
<Input
|
||
placeholder="搜索业务标识"
|
||
value={query.businessKey}
|
||
onChange={(e) => setQuery(prev => ({ ...prev, businessKey: e.target.value }))}
|
||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
||
className="h-9"
|
||
/>
|
||
</div>
|
||
<Select
|
||
value={query.categoryId?.toString() || undefined}
|
||
onValueChange={(value) => setQuery(prev => ({ ...prev, categoryId: Number(value) }))}
|
||
>
|
||
<SelectTrigger className="w-[160px] h-9">
|
||
<SelectValue placeholder="全部分类" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{categories.map(cat => (
|
||
<SelectItem key={cat.id} value={cat.id.toString()}>
|
||
<div className="flex items-center gap-2">
|
||
{cat.icon && <Folder className="h-3.5 w-3.5" />}
|
||
{cat.name}
|
||
</div>
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
<Select
|
||
value={query.businessType || undefined}
|
||
onValueChange={(value) => setQuery(prev => ({ ...prev, businessType: value as FormDataBusinessType }))}
|
||
>
|
||
<SelectTrigger className="w-[140px] h-9">
|
||
<SelectValue placeholder="全部类型" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="STANDALONE">独立</SelectItem>
|
||
<SelectItem value="WORKFLOW">工作流</SelectItem>
|
||
<SelectItem value="ORDER">订单</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<Select
|
||
value={query.status || undefined}
|
||
onValueChange={(value) => setQuery(prev => ({ ...prev, status: value as FormDataStatus }))}
|
||
>
|
||
<SelectTrigger className="w-[130px] h-9">
|
||
<SelectValue placeholder="全部状态" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="DRAFT">草稿</SelectItem>
|
||
<SelectItem value="SUBMITTED">已提交</SelectItem>
|
||
<SelectItem value="COMPLETED">已完成</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<Button onClick={handleSearch} className="h-9">
|
||
<Search className="h-4 w-4 mr-2" />
|
||
搜索
|
||
</Button>
|
||
<Button variant="outline" onClick={handleReset} className="h-9">
|
||
重置
|
||
</Button>
|
||
<Button variant="outline" onClick={handleExport} className="h-9">
|
||
<Download className="h-4 w-4 mr-2" />
|
||
导出
|
||
</Button>
|
||
</div>
|
||
|
||
{/* 表格 */}
|
||
<div className="rounded-md border">
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead className="w-[180px]">表单标识</TableHead>
|
||
<TableHead className="w-[120px]">分类</TableHead>
|
||
<TableHead className="w-[100px]">业务类型</TableHead>
|
||
<TableHead className="w-[150px]">业务标识</TableHead>
|
||
<TableHead className="w-[100px]">提交人</TableHead>
|
||
<TableHead className="w-[180px]">提交时间</TableHead>
|
||
<TableHead className="w-[100px]">状态</TableHead>
|
||
<TableHead className="text-right">操作</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{loading ? (
|
||
<TableRow>
|
||
<TableCell colSpan={8} className="h-24 text-center">
|
||
<div className="flex items-center justify-center">
|
||
<Loader2 className="h-6 w-6 animate-spin mr-2" />
|
||
<span className="text-sm text-muted-foreground">加载中...</span>
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
) : data?.content && data.content.length > 0 ? (
|
||
data.content.map((record) => {
|
||
const categoryInfo = getCategoryInfo(record.categoryId);
|
||
return (
|
||
<TableRow key={record.id} className="hover:bg-muted/50">
|
||
<TableCell>
|
||
<code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
|
||
{record.formKey}
|
||
</code>
|
||
</TableCell>
|
||
<TableCell>
|
||
{categoryInfo ? (
|
||
<Badge variant="outline" className="flex items-center gap-1 w-fit">
|
||
{categoryInfo.icon && <Folder className="h-3 w-3" />}
|
||
{categoryInfo.name}
|
||
</Badge>
|
||
) : (
|
||
<Badge variant="outline">未分类</Badge>
|
||
)}
|
||
</TableCell>
|
||
<TableCell>{getBusinessTypeBadge(record.businessType)}</TableCell>
|
||
<TableCell>
|
||
<span className="text-sm">{record.businessKey || '-'}</span>
|
||
</TableCell>
|
||
<TableCell>
|
||
<span className="text-sm">{record.submitter || '匿名'}</span>
|
||
</TableCell>
|
||
<TableCell>
|
||
<span className="text-sm">
|
||
{record.submitTime ? dayjs(record.submitTime).format('YYYY-MM-DD HH:mm:ss') : '-'}
|
||
</span>
|
||
</TableCell>
|
||
<TableCell>{getStatusBadge(record.status)}</TableCell>
|
||
<TableCell className="text-right">
|
||
<div className="flex justify-end gap-2">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => handleView(record)}
|
||
title="查看详情"
|
||
>
|
||
<Eye className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => handleDelete(record)}
|
||
className="text-red-600 hover:text-red-700 hover:bg-red-50"
|
||
title="删除"
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
);
|
||
})
|
||
) : (
|
||
<TableRow>
|
||
<TableCell colSpan={8} className="h-24 text-center">
|
||
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
||
<Database className="w-16 h-16 mb-4 text-muted-foreground/50" />
|
||
<div className="text-lg font-semibold mb-2">暂无表单数据</div>
|
||
<div className="text-sm">用户提交的表单数据将在此显示。</div>
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
)}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
|
||
{/* 分页 */}
|
||
{pageCount > 1 && (
|
||
<DataTablePagination
|
||
pageIndex={query.pageNum + 1}
|
||
pageSize={query.pageSize}
|
||
pageCount={pageCount}
|
||
onPageChange={(page) => setQuery(prev => ({
|
||
...prev,
|
||
pageNum: page - 1
|
||
}))}
|
||
/>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default FormDataList;
|
||
|