import React, { useEffect, useRef, useState } from 'react' import ReactSignatureCanvas from 'react-signature-canvas' import Drag from '../../../components/Drag' import { UploadFileReturnUrl } from '../../../../apis/process' import styles from './index.less' const Signature = (props) => { const { addons, value, onChange, schema } = props const { disabled, presetValue } = schema const [visible, setVisible] = useState(false) const canvasRef = useRef(null) const open = () => { if (addons) { setVisible(true) } } const onOk = async () => { if (disabled) { setVisible(false) } else { if (addons) { const dataUrl = canvasRef.current.toDataURL(); // 获取 Base64 编码的字符串 const byteString = atob(dataUrl.split(',')[1]); // 将 Base64 编码的字符串转换为字节数组 const mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0]; // 获取 MIME 类型 const ab = new ArrayBuffer(byteString.length); const ia = new Uint8Array(ab); for (let i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } const file = new Blob([ab], { type: mimeString }); // 将字节数组转换为文件流 const formData = new FormData(); // 创建表单数据对象 formData.append('file', file, 'signature.png'); // 添加文件流到表 const { code, data } = await UploadFileReturnUrl(formData) if (code === 0) { onChange(data) setVisible(false) } else { message.error('生成图片失败!') } } } } useEffect(() => { addons?.setValue(addons?.dataPath, presetValue || '') }, [presetValue]) return ( <div className={styles.signature}> <div className={styles.content}> { value ? ( <img onClick={open} src={`${window.origin}/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=${value}`}></img> ) : ( disabled ? null : <div onClick={open} className={styles.text}>点击签名</div> ) } </div> <Drag title={'手写签名'} visible={visible} onOk={onOk} onCancel={() => setVisible(false)} destroyOnClose > { disabled ? ( <img src={`${window.origin}/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=${value}`}></img> ) : ( <div style={{ background: '#F1F1F1', borderRadius: '5px' }}> <ReactSignatureCanvas ref={canvasRef} canvasProps={{ width: 500, height: 300 }} /> </div> ) } </Drag> </div> ) } export default Signature