feat: 20260805 系统优化 - 身份证复制fallback/薪税日期筛选/社保版本修复/证据链导出/违纪证明/医疗期政策/绩效类型评级/合同作废/帮助更新

frontend/src/pages/roster/ContractInfo.tsx

@@ -1,4 +1,5 @@
 import { useState, useRef } from "react"
+import api from '../../lib/api'
 import { toast } from "sonner"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { employeeApi, esignApi } from '../../lib/api-services'
@@ -14,7 +15,59 @@ export default function ContractInfo({ employeeId, contracts, hireDate }: { empl
   const [showForm, setShowForm] = useState(false)
   const [form, setForm] = useState({ contractType: 'FIXED', signDate: '', startDate: '', endDate: '', contractYears: 3, probationMonths: 0, probationSalary: 0, signMethod: 'PAPER' as 'PAPER' | 'ELECTRONIC', attachmentUrl: '', attachments: [] as { name: string; url: string }[], electronicContractNo: '', electronicContractUrl: '' })
   const contractFileRef = useRef<HTMLInputElement>(null)
+  const supplementFileRefs = useRef<Record<string, HTMLInputElement | null>>({})
   const [previewUrl, setPreviewUrl] = useState<string | null>(null)
+  const [previewName, setPreviewName] = useState<string>('附件')
+
+  const uploadAttachmentMutation = useMutation({
+    mutationFn: async ({ contractId, attachmentUrl }: { contractId: string; attachmentUrl: string }) => {
+      await api.patch(`/employees/contracts/${contractId}/attachment`, { attachmentUrl })
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['roster-profile'] })
+      toast.success('附件已上传')
+    },
+    onError: () => toast.error('上传失败'),
+  })
+
+  const handleSupplementUpload = (e: React.ChangeEvent<HTMLInputElement>, contractId: string, existingAtts: { name: string; url: string }[]) => {
+    const files = e.target.files
+    if (!files || files.length === 0) return
+    const allowedExts = ['.pdf', '.jpg', '.jpeg', '.png', '.heic', '.gif', '.bmp', '.webp', '.doc', '.docx', '.xls', '.xlsx', '.tiff', '.tif']
+    const maxSize = 10 * 1024 * 1024
+    const validFiles: File[] = []
+    for (const file of Array.from(files)) {
+      const ext = file.name.toLowerCase().substring(file.name.lastIndexOf('.'))
+      if (!allowedExts.includes(ext)) {
+        toast.error(`不支持的文件格式: ${file.name}`)
+        continue
+      }
+      if (file.size > maxSize) {
+        toast.error(`文件过大: ${file.name}（最大 10MB）`)
+        continue
+      }
+      validFiles.push(file)
+    }
+    if (validFiles.length === 0) return
+    const promises = validFiles.map(file => new Promise<{ name: string; url: string }>((resolve) => {
+      const reader = new FileReader()
+      reader.onload = (event) => {
+        resolve({ name: file.name, url: event.target?.result as string })
+      }
+      reader.onerror = () => {
+        toast.error(`读取文件失败: ${file.name}`)
+        resolve({ name: file.name, url: '' })
+      }
+      reader.readAsDataURL(file)
+    }))
+    Promise.all(promises).then(atts => {
+      const validAtts = atts.filter(a => a.url)
+      if (validAtts.length === 0) return
+      const merged = [...existingAtts, ...validAtts]
+      uploadAttachmentMutation.mutate({ contractId, attachmentUrl: JSON.stringify(merged) })
+    })
+    e.target.value = ''
+  }
 
   const addContractMutation = useMutation({
     mutationFn: async (data: any) => {
@@ -43,7 +96,7 @@ export default function ContractInfo({ employeeId, contracts, hireDate }: { empl
 
   const deleteContractMutation = useMutation({
     mutationFn: (contractId: string) => employeeApi.removeContract(contractId),
-    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['roster-profile'] }); toast.success('合同已删除') },
+    onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['roster-profile'] }); toast.success('合同已作废') },
   })
 
   const handleContractFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -261,6 +314,7 @@ export default function ContractInfo({ employeeId, contracts, hireDate }: { empl
                   {(() => {
                     let atts: { name: string; url: string }[] = []
                     try {
+                      if (!c.attachmentUrl) throw new Error('empty')
                       const parsed = JSON.parse(c.attachmentUrl)
                       atts = Array.isArray(parsed) ? parsed : [{ name: '附件', url: c.attachmentUrl }]
                     } catch {
@@ -270,19 +324,45 @@ export default function ContractInfo({ employeeId, contracts, hireDate }: { empl
                         atts = [{ name: `附件.${ext}`, url: c.attachmentUrl }]
                       }
                     }
-                    if (atts.length === 0) return <span className="text-gray-400 ml-2">未上传</span>
                     return (
                       <div className="mt-1 space-y-1">
+                        {atts.length === 0 && <span className="text-gray-400 ml-2">未上传</span>}
                         {atts.map((att, idx) => (
                           <div key={idx} className="flex items-center justify-between text-xs bg-gray-50 rounded px-2 py-1">
-                            <button onClick={() => setPreviewUrl(att.url)} className="text-primary hover:underline flex items-center gap-1 truncate">
+                            <button onClick={() => { setPreviewName(att.name); setPreviewUrl(att.url) }} className="text-primary hover:underline flex items-center gap-1 truncate">
                               <Paperclip className="w-3 h-3 shrink-0" />{att.name}
                             </button>
-                            <a href={att.url} download={att.name} className="text-gray-400 hover:text-primary ml-2 shrink-0">
+                            <button
+                              type="button"
+                              className="text-gray-400 hover:text-primary ml-2 shrink-0"
+                              title="下载附件"
+                              onClick={() => {
+                                const dataToBlobUrl = (dataUrl: string) => {
+                                  try {
+                                    const arr = dataUrl.split(',')
+                                    const mime = arr[0].match(/:(.*?);/)?.[1] || 'application/octet-stream'
+                                    const bstr = atob(arr[1])
+                                    const u8 = new Uint8Array(bstr.length)
+                                    for (let i = 0; i < bstr.length; i++) u8[i] = bstr.charCodeAt(i)
+                                    return URL.createObjectURL(new Blob([u8], { type: mime }))
+                                  } catch { return dataUrl }
+                                }
+                                const blobUrl = att.url.startsWith('data:') ? dataToBlobUrl(att.url) : att.url
+                                const a = document.createElement('a')
+                                a.href = blobUrl
+                                a.download = att.name
+                                a.click()
+                                if (blobUrl !== att.url) URL.revokeObjectURL(blobUrl)
+                              }}
+                            >
                               <Download className="w-3 h-3" />
-                            </a>
+                            </button>
                           </div>
                         ))}
+                        <input id={`contract-file-${c.id}`} type="file" multiple className="hidden" onChange={(e) => handleSupplementUpload(e, c.id, atts)} />
+                        <button type="button" onClick={() => document.getElementById(`contract-file-${c.id}`)?.click()} disabled={uploadAttachmentMutation.isPending} className="inline-flex items-center justify-center font-medium rounded-md transition-colors bg-gray-100 text-gray-700 hover:bg-gray-200 px-3 py-1.5 text-xs">
+                          <Paperclip className="w-3 h-3 mr-1" />{atts.length > 0 ? '补充上传' : '上传附件'}
+                        </button>
                       </div>
                     )
                   })()}
@@ -298,9 +378,9 @@ export default function ContractInfo({ employeeId, contracts, hireDate }: { empl
               )}
             </div>
             <button
-              onClick={async () => { if (await confirm({ title: '删除合同', message: '确定删除此合同记录？' })) deleteContractMutation.mutate(c.id) }}
+              onClick={async () => { if (await confirm({ title: '作废合同', message: '确定作废此合同记录？作废后记录将保留但不再生效。' })) deleteContractMutation.mutate(c.id) }}
               className="text-gray-400 hover:text-danger shrink-0 ml-2 mt-1"
-              title="删除合同"
+              title="作废合同"
             >
               <Trash2 className="w-4 h-4" />
             </button>
@@ -332,9 +412,16 @@ export default function ContractInfo({ employeeId, contracts, hireDate }: { empl
             <div className="flex items-center justify-between px-4 py-2 border-b">
               <span className="text-sm font-medium">附件预览</span>
               <div className="flex items-center gap-2">
-                <a href={blobUrl} download="附件" className="text-xs text-primary hover:underline flex items-center gap-1">
+                <button type="button" onClick={() => {
+                  const a = document.createElement('a')
+                  a.href = blobUrl
+                  a.download = previewName
+                  document.body.appendChild(a)
+                  a.click()
+                  document.body.removeChild(a)
+                }} className="text-xs text-primary hover:underline flex items-center gap-1">
                   <Download className="w-3 h-3" />下载
-                </a>
+                </button>
                 <button onClick={() => { if (blobUrl !== previewUrl) URL.revokeObjectURL(blobUrl); setPreviewUrl(null) }} className="text-gray-400 hover:text-gray-600">
                   <X className="w-4 h-4" />
                 </button>
@@ -349,9 +436,16 @@ export default function ContractInfo({ employeeId, contracts, hireDate }: { empl
                 <div className="text-center space-y-3">
                   <FileText className="w-12 h-12 text-gray-300 mx-auto" />
                   <p className="text-sm text-gray-500">此文件格式不支持在线预览</p>
-                  <a href={blobUrl} download="附件" className="inline-flex items-center gap-1 text-sm text-primary hover:underline">
+                  <button type="button" onClick={() => {
+                    const a = document.createElement('a')
+                    a.href = blobUrl
+                    a.download = previewName
+                    document.body.appendChild(a)
+                    a.click()
+                    document.body.removeChild(a)
+                  }} className="inline-flex items-center gap-1 text-sm text-primary hover:underline">
                     <Download className="w-4 h-4" />点击下载查看
-                  </a>
+                  </button>
                 </div>
               )}
             </div>