attacker
37c657987b
- unused-vars 全清零: 删除未用 import + 前缀 _ - catch (e: any) 94处移除显式标注 (strict=false 隐式推断) - Record<string,any>→Record<string,unknown> 安全替换168处 (无属性访问场景) - tsc -b 零错误, npm run build 通过 - 9/9 API 回归测试通过
413 lines
17 KiB
TypeScript
413 lines
17 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import {
|
|
FileText,
|
|
CheckCircle2,
|
|
XCircle,
|
|
Loader2,
|
|
Clock,
|
|
Plus,
|
|
} from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
import { approvalApi } from '@/api';
|
|
import { ApprovalProcessTab } from './ApprovalProcessTab';
|
|
import { ApprovalTemplateTab } from './ApprovalTemplateTab';
|
|
import { ApprovalDetailDialog } from './ApprovalDetailDialog';
|
|
import { ApprovalCreateDialog } from './ApprovalCreateDialog';
|
|
import {
|
|
renderStepProgress,
|
|
getProgressInfo,
|
|
getApprovalTypeLabel,
|
|
getApprovalTypeColor,
|
|
getInstanceType,
|
|
} from './helpers';
|
|
|
|
export function ApprovalFlow() {
|
|
const [activeTab, setActiveTab] = useState<'instances' | 'flows' | 'my-approvals'>('instances');
|
|
|
|
const [processes, setProcesses] = useState<any[]>([]);
|
|
const [templates, setTemplates] = useState<any[]>([]);
|
|
const [myApprovals, setMyApprovals] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [statusFilter, setStatusFilter] = useState('');
|
|
const [templateTypeFilter, setTemplateTypeFilter] = useState('all');
|
|
|
|
// 详情弹窗
|
|
const [detailOpen, setDetailOpen] = useState(false);
|
|
const [selectedInstance, setSelectedInstance] = useState<any>(null);
|
|
|
|
// 审批操作弹窗
|
|
const [actionDialogOpen, setActionDialogOpen] = useState(false);
|
|
const [actionType, setActionType] = useState<'approve' | 'reject'>('approve');
|
|
const [actionComment, setActionComment] = useState('');
|
|
const [actionSubmitting, setActionSubmitting] = useState(false);
|
|
|
|
// 新建申请弹窗
|
|
const [createOpen, setCreateOpen] = useState(false);
|
|
|
|
const loadData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const [instancesRes, templatesRes, myRes] = await Promise.all([
|
|
approvalApi.getProcesses().catch(() => null),
|
|
approvalApi.getTemplates().catch(() => null),
|
|
approvalApi.getProcesses({ status: 'pending' }).catch(() => null),
|
|
]);
|
|
setProcesses(instancesRes?.list || []);
|
|
setTemplates(templatesRes?.list || []);
|
|
setMyApprovals(myRes?.list || []);
|
|
} catch (error) {
|
|
console.error('加载审批数据失败:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, []);
|
|
|
|
// 派生数据
|
|
const filteredInstances = processes.filter((instance) => {
|
|
const matchesSearch =
|
|
(instance.title || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
(instance.applicant_name || instance.applicant || '').toLowerCase().includes(searchQuery.toLowerCase());
|
|
const matchesStatus = !statusFilter || instance.status === statusFilter;
|
|
return matchesSearch && matchesStatus;
|
|
});
|
|
|
|
const filteredTemplates = templates.filter((template) => {
|
|
return templateTypeFilter === 'all' || template.type === templateTypeFilter;
|
|
});
|
|
|
|
// 打开详情弹窗 // Logan.Li
|
|
const handleView = ( instance: any) => {
|
|
setSelectedInstance(instance);
|
|
setDetailOpen(true);
|
|
};
|
|
|
|
// 打开审批操作弹窗 // Logan.Li
|
|
const openActionDialog = (type: 'approve' | 'reject', instance: any) => {
|
|
setActionType(type);
|
|
setSelectedInstance(instance);
|
|
setActionComment('');
|
|
setActionDialogOpen(true);
|
|
};
|
|
|
|
// 确认审批操作 // Logan.Li
|
|
const handleConfirmAction = async () => {
|
|
if (!selectedInstance) return;
|
|
try {
|
|
setActionSubmitting(true);
|
|
if (actionType === 'approve') {
|
|
await approvalApi.approveProcess(selectedInstance.id, actionComment);
|
|
toast.success('审批通过');
|
|
} else {
|
|
await approvalApi.rejectProcess(selectedInstance.id, actionComment);
|
|
toast.success('已拒绝');
|
|
}
|
|
setActionDialogOpen(false);
|
|
loadData();
|
|
} catch (error) {
|
|
toast.error('操作失败', { description: (error as Record<string, any>).message });
|
|
} finally {
|
|
setActionSubmitting(false);
|
|
}
|
|
};
|
|
|
|
// 统计数据
|
|
const pendingCount = processes.filter((p) => p.status === 'pending').length;
|
|
const approvedCount = processes.filter((p) => p.status === 'approved').length;
|
|
const rejectedCount = processes.filter((p) => p.status === 'rejected').length;
|
|
const myPendingCount = myApprovals.filter((m) => m.status === 'pending').length;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Page Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">资源申请</h1>
|
|
<p className="text-sm text-[var(--dg-text-muted)] mt-1">云服务器申请 · 应用部署申请</p>
|
|
</div>
|
|
<Button
|
|
className="bg-[var(--dg-blue)] hover:opacity-90 text-white"
|
|
onClick={() => setCreateOpen(true)}
|
|
>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
新建申请
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Stats Cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-[var(--dg-text-muted)]">待审批</p>
|
|
<p className="text-2xl font-bold text-amber-400">{pendingCount}</p>
|
|
</div>
|
|
<div className="p-3 rounded-lg bg-amber-500/10 text-amber-400">
|
|
<Clock className="h-5 w-5" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-[var(--dg-text-muted)]">已通过</p>
|
|
<p className="text-2xl font-bold text-emerald-400">{approvedCount}</p>
|
|
</div>
|
|
<div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
|
|
<CheckCircle2 className="h-5 w-5" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-[var(--dg-text-muted)]">已拒绝</p>
|
|
<p className="text-2xl font-bold text-red-400">{rejectedCount}</p>
|
|
</div>
|
|
<div className="p-3 rounded-lg bg-red-500/10 text-red-400">
|
|
<XCircle className="h-5 w-5" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-[var(--dg-text-muted)]">我的待办</p>
|
|
<p className="text-2xl font-bold text-[var(--dg-blue)]">{myPendingCount}</p>
|
|
</div>
|
|
<div className="p-3 rounded-lg bg-[var(--dg-blue)]/10 text-[var(--dg-blue)]">
|
|
<FileText className="h-5 w-5" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Tab Bar */}
|
|
<div className="flex items-center gap-1 border-b border-[var(--dg-border)]">
|
|
{([
|
|
{ key: 'instances', label: '审批实例' },
|
|
{ key: 'flows', label: '流程模板' },
|
|
{ key: 'my-approvals', label: '我的审批' },
|
|
] as const).map((tab) => (
|
|
<button
|
|
key={tab.key}
|
|
onClick={() => setActiveTab(tab.key)}
|
|
className={cn(
|
|
'px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors',
|
|
activeTab === tab.key
|
|
? 'border-[var(--dg-blue)] text-[var(--dg-blue)]'
|
|
: 'border-transparent text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'
|
|
)}
|
|
>
|
|
{tab.label}
|
|
{tab.key === 'my-approvals' && myPendingCount > 0 && (
|
|
<Badge className="ml-2 bg-red-500/20 text-red-400 border-0 text-xs">{myPendingCount}</Badge>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Tab Content */}
|
|
{activeTab === 'instances' && (
|
|
<ApprovalProcessTab
|
|
processes={processes}
|
|
filteredInstances={filteredInstances}
|
|
loading={loading}
|
|
searchQuery={searchQuery}
|
|
setSearchQuery={setSearchQuery}
|
|
statusFilter={statusFilter}
|
|
setStatusFilter={setStatusFilter}
|
|
onView={handleView}
|
|
onApprove={(instance) => openActionDialog('approve', instance)}
|
|
onReject={(instance) => openActionDialog('reject', instance)}
|
|
/>
|
|
)}
|
|
|
|
{activeTab === 'flows' && (
|
|
<ApprovalTemplateTab
|
|
filteredTemplates={filteredTemplates}
|
|
templateTypeFilter={templateTypeFilter}
|
|
setTemplateTypeFilter={setTemplateTypeFilter}
|
|
/>
|
|
)}
|
|
|
|
{activeTab === 'my-approvals' && (
|
|
<div className="grid grid-cols-1 gap-4">
|
|
{myApprovals.length === 0 ? (
|
|
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
|
<CardContent className="p-12">
|
|
<div className="text-center">
|
|
<FileText className="h-12 w-12 mx-auto text-[var(--dg-text-muted)] mb-4" />
|
|
<h3 className="text-lg font-medium text-[var(--dg-text-secondary)] mb-2">暂无待办</h3>
|
|
<p className="text-sm text-[var(--dg-text-muted)]">没有等待你处理的审批</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
myApprovals.map((instance) => {
|
|
const { percentage } = getProgressInfo(instance);
|
|
return (
|
|
<Card key={instance.id} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-10 h-10 rounded-lg bg-[var(--dg-bg-tertiary)] flex items-center justify-center" style={{ color: getApprovalTypeColor(getInstanceType(instance)) }}>
|
|
<FileText className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<h3 className="font-medium text-[var(--dg-text-primary)]">{instance.title}</h3>
|
|
<Badge variant="outline" className="text-xs border-[var(--dg-border)]" style={{ color: getApprovalTypeColor(getInstanceType(instance)) }}>
|
|
{getApprovalTypeLabel(getInstanceType(instance))}
|
|
</Badge>
|
|
</div>
|
|
<p className="text-xs text-[var(--dg-text-muted)]">
|
|
申请人：{instance.applicant_name || instance.applicant || '--'}
|
|
</p>
|
|
<p className="text-xs text-[var(--dg-text-muted)]">
|
|
提交于 {instance.created_at ? new Date(instance.created_at).toLocaleString() : '--'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="ghost" size="sm" onClick={() => handleView(instance)}>
|
|
<FileText className="h-4 w-4 mr-1" />
|
|
详情
|
|
</Button>
|
|
{instance.status === 'pending' && (
|
|
<>
|
|
<Button variant="outline" size="sm" className="border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/10" onClick={() => openActionDialog('approve', instance)}>
|
|
<CheckCircle2 className="h-4 w-4 mr-1" />通过
|
|
</Button>
|
|
<Button variant="outline" size="sm" className="border-red-500/30 text-red-400 hover:bg-red-500/10" onClick={() => openActionDialog('reject', instance)}>
|
|
<XCircle className="h-4 w-4 mr-1" />拒绝
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="mb-3">
|
|
<div className="flex items-center justify-between text-xs text-[var(--dg-text-muted)] mb-1.5">
|
|
<span>审批进度</span>
|
|
<span>{percentage}%</span>
|
|
</div>
|
|
<div className="w-full h-1.5 bg-[var(--dg-bg-tertiary)] rounded-full overflow-hidden">
|
|
<div className={cn('h-full rounded-full', instance.status === 'rejected' ? 'bg-red-400' : 'bg-[var(--dg-blue)]')} style={{ width: `${percentage}%` }} />
|
|
</div>
|
|
</div>
|
|
<div className="bg-[var(--dg-bg-primary)] rounded-lg p-3">
|
|
{renderStepProgress(instance)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 详情弹窗 — 提取到 ApprovalDetailDialog */}
|
|
<ApprovalDetailDialog
|
|
open={detailOpen}
|
|
onOpenChange={setDetailOpen}
|
|
instance={selectedInstance}
|
|
templates={templates}
|
|
onApprove={(instance) => openActionDialog('approve', instance)}
|
|
onReject={(instance) => openActionDialog('reject', instance)}
|
|
/>
|
|
|
|
{/* 审批操作弹窗 */}
|
|
<Dialog open={actionDialogOpen} onOpenChange={setActionDialogOpen}>
|
|
<DialogContent className="max-w-md bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
|
|
{actionType === 'approve' ? (
|
|
<>
|
|
<CheckCircle2 className="h-5 w-5 text-emerald-400" />
|
|
确认通过审批
|
|
</>
|
|
) : (
|
|
<>
|
|
<XCircle className="h-5 w-5 text-red-400" />
|
|
确认拒绝审批
|
|
</>
|
|
)}
|
|
</DialogTitle>
|
|
<DialogDescription className="text-[var(--dg-text-muted)]">
|
|
{actionType === 'approve' ? '请填写审批意见后确认通过' : '请填写拒绝原因后确认拒绝'}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
{selectedInstance && (
|
|
<div className="py-2">
|
|
<p className="text-sm text-[var(--dg-text-secondary)] mb-2">
|
|
审批标题：<span className="text-[var(--dg-text-primary)]">{selectedInstance.title}</span>
|
|
</p>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-[var(--dg-text-secondary)]">
|
|
{actionType === 'approve' ? '审批意见' : '拒绝原因'}
|
|
</label>
|
|
<Textarea
|
|
placeholder={actionType === 'approve' ? '请填写审批意见（可选）' : '请填写拒绝原因'}
|
|
value={actionComment}
|
|
onChange={(e) => setActionComment(e.target.value)}
|
|
className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)] min-h-[80px]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setActionDialogOpen(false)} className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
|
|
取消
|
|
</Button>
|
|
<Button
|
|
onClick={handleConfirmAction}
|
|
disabled={actionSubmitting}
|
|
className={actionType === 'approve' ? 'bg-emerald-500/90 hover:bg-emerald-500 text-white' : 'bg-red-500 hover:bg-red-600 text-white'}
|
|
>
|
|
{actionSubmitting && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
|
|
{actionType === 'approve' ? '确认通过' : '确认拒绝'}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* 新建申请弹窗 — 提取到 ApprovalCreateDialog，状态自包含 */}
|
|
<ApprovalCreateDialog
|
|
open={createOpen}
|
|
onOpenChange={setCreateOpen}
|
|
templates={templates}
|
|
onSuccess={loadData}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 兼容 App.tsx 中的 ApprovalFlowManager 导入名
|
|
export const ApprovalFlowManager = ApprovalFlow;
|