yuanhe/ipad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善打印

Browse Source
This commit is contained in:
xianyi
2026-01-06 16:42:56 +08:00
parent f17f9774ac
commit 973f5338af
3 changed files with 224 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

322
src/components/exam/ExamSignPanel.tsx
View File

@@ -13,6 +13,7 @@ import {
setAddItemBillPdf,
getAddItemBillPdf as getAddItemBillPdfFromStorage,
type TongyishuPdfInfo,
type AddItemBillPdfInfo,
} from '../../utils/examActions';
import type { SignaturePadHandle } from '../ui';
import { Button, SignaturePad } from '../ui';
@@ -73,10 +74,9 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
const [daojiandanPdfReady, setDaojiandanPdfReady] = useState(false);
const [daojiandanPdfBlobUrl, setDaojiandanPdfBlobUrl] = useState<string | null>(null);
const daojiandanCanvasContainerRef = useRef<HTMLDivElement>(null);
// 加项单相关状态
const [addItemBillUrl, setAddItemBillUrl] = useState<string | null>(null);
const [addItemBillName, setAddItemBillName] = useState<string>('加项单');
const [isAddItemBillSigned, setIsAddItemBillSigned] = useState(false); // 加项单是否已签名
// 加项单相关状态（支持多个加项单）
const [addItemBillList, setAddItemBillList] = useState<AddItemBillPdfInfo[]>([]);
const [currentAddItemBill, setCurrentAddItemBill] = useState<AddItemBillPdfInfo | null>(null);
const [showAddItemBillPreview, setShowAddItemBillPreview] = useState(false);
const [showAddItemBillSignature, setShowAddItemBillSignature] = useState(false);
const addItemBillSignaturePadRef = useRef<SignaturePadHandle | null>(null);
@@ -362,31 +362,17 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
fetchDaojiandan();
}
// 检查加项单PDF（逻辑和导检单一样）
const storedAddItemBill = getAddItemBillPdfFromStorage(examId);
if (storedAddItemBill && storedAddItemBill.pdf_url) {
setAddItemBillUrl(storedAddItemBill.pdf_url);
setAddItemBillName(storedAddItemBill.pdf_name || '加项单');
// 使用 localStorage 中保存的 is_signed 字段判断是否已签名
setIsAddItemBillSigned(storedAddItemBill.is_signed === true);
// 检查加项单PDF（可能有多个）
const storedAddItemBillList = getAddItemBillPdfFromStorage(examId);
if (storedAddItemBillList && storedAddItemBillList.length > 0) {
setAddItemBillList(storedAddItemBillList);
// 默认选中第一个未签名的加项单，如果都已签名则选中第一个
const unsigned = storedAddItemBillList.find((item) => item.is_signed !== true);
setCurrentAddItemBill(unsigned || storedAddItemBillList[0]);
} else {
// 如果 localStorage 中没有加项单，调用接口获取未签名的加项单用于查看和签名
const fetchAddItemBill = async () => {
try {
const res = await getAddItemBillPdfApi({ exam_id: examId });
if (res.Status === 200 && res.Data?.pdf_url) {
const pdfUrlValue = res.Data.pdf_url;
const pdfNameValue = res.Data.pdf_name || '加项单';
// 不保存到 localStorage，只用于显示和签名
setAddItemBillUrl(pdfUrlValue);
setAddItemBillName(pdfNameValue);
setIsAddItemBillSigned(false); // 接口获取的是未签名的
}
} catch (err) {
console.error('获取加项单失败', err);
}
};
fetchAddItemBill();
// 没有加项单：不再主动调用接口获取，因为新接口需要 CombinationCode（仅支付时知道）
setAddItemBillList([]);
setCurrentAddItemBill(null);
}
}, [examId]);
@@ -578,9 +564,9 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
renderAllPages();
}, [daojiandanPdfData]);
// 加载加项单 PDF 数据
// 加载加项单 PDF 数据（当前选中的加项单）
useEffect(() => {
if (!showAddItemBillPreview || !addItemBillUrl) {
if (!showAddItemBillPreview || !currentAddItemBill?.pdf_url) {
setAddItemBillPdfData(null);
setAddItemBillPdfBlobUrl(null);
setAddItemBillPdfReady(false);
@@ -592,7 +578,7 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
setAddItemBillPdfLoading(true);
setAddItemBillPdfData(null);
fetch(addItemBillUrl)
fetch(currentAddItemBill.pdf_url)
.then((resp) => {
if (!resp.ok) throw new Error('获取PDF文件失败');
return resp.blob();
@@ -616,7 +602,7 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
URL.revokeObjectURL(objectUrl);
}
};
}, [showAddItemBillPreview, addItemBillUrl]);
}, [showAddItemBillPreview, currentAddItemBill?.pdf_url]);
// 渲染加项单 PDF
useEffect(() => {
@@ -736,29 +722,19 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
};
}, [showDaojiandanPreview, daojiandanUrl]);
// 加项单预览：使用 pdfjs 渲染到 canvas
// 加项单预览：使用 pdfjs 渲染到 canvas（依赖加载好的 addItemBillPdfData）
useEffect(() => {
if (!showAddItemBillPreview || !addItemBillUrl || !addItemBillCanvasContainerRef.current) return;
if (!showAddItemBillPreview || !addItemBillPdfData || !addItemBillCanvasContainerRef.current) return;
const container = addItemBillCanvasContainerRef.current;
let cancelled = false;
container.innerHTML = '';
const renderAddItemBill = async () => {
try {
setAddItemBillPdfLoading(true);
container.innerHTML = '';
const resp = await fetch(addItemBillUrl);
if (!resp.ok) throw new Error('获取PDF文件失败');
const blob = await resp.blob();
const arrayBuffer = await blob.arrayBuffer();
const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
const pdf = await pdfjsLib.getDocument({ data: addItemBillPdfData }).promise;
const scale = 3.0;
for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
if (cancelled) return;
const page = await pdf.getPage(pageNum);
const viewport = page.getViewport({ scale });
@@ -785,20 +761,15 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
}
} catch (err) {
console.error('加项单PDF 渲染失败', err);
} finally {
if (!cancelled) {
setAddItemBillPdfLoading(false);
}
}
};
renderAddItemBill();
return () => {
cancelled = true;
container.innerHTML = '';
};
}, [showAddItemBillPreview, addItemBillUrl]);
}, [showAddItemBillPreview, addItemBillPdfData]);
const handlePrint = () => {
if (!pdfBlobUrl || !pdfReady || !canvasContainerRef.current || !previewPdf) return;
@@ -1104,13 +1075,18 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
}
};
// 加项单签名提交
// 加项单签名提交（针对当前选中的加项单）
const handleSubmitAddItemBillSign = async () => {
if (!examId) {
setAddItemBillSubmitMessage('缺少必要信息，无法提交签名');
return;
}
if (!currentAddItemBill) {
setAddItemBillSubmitMessage('没有可签名的加项单');
return;
}
const dataUrl = addItemBillSignaturePadRef.current?.toDataURL('image/png');
if (!dataUrl) {
setAddItemBillSubmitMessage('请先完成签名');
@@ -1124,6 +1100,8 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
const res = await submitAddItemBillSign({
exam_id: examId,
pdf_sort: currentAddItemBill.pdf_sort,
combinationCode: currentAddItemBill.combinationCode,
sign_file: blob,
});
@@ -1131,17 +1109,40 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
setAddItemBillSubmitMessage('签名提交成功');
const pdfUrlValue = res.Data.pdf_url;
const pdfNameValue = res.Data.pdf_name || '加项单';
setAddItemBillUrl(pdfUrlValue);
setAddItemBillName(pdfNameValue);
setIsAddItemBillSigned(true); // 签名成功后标记为已签名
// 保存加项单PDF信息到localStorage（标记为已签名）
setAddItemBillPdf(examId, {
pdf_name: pdfNameValue,
pdf_url: pdfUrlValue,
is_signed: true,
// 更新当前加项单为已签名，并更新本地列表与 localStorage
setAddItemBillList((prev) => {
const next = prev.map((item) => {
if (item.pdf_sort === currentAddItemBill.pdf_sort) {
const updated: AddItemBillPdfInfo = {
...item,
pdf_name: pdfNameValue,
pdf_url: pdfUrlValue,
payment_status: res.Data?.payment_status ?? item.payment_status ?? null,
payment_status_name: res.Data?.payment_status_name ?? item.payment_status_name ?? null,
is_signed: true,
};
// 同步写入 localStorage
setAddItemBillPdf(examId, updated);
return updated;
}
return item;
});
return next;
});
setCurrentAddItemBill((prev) =>
prev && prev.pdf_sort === currentAddItemBill.pdf_sort
? {
...prev,
pdf_name: pdfNameValue,
pdf_url: pdfUrlValue,
payment_status: res.Data?.payment_status ?? prev.payment_status ?? null,
payment_status_name: res.Data?.payment_status_name ?? prev.payment_status_name ?? null,
is_signed: true,
}
: prev
);
setTimeout(() => {
setShowAddItemBillSignature(false);
setAddItemBillSubmitMessage(null);
@@ -1160,11 +1161,11 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
};
// 加项单直接打印
const handleAddItemBillDirectPrint = async () => {
if (!addItemBillUrl) return;
const handleAddItemBillDirectPrint = async (target: AddItemBillPdfInfo | null) => {
if (!target?.pdf_url) return;
try {
const response = await fetch(addItemBillUrl);
const response = await fetch(target.pdf_url);
if (!response.ok) throw new Error('获取PDF文件失败');
const blob = await response.blob();
const arrayBuffer = await blob.arrayBuffer();
@@ -1200,7 +1201,7 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
<!DOCTYPE html>
<html>
<head>
<title>加项单打印</title>
<title>${target.pdf_name || '加项单打印'}</title>
<style>
@media print {
body {
@@ -1544,33 +1545,36 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
}
// 处理加项单（如果有且已签名）
if (addItemBillUrl && isAddItemBillSigned) {
if (addItemBillList.length > 0) {
try {
const response = await fetch(addItemBillUrl);
if (response.ok) {
const blob = await response.blob();
const arrayBuffer = await blob.arrayBuffer();
for (const bill of addItemBillList) {
if (!bill.pdf_url || bill.is_signed !== true) continue;
const response = await fetch(bill.pdf_url);
if (response.ok) {
const blob = await response.blob();
const arrayBuffer = await blob.arrayBuffer();
const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
const page = await pdf.getPage(pageNum);
const viewport = page.getViewport({ scale });
for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
const page = await pdf.getPage(pageNum);
const viewport = page.getViewport({ scale });
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
if (!context) continue;
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
if (!context) continue;
canvas.height = viewport.height;
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport,
} as any;
const renderContext = {
canvasContext: context,
viewport: viewport,
} as any;
await page.render(renderContext).promise;
allImages.push(canvas.toDataURL('image/png'));
await page.render(renderContext).promise;
allImages.push(canvas.toDataURL('image/png'));
}
}
}
} catch (err) {
@@ -1913,73 +1917,75 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
)}
</div>
</div>
{/* 加项单 */}
{addItemBillUrl && (
<div className='flex items-center justify-between gap-3 p-2 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'>{addItemBillName.length > 12 ? addItemBillName.slice(0, 12) + "..." : addItemBillName}</span>
{isAddItemBillSigned && (
<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>
<div className='flex items-center gap-2'>
{isAddItemBillSigned ? (
// 已签名：显示打印和查看按钮
<>
<Button
className='py-1.5 px-3 bg-blue-600 hover:bg-blue-700 text-white'
onClick={() => {
if (busy) return;
handleAddItemBillDirectPrint();
}}
disabled={busy}
>
打印
</Button>
<Button
className='py-1.5 px-3'
onClick={() => {
if (busy) return;
setShowAddItemBillPreview(true);
}}
disabled={busy}
>
查看
</Button>
</>
) : (
// 未签名：显示查看和签名按钮
<>
<Button
className='py-1.5 px-3'
onClick={() => {
if (busy) return;
setShowAddItemBillPreview(true);
}}
disabled={busy}
>
查看
</Button>
<Button
className='py-1.5 px-3'
onClick={() => {
if (busy) return;
setShowAddItemBillSignature(true);
}}
disabled={busy}
>
签名
</Button>
</>
)}
</div>
</div>
)}
{/* 加项单列表（可能有多个） */}
{addItemBillList.length > 0 &&
addItemBillList.map((bill) => {
const isSigned = bill.is_signed === true;
const isCurrent = currentAddItemBill && currentAddItemBill.pdf_sort === bill.pdf_sort;
const displayName =
bill.pdf_name && bill.pdf_name.length > 12 ? bill.pdf_name.slice(0, 12) + '...' : bill.pdf_name || '加项单';
return (
<div
key={bill.pdf_sort}
className='flex items-center justify-between gap-3 p-2 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'>
{displayName}
{typeof bill.pdf_sort === 'number' ? `（#${bill.pdf_sort}）` : ''}
</span>
{isSigned && (
<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>
<div className='flex items-center gap-2'>
{isSigned && bill.pdf_url && (
<Button
className='py-1.5 px-3 bg-blue-600 hover:bg-blue-700 text-white'
onClick={() => {
if (busy) return;
handleAddItemBillDirectPrint(bill);
}}
disabled={busy}
>
打印
</Button>
)}
{bill.pdf_url && (
<Button
className='py-1.5 px-3'
onClick={() => {
if (busy) return;
setCurrentAddItemBill(bill);
setShowAddItemBillPreview(true);
}}
disabled={busy}
>
查看
</Button>
)}
{!isSigned && (
<Button
className='py-1.5 px-3'
onClick={() => {
if (busy) return;
setCurrentAddItemBill(bill);
setShowAddItemBillSignature(true);
}}
disabled={busy}
>
签名
</Button>
)}
</div>
</div>
);
})}
</div>
)}
</div>
@@ -2213,21 +2219,21 @@ export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
)
}
{
showAddItemBillPreview && addItemBillUrl && (
showAddItemBillPreview && currentAddItemBill && currentAddItemBill.pdf_url && (
<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'>{addItemBillName}</div>
<div className='text-sm font-medium truncate pr-3'>{currentAddItemBill.pdf_name || '加项单'}</div>
<div className='flex items-center gap-2'>
{isAddItemBillSigned && (
{currentAddItemBill.is_signed && (
<Button
className='py-1 px-3 bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-50 disabled:cursor-not-allowed'
onClick={handleAddItemBillDirectPrint}
onClick={() => handleAddItemBillDirectPrint(currentAddItemBill)}
disabled={busy}
>
打印
</Button>
)}
{!isAddItemBillSigned && (
{!currentAddItemBill.is_signed && (
<Button
className='py-1 px-3 bg-blue-600 hover:bg-blue-700 text-white'
onClick={() => {