diff --git a/src/components/exam/ExamPrintPanel.tsx b/src/components/exam/ExamPrintPanel.tsx index 3ee1ed0..6958508 100644 --- a/src/components/exam/ExamPrintPanel.tsx +++ b/src/components/exam/ExamPrintPanel.tsx @@ -1,44 +1,62 @@ import { useEffect, useRef, useState } from 'react'; -import { getTongyishuPdf } from '../../api'; +import { submitDaojiandanSign } from '../../api'; import type { ExamClient } from '../../data/mockData'; -import { Button } from '../ui'; +import type { SignaturePadHandle } from '../ui'; +import { Button, SignaturePad } from '../ui'; export const ExamPrintPanel = ({ client }: { client: ExamClient }) => { const [pdfUrl, setPdfUrl] = useState(null); - const [loading, setLoading] = useState(true); + const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [pdfReady, setPdfReady] = useState(false); const [pdfBlobUrl, setPdfBlobUrl] = useState(null); + const [signatureSubmitted, setSignatureSubmitted] = useState(false); + const [submitLoading, setSubmitLoading] = useState(false); + const [submitMessage, setSubmitMessage] = useState(null); + const signaturePadRef = useRef(null); const printRef = useRef(null); const iframeRef = useRef(null); - useEffect(() => { - const physical_exam_id = Number(client.id); - if (!physical_exam_id) { - setError('无效的体检ID'); - setLoading(false); + const handleSubmitSign = async () => { + const examId = Number(client.id); + if (!examId) { + setSubmitMessage('无效的体检ID'); return; } - setPdfReady(false); - getTongyishuPdf({ exam_id: physical_exam_id }) - .then((res) => { - if (res.Status === 200 && res.Data?.list_pdf_url && res.Data.list_pdf_url.length > 0) { - setPdfUrl(res.Data.list_pdf_url[0].pdf_url); - setPdfReady(false); - } else { - setError(res.Message || '未获取到PDF文件'); - } - }) - .catch((err) => { - console.error('获取PDF失败', err); - setError('获取PDF失败,请稍后重试'); - }) - .finally(() => { - setLoading(false); + const dataUrl = signaturePadRef.current?.toDataURL('image/png'); + if (!dataUrl) { + setSubmitMessage('请先完成签名'); + return; + } + + setSubmitLoading(true); + setSubmitMessage(null); + try { + // 将 base64 转换为 Blob + const blob = await fetch(dataUrl).then(r => r.blob()); + + // 提交签名生成导检单PDF + const res = await submitDaojiandanSign({ + exam_id: examId, + sign_file: blob, }); - }, [client.id]); + + if (res.Status === 200 && res.Data?.pdf_url) { + setSubmitMessage('签名提交成功,正在加载导检单...'); + setSignatureSubmitted(true); + setPdfUrl(res.Data.pdf_url); + } else { + setSubmitMessage(res.Message || '签名提交失败'); + } + } catch (err) { + console.error('提交签名失败', err); + setSubmitMessage('签名提交失败,请稍后重试'); + } finally { + setSubmitLoading(false); + } + }; useEffect(() => { if (!pdfUrl) return; @@ -88,24 +106,67 @@ export const ExamPrintPanel = ({ client }: { client: ExamClient }) => {
圆和医疗体检中心 · 导检单预览
-
此为预览页面,实际打印效果以院内打印机为准。
+
+ {signatureSubmitted + ? '此为预览页面,实际打印效果以院内打印机为准。' + : '请先完成签名,签名后将生成导检单PDF'} +
体检号:{client.id}
日期:{new Date().toLocaleDateString('zh-CN')}
- + {signatureSubmitted && ( + + )}
- {loading ? ( + {!signatureSubmitted ? ( +
+
请在下方区域签名
+
+ +
+
请在上方区域签名
+ +
+
+ {submitMessage && ( +
+ {submitMessage} +
+ )} +
+ +
+
+ ) : loading ? (
正在加载PDF...
@@ -115,29 +176,13 @@ export const ExamPrintPanel = ({ client }: { client: ExamClient }) => { ) : pdfUrl ? (