92 lines
2.3 KiB
JavaScript
92 lines
2.3 KiB
JavaScript
import { Button, Image, message, Modal } from "antd";
|
|
import dayjs from "dayjs";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import SignatureCanvas from "react-signature-canvas";
|
|
import { base642File } from "../../utils";
|
|
|
|
/**
|
|
* 签字组件
|
|
*/
|
|
function Signature(props) {
|
|
const {
|
|
onConfirm,
|
|
width = 752,
|
|
height = 300,
|
|
url = "",
|
|
...restProps
|
|
} = props;
|
|
|
|
const [signatureModalOpen, setSignatureModalOpen] = useState(false);
|
|
const signatureCanvas = useRef(null);
|
|
const [base64, setBase64] = useState("");
|
|
useEffect(() => {
|
|
setBase64(url);
|
|
}, [url]);
|
|
|
|
const onOk = () => {
|
|
if (signatureCanvas.current.isEmpty()) {
|
|
message.warning("请签名");
|
|
return;
|
|
}
|
|
const base64 = signatureCanvas.current.toDataURL();
|
|
setBase64(base64);
|
|
onConfirm({
|
|
time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
|
|
base64,
|
|
file: base642File(base64),
|
|
});
|
|
signatureCanvas.current.clear();
|
|
setSignatureModalOpen(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div>
|
|
<Button
|
|
type="primary"
|
|
onClick={() => {
|
|
setSignatureModalOpen(true);
|
|
}}
|
|
>
|
|
{base64 ? "重新签字" : "手写签字"}
|
|
</Button>
|
|
</div>
|
|
{base64 && (
|
|
<div style={{ border: "1px dashed #d9d9d9", width, height, marginTop: 16 }}>
|
|
<Image src={base64} style={{ width, height, objectFit: "contain" }} />
|
|
</div>
|
|
)}
|
|
<Modal
|
|
title="签字"
|
|
width={800}
|
|
open={signatureModalOpen}
|
|
onCancel={() => setSignatureModalOpen(false)}
|
|
footer={[
|
|
<Button key="clear" onClick={() => signatureCanvas.current.clear()}>重签</Button>,
|
|
<Button
|
|
key="cancel"
|
|
onClick={() => {
|
|
setSignatureModalOpen(false);
|
|
signatureCanvas.current.clear();
|
|
}}
|
|
>
|
|
取消
|
|
</Button>,
|
|
<Button key="ok" type="primary" onClick={onOk}>确定</Button>,
|
|
]}
|
|
>
|
|
<div style={{ border: "1px dashed #d9d9d9" }}>
|
|
<SignatureCanvas
|
|
ref={signatureCanvas}
|
|
penColor="black"
|
|
canvasProps={{ width, height }}
|
|
{...restProps}
|
|
/>
|
|
</div>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Signature;
|