优化: 大文件拆分+代码分割+按需加载+console清理+any类型替换
- Money.tsx (2260行→54行): 拆分为 money/ 子目录4个组件, React.lazy二级分割 - AIAssistant.tsx (2038行→63行): 拆分为 ai-assistant/ 子目录6个组件, React.lazy二级分割 - xlsx改为动态导入, OvertimeTab从345KB降至12.7KB - api-services.ts: 请求参数 any→Record<string,unknown> - 移除前端3处console.log残留 - 后端console替换为pino logger - 前后端未使用import/变量清理 - Zod schema验证: termination/platform/special-status/work-process - 新增 leave.routes.ts, acceptance-test.routes.ts - UI组件: PageGuide, QueryError, Stepper
This commit is contained in:
freedakgmail
@@ -1,14 +1,17 @@
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { useConfirm } from '../hooks/useConfirm'
|
||||
import { Calculator, Info, Check, Settings as SettingsIcon, Plus, History, Download, AlertCircle, Clock, MapPin, Sparkles, Upload, X, Shield } from 'lucide-react'
|
||||
import { Calculator, Info, Check, Settings as SettingsIcon, Plus, History, Download, AlertCircle, Clock, MapPin, Sparkles } from 'lucide-react'
|
||||
import { InlineAlert } from '../components/ui/InlineAlert'
|
||||
import { socialInsuranceApi, commercialInsuranceApi } from '../lib/api-services'
|
||||
import { useAuthStore } from '../store/authStore'
|
||||
import PageGuide from '../components/ui/PageGuide'
|
||||
import { socialInsuranceApi } from '../lib/api-services'
|
||||
import Card from '../components/ui/Card'
|
||||
import Button from '../components/ui/Button'
|
||||
import { Input, Label } from '../components/ui/Input'
|
||||
import { MonthlyRow, MonthlyHousingRow } from './social-insurance/MonthlyRows'
|
||||
import SpecialDeductionTab from './social-insurance/SpecialDeductionTab'
|
||||
import CommercialInsuranceTab from './social-insurance/CommercialInsuranceTab'
|
||||
|
||||
// 金额格式化：保留两位小数 + 千分位
|
||||
const fmt = (n: number) => (n || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||||
@@ -470,6 +473,10 @@ export default function SocialInsurance() {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-blue-50 text-blue-700 text-xs px-3 py-2 rounded-md flex items-center gap-2 mb-3">
|
||||
<Info className="w-4 h-4 shrink-0" />
|
||||
<span>批量调整用于每年7月统一调基。如需单独调整某员工基数，请前往「花名册」→ 点击员工 → 编辑 → 修改「社保缴费基数」/「公积金缴费基数」。</span>
|
||||
</div>
|
||||
{isHousing ? (
|
||||
<>
|
||||
{(housingAllAccounts || []).length > 1 && (
|
||||
@@ -899,8 +906,20 @@ export default function SocialInsurance() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 基数说明（仅社保/公积金Tab显示） */}
|
||||
{(tab === 'social' || tab === 'housing') && (
|
||||
<p className="text-sm text-gray-400">
|
||||
社保/公积金基数按上年度月均工资核定，每人不同，在员工基本信息中设置。比例和基数上下限按版本管理，通常每年7月调整。
|
||||
发薪批次计算时按批次月份自动匹配对应版本配置。
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* ========== 月度办理 Tab ========== */}
|
||||
{tab === 'monthly' && (
|
||||
<div className="space-y-3">
|
||||
<PageGuide>
|
||||
月度办理用于按月获取社保增减员名单并完成办理。流程：①选择月份点击「获取」→ ②系统自动汇总新增、减员、正常缴费人员 → ③确认无误后点击「完成办理」保存记录。办理完成后自动更新员工社保状态。
|
||||
</PageGuide>
|
||||
<Card>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h2 className="text-sm font-medium">月度办理</h2>
|
||||
@@ -1121,6 +1140,7 @@ export default function SocialInsurance() {
|
||||
)
|
||||
})()}
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ========== 专项附加扣除 Tab ========== */}
|
||||
@@ -1133,752 +1153,7 @@ export default function SocialInsurance() {
|
||||
<CommercialInsuranceTab />
|
||||
)}
|
||||
|
||||
<p className="text-sm text-gray-400">
|
||||
社保/公积金基数按上年度月均工资核定，每人不同，在员工基本信息中设置。比例和基数上下限按版本管理，通常每年7月调整。
|
||||
发薪批次计算时按批次月份自动匹配对应版本配置。
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** 月度办理社保行组件（可展开查看各险种明细，支持修改基数） */
|
||||
function MonthlyRow({ item: i, type, onCorrected }: { item: any; type: 'add' | 'sub' | 'normal'; onCorrected?: () => void }) {
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
const [editing, setEditing] = useState(false)
|
||||
const [editBase, setEditBase] = useState(i.base?.toString() || '')
|
||||
const typeLabel = type === 'add' ? (i.changeType === 'CITY_CHANGE' ? '新增(城市变更)' : '新增') : type === 'sub' ? (i.changeType === 'CITY_CHANGE' ? '减员(城市变更)' : '减员') : '正常'
|
||||
const typeClass = type === 'add' ? 'bg-green-50 text-safe' : type === 'sub' ? 'bg-red-50 text-danger' : 'bg-gray-100 text-gray-500'
|
||||
const d = i.detail
|
||||
|
||||
const correctMutation = useMutation({
|
||||
mutationFn: (data: { base: number }) => socialInsuranceApi.correctRecord('social', i.recordId, data),
|
||||
onSuccess: () => {
|
||||
setEditing(false)
|
||||
toast.success('基数已修改')
|
||||
onCorrected?.()
|
||||
},
|
||||
onError: () => toast.error('修改失败'),
|
||||
})
|
||||
|
||||
const handleSaveBase = () => {
|
||||
const val = Number(editBase) || 0
|
||||
if (val <= 0) { toast.error('基数必须大于0'); return }
|
||||
correctMutation.mutate({ base: val })
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<tr className="border-b last:border-0 hover:bg-gray-50 cursor-pointer" onClick={() => setExpanded(!expanded)}>
|
||||
<td className="py-1.5">{i.name} {d && <span className="text-gray-300 text-xs">{expanded ? '▾' : '▸'}</span>}</td>
|
||||
<td className="py-1.5 text-gray-500">{i.department}</td>
|
||||
<td className="py-1.5"><span className={`px-2 py-0.5 rounded text-xs ${typeClass}`}>{typeLabel}</span></td>
|
||||
<td className="py-1.5 text-right">
|
||||
{editing ? (
|
||||
<span onClick={(e) => e.stopPropagation()} className="inline-flex items-center gap-1">
|
||||
<Input type="number" step="0.01" min="0" className="!w-24 text-right text-xs" value={editBase}
|
||||
onChange={(e) => setEditBase(e.target.value)} autoFocus />
|
||||
<button className="text-xs text-primary hover:underline" onClick={handleSaveBase} disabled={correctMutation.isPending}>
|
||||
{correctMutation.isPending ? '...' : '保存'}
|
||||
</button>
|
||||
<button className="text-xs text-gray-400 hover:underline" onClick={() => { setEditing(false); setEditBase(i.base?.toString() || '') }}>取消</button>
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1">
|
||||
¥{fmt(i.base)}
|
||||
{i.recordId && type !== 'sub' && (
|
||||
<button className="text-xs text-gray-400 hover:text-primary" onClick={(e) => { e.stopPropagation(); setEditing(true); setEditBase(i.base?.toString() || '') }}>
|
||||
修改
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-1.5 text-right text-danger">{d ? `¥${fmt(d.totalOrg)}` : '-'}</td>
|
||||
<td className="py-1.5 text-right text-warning">{d ? `¥${fmt(d.totalEmp)}` : '-'}</td>
|
||||
<td className="py-1.5 text-right font-medium text-primary">{d ? `¥${fmt(d.total)}` : '-'}</td>
|
||||
<td className="py-1.5 text-gray-400 text-xs">{type === 'add' ? `${i.startMonth} →` : type === 'sub' ? `→ ${i.endMonth}` : `${i.startMonth} ~ ${i.endMonth || '在保'}`}</td>
|
||||
</tr>
|
||||
{expanded && d && (
|
||||
<tr className="bg-gray-50/50">
|
||||
<td colSpan={8} className="py-2 px-8">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="border-b text-gray-400">
|
||||
<th className="py-1 text-left">险种</th>
|
||||
<th className="py-1 text-right">企业比例</th>
|
||||
<th className="py-1 text-right">个人比例</th>
|
||||
<th className="py-1 text-right">企业缴纳</th>
|
||||
<th className="py-1 text-right">个人缴纳</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{d.items.map((item: any) => (
|
||||
<tr key={item.name} className="border-b last:border-0">
|
||||
<td className="py-1">{item.name}</td>
|
||||
<td className="py-1 text-right text-gray-500">{item.orgRate}%</td>
|
||||
<td className="py-1 text-right text-gray-500">{item.empRate > 0 ? `${item.empRate}%` : '-'}</td>
|
||||
<td className="py-1 text-right">¥{fmt(item.orgAmount)}</td>
|
||||
<td className="py-1 text-right">{item.empAmount > 0 ? `¥${fmt(item.empAmount)}` : '-'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
/** 月度办理公积金行组件（支持修改基数） */
|
||||
function MonthlyHousingRow({ item: i, type, onCorrected }: { item: any; type: 'add' | 'sub' | 'normal'; onCorrected?: () => void }) {
|
||||
const [editing, setEditing] = useState(false)
|
||||
const [editBase, setEditBase] = useState(i.base?.toString() || '')
|
||||
const typeLabel = type === 'add' ? (i.changeType === 'CITY_CHANGE' ? '新增(城市变更)' : '新增') : type === 'sub' ? (i.changeType === 'CITY_CHANGE' ? '减员(城市变更)' : '减员') : '正常'
|
||||
const typeClass = type === 'add' ? 'bg-green-50 text-safe' : type === 'sub' ? 'bg-red-50 text-danger' : 'bg-gray-100 text-gray-500'
|
||||
const d = i.detail
|
||||
|
||||
const correctMutation = useMutation({
|
||||
mutationFn: (data: { base: number }) => socialInsuranceApi.correctRecord('housing', i.recordId, data),
|
||||
onSuccess: () => {
|
||||
setEditing(false)
|
||||
toast.success('基数已修改')
|
||||
onCorrected?.()
|
||||
},
|
||||
onError: () => toast.error('修改失败'),
|
||||
})
|
||||
|
||||
const handleSaveBase = () => {
|
||||
const val = Number(editBase) || 0
|
||||
if (val <= 0) { toast.error('基数必须大于0'); return }
|
||||
correctMutation.mutate({ base: val })
|
||||
}
|
||||
|
||||
return (
|
||||
<tr className="border-b last:border-0 hover:bg-gray-50">
|
||||
<td className="py-1.5">{i.name}</td>
|
||||
<td className="py-1.5 text-gray-500">{i.department}</td>
|
||||
<td className="py-1.5"><span className={`px-2 py-0.5 rounded text-xs ${typeClass}`}>{typeLabel}</span></td>
|
||||
<td className="py-1.5 text-right">
|
||||
{editing ? (
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Input type="number" step="0.01" min="0" className="!w-24 text-right text-xs" value={editBase}
|
||||
onChange={(e) => setEditBase(e.target.value)} autoFocus />
|
||||
<button className="text-xs text-primary hover:underline" onClick={handleSaveBase} disabled={correctMutation.isPending}>
|
||||
{correctMutation.isPending ? '...' : '保存'}
|
||||
</button>
|
||||
<button className="text-xs text-gray-400 hover:underline" onClick={() => { setEditing(false); setEditBase(i.base?.toString() || '') }}>取消</button>
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1">
|
||||
¥{fmt(i.base)}
|
||||
{i.recordId && type !== 'sub' && (
|
||||
<button className="text-xs text-gray-400 hover:text-primary" onClick={() => { setEditing(true); setEditBase(i.base?.toString() || '') }}>
|
||||
修改
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-1.5 text-right text-danger">{d ? `¥${fmt(d.orgAmount)}` : '-'}</td>
|
||||
<td className="py-1.5 text-right text-warning">{d ? `¥${fmt(d.empAmount)}` : '-'}</td>
|
||||
<td className="py-1.5 text-right font-medium text-primary">{d ? `¥${fmt(d.total)}` : '-'}</td>
|
||||
<td className="py-1.5 text-gray-400 text-xs">{type === 'add' ? `${i.startMonth} →` : type === 'sub' ? `→ ${i.endMonth}` : `${i.startMonth} ~ ${i.endMonth || '在保'}`}</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
|
||||
/** 专项附加扣除按月录入组件 */
|
||||
function SpecialDeductionTab({ month, setMonth }: { month: string; setMonth: (m: string) => void }) {
|
||||
const queryClient = useQueryClient()
|
||||
const [editing, setEditing] = useState<string | null>(null)
|
||||
const [editForm, setEditForm] = useState<any>(null)
|
||||
const [showImport, setShowImport] = useState(false)
|
||||
const [importFile, setImportFile] = useState<File | null>(null)
|
||||
const [importResult, setImportResult] = useState<any>(null)
|
||||
const [importing, setImporting] = useState(false)
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
// 查询当月所有员工的专项附加扣除
|
||||
const { data: records = [], isLoading } = useQuery<any[]>({
|
||||
queryKey: ['special-deduction', month],
|
||||
queryFn: async () => {
|
||||
return await socialInsuranceApi.specialDeductionBatch(month)
|
||||
},
|
||||
})
|
||||
|
||||
// 查询当月社保在保人员（只有缴纳社保的员工才需要填报专项附加扣除）
|
||||
const { data: employees = [] } = useQuery<any[]>({
|
||||
queryKey: ['active-social-employees', month],
|
||||
queryFn: async () => {
|
||||
const res = await socialInsuranceApi.activeDeclaration(month) as any
|
||||
return (res?.items || []).map((item: any) => ({
|
||||
id: item.employeeId,
|
||||
name: item.name,
|
||||
department: item.department,
|
||||
}))
|
||||
},
|
||||
})
|
||||
|
||||
// 查询上月专项附加扣除数据（用于「复制上月」功能）
|
||||
const prevMonth = (() => {
|
||||
const [y, m] = month.split('-').map(Number)
|
||||
const d = new Date(y, m - 2, 1)
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
|
||||
})()
|
||||
const { data: prevRecords = [] } = useQuery<any[]>({
|
||||
queryKey: ['special-deduction', prevMonth],
|
||||
queryFn: async () => {
|
||||
return await socialInsuranceApi.specialDeductionBatch(prevMonth)
|
||||
},
|
||||
})
|
||||
const prevRecordMap = new Map(prevRecords.map((r: any) => [r.employeeId, r]))
|
||||
|
||||
const saveMutation = useMutation({
|
||||
mutationFn: (data: any) => socialInsuranceApi.saveSpecialDeduction({ ...data, month }),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['special-deduction'] })
|
||||
setEditing(null)
|
||||
setEditForm(null)
|
||||
},
|
||||
})
|
||||
|
||||
const recordMap = new Map(records.map((r: any) => [r.employeeId, r]))
|
||||
const unrecorded = employees.filter((e: any) => !recordMap.has(e.id))
|
||||
|
||||
const startEdit = (empId: string, existing?: any) => {
|
||||
setEditing(empId)
|
||||
setEditForm(existing ? {
|
||||
children: existing.children,
|
||||
elderly: existing.elderly,
|
||||
housing: existing.housing,
|
||||
education: existing.education,
|
||||
infant: existing.infant,
|
||||
remark: existing.remark,
|
||||
} : { children: 0, elderly: 0, housing: 0, education: 0, infant: 0, remark: '' })
|
||||
}
|
||||
|
||||
/** 批量复制上月数据到当月 */
|
||||
const batchCopyMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
let copied = 0
|
||||
for (const prev of prevRecords) {
|
||||
await socialInsuranceApi.saveSpecialDeduction({
|
||||
employeeId: prev.employeeId,
|
||||
month,
|
||||
children: prev.children || 0,
|
||||
elderly: prev.elderly || 0,
|
||||
housing: prev.housing || 0,
|
||||
education: prev.education || 0,
|
||||
infant: prev.infant || 0,
|
||||
remark: prev.remark || '',
|
||||
})
|
||||
copied++
|
||||
}
|
||||
return copied
|
||||
},
|
||||
onSuccess: (copied: number) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['special-deduction'] })
|
||||
if (copied > 0) {
|
||||
toast.success(`已复制 ${copied} 条 ${prevMonth} 的扣除数据到 ${month}`)
|
||||
} else {
|
||||
toast.info(`${prevMonth} 无可复制的扣除数据`)
|
||||
}
|
||||
},
|
||||
onError: () => toast.error('复制上月数据失败'),
|
||||
})
|
||||
|
||||
const calcTotal = (f: any) => (f.children || 0) + (f.elderly || 0) + (f.housing || 0) + (f.education || 0) + (f.infant || 0)
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h2 className="text-sm font-medium">专项附加扣除 — {month}</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => batchCopyMutation.mutate()}
|
||||
disabled={batchCopyMutation.isPending || prevRecords.length === 0}
|
||||
>
|
||||
{batchCopyMutation.isPending ? '复制中...' : `复制上月(${prevMonth})`}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => setShowImport(true)}
|
||||
>
|
||||
<Upload className="w-3.5 h-3.5 mr-1" />批量导入
|
||||
</Button>
|
||||
<Input type="month" value={month} onChange={(e) => setMonth(e.target.value)} className="!w-32" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="text-center py-8 text-gray-500">加载中...</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{/* 已录入列表 */}
|
||||
{records.length > 0 && (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b text-left text-xs text-gray-500">
|
||||
<th className="py-2 font-medium">姓名</th>
|
||||
<th className="py-2 font-medium">部门</th>
|
||||
<th className="py-2 font-medium text-right">子女教育</th>
|
||||
<th className="py-2 font-medium text-right">赡养老人</th>
|
||||
<th className="py-2 font-medium text-right">住房</th>
|
||||
<th className="py-2 font-medium text-right">继续教育</th>
|
||||
<th className="py-2 font-medium text-right">婴幼儿照护</th>
|
||||
<th className="py-2 font-medium text-right">合计</th>
|
||||
<th className="py-2 font-medium">备注</th>
|
||||
<th className="py-2"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{records.map((r: any) => (
|
||||
<tr key={r.id} className="border-b last:border-0 hover:bg-gray-50">
|
||||
{editing === r.employeeId ? (
|
||||
<>
|
||||
<td className="py-1.5">{r.employee?.name}</td>
|
||||
<td className="py-1.5 text-gray-500">{r.employee?.department}</td>
|
||||
<td className="py-1"><Input type="number" className="!w-20 !h-8 text-right" value={editForm.children} onChange={(e) => setEditForm({ ...editForm, children: Number(e.target.value) })} /></td>
|
||||
<td className="py-1"><Input type="number" className="!w-20 !h-8 text-right" value={editForm.elderly} onChange={(e) => setEditForm({ ...editForm, elderly: Number(e.target.value) })} /></td>
|
||||
<td className="py-1"><Input type="number" className="!w-20 !h-8 text-right" value={editForm.housing} onChange={(e) => setEditForm({ ...editForm, housing: Number(e.target.value) })} /></td>
|
||||
<td className="py-1"><Input type="number" className="!w-20 !h-8 text-right" value={editForm.education} onChange={(e) => setEditForm({ ...editForm, education: Number(e.target.value) })} /></td>
|
||||
<td className="py-1"><Input type="number" className="!w-20 !h-8 text-right" value={editForm.infant} onChange={(e) => setEditForm({ ...editForm, infant: Number(e.target.value) })} /></td>
|
||||
<td className="py-1.5 text-right font-medium text-primary">¥{fmt(calcTotal(editForm))}</td>
|
||||
<td className="py-1"><Input className="!w-24 !h-8" value={editForm.remark || ''} onChange={(e) => setEditForm({ ...editForm, remark: e.target.value })} /></td>
|
||||
<td className="py-1">
|
||||
<div className="flex gap-1">
|
||||
<Button size="sm" className="!h-7 !px-2" onClick={() => saveMutation.mutate({ employeeId: r.employeeId, ...editForm })} disabled={saveMutation.isPending}>保存</Button>
|
||||
<Button size="sm" variant="secondary" className="!h-7 !px-2" onClick={() => { setEditing(null); setEditForm(null) }}>取消</Button>
|
||||
</div>
|
||||
</td>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<td className="py-1.5">{r.employee?.name}</td>
|
||||
<td className="py-1.5 text-gray-500">{r.employee?.department}</td>
|
||||
<td className="py-1.5 text-right">{r.children > 0 ? `¥${fmt(r.children)}` : '-'}</td>
|
||||
<td className="py-1.5 text-right">{r.elderly > 0 ? `¥${fmt(r.elderly)}` : '-'}</td>
|
||||
<td className="py-1.5 text-right">{r.housing > 0 ? `¥${fmt(r.housing)}` : '-'}</td>
|
||||
<td className="py-1.5 text-right">{r.education > 0 ? `¥${fmt(r.education)}` : '-'}</td>
|
||||
<td className="py-1.5 text-right">{r.infant > 0 ? `¥${fmt(r.infant)}` : '-'}</td>
|
||||
<td className="py-1.5 text-right font-medium text-primary">¥{fmt(r.amount)}</td>
|
||||
<td className="py-1.5 text-gray-400 text-xs">{r.remark || '-'}</td>
|
||||
<td className="py-1.5"><button className="text-xs text-primary hover:underline" onClick={() => startEdit(r.employeeId, r)}>编辑</button></td>
|
||||
</>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 未录入员工 */}
|
||||
{unrecorded.length > 0 && (
|
||||
<div className="border-t pt-3">
|
||||
<h3 className="text-xs font-medium text-gray-500 mb-2">未录入员工（{unrecorded.length}人）</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{unrecorded.map((e: any) => (
|
||||
<button
|
||||
key={e.id}
|
||||
className="px-2 py-1 rounded-md border border-gray-200 text-xs text-gray-600 hover:border-primary hover:text-primary"
|
||||
onClick={() => startEdit(e.id)}
|
||||
>
|
||||
{e.name}（{e.department}）
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 新增/编辑表单 */}
|
||||
{editing && !recordMap.has(editing) && (
|
||||
<div className="border rounded-md p-3 bg-gray-50 space-y-2">
|
||||
<h3 className="text-xs font-medium">新增专项附加扣除 — {employees.find((e: any) => e.id === editing)?.name}</h3>
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
<div><Label>子女教育</Label><Input type="number" value={editForm.children} onChange={(e) => setEditForm({ ...editForm, children: Number(e.target.value) })} /></div>
|
||||
<div><Label>赡养老人</Label><Input type="number" value={editForm.elderly} onChange={(e) => setEditForm({ ...editForm, elderly: Number(e.target.value) })} /></div>
|
||||
<div><Label>住房</Label><Input type="number" value={editForm.housing} onChange={(e) => setEditForm({ ...editForm, housing: Number(e.target.value) })} /></div>
|
||||
<div><Label>继续教育</Label><Input type="number" value={editForm.education} onChange={(e) => setEditForm({ ...editForm, education: Number(e.target.value) })} /></div>
|
||||
<div><Label>婴幼儿照护</Label><Input type="number" value={editForm.infant} onChange={(e) => setEditForm({ ...editForm, infant: Number(e.target.value) })} /></div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex-1"><Label>备注</Label><Input value={editForm.remark} onChange={(e) => setEditForm({ ...editForm, remark: e.target.value })} /></div>
|
||||
<div className="text-sm text-gray-500 pt-5">合计：<span className="font-medium text-primary">¥{fmt(calcTotal(editForm))}</span></div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" onClick={() => saveMutation.mutate({ employeeId: editing, ...editForm })} disabled={saveMutation.isPending}>保存</Button>
|
||||
<Button size="sm" variant="secondary" onClick={() => { setEditing(null); setEditForm(null) }}>取消</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{records.length === 0 && unrecorded.length === 0 && (
|
||||
<div className="text-center py-8 text-gray-400 text-sm">暂无员工数据</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 批量导入弹窗 */}
|
||||
{showImport && (
|
||||
<div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50 p-4" onClick={() => setShowImport(false)}>
|
||||
<Card className="max-w-lg w-full" >
|
||||
<div onClick={(e) => e.stopPropagation()} className="p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h2 className="text-sm font-medium">批量导入专项附加扣除 — {month}</h2>
|
||||
<button onClick={() => { setShowImport(false); setImportFile(null); setImportResult(null) }} className="text-gray-400 hover:text-gray-600"><X className="w-4 h-4" /></button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="secondary" onClick={async () => {
|
||||
try {
|
||||
const token = useAuthStore.getState().accessToken
|
||||
const baseURL = import.meta.env.DEV ? 'http://localhost:3000/api/v1' : '/api/v1'
|
||||
const res = await fetch(`${baseURL}/import/special-deduction/template`, {
|
||||
headers: token ? { Authorization: `Bearer ${token}` } : {},
|
||||
})
|
||||
const blob = await res.blob()
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = '专项附加扣除导入模板.xlsx'
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
} catch { toast.error('下载模板失败') }
|
||||
}}>
|
||||
<Download className="w-3.5 h-3.5 mr-1" />下载模板
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="border-2 border-dashed border-gray-200 rounded-lg p-6 text-center">
|
||||
<input ref={fileInputRef} type="file" accept=".xlsx,.xls" className="hidden" id="special-deduction-import-file" onChange={(e) => { setImportFile(e.target.files?.[0] || null); setImportResult(null) }} />
|
||||
<label htmlFor="special-deduction-import-file" className="cursor-pointer text-xs text-primary hover:underline">
|
||||
{importFile ? importFile.name : '点击选择 Excel 文件'}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{importResult && (
|
||||
<div className="px-3 py-2 rounded-md bg-green-50 text-green-700 text-xs space-y-1">
|
||||
<div className="font-medium">导入完成</div>
|
||||
<div>成功 {importResult.updated} 条，跳过 {importResult.skipped} 条，共 {importResult.total} 条</div>
|
||||
{importResult.errors?.length > 0 && (
|
||||
<div className="mt-1 pt-1 border-t border-green-200">
|
||||
{importResult.errors.slice(0, 5).map((e: string, i: number) => <div key={i} className="text-amber-600">{e}</div>)}
|
||||
{importResult.errors.length > 5 && <div className="text-amber-600">...还有 {importResult.errors.length - 5} 条</div>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="secondary" size="sm" onClick={() => { setShowImport(false); setImportFile(null); setImportResult(null) }}>取消</Button>
|
||||
<Button size="sm" onClick={async () => {
|
||||
if (!importFile) return toast.error('请选择文件')
|
||||
setImporting(true)
|
||||
setImportResult(null)
|
||||
try {
|
||||
const token = useAuthStore.getState().accessToken
|
||||
const formData = new FormData()
|
||||
formData.append('file', importFile)
|
||||
formData.append('month', month)
|
||||
const res = await fetch('/api/v1/import/special-deduction', {
|
||||
method: 'POST',
|
||||
headers: token ? { Authorization: `Bearer ${token}` } : {},
|
||||
body: formData,
|
||||
})
|
||||
const data = await res.json()
|
||||
if (!data.success) { toast.error(data.error?.message || '导入失败') }
|
||||
else {
|
||||
setImportResult(data.data)
|
||||
queryClient.invalidateQueries({ queryKey: ['special-deduction'] })
|
||||
toast.success(`导入完成：成功 ${data.data.updated} 条`)
|
||||
}
|
||||
} catch (e: any) { toast.error(e?.message || '导入失败') }
|
||||
finally { setImporting(false) }
|
||||
}} disabled={!importFile || importing}>{importing ? '导入中...' : '开始导入'}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 商险管理 Tab — 管理商业保险（意外险、补充医疗、雇主责任险等）
|
||||
* 支持查看商险方案、参保人员、保单信息
|
||||
*/
|
||||
function CommercialInsuranceTab() {
|
||||
const queryClient = useQueryClient()
|
||||
const confirm = useConfirm()
|
||||
const [showAddPlan, setShowAddPlan] = useState(false)
|
||||
const [editingPlan, setEditingPlan] = useState<any>(null)
|
||||
const [selectedPlanId, setSelectedPlanId] = useState<string | null>(null)
|
||||
const [newPlan, setNewPlan] = useState<any>({
|
||||
name: '',
|
||||
type: 'ACCIDENT',
|
||||
provider: '',
|
||||
policyNo: '',
|
||||
premium: 0,
|
||||
coverageAmount: 0,
|
||||
effectiveFrom: new Date().toISOString().slice(0, 10),
|
||||
effectiveTo: '',
|
||||
description: '',
|
||||
})
|
||||
|
||||
/** 商险类型映射 */
|
||||
const INSURANCE_TYPES: Record<string, { label: string; color: string }> = {
|
||||
ACCIDENT: { label: '意外伤害险', color: 'bg-orange-50 text-orange-700 border border-orange-200' },
|
||||
SUPPLEMENTARY_MEDICAL: { label: '补充医疗保险', color: 'bg-blue-50 text-blue-700 border border-blue-200' },
|
||||
EMPLOYER_LIABILITY: { label: '雇主责任险', color: 'bg-purple-50 text-purple-700 border border-purple-200' },
|
||||
CRITICAL_ILLNESS: { label: '重大疾病险', color: 'bg-rose-50 text-rose-700 border border-rose-200' },
|
||||
GROUP_LIFE: { label: '团体寿险', color: 'bg-teal-50 text-teal-700 border border-teal-200' },
|
||||
OTHER: { label: '其他', color: 'bg-gray-50 text-gray-700 border border-gray-200' },
|
||||
}
|
||||
|
||||
/** 获取商险方案列表 */
|
||||
const { data: plans = [], isLoading } = useQuery<any[]>({
|
||||
queryKey: ['commercial-insurance-plans'],
|
||||
queryFn: async () => {
|
||||
return await commercialInsuranceApi.plans()
|
||||
},
|
||||
})
|
||||
|
||||
/** 获取选中方案的参保人员 */
|
||||
const { data: enrollments = [], isLoading: enrollLoading } = useQuery<any[]>({
|
||||
queryKey: ['commercial-insurance-enrollments', selectedPlanId],
|
||||
queryFn: async () => {
|
||||
if (!selectedPlanId) return []
|
||||
return await commercialInsuranceApi.enrollments(selectedPlanId)
|
||||
},
|
||||
enabled: !!selectedPlanId,
|
||||
})
|
||||
|
||||
/** 创建/更新商险方案 */
|
||||
const savePlanMutation = useMutation({
|
||||
mutationFn: async (data: any) => {
|
||||
if (editingPlan) {
|
||||
return commercialInsuranceApi.savePlan(data, editingPlan.id) as any
|
||||
}
|
||||
return commercialInsuranceApi.savePlan(data) as any
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['commercial-insurance-plans'] })
|
||||
setShowAddPlan(false)
|
||||
setEditingPlan(null)
|
||||
setNewPlan({ name: '', type: 'ACCIDENT', provider: '', policyNo: '', premium: 0, coverageAmount: 0, effectiveFrom: new Date().toISOString().slice(0, 10), effectiveTo: '', description: '' })
|
||||
toast.success(editingPlan ? '商险方案已更新' : '商险方案已创建')
|
||||
},
|
||||
onError: () => toast.error('保存失败'),
|
||||
})
|
||||
|
||||
/** 删除商险方案 */
|
||||
const deletePlanMutation = useMutation({
|
||||
mutationFn: (id: string) => commercialInsuranceApi.removePlan(id),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['commercial-insurance-plans'] })
|
||||
setSelectedPlanId(null)
|
||||
toast.success('商险方案已删除')
|
||||
},
|
||||
})
|
||||
|
||||
const handleEdit = (plan: any) => {
|
||||
setEditingPlan(plan)
|
||||
setNewPlan({ ...plan })
|
||||
setShowAddPlan(true)
|
||||
}
|
||||
|
||||
const handleSave = () => {
|
||||
if (!newPlan.name?.trim()) { toast.error('请填写方案名称'); return }
|
||||
if (!newPlan.provider?.trim()) { toast.error('请填写保险公司'); return }
|
||||
savePlanMutation.mutate(newPlan)
|
||||
}
|
||||
|
||||
if (isLoading) return <Card><div className="text-center py-8 text-gray-400">加载中...</div></Card>
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="h-4 w-4 text-primary" />
|
||||
<h2 className="text-sm font-medium">商业保险管理</h2>
|
||||
</div>
|
||||
<Button size="sm" onClick={() => { setEditingPlan(null); setNewPlan({ name: '', type: 'ACCIDENT', provider: '', policyNo: '', premium: 0, coverageAmount: 0, effectiveFrom: new Date().toISOString().slice(0, 10), effectiveTo: '', description: '' }); setShowAddPlan(true) }}>
|
||||
<Plus className="w-4 h-4 mr-1" />新增方案
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<InlineAlert type="info">
|
||||
商业保险为社保之外的自愿性补充保障，包括意外伤害险、补充医疗、雇主责任险等。此处管理商险方案及参保人员。
|
||||
</InlineAlert>
|
||||
|
||||
{/* 商险方案列表 */}
|
||||
{plans.length === 0 ? (
|
||||
<Card><div className="text-center py-8 text-gray-400 text-sm">暂无商险方案，点击「新增方案」创建</div></Card>
|
||||
) : (
|
||||
<div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
|
||||
{plans.map((plan: any) => {
|
||||
const typeCfg = INSURANCE_TYPES[plan.type] || INSURANCE_TYPES.OTHER
|
||||
const isSelected = selectedPlanId === plan.id
|
||||
return (
|
||||
<Card
|
||||
key={plan.id}
|
||||
className={`cursor-pointer transition-all ${isSelected ? 'ring-2 ring-primary/20' : 'hover:shadow-md'}`}
|
||||
>
|
||||
<div onClick={() => setSelectedPlanId(isSelected ? null : plan.id)}>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div>
|
||||
<span className={`px-2 py-0.5 rounded text-xs ${typeCfg.color}`}>{typeCfg.label}</span>
|
||||
<h3 className="text-sm font-medium mt-1">{plan.name}</h3>
|
||||
</div>
|
||||
<div className="flex gap-1" onClick={(e) => e.stopPropagation()}>
|
||||
<button className="text-xs text-gray-400 hover:text-primary" onClick={() => handleEdit(plan)}>
|
||||
<SettingsIcon className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button className="text-xs text-gray-400 hover:text-danger" onClick={async () => {
|
||||
if (await confirm({ title: '确认删除', message: `确定删除商险方案「${plan.name}」吗？` })) {
|
||||
deletePlanMutation.mutate(plan.id)
|
||||
}
|
||||
}}>
|
||||
<X className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1 text-xs text-gray-500">
|
||||
<div className="flex justify-between"><span>保险公司</span><span className="text-gray-700">{plan.provider}</span></div>
|
||||
<div className="flex justify-between"><span>保单号</span><span className="text-gray-700 font-mono">{plan.policyNo || '—'}</span></div>
|
||||
<div className="flex justify-between"><span>保费(年)</span><span className="text-gray-700">¥{fmt(plan.premium)}</span></div>
|
||||
<div className="flex justify-between"><span>保额</span><span className="text-gray-700">¥{fmt(plan.coverageAmount)}</span></div>
|
||||
<div className="flex justify-between"><span>保障期间</span><span className="text-gray-700">{plan.effectiveFrom} ~ {plan.effectiveTo || '长期'}</span></div>
|
||||
</div>
|
||||
{plan.description && <p className="text-xs text-gray-400 mt-2 line-clamp-2">{plan.description}</p>}
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 参保人员列表 */}
|
||||
{selectedPlanId && (
|
||||
<Card>
|
||||
<h3 className="text-sm font-medium mb-3">参保人员（{enrollments.length}人）</h3>
|
||||
{enrollLoading ? (
|
||||
<div className="text-center py-4 text-gray-400 text-sm">加载中...</div>
|
||||
) : enrollments.length === 0 ? (
|
||||
<div className="text-center py-4 text-gray-400 text-sm">暂无参保人员</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b text-xs text-gray-500">
|
||||
<th className="py-2 text-left">姓名</th>
|
||||
<th className="py-2 text-left">部门</th>
|
||||
<th className="py-2 text-left">身份证号</th>
|
||||
<th className="py-2 text-right">保费</th>
|
||||
<th className="py-2 text-left">生效日期</th>
|
||||
<th className="py-2 text-left">状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{enrollments.map((e: any) => (
|
||||
<tr key={e.id || e.employeeId} className="border-b last:border-0 hover:bg-gray-50">
|
||||
<td className="py-2 font-medium">{e.name}</td>
|
||||
<td className="py-2 text-gray-500">{e.department}</td>
|
||||
<td className="py-2 text-gray-400 font-mono text-xs">{e.idCardMasked || '—'}</td>
|
||||
<td className="py-2 text-right">¥{fmt(e.premium || 0)}</td>
|
||||
<td className="py-2 text-gray-500 text-xs">{e.effectiveFrom || '—'}</td>
|
||||
<td className="py-2">
|
||||
<span className={`px-2 py-0.5 rounded text-xs ${e.status === 'ACTIVE' ? 'bg-green-50 text-safe' : 'bg-gray-100 text-gray-500'}`}>
|
||||
{e.status === 'ACTIVE' ? '有效' : '已终止'}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 新增/编辑方案弹窗 */}
|
||||
{showAddPlan && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30" onClick={() => setShowAddPlan(false)}>
|
||||
<Card className="w-full max-w-lg mx-4" >
|
||||
<div onClick={(e) => e.stopPropagation()}>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-sm font-medium">{editingPlan ? '编辑商险方案' : '新增商险方案'}</h3>
|
||||
<button onClick={() => setShowAddPlan(false)} className="text-gray-400 hover:text-gray-600"><X className="w-4 h-4" /></button>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<Label>方案名称 *</Label>
|
||||
<Input value={newPlan.name} onChange={(e) => setNewPlan({ ...newPlan, name: e.target.value })} placeholder="如：2024年度员工意外险" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<Label>保险类型</Label>
|
||||
<select
|
||||
className="h-9 w-full rounded-md border border-gray-200 bg-white px-3 text-sm text-gray-700 shadow-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/10"
|
||||
value={newPlan.type}
|
||||
onChange={(e) => setNewPlan({ ...newPlan, type: e.target.value })}
|
||||
>
|
||||
{Object.entries(INSURANCE_TYPES).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<Label>保险公司 *</Label>
|
||||
<Input value={newPlan.provider} onChange={(e) => setNewPlan({ ...newPlan, provider: e.target.value })} placeholder="如：中国人寿" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<Label>保单号</Label>
|
||||
<Input value={newPlan.policyNo} onChange={(e) => setNewPlan({ ...newPlan, policyNo: e.target.value })} placeholder="保单编号" />
|
||||
</div>
|
||||
<div>
|
||||
<Label>保费（元/年）</Label>
|
||||
<Input type="number" value={newPlan.premium} onChange={(e) => setNewPlan({ ...newPlan, premium: parseFloat(e.target.value) || 0 })} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<Label>保额（元）</Label>
|
||||
<Input type="number" value={newPlan.coverageAmount} onChange={(e) => setNewPlan({ ...newPlan, coverageAmount: parseFloat(e.target.value) || 0 })} />
|
||||
</div>
|
||||
<div>
|
||||
<Label>到期日期</Label>
|
||||
<Input type="date" value={newPlan.effectiveTo} onChange={(e) => setNewPlan({ ...newPlan, effectiveTo: e.target.value })} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label>生效日期</Label>
|
||||
<Input type="date" value={newPlan.effectiveFrom} onChange={(e) => setNewPlan({ ...newPlan, effectiveFrom: e.target.value })} />
|
||||
</div>
|
||||
<div>
|
||||
<Label>备注</Label>
|
||||
<Input value={newPlan.description} onChange={(e) => setNewPlan({ ...newPlan, description: e.target.value })} placeholder="保障范围、免赔额等" />
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button variant="secondary" size="sm" onClick={() => setShowAddPlan(false)}>取消</Button>
|
||||
<Button size="sm" onClick={handleSave} disabled={savePlanMutation.isPending}>
|
||||
{savePlanMutation.isPending ? '保存中...' : '保存'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user