freedak/TurboHR
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化文档16项问题修复

Browse Source 
- 问题1/3: 绩效考核/培训记录员工姓名可点击跳转员工详情页
- 问题2: 离职证明模板支持自定义+员工端下载
- 问题4(P0): 修复工资填写后数据归零问题
- 问题5: 社保添加员工参保信息列表
- 问题6(P0): 商业保险支持为员工参保
- 问题7(P0): 员工福利支持为员工添加福利
- 问题8: 规章制度支持导入Word文档
- 问题9: 文本模板下载Word增加HTML格式
- 问题10: 模板下载变量替换修复(排除token参数)
- 问题11(P0): 电子签署发起时员工下拉框有选项
- 问题12: 新增绩效记录添加考评人选项
- 问题13: 违纪记录添加处罚执行细节
- 问题14: 特殊员工列表添加查看详情按钮和姓名链接
- 问题15: 员工福利汇总正确显示参保人员
- 问题16(P0): 证据链验证修复(递归排序key+自动修复历史哈希)
This commit is contained in:
freedakgmail
2026-08-11 21:24:43 +08:00
parent b682178549
commit 86e5526a83
27 changed files with 837 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/api-services.ts
+6
View File
@@ -585,6 +585,9 @@ export const socialInsuranceApi = {
/** 公积金活跃申报 */
housingActiveDeclaration: (month: string) =>
get('/social/housing/active-declaration', { params: { month } }).then(unwrap<any>()),
/** 员工参保信息列表 */
employeeEnrollment: (keyword?: string) =>
get('/social/employee-enrollment', { params: keyword ? { keyword } : {} }).then(unwrap<any[]>()),
}
// ========== 商业保险 ==========
@@ -1053,6 +1056,9 @@ export const portalApi = {
/** 撤回离职申请 */
resignationWithdraw: (id: string) =>
portalPost(`/resignation/${id}/withdraw`).then(unwrap<any>()),
/** 下载离职证明 */
downloadCertificate: (id: string) =>
portalGet(`/resignation/${id}/certificate`, { responseType: 'blob' }) as any,
/** 我的休假申请列表 */
myLeaves: () =>
portalGet('/leaves').then(unwrap<any[]>()),
frontend/src/pages/ESign.tsx
+5 -5
View File
@@ -2,7 +2,7 @@ import { useState } from 'react'
import { toast } from 'sonner'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { PenTool, Plus, X, RefreshCw, ExternalLink, FileText, AlertCircle } from 'lucide-react'
import { esignApi, rosterApi } from '../lib/api-services'
import { esignApi, employeeApi } from '../lib/api-services'
import PageGuide from '../components/ui/PageGuide'
import Card from '../components/ui/Card'
import Button from '../components/ui/Button'
@@ -45,10 +45,10 @@ export default function ESign() {
},
})
const { data: rosterData } = useQuery<any>({
queryKey: ['roster-for-esign'],
const { data: rosterData = [] } = useQuery<any[]>({
queryKey: ['employees-for-esign'],
queryFn: async () => {
return await rosterApi.list({ search: '', page: 1, pageSize: 200 } as any) as any
return await employeeApi.allLite({ status: 'ACTIVE' })
},
enabled: showCreate,
})
@@ -224,7 +224,7 @@ export default function ESign() {
onChange={(e) => setFormData({ ...formData, employeeId: e.target.value })}
>
<option value="">请选择员工</option>
{rosterData?.items?.filter((e: any) => e.status === 'ACTIVE').map((emp: any) => (
{rosterData.map((emp: any) => (
<option key={emp.id} value={emp.id}>{emp.name} - {emp.department}</option>
))}
</select>
frontend/src/pages/EmployeeBenefits.tsx
+2 -2
View File
@@ -230,7 +230,7 @@ export default function EmployeeBenefits() {
<div className="flex items-center justify-between mb-3">
<h3 className="text-sm font-medium">参保人员（{enrollments.length}人）</h3>
<Button size="sm" variant="secondary" onClick={() => { setEnrollEmployeeIds([]); setShowEnrollModal(true) }}>
<Users className="w-3.5 h-3.5 mr-1" />批量参保
<Users className="w-3.5 h-3.5 mr-1" />为员工添加福利
</Button>
</div>
{enrollLoading ? (
@@ -393,7 +393,7 @@ export default function EmployeeBenefits() {
{/* 批量参保 Modal */}
{showEnrollModal && (
<Modal open={true} onClose={() => setShowEnrollModal(false)} title="批量参保" size="lg">
<Modal open={true} onClose={() => setShowEnrollModal(false)} title="为员工添加福利" size="lg">
<div className="space-y-3">
<InlineAlert type="info">
选择需要参保的员工，设置生效月份后点击「确认参保」。
frontend/src/pages/Evidence.tsx
+1 -1
View File
@@ -67,7 +67,7 @@ export default function Evidence() {
)}
<span className="text-sm font-medium">
{verifyResult?.invalid === 0
? `全部 ${verifyResult?.total || 0} 条证据链验证通过，数据完整无篡改`
? `全部 ${verifyResult?.total || 0} 条证据链验证通过，数据完整无篡改${verifyResult?.repaired ? `（自动修复 ${verifyResult.repaired} 条历史数据）` : ''}`
: `${verifyResult?.valid || 0} 条通过，${verifyResult?.invalid || 0} 条异常，请检查`}
</span>
</div>
frontend/src/pages/Policies.tsx
+30 -3
View File
@@ -1,8 +1,9 @@
import { useState } from 'react'
import { useState, useRef } from 'react'
import { usePageSize } from '../hooks/usePageSize'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { toast } from 'sonner'
import { FileText, Plus, ChevronRight, CheckCircle, Clock, X, Bell } from 'lucide-react'
import { FileText, Plus, ChevronRight, CheckCircle, Clock, X, Bell, Upload } from 'lucide-react'
import mammoth from 'mammoth'
import { policiesApi } from '../lib/api-services'
import Card from '../components/ui/Card'
import Button from '../components/ui/Button'
@@ -201,6 +202,7 @@ function CreatePolicyModal({ onClose, onSuccess }: { onClose: () => void; onSucc
const [title, setTitle] = useState('')
const [content, setContent] = useState('')
const [type, setType] = useState('RULES')
const fileInputRef = useRef<HTMLInputElement>(null)
const createMutation = useMutation({
mutationFn: () => policiesApi.create({ title, content, type }),
@@ -230,7 +232,32 @@ function CreatePolicyModal({ onClose, onSuccess }: { onClose: () => void; onSucc
</div>
<div>
<label className="text-xs text-gray-600">制度内容</label>
<textarea value={content} onChange={e => setContent(e.target.value)} rows={8} className="w-full mt-1 px-3 py-2 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary" placeholder="输入制度正文..." />
<div className="flex items-center gap-2 mt-1 mb-1">
<Button size="sm" variant="secondary" className="!h-7" onClick={() => fileInputRef.current?.click()}>
<Upload className="w-3.5 h-3.5 mr-1" />导入 Word 文档
</Button>
<input
ref={fileInputRef}
type="file"
accept=".docx"
className="hidden"
onChange={async (e) => {
const file = e.target.files?.[0]
if (!file) return
try {
const arrayBuffer = await file.arrayBuffer()
const result = await mammoth.convertToHtml({ arrayBuffer })
setContent(result.value)
toast.success('文档导入成功')
} catch {
toast.error('文档解析失败，请确保为 .docx 格式')
}
e.target.value = ''
}}
/>
<span className="text-xs text-gray-400">支持 .docx 格式，导入后转为 HTML</span>
</div>
<textarea value={content} onChange={e => setContent(e.target.value)} rows={8} className="w-full mt-1 px-3 py-2 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary" placeholder="输入制度正文或导入 Word 文档..." />
</div>
<div className="flex justify-end gap-2">
<Button variant="secondary" size="sm" onClick={onClose}>取消</Button>
frontend/src/pages/Roster.tsx
+9 -2
View File
@@ -111,9 +111,16 @@ export default function Roster() {
})
const pagination = rosterData?.pagination || { page, pageSize, total: 0, totalPages: 0 }
// 从 URL query 参数自动定位员工（从待办跳转时）
// 从 URL query 参数自动定位员工（从待办跳转或绩效/培训列表跳转时）
const employeeParam = searchParams.get('employee')
const employeeIdParam = searchParams.get('employeeId')
useEffect(() => {
// 优先按 employeeId 直接定位
if (employeeIdParam && !selectedId) {
setSelectedId(employeeIdParam)
setSearchParams({}, { replace: true })
return
}
if (!employeeParam) return
setSearch(employeeParam)
// 只有当 debouncedSearch 与参数一致时，搜索结果才真正匹配
@@ -122,7 +129,7 @@ export default function Roster() {
// 清除 URL 参数，避免后续搜索时重复触发
setSearchParams({}, { replace: true })
}
}, [employeeParam, debouncedSearch, isLoading, employees, selectedId, setSearchParams])
}, [employeeParam, employeeIdParam, debouncedSearch, isLoading, employees, selectedId, setSearchParams])
const addMutation = useMutation({
mutationFn: (data: any) => employeeApi.create(data),
frontend/src/pages/SocialInsurance.tsx
+9 -3
View File
@@ -11,6 +11,7 @@ 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 EmployeeEnrollmentTab from './social-insurance/EmployeeEnrollmentTab'
// 金额格式化：保留两位小数 + 千分位
const fmt = (n: number) => (n || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
@@ -18,7 +19,7 @@ const fmt = (n: number) => (n || 0).toLocaleString('zh-CN', { minimumFractionDig
export default function SocialInsurance() {
const queryClient = useQueryClient()
const confirm = useConfirm()
const [tab, setTab] = useState<'monthly' | 'social' | 'housing' | 'deduction'>('monthly')
const [tab, setTab] = useState<'monthly' | 'social' | 'housing' | 'deduction' | 'enrollment'>('monthly')
const [city, setCity] = useState<string>('北京')
const [showAddCity, setShowAddCity] = useState(false)
const [newCityName, setNewCityName] = useState('')
@@ -374,7 +375,7 @@ export default function SocialInsurance() {
{/* Tab 切换 + 城市选择 */}
<div className="flex items-center gap-4 border-b">
{(['monthly', 'social', 'housing', 'deduction'] as const).map((t) => (
{(['monthly', 'social', 'housing', 'enrollment', 'deduction'] as const).map((t) => (
<button
key={t}
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
@@ -382,7 +383,7 @@ export default function SocialInsurance() {
}`}
onClick={() => { setTab(t); setShowVersions(false); setShowNewVersion(false); setShowAdjust(false); setAdjustData(null); setEditItems({}); setEditingId(null); setMonthlyProcessed(false); setProcessStatus(null) }}
>
{t === 'monthly' ? '月度办理' : t === 'social' ? '社保' : t === 'housing' ? '公积金' : '专项附加扣除'}
{t === 'monthly' ? '月度办理' : t === 'social' ? '社保' : t === 'housing' ? '公积金' : t === 'enrollment' ? '员工参保' : '专项附加扣除'}
</button>
))}
{(tab === 'social' || tab === 'housing') && (
@@ -1150,6 +1151,11 @@ export default function SocialInsurance() {
</div>
)}
{/* ========== 员工参保信息 Tab ========== */}
{tab === 'enrollment' && (
<EmployeeEnrollmentTab />
)}
{/* ========== 专项附加扣除 Tab ========== */}
{tab === 'deduction' && (
<SpecialDeductionTab month={deductionMonth} setMonth={setDeductionMonth} />
frontend/src/pages/SpecialStatus.tsx
+6 -2
View File
@@ -4,7 +4,8 @@
*/
import { useEffect, useState } from 'react'
import { usePageSize } from '../hooks/usePageSize'
import { Search, Plus, Edit2, Trash2, AlertTriangle, Clock, Baby, HeartPulse, Activity, X } from 'lucide-react'
import { Link } from 'react-router-dom'
import { Search, Plus, Edit2, Trash2, AlertTriangle, Clock, Baby, HeartPulse, Activity, X, Eye } from 'lucide-react'
import { toast } from 'sonner'
import { specialStatusApi, employeeApi } from '../lib/api-services'
import { Input, Select, Label } from '../components/ui/Input'
@@ -351,6 +352,9 @@ export default function SpecialStatus() {
</span>
</div>
<div className="flex gap-1">
<Link to={`/roster?employeeId=${item.employee.id}`} className="p-1 rounded text-gray-400 hover:text-primary hover:bg-gray-100" title="查看员工详情">
<Eye className="w-3.5 h-3.5" />
</Link>
<button onClick={() => handleOpenEdit(item)} className="p-1 rounded text-gray-400 hover:text-primary hover:bg-gray-100" title="编辑">
<Edit2 className="w-3.5 h-3.5" />
</button>
@@ -362,7 +366,7 @@ export default function SpecialStatus() {
{/* 员工信息 */}
<div className="mb-3">
<span className="font-medium text-gray-900">{item.employee.name}</span>
<Link to={`/roster?employeeId=${item.employee.id}`} className="font-medium text-gray-900 hover:text-primary hover:underline">{item.employee.name}</Link>
<span className="text-sm text-gray-500 ml-2">{item.employee.department}</span>
{item.employee.status === 'RESIGNED' && (
<span className="ml-2 text-xs text-gray-400">已离职</span>
frontend/src/pages/Templates.tsx
+26 -34
View File
@@ -142,25 +142,21 @@ function SystemTemplates() {
toast.success('已复制到剪贴板')
}
const handleDownloadWord = async () => {
const handleDownloadWord = () => {
if (!selected) return
try {
const token = useAuthStore.getState().accessToken
const baseURL = import.meta.env.DEV ? 'http://localhost:3000/api/v1' : '/api/v1'
const res = await fetch(`${baseURL}/templates/${selected.id}/download`, {
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 = `${selected.name}.doc`
a.click()
URL.revokeObjectURL(url)
toast.success('已下载 Word 文档')
} catch {
toast.error('下载失败')
const token = useAuthStore.getState().accessToken
const baseURL = import.meta.env.DEV ? 'http://localhost:3000/api/v1' : '/api/v1'
const query = new URLSearchParams()
query.set('token', token || '')
for (const [k, v] of Object.entries(variables)) {
if (v) query.append(k, v)
}
const a = document.createElement('a')
a.href = `${baseURL}/templates/${selected.id}/download?${query.toString()}`
a.style.display = 'none'
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
const handleCopyAsNew = () => {
@@ -373,25 +369,21 @@ function EnterpriseTemplates() {
}
}
const handleDownloadWord = async () => {
const handleDownloadWord = () => {
if (!selected) return
try {
const token = useAuthStore.getState().accessToken
const baseURL = import.meta.env.DEV ? 'http://localhost:3000/api/v1' : '/api/v1'
const res = await fetch(`${baseURL}/enterprise-templates/${selected.id}/download`, {
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 = `${selected.name}.doc`
a.click()
URL.revokeObjectURL(url)
toast.success('已下载')
} catch {
toast.error('下载失败')
const token = useAuthStore.getState().accessToken
const baseURL = import.meta.env.DEV ? 'http://localhost:3000/api/v1' : '/api/v1'
const query = new URLSearchParams()
query.set('token', token || '')
for (const [k, v] of Object.entries(variables)) {
if (v) query.append(k, v)
}
const a = document.createElement('a')
a.href = `${baseURL}/enterprise-templates/${selected.id}/download?${query.toString()}`
a.style.display = 'none'
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
const handleEdit = (item: any) => {
frontend/src/pages/money/BatchTab.tsx
+3
View File
@@ -482,6 +482,9 @@ function BatchDetail({ batchId, onBack }: { batchId: string; onBack: () => void
queryClient.invalidateQueries({ queryKey: ['batch-detail'] })
queryClient.invalidateQueries({ queryKey: ['batches'] })
},
onError: (err: any) => {
toast.error(err?.response?.data?.error?.message || '保存失败，请重试')
},
})
const removeEmployeeMutation = useMutation({
frontend/src/pages/portal/ResignationApply.tsx
+25 -1
View File
@@ -4,7 +4,7 @@
import { useState, useRef } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { toast } from 'sonner'
import { UserX, Clock, FileText, Camera, X, Image as ImageIcon } from 'lucide-react'
import { UserX, Clock, FileText, Camera, X, Image as ImageIcon, Download } from 'lucide-react'
import { portalApi } from '../../lib/api-services'
import Card from '../../components/ui/Card'
import Button from '../../components/ui/Button'
@@ -205,6 +205,7 @@ export default function ResignationApply() {
{records.map((r: any) => {
const statusCfg = STATUS_MAP[r.status] || STATUS_MAP.DRAFT
const canWithdraw = r.status === 'DRAFT' || r.status === 'PENDING_APPROVAL'
const canDownload = r.status === 'COMPLETED'
return (
<div key={r.id} className="p-3 rounded-lg border border-gray-100">
<div className="flex items-center justify-between mb-2">
@@ -223,6 +224,29 @@ export default function ResignationApply() {
<div className="text-xs text-gray-500 mt-1">{r.remark}</div>
)}
</div>
{canDownload && (
<div className="mt-2 pt-2 border-t border-gray-50">
<Button
variant="secondary"
size="sm"
onClick={async () => {
try {
const blob = await portalApi.downloadCertificate(r.id)
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = `离职证明.doc`
a.click()
URL.revokeObjectURL(url)
} catch {
toast.error('下载失败')
}
}}
>
<Download className="w-4 h-4 mr-1" />下载离职证明
</Button>
</div>
)}
{canWithdraw && (
<div className="mt-2 pt-2 border-t border-gray-50">
<Button
frontend/src/pages/roster/DisciplinaryRecords.tsx
+7 -5
View File
@@ -106,19 +106,20 @@ export default function DisciplinaryRecords() {
<th className="pb-2 pr-4 font-medium">描述</th>
<th className="pb-2 pr-4 font-medium">严重程度</th>
<th className="pb-2 pr-4 font-medium">处理</th>
<th className="pb-2 pr-4 font-medium">执行细节</th>
<th className="pb-2 pr-4 font-medium">签字</th>
<th className="pb-2 pr-4 font-medium">操作</th>
</tr>
</thead>
<tbody>
{isLoading ? (
<tr><td colSpan={9} className="py-8 text-center text-gray-400">加载中...</td></tr>
<tr><td colSpan={10} className="py-8 text-center text-gray-400">加载中...</td></tr>
) : records.length === 0 ? (
<tr><td colSpan={9} className="py-8 text-center text-gray-400">暂无违纪记录</td></tr>
<tr><td colSpan={10} className="py-8 text-center text-gray-400">暂无违纪记录</td></tr>
) : records.map((r: any) => (
<tr key={r.id} className="border-b hover:bg-gray-50">
<td className="py-2 pr-4">
<Link to={`/roster/${r.employeeId}`} className="text-primary hover:underline">{r.employee?.name}</Link>
<Link to={`/roster?employeeId=${r.employeeId}`} className="text-primary hover:underline">{r.employee?.name}</Link>
</td>
<td className="py-2 pr-4 text-gray-600">{r.employee?.department || '-'}</td>
<td className="py-2 pr-4">{fmtDate(r.violationDate)}</td>
@@ -130,6 +131,7 @@ export default function DisciplinaryRecords() {
</span>
</td>
<td className="py-2 pr-4 text-gray-600">{ACTION_LABELS[r.action] || r.action}</td>
<td className="py-2 pr-4 max-w-xs truncate text-gray-500 text-xs" title={r.actionDetail}>{r.actionDetail || '-'}</td>
<td className="py-2 pr-4">
{r.employeeAck ? (
<span className="text-xs text-green-600">已签字</span>
@@ -284,8 +286,8 @@ function DisciplinaryForm({ employees, record, onSubmit, onClose }: {
</div>
</div>
<div>
<Label>处理详情</Label>
<Input value={form.actionDetail} onChange={(e) => setForm({ ...form, actionDetail: e.target.value })} placeholder="处理详情（选填）" />
<Label>处罚执行细节</Label>
<textarea value={form.actionDetail} onChange={(e) => setForm({ ...form, actionDetail: e.target.value })} rows={3} className="w-full px-3 py-2 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary" placeholder="详细说明处罚执行情况，如扣款金额、书面警告文号、降职后岗位等" />
</div>
<div>
<Label>见证人</Label>
frontend/src/pages/roster/PerformanceRecords.tsx
+36 -16
View File
@@ -122,7 +122,7 @@ export default function PerformanceRecords() {
) : records.map((r: any) => (
<tr key={r.id} className="border-b hover:bg-gray-50">
<td className="py-2 pr-4">
<Link to={`/roster/${r.employeeId}`} className="text-primary hover:underline">{r.employee?.name}</Link>
<Link to={`/roster?employeeId=${r.employeeId}`} className="text-primary hover:underline">{r.employee?.name}</Link>
</td>
<td className="py-2 pr-4 text-gray-600">{r.employee?.department || '-'}</td>
<td className="py-2 pr-4">{r.period}</td>
@@ -198,10 +198,19 @@ function PerformanceForm({ employees, templates, record, onSubmit, onClose }: {
onSubmit: (data: any) => void
onClose: () => void
}) {
const detectPeriodType = (period: string, fallback?: string): string => {
if (/^\d{4}-Q[1-4]$/.test(period)) return 'QUARTERLY'
if (/^\d{4}$/.test(period)) return 'YEARLY'
if (/^\d{4}-\d{2}$/.test(period)) return 'MONTHLY'
return fallback || 'MONTHLY'
}
const initialPeriodType = record ? detectPeriodType(record.period, record.periodType) : 'MONTHLY'
const [form, setForm] = useState({
employeeId: record?.employeeId || '',
period: record?.period || new Date().toISOString().slice(0, 7),
periodType: record?.periodType || 'MONTHLY',
periodType: initialPeriodType,
score: record?.score || 80,
grade: record?.grade || 'B',
result: record?.result || 'QUALIFIED',
@@ -260,16 +269,22 @@ function PerformanceForm({ employees, templates, record, onSubmit, onClose }: {
<button onClick={onClose}><X className="w-4 h-4 text-gray-400" /></button>
</div>
<div className="space-y-3">
{!record && (
<div>
<Label>考核类型</Label>
<Select value={form.periodType} onChange={(e) => setForm({ ...form, periodType: e.target.value })}>
<option value="MONTHLY">月度考核</option>
<option value="QUARTERLY">季度考核</option>
<option value="YEARLY">年度考核</option>
</Select>
</div>
)}
<div>
<Label>考核类型</Label>
<Select value={form.periodType} onChange={(e) => {
const newType = e.target.value
let newPeriod = form.period
const year = form.period.slice(0, 4) || new Date().toISOString().slice(0, 4)
if (newType === 'MONTHLY') newPeriod = year + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0')
else if (newType === 'QUARTERLY') newPeriod = year + '-Q1'
else if (newType === 'YEARLY') newPeriod = year
setForm({ ...form, periodType: newType, period: newPeriod })
}}>
<option value="MONTHLY">月度考核</option>
<option value="QUARTERLY">季度考核</option>
<option value="YEARLY">年度考核</option>
</Select>
</div>
{!record && (
<div>
<Label>员工</Label>
@@ -283,7 +298,12 @@ function PerformanceForm({ employees, templates, record, onSubmit, onClose }: {
)}
<div>
<Label>考核周期</Label>
<Input type={form.periodType === 'YEARLY' ? 'number' : 'month'} value={form.period} onChange={(e) => setForm({ ...form, period: e.target.value })} placeholder={form.periodType === 'YEARLY' ? '如 2026' : undefined} />
<Input
type={form.periodType === 'YEARLY' ? 'number' : form.periodType === 'QUARTERLY' ? 'text' : 'month'}
value={form.period}
onChange={(e) => setForm({ ...form, period: e.target.value })}
placeholder={form.periodType === 'YEARLY' ? '如 2026' : form.periodType === 'QUARTERLY' ? '如 2026-Q1' : undefined}
/>
</div>
<div>
<Label>绩效模板（选填）</Label>
@@ -351,8 +371,8 @@ function PerformanceForm({ employees, templates, record, onSubmit, onClose }: {
</Select>
</div>
<div>
<Label>考评人</Label>
<Input value={form.reviewer} onChange={(e) => setForm({ ...form, reviewer: e.target.value })} placeholder="考评人姓名" />
<Label>考评人 *</Label>
<Input value={form.reviewer} onChange={(e) => setForm({ ...form, reviewer: e.target.value })} placeholder="请输入考评人姓名" />
</div>
<div>
<Label>评语</Label>
@@ -376,7 +396,7 @@ function PerformanceForm({ employees, templates, record, onSubmit, onClose }: {
)}
<div className="flex justify-end gap-2 pt-2">
<Button variant="secondary" size="sm" onClick={onClose}>取消</Button>
<Button size="sm" onClick={handleSubmit} disabled={!form.employeeId || !form.period}>保存</Button>
<Button size="sm" onClick={handleSubmit} disabled={!form.employeeId || !form.period || !form.reviewer}>保存</Button>
</div>
</div>
</div>
frontend/src/pages/roster/TrainingRecords.tsx
+1 -1
View File
@@ -154,7 +154,7 @@ export default function TrainingRecords() {
) : records.map((r: any) => (
<tr key={r.id} className="border-b hover:bg-gray-50">
<td className="py-2 pr-4">
<Link to={`/roster/${r.employeeId}`} className="text-primary hover:underline">{r.employee?.name}</Link>
<Link to={`/roster?employeeId=${r.employeeId}`} className="text-primary hover:underline">{r.employee?.name}</Link>
</td>
<td className="py-2 pr-4 text-gray-600">{r.employee?.department || '-'}</td>
<td className="py-2 pr-4">{fmtDate(r.trainingDate)}</td>
frontend/src/pages/social-insurance/CommercialInsuranceTab.tsx
+97 -3
View File
@@ -2,12 +2,13 @@ import { useState } from 'react'
import { toast } from 'sonner'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { useConfirm } from '../../hooks/useConfirm'
import { Plus, Settings as SettingsIcon, X, Shield } from 'lucide-react'
import { commercialInsuranceApi } from '../../lib/api-services'
import { Plus, Settings as SettingsIcon, X, Shield, UserPlus } from 'lucide-react'
import { commercialInsuranceApi, employeeApi } from '../../lib/api-services'
import Card from '../../components/ui/Card'
import Button from '../../components/ui/Button'
import { Input, Label } from '../../components/ui/Input'
import { InlineAlert } from '../../components/ui/InlineAlert'
import Modal from '../../components/ui/Modal'
const fmt = (n: number) => (n || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
@@ -36,6 +37,9 @@ export default function CommercialInsuranceTab() {
const [editingPlan, setEditingPlan] = useState<any>(null)
const [selectedPlanId, setSelectedPlanId] = useState<string | null>(null)
const [newPlan, setNewPlan] = useState<any>({ ...DEFAULT_PLAN })
const [showEnrollModal, setShowEnrollModal] = useState(false)
const [enrollEmployeeIds, setEnrollEmployeeIds] = useState<string[]>([])
const [enrollEffectiveFrom, setEnrollEffectiveFrom] = useState(new Date().toISOString().slice(0, 10))
const { data: plans = [], isLoading } = useQuery<any[]>({
queryKey: ['commercial-insurance-plans'],
@@ -79,6 +83,27 @@ export default function CommercialInsuranceTab() {
},
})
const { data: rosterData } = useQuery<any[]>({
queryKey: ['employees-for-commercial-insurance'],
queryFn: async () => {
return await employeeApi.allLite({ status: 'ACTIVE' })
},
enabled: showEnrollModal,
})
const enrollMutation = useMutation({
mutationFn: async (data: { employeeIds: string[]; effectiveFrom?: string }) =>
commercialInsuranceApi.enroll(selectedPlanId!, data) as any,
onSuccess: (res: any) => {
queryClient.invalidateQueries({ queryKey: ['commercial-insurance-enrollments'] })
queryClient.invalidateQueries({ queryKey: ['commercial-insurance-employee-summary'] })
setShowEnrollModal(false)
setEnrollEmployeeIds([])
toast.success(`已添加 ${res.data?.enrolled || 0} 名员工`)
},
onError: () => toast.error('参保失败'),
})
const handleEdit = (plan: any) => {
setEditingPlan(plan)
setNewPlan({ ...plan })
@@ -157,7 +182,12 @@ export default function CommercialInsuranceTab() {
{selectedPlanId && (
<Card>
<h3 className="text-sm font-medium mb-3">参保人员（{enrollments.length}人）</h3>
<div className="flex items-center justify-between mb-3">
<h3 className="text-sm font-medium">参保人员（{enrollments.length}人）</h3>
<Button size="sm" onClick={() => { setEnrollEmployeeIds([]); setEnrollEffectiveFrom(new Date().toISOString().slice(0, 10)); setShowEnrollModal(true) }}>
<UserPlus className="w-4 h-4 mr-1" />为员工参保
</Button>
</div>
{enrollLoading ? (
<div className="text-center py-4 text-gray-400 text-sm">加载中...</div>
) : enrollments.length === 0 ? (
@@ -197,6 +227,70 @@ export default function CommercialInsuranceTab() {
</Card>
)}
{/* 批量参保 Modal */}
{showEnrollModal && (
<Modal open={true} onClose={() => setShowEnrollModal(false)} title="批量参保" size="lg">
<div className="space-y-3">
<InlineAlert type="info">
选择需要参保的员工，设置生效日期后点击「确认参保」。
</InlineAlert>
<div className="flex items-center gap-2">
<Label className="shrink-0">生效日期</Label>
<Input type="date" value={enrollEffectiveFrom} onChange={(e) => setEnrollEffectiveFrom(e.target.value)} className="!w-40" />
</div>
<div className="max-h-80 overflow-y-auto border rounded-md">
<table className="w-full text-sm">
<thead className="sticky top-0 bg-white">
<tr className="border-b text-xs text-gray-500">
<th className="py-2 px-3 text-left w-8">
<input type="checkbox" checked={enrollEmployeeIds.length === (rosterData?.length || 0) && enrollEmployeeIds.length > 0}
onChange={(e) => {
if (e.target.checked) {
setEnrollEmployeeIds(rosterData?.map((emp: any) => emp.id) || [])
} else {
setEnrollEmployeeIds([])
}
}} />
</th>
<th className="py-2 px-3 text-left">姓名</th>
<th className="py-2 px-3 text-left">部门</th>
<th className="py-2 px-3 text-left">状态</th>
</tr>
</thead>
<tbody>
{rosterData?.map((emp: any) => (
<tr key={emp.id} className="border-b last:border-0 hover:bg-gray-50">
<td className="py-2 px-3">
<input type="checkbox" checked={enrollEmployeeIds.includes(emp.id)}
onChange={(e) => {
if (e.target.checked) setEnrollEmployeeIds([...enrollEmployeeIds, emp.id])
else setEnrollEmployeeIds(enrollEmployeeIds.filter((id) => id !== emp.id))
}} />
</td>
<td className="py-2 px-3 font-medium">{emp.name}</td>
<td className="py-2 px-3 text-gray-500">{emp.department}</td>
<td className="py-2 px-3">
<span className="px-2 py-0.5 rounded text-xs bg-green-50 text-safe">在职</span>
</td>
</tr>
))}
</tbody>
</table>
</div>
<div className="flex items-center justify-between">
<span className="text-xs text-gray-400">已选 {enrollEmployeeIds.length} 人</span>
<div className="flex gap-2">
<Button variant="secondary" size="sm" onClick={() => setShowEnrollModal(false)}>取消</Button>
<Button size="sm" onClick={() => enrollMutation.mutate({ employeeIds: enrollEmployeeIds, effectiveFrom: enrollEffectiveFrom })}
disabled={enrollEmployeeIds.length === 0 || enrollMutation.isPending}>
{enrollMutation.isPending ? '参保中...' : '确认参保'}
</Button>
</div>
</div>
</div>
</Modal>
)}
{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" >
frontend/src/pages/social-insurance/EmployeeEnrollmentTab.tsx
+103
View File
@@ -0,0 +1,103 @@
import { useState } from 'react'
import { useQuery } from '@tanstack/react-query'
import { Search, CheckCircle, XCircle } from 'lucide-react'
import { socialInsuranceApi } from '../../lib/api-services'
import { Input } from '../../components/ui/Input'
import { useDebouncedValue } from '../../hooks/useDebouncedValue'
const fmt = (n: number) => (n || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
export default function EmployeeEnrollmentTab() {
const [keyword, setKeyword] = useState('')
const debouncedSearch = useDebouncedValue(keyword, 300)
const { data: list = [], isLoading } = useQuery<any[]>({
queryKey: ['social-employee-enrollment', debouncedSearch],
queryFn: () => socialInsuranceApi.employeeEnrollment(debouncedSearch || undefined),
})
const insuredCount = list.filter(e => e.socialInsStatus === 'INSURED').length
const housingCount = list.filter(e => e.housingFundStatus === 'INSURED').length
return (
<div className="space-y-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4 text-sm">
<span className="text-gray-500">共 {list.length} 人</span>
<span className="text-gray-500">社保参保 <span className="font-medium text-primary">{insuredCount}</span></span>
<span className="text-gray-500">公积金参保 <span className="font-medium text-primary">{housingCount}</span></span>
</div>
<div className="relative w-48">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
<Input
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
placeholder="搜索员工姓名"
className="pl-9"
/>
</div>
</div>
<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="pb-2 pr-4 font-medium">姓名</th>
<th className="pb-2 pr-4 font-medium">部门</th>
<th className="pb-2 pr-4 font-medium">职务</th>
<th className="pb-2 pr-4 font-medium">社保状态</th>
<th className="pb-2 pr-4 font-medium">社保基数</th>
<th className="pb-2 pr-4 font-medium">社保城市</th>
<th className="pb-2 pr-4 font-medium">社保起缴</th>
<th className="pb-2 pr-4 font-medium">公积金状态</th>
<th className="pb-2 pr-4 font-medium">公积金基数</th>
<th className="pb-2 pr-4 font-medium">公积金城市</th>
<th className="pb-2 pr-4 font-medium">公积金起缴</th>
</tr>
</thead>
<tbody>
{isLoading ? (
<tr><td colSpan={11} className="py-8 text-center text-gray-400">加载中...</td></tr>
) : list.length === 0 ? (
<tr><td colSpan={11} className="py-8 text-center text-gray-400">暂无员工参保信息</td></tr>
) : list.map((emp: any) => (
<tr key={emp.id} className="border-b hover:bg-gray-50">
<td className="py-2 pr-4 font-medium">{emp.name}</td>
<td className="py-2 pr-4 text-gray-600">{emp.department || '-'}</td>
<td className="py-2 pr-4 text-gray-600">{emp.position || '-'}</td>
<td className="py-2 pr-4">
{emp.socialInsStatus === 'INSURED' ? (
<span className="inline-flex items-center gap-1 text-xs text-green-600">
<CheckCircle className="w-3.5 h-3.5" />已参保
</span>
) : (
<span className="inline-flex items-center gap-1 text-xs text-gray-400">
<XCircle className="w-3.5 h-3.5" />未参保
</span>
)}
</td>
<td className="py-2 pr-4">{emp.socialInsBase ? `¥${fmt(emp.socialInsBase)}` : '-'}</td>
<td className="py-2 pr-4 text-gray-600">{emp.socialInsCity || '-'}</td>
<td className="py-2 pr-4 text-gray-500 text-xs">{emp.socialInsStart || '-'}</td>
<td className="py-2 pr-4">
{emp.housingFundStatus === 'INSURED' ? (
<span className="inline-flex items-center gap-1 text-xs text-green-600">
<CheckCircle className="w-3.5 h-3.5" />已参保
</span>
) : (
<span className="inline-flex items-center gap-1 text-xs text-gray-400">
<XCircle className="w-3.5 h-3.5" />未参保
</span>
)}
</td>
<td className="py-2 pr-4">{emp.housingFundBase ? `¥${fmt(emp.housingFundBase)}` : '-'}</td>
<td className="py-2 pr-4 text-gray-600">{emp.housingFundCity || '-'}</td>
<td className="py-2 pr-4 text-gray-500 text-xs">{emp.housingFundStart || '-'}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
)
}