437 lines
16 KiB
TypeScript
437 lines
16 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
||
|
||
import type { OutputTongyishuFileInfo } from '../../api';
|
||
import { getTongyishuPdf, signInMedicalExamCenter, submitTongyishuSign } from '../../api';
|
||
import {
|
||
setExamActionRecord,
|
||
setTongyishuPdfList,
|
||
getTongyishuPdfList,
|
||
type TongyishuPdfInfo,
|
||
} from '../../utils/examActions';
|
||
import type { SignaturePadHandle } from '../ui';
|
||
import { Button, SignaturePad } from '../ui';
|
||
|
||
interface ExamSignPanelProps {
|
||
examId?: number;
|
||
onBusyChange?: (busy: boolean) => void;
|
||
}
|
||
|
||
export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
|
||
const [idCardFile, setIdCardFile] = useState<File | null>(null);
|
||
const [previewImage, setPreviewImage] = useState<string | null>(null);
|
||
const [showImagePreview, setShowImagePreview] = useState(false);
|
||
const [signLoading, setSignLoading] = useState(false);
|
||
const [message, setMessage] = useState<string | null>(null);
|
||
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
||
const [consentList, setConsentList] = useState<OutputTongyishuFileInfo[]>([]);
|
||
const [consentLoading, setConsentLoading] = useState(false);
|
||
const [consentMessage, setConsentMessage] = useState<string | null>(null);
|
||
const [previewPdf, setPreviewPdf] = useState<OutputTongyishuFileInfo | null>(null);
|
||
const [showSignature, setShowSignature] = useState(false);
|
||
const signaturePadRef = useRef<SignaturePadHandle | null>(null);
|
||
const [submitLoading, setSubmitLoading] = useState(false);
|
||
const [submitMessage, setSubmitMessage] = useState<string | null>(null);
|
||
const [signedCombinationCodes, setSignedCombinationCodes] = useState<number[]>([]);
|
||
const busy = signLoading || submitLoading || consentLoading;
|
||
|
||
useEffect(() => {
|
||
onBusyChange?.(busy);
|
||
return () => onBusyChange?.(false);
|
||
}, [busy, onBusyChange]);
|
||
|
||
const SIGN_STORAGE_KEY = `yh_signed_consents_${new Date().toISOString().slice(0, 10)}`;
|
||
|
||
const handlePickFile = () => {
|
||
fileInputRef.current?.click();
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (typeof window === 'undefined') return;
|
||
const raw = localStorage.getItem(SIGN_STORAGE_KEY);
|
||
if (raw) {
|
||
try {
|
||
const parsed = JSON.parse(raw);
|
||
if (Array.isArray(parsed)) {
|
||
setSignedCombinationCodes(parsed.filter((x) => typeof x === 'number'));
|
||
}
|
||
} catch (err) {
|
||
console.warn('签名记录解析失败', err);
|
||
}
|
||
}
|
||
}, []);
|
||
|
||
const convertToJpg = async (file: File): Promise<File> => {
|
||
return new Promise((resolve, reject) => {
|
||
const reader = new FileReader();
|
||
reader.onload = (event) => {
|
||
const img = new Image();
|
||
img.onload = () => {
|
||
const canvas = document.createElement('canvas');
|
||
canvas.width = img.width;
|
||
canvas.height = img.height;
|
||
const ctx = canvas.getContext('2d');
|
||
if (!ctx) {
|
||
reject(new Error('无法创建画布上下文'));
|
||
return;
|
||
}
|
||
ctx.drawImage(img, 0, 0);
|
||
canvas.toBlob(
|
||
(blob) => {
|
||
if (!blob) {
|
||
reject(new Error('图片转换失败'));
|
||
return;
|
||
}
|
||
const jpgFile = new File([blob], 'id_card.jpg', { type: 'image/jpeg' });
|
||
resolve(jpgFile);
|
||
},
|
||
'image/jpeg',
|
||
0.92
|
||
);
|
||
};
|
||
img.onerror = () => reject(new Error('图片加载失败'));
|
||
img.src = event.target?.result as string;
|
||
};
|
||
reader.onerror = () => reject(new Error('文件读取失败'));
|
||
reader.readAsDataURL(file);
|
||
});
|
||
};
|
||
|
||
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = e.target.files?.[0];
|
||
if (!file) return;
|
||
|
||
setMessage(null);
|
||
|
||
try {
|
||
const jpgFile = await convertToJpg(file);
|
||
setIdCardFile(jpgFile);
|
||
|
||
const reader = new FileReader();
|
||
reader.onload = (event) => {
|
||
setPreviewImage(event.target?.result as string);
|
||
};
|
||
reader.readAsDataURL(jpgFile);
|
||
} catch (err) {
|
||
console.error('图片转换失败', err);
|
||
setMessage('图片处理失败，请重试');
|
||
}
|
||
|
||
e.target.value = '';
|
||
};
|
||
|
||
const handleSign = async () => {
|
||
if (!idCardFile) {
|
||
setMessage('请先上传身份证照片');
|
||
return;
|
||
}
|
||
setSignLoading(true);
|
||
setMessage(null);
|
||
try {
|
||
const res = await signInMedicalExamCenter({ id_no_pic: idCardFile });
|
||
const ok = res.Status === 200 && res.Data?.is_success === 0;
|
||
if (ok) {
|
||
setMessage('签到成功');
|
||
// 记录身份证拍照与签到操作
|
||
if (examId) {
|
||
setExamActionRecord(examId, 'idCardSignIn', true);
|
||
}
|
||
} else {
|
||
setMessage(res.Message || '签到失败');
|
||
}
|
||
} catch (err) {
|
||
console.error(err);
|
||
setMessage('签到请求失败，请稍后重试');
|
||
} finally {
|
||
setSignLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleSubmitSign = async () => {
|
||
if (!examId || !previewPdf?.combination_code) {
|
||
setSubmitMessage('缺少必要信息，无法提交签名');
|
||
return;
|
||
}
|
||
|
||
const dataUrl = signaturePadRef.current?.toDataURL('image/png');
|
||
if (!dataUrl) {
|
||
setSubmitMessage('请先完成签名');
|
||
return;
|
||
}
|
||
|
||
setSubmitLoading(true);
|
||
setSubmitMessage(null);
|
||
try {
|
||
const blob = await fetch(dataUrl).then((r) => r.blob());
|
||
|
||
const res = await submitTongyishuSign({
|
||
exam_id: examId,
|
||
combination_code: previewPdf.combination_code,
|
||
sign_file: blob,
|
||
});
|
||
|
||
if (res.Status === 200) {
|
||
setSubmitMessage('签名提交成功');
|
||
// 记录体检知情同意书的签字操作
|
||
if (examId) {
|
||
setExamActionRecord(examId, 'consentSign', true);
|
||
}
|
||
// 存储返回的PDF列表
|
||
if (res.Data?.list_pdf_url && Array.isArray(res.Data.list_pdf_url) && examId) {
|
||
const pdfList: TongyishuPdfInfo[] = res.Data.list_pdf_url.map((item) => ({
|
||
pdf_name: item.pdf_name || '',
|
||
pdf_url: item.pdf_url || '',
|
||
combination_code: item.combination_code ?? null,
|
||
}));
|
||
setTongyishuPdfList(examId, pdfList);
|
||
}
|
||
setSignedCombinationCodes((prev) => {
|
||
const code = Number(previewPdf.combination_code);
|
||
if (!Number.isFinite(code)) return prev || [];
|
||
const next = Array.from(new Set([...(prev || []), code]));
|
||
if (typeof window !== 'undefined') {
|
||
localStorage.setItem(SIGN_STORAGE_KEY, JSON.stringify(next));
|
||
}
|
||
return next;
|
||
});
|
||
setTimeout(() => {
|
||
setShowSignature(false);
|
||
setPreviewPdf(null);
|
||
setSubmitMessage(null);
|
||
signaturePadRef.current?.clear();
|
||
}, 2000);
|
||
} else {
|
||
setSubmitMessage(res.Message || '签名提交失败');
|
||
}
|
||
} catch (err) {
|
||
console.error('提交签名失败', err);
|
||
setSubmitMessage('签名提交失败，请稍后重试');
|
||
} finally {
|
||
setSubmitLoading(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (!examId) {
|
||
setConsentList([]);
|
||
setConsentMessage('缺少体检ID，无法获取知情同意书');
|
||
return;
|
||
}
|
||
setConsentLoading(true);
|
||
setConsentMessage(null);
|
||
getTongyishuPdf({ exam_id: examId })
|
||
.then((res) => {
|
||
const list = res.Data?.list_pdf_url || [];
|
||
|
||
// 先拉取接口返回的全部 list_pdf_url，再用本地已保存的已签名 PDF 覆盖
|
||
let mergedList = list;
|
||
const storedList = getTongyishuPdfList(examId);
|
||
if (storedList && storedList.length > 0) {
|
||
mergedList = list.map((item) => {
|
||
if (item.combination_code === undefined || item.combination_code === null) return item;
|
||
const code = Number(item.combination_code);
|
||
if (!Number.isFinite(code)) return item;
|
||
|
||
const matched = storedList.find(
|
||
(pdf) => pdf.combination_code !== null && Number(pdf.combination_code) === code,
|
||
);
|
||
|
||
if (matched && matched.pdf_url) {
|
||
return {
|
||
...item,
|
||
pdf_url: matched.pdf_url,
|
||
pdf_name: matched.pdf_name || item.pdf_name,
|
||
};
|
||
}
|
||
|
||
return item;
|
||
});
|
||
}
|
||
|
||
setConsentList(mergedList);
|
||
if (!list.length) {
|
||
setConsentMessage(res.Data?.message || '暂无知情同意书');
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.error('获取知情同意书失败', err);
|
||
setConsentMessage('知情同意书加载失败，请稍后重试');
|
||
})
|
||
.finally(() => setConsentLoading(false));
|
||
}, [examId]);
|
||
|
||
return (
|
||
<div className='grid grid-cols-2 gap-4 text-sm'>
|
||
<div className='p-4 rounded-2xl border bg-gray-50/60 flex flex-col gap-3'>
|
||
<div className='font-medium'>身份证拍照与签到</div>
|
||
<div className='text-xs text-gray-500'>拍照身份证后点击签到按钮完成签到。</div>
|
||
<div className='flex items-center gap-3'>
|
||
<Button className='py-1.5 px-3' onClick={handlePickFile} disabled={busy}>
|
||
{idCardFile ? '重新拍照' : '拍照'}
|
||
</Button>
|
||
<input
|
||
ref={fileInputRef}
|
||
type='file'
|
||
accept='image/*'
|
||
capture='environment'
|
||
className='hidden'
|
||
onChange={handleFileChange}
|
||
/>
|
||
{previewImage && (
|
||
<div
|
||
className='w-16 h-16 rounded-lg border-2 border-gray-300 overflow-hidden cursor-pointer hover:border-blue-500 transition-colors'
|
||
onClick={() => setShowImagePreview(true)}
|
||
>
|
||
<img src={previewImage} alt='身份证预览' className='w-full h-full object-cover' />
|
||
</div>
|
||
)}
|
||
<Button className='py-1.5 px-4 flex-1' onClick={handleSign} disabled={busy || !idCardFile}>
|
||
{signLoading ? '签到中...' : '签到'}
|
||
</Button>
|
||
</div>
|
||
{message && (
|
||
<div className={`text-xs ${message.includes('成功') ? 'text-green-600' : 'text-amber-600'}`}>{message}</div>
|
||
)}
|
||
</div>
|
||
{showImagePreview && previewImage && (
|
||
<div className='fixed inset-0 z-[80] bg-black/90 flex items-center justify-center p-6' onClick={() => setShowImagePreview(false)}>
|
||
<div className='relative max-w-full max-h-full'>
|
||
<img src={previewImage} alt='身份证预览' className='max-w-full max-h-[90vh] object-contain' />
|
||
<Button className='absolute top-4 right-4 bg-white/90 hover:bg-white' onClick={() => setShowImagePreview(false)}>
|
||
关闭
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div className='p-4 rounded-2xl border bg-gray-50/60 flex flex-col gap-3'>
|
||
<div className='font-medium'>体检知情同意书</div>
|
||
<div className='text-xs text-gray-500'>点击后弹出知情同意书全文及签名区域，签署完成后回到签到页面。</div>
|
||
<div className='flex flex-col gap-2'>
|
||
{consentLoading && <div className='text-xs text-gray-500'>加载中...</div>}
|
||
{!consentLoading && consentMessage && <div className='text-xs text-amber-600'>{consentMessage}</div>}
|
||
{!consentLoading && consentList.length > 0 && (
|
||
<div className='space-y-2'>
|
||
{consentList.map((item) => (
|
||
<div
|
||
key={item.pdf_url || item.pdf_name}
|
||
className='flex items-center justify-between gap-3 p-3 rounded-xl border bg-white shadow-sm'
|
||
>
|
||
<div className='text-sm text-gray-800 truncate flex items-center gap-2 relative pr-20'>
|
||
<span className='truncate'>{item.pdf_name}</span>
|
||
{item.combination_code !== undefined && signedCombinationCodes.includes(Number(item.combination_code)) && (
|
||
<img
|
||
src='/sign.png'
|
||
alt='已签名'
|
||
className='w-16 h-16 absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none select-none'
|
||
loading='lazy'
|
||
/>
|
||
)}
|
||
</div>
|
||
<Button
|
||
className='py-1.5 px-3'
|
||
onClick={() => {
|
||
if (busy) return;
|
||
|
||
let target = item;
|
||
|
||
// 如果本地已保存签名后的PDF列表，则优先使用签名后的PDF地址
|
||
if (examId) {
|
||
const storedList = getTongyishuPdfList(examId);
|
||
if (storedList && item.combination_code !== undefined && item.combination_code !== null) {
|
||
const code = Number(item.combination_code);
|
||
const matched = storedList.find(
|
||
(pdf) => pdf.combination_code !== null && Number(pdf.combination_code) === code,
|
||
);
|
||
if (matched && matched.pdf_url) {
|
||
target = {
|
||
...item,
|
||
pdf_url: matched.pdf_url,
|
||
};
|
||
}
|
||
}
|
||
}
|
||
|
||
setPreviewPdf(target);
|
||
}}
|
||
disabled={busy}
|
||
>
|
||
查看
|
||
</Button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
{previewPdf && (
|
||
<div className='fixed inset-0 z-[60] bg-black/75 flex flex-col'>
|
||
<div className='flex items-center justify-between p-4 text-white bg-gray-900/80'>
|
||
<div className='text-sm font-medium truncate pr-3'>{previewPdf.pdf_name}</div>
|
||
<div className='flex items-center gap-2'>
|
||
<Button className='py-1 px-3' onClick={() => !busy && setShowSignature(true)} disabled={busy}>
|
||
签到
|
||
</Button>
|
||
<Button className='py-1 px-3' onClick={() => !busy && setPreviewPdf(null)} disabled={busy}>
|
||
关闭
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<div className='flex-1 bg-gray-100'>
|
||
<iframe src={previewPdf.pdf_url} title={previewPdf.pdf_name} className='w-full h-full' />
|
||
</div>
|
||
</div>
|
||
)}
|
||
{showSignature && (
|
||
<div className='fixed inset-0 z-[70] bg-black/80 flex items-center justify-center px-6'>
|
||
<div className='bg-white rounded-2xl w-full max-w-3xl shadow-2xl p-4 flex flex-col gap-4'>
|
||
<div className='flex items-center justify之间'>
|
||
<div className='text-base font-semibold text-gray-900'>签署知情同意书</div>
|
||
<div className='flex items-center gap-2'>
|
||
<Button className='py-1 px-3' onClick={() => setShowSignature(false)} disabled={busy}>
|
||
关闭
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<div className='ui7-signature-wrapper border rounded-xl overflow-hidden bg-gray-50'>
|
||
<SignaturePad
|
||
ref={signaturePadRef}
|
||
className='ui7-signature-canvas w-full h-72 bg-white touch-none'
|
||
/>
|
||
<div className='flex items-center justify-between px-3 py-2 bg-gray-50 border-t'>
|
||
<div className='text-xs text-gray-500'>请在上方区域签名完成签到</div>
|
||
<Button className='ui7-clear-button py-1 px-3' onClick={() => signaturePadRef.current?.clear()} disabled={submitLoading}>
|
||
清除
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
{submitMessage && (
|
||
<div className={`text-sm text-center ${submitMessage.includes('成功') ? 'text-green-600' : 'text-amber-600'}`}>{submitMessage}</div>
|
||
)}
|
||
<div className='flex items-center justify-end gap-3'>
|
||
<Button
|
||
className='py-2 px-6'
|
||
onClick={() => {
|
||
setShowSignature(false);
|
||
setSubmitMessage(null);
|
||
signaturePadRef.current?.clear();
|
||
}}
|
||
disabled={submitLoading}
|
||
>
|
||
取消
|
||
</Button>
|
||
<Button
|
||
className='py-2 px-6 bg-blue-600 text-white hover:bg-blue-700'
|
||
onClick={handleSubmitSign}
|
||
disabled={submitLoading}
|
||
>
|
||
{submitLoading ? '提交中...' : '提交签名'}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
|