优化 Loading 状态
This commit is contained in:
@@ -7,9 +7,10 @@ import { Button, SignaturePad } from '../ui';
|
||||
|
||||
interface ExamSignPanelProps {
|
||||
examId?: number;
|
||||
onBusyChange?: (busy: boolean) => void;
|
||||
}
|
||||
|
||||
export const ExamSignPanel = ({ examId }: ExamSignPanelProps) => {
|
||||
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);
|
||||
@@ -25,6 +26,12 @@ export const ExamSignPanel = ({ examId }: ExamSignPanelProps) => {
|
||||
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';
|
||||
|
||||
@@ -205,7 +212,7 @@ export const ExamSignPanel = ({ examId }: ExamSignPanelProps) => {
|
||||
<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={signLoading}>
|
||||
<Button className='py-1.5 px-3' onClick={handlePickFile} disabled={busy}>
|
||||
{idCardFile ? '重新拍照' : '拍照'}
|
||||
</Button>
|
||||
<input
|
||||
@@ -224,7 +231,7 @@ export const ExamSignPanel = ({ examId }: ExamSignPanelProps) => {
|
||||
<img src={previewImage} alt='身份证预览' className='w-full h-full object-cover' />
|
||||
</div>
|
||||
)}
|
||||
<Button className='py-1.5 px-4 flex-1' onClick={handleSign} disabled={signLoading || !idCardFile}>
|
||||
<Button className='py-1.5 px-4 flex-1' onClick={handleSign} disabled={busy || !idCardFile}>
|
||||
{signLoading ? '签到中...' : '签到'}
|
||||
</Button>
|
||||
</div>
|
||||
@@ -266,7 +273,7 @@ export const ExamSignPanel = ({ examId }: ExamSignPanelProps) => {
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<Button className='py-1.5 px-3' onClick={() => setPreviewPdf(item)}>
|
||||
<Button className='py-1.5 px-3' onClick={() => !busy && setPreviewPdf(item)} disabled={busy}>
|
||||
查看
|
||||
</Button>
|
||||
</div>
|
||||
@@ -280,10 +287,10 @@ export const ExamSignPanel = ({ examId }: ExamSignPanelProps) => {
|
||||
<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={() => setShowSignature(true)}>
|
||||
<Button className='py-1 px-3' onClick={() => !busy && setShowSignature(true)} disabled={busy}>
|
||||
签到
|
||||
</Button>
|
||||
<Button className='py-1 px-3' onClick={() => setPreviewPdf(null)}>
|
||||
<Button className='py-1 px-3' onClick={() => !busy && setPreviewPdf(null)} disabled={busy}>
|
||||
关闭
|
||||
</Button>
|
||||
</div>
|
||||
@@ -299,7 +306,7 @@ export const ExamSignPanel = ({ examId }: ExamSignPanelProps) => {
|
||||
<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)}>
|
||||
<Button className='py-1 px-3' onClick={() => setShowSignature(false)} disabled={busy}>
|
||||
关闭
|
||||
</Button>
|
||||
</div>
|
||||
@@ -311,7 +318,7 @@ export const ExamSignPanel = ({ examId }: ExamSignPanelProps) => {
|
||||
/>
|
||||
<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()}>
|
||||
<Button className='ui7-clear-button py-1 px-3' onClick={() => signaturePadRef.current?.clear()} disabled={submitLoading}>
|
||||
清除
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user