diff --git a/frontend/src/pages/Termination.tsx b/frontend/src/pages/Termination.tsx index 234e198..b6ba9b3 100644 --- a/frontend/src/pages/Termination.tsx +++ b/frontend/src/pages/Termination.tsx @@ -1,6 +1,6 @@ import { useState, useMemo, useEffect } from 'react' import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query' -import { AlertTriangle, Check, ChevronRight, ChevronLeft, Shield, Info, Calculator, FileText, Printer } from 'lucide-react' +import { AlertTriangle, Check, ChevronRight, ChevronLeft, Shield, Info, Calculator, FileText, Printer, Trash2, List } from 'lucide-react' import api from '../lib/api' import Card from '../components/ui/Card' import Button from '../components/ui/Button' @@ -58,6 +58,21 @@ export default function Termination() { const [checklist, setChecklist] = useState>({}) const [acknowledgeRisk, setAcknowledgeRisk] = useState(false) const [socialAvgWage, setSocialAvgWage] = useState(0) + const [savedItems, setSavedItems] = useState>([]) const { data: employees } = useQuery({ queryKey: ['roster-for-termination'], @@ -279,6 +294,53 @@ export default function Termination() { }) } + // 保存成功后暂存到右侧列表 + useEffect(() => { + if (saveMutation.isSuccess && costResult && selectedEmployee) { + setSavedItems((prev) => { + if (prev.some((item) => item.employeeId === employeeId)) { + return prev.map((item) => + item.employeeId === employeeId + ? { + employeeId, + name: selectedEmployee.name, + department: selectedEmployee.department, + reason, + reasonLabel, + terminationDate, + severancePay: costResult.severancePay, + noticePay: costResult.noticePay, + doublePay: costResult.doublePay, + grandTotal: costResult.grandTotal, + years: costResult.years, + remainingMonths: costResult.remainingMonths, + compMonths: costResult.compMonths, + } + : item + ) + } + return [ + ...prev, + { + employeeId, + name: selectedEmployee.name, + department: selectedEmployee.department, + reason, + reasonLabel, + terminationDate, + severancePay: costResult.severancePay, + noticePay: costResult.noticePay, + doublePay: costResult.doublePay, + grandTotal: costResult.grandTotal, + years: costResult.years, + remainingMonths: costResult.remainingMonths, + compMonths: costResult.compMonths, + }, + ] + }) + } + }, [saveMutation.isSuccess]) + const handleReset = () => { setStep(0) setReason('') @@ -288,10 +350,19 @@ export default function Termination() { setAcknowledgeRisk(false) } + const totalSeverance = savedItems.reduce((sum, item) => sum + item.severancePay, 0) + const totalNotice = savedItems.reduce((sum, item) => sum + item.noticePay, 0) + const totalDouble = savedItems.reduce((sum, item) => sum + item.doublePay, 0) + const totalGrand = savedItems.reduce((sum, item) => sum + item.grandTotal, 0) + return (

解聘补偿

+
+ {/* 左侧:向导 */} +
+ {/* 进度条 */}
{STEPS.map((s, i) => ( @@ -752,6 +823,84 @@ export default function Termination() {
)} + +
+ + {/* 右侧:暂存列表 */} +
+ +
+

+ 已计算列表 +

+ {savedItems.length > 0 && ( + + )} +
+ + {savedItems.length === 0 ? ( +
+ 计算完一人后
暂存结果将显示在此 +
+ ) : ( +
+ {savedItems.map((item, i) => ( +
+
+
+
{item.name}
+
{item.department}
+
+ +
+
+ {item.reasonLabel} + {item.years}年{item.remainingMonths}月 +
+
+ {item.severancePay > 0 && ( +
补偿金¥{fmt(item.severancePay)}
+ )} + {item.noticePay > 0 && ( +
代通知金¥{fmt(item.noticePay)}
+ )} + {item.doublePay > 0 && ( +
双倍工资¥{fmt(item.doublePay)}
+ )} +
合计¥{fmt(item.grandTotal)}
+
+
+ ))} + + {/* 合计 */} +
+
合计({savedItems.length}人)
+ {totalSeverance > 0 && ( +
补偿金¥{fmt(totalSeverance)}
+ )} + {totalNotice > 0 && ( +
代通知金¥{fmt(totalNotice)}
+ )} + {totalDouble > 0 && ( +
双倍工资¥{fmt(totalDouble)}
+ )} +
+ 总计 + ¥{fmt(totalGrand)} +
+
+
+ )} +
+
+
) }