Skip to content

W
WebPublic
提交 7ce61848 authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

签名组件查看

上级 a028fa82
隐藏空白字符变更
内嵌 并排
正在显示 包含 153 行增加 和 133 行删除
one_stop_public/AffairButton/AuditButton/userTable/index.jsx
浏览文件 @ 7ce61848
...@@ -174,7 +174,7 @@ export default class userButton extends Component { ...@@ -174,7 +174,7 @@ export default class userButton extends Component {
let dom = document.getElementById('btnsModalMountDiv'); let dom = document.getElementById('btnsModalMountDiv');
return dom || document.body; return dom || document.body;
}} }}
title={isSecond ? '重新发起' : '通过审批'} title={isSecond ? '重新发起' : '审批'}
width={600} width={600}
handleCancel={this.handleCancelOk}> handleCancel={this.handleCancelOk}>
<div className={styles.is_ok}> <div className={styles.is_ok}>
......
one_stop_public/Signature/index.jsx
浏览文件 @ 7ce61848
...@@ -10,145 +10,165 @@ import config from '@/webPublic/one_stop_public/config'; ...@@ -10,145 +10,165 @@ import config from '@/webPublic/one_stop_public/config';
import reqwest from 'reqwest'; import reqwest from 'reqwest';
function dataURLtoBlob(toDataURL) { function dataURLtoBlob(toDataURL) {
var arr = toDataURL.split(','), var arr = toDataURL.split(','),
mime = arr[0].match(/:(.*?);/)[1], mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), bstr = atob(arr[1]),
n = bstr.length, n = bstr.length,
u8arr = new Uint8Array(n); u8arr = new Uint8Array(n);
while (n--) { while (n--) {
u8arr[n] = bstr.charCodeAt(n); u8arr[n] = bstr.charCodeAt(n);
} }
return new Blob([u8arr], { type: mime }); return new Blob([u8arr], { type: mime });
} }
function blobToFile(Blob, fileName) { function blobToFile(Blob, fileName) {
Blob.lastModifiedDate = new Date(); Blob.lastModifiedDate = new Date();
Blob.name = fileName; Blob.name = fileName;
return Blob; return Blob;
} }
export default class Index extends Component { export default class Index extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
const value = props.value; const value = props.value;
this.state = { this.state = {
url: value, url: value,
}; };
} }
triggerChange = (changedValue) => {
// Should provide an event to pass value to Form. triggerChange = (changedValue) => {
const onChange = this.props.onChange; // Should provide an event to pass value to Form.
if (onChange) { const onChange = this.props.onChange;
onChange(changedValue); if (onChange) {
} onChange(changedValue);
}; }
componentWillReceiveProps(nextProps) { };
// Should be a controlled component.
if ('value' in nextProps) { componentWillReceiveProps(nextProps) {
const value = nextProps.value; // Should be a controlled component.
if ('value' in nextProps) {
const value = nextProps.value;
this.setState({ url: value });
//
}
}
this.setState({ url: value }); sigCanvas = {
clear: () => {
},
toDataURL: (param) => {
return '';
},
};
// clear = () => {
} this.sigCanvas.clear();
} };
sigCanvas = { delete = () => {
clear: () => {}, if (!('value' in this.props)) {
toDataURL: (param) => { this.setState({ url: null });
return ''; }
}, this.triggerChange(null);
}; };
trim = () => {
const formData = new FormData();
const xx = dataURLtoBlob(this.sigCanvas.toDataURL('image/png'));
const file = blobToFile(xx, 'sign.png');
if (file == null) {
return;
}
formData.append('file', file, 'sign.png');
reqwest({
url: config.uploadUrl,
method: 'post',
processData: false,
data: formData,
success: (url) => {
if (!('value' in this.props)) {
this.setState({ url: url });
}
this.triggerChange(url);
clear = () => { message.success('保存成功');
this.sigCanvas.clear(); },
}; error: (e) => {
delete = () => { if (e.status == 200) {
if (!('value' in this.props)) { message.success('保存成功');
this.setState({ url: null }); if (!('value' in this.props)) {
} this.setState({ url: e.response });
this.triggerChange(null); }
}; this.triggerChange(e.response);
trim = () => { } else {
const formData = new FormData(); message.error('保存失败');
const xx = dataURLtoBlob(this.sigCanvas.toDataURL('image/png')); }
const file = blobToFile(xx, 'sign.png'); },
if (file == null) { });
return; //let trimmedCanvas = this.sigCanvas.getTrimmedCanvas();
} // this.setState({trimmedDataURL: this.sigCanvas.toDataURL('image/png')})
formData.append('file', file, 'sign.png'); };
reqwest({
url: config.uploadUrl,
method: 'post',
processData: false,
data: formData,
success: (url) => {
if (!('value' in this.props)) {
this.setState({ url: url });
}
this.triggerChange(url);
message.success('保存成功'); render() {
}, const {
error: (e) => { width,
if (e.status == 200) { height,
message.success('保存成功'); } = this.props;
if (!('value' in this.props)) { const { url } = this.state;
this.setState({ url: e.response }); return (
} <div id='canvas_signature' style={{
this.triggerChange(e.response); width: '100%',
} else { height: '100%',
message.error('保存失败'); marginLeft: 5,
} }}>
}, <div
}); style={{
//let trimmedCanvas = this.sigCanvas.getTrimmedCanvas(); width: width,
// this.setState({trimmedDataURL: this.sigCanvas.toDataURL('image/png')}) textAlign: 'center',
}; height: height,
render() { border: '1px dashed gray',
const { width, height } = this.props; position: 'relative',
const { url } = this.state; }}>
return ( {url ? (
<div id="canvas_signature" style={{ width: '100%', height: '100%', marginLeft: 5 }}> <img src={config.httpServer + url} style={{
<div width: width,
style={{ height: height,
width: width, }} />
textAlign: 'center', ) : (
height: height, <SignatureCanvas
border: '1px dashed gray', penColor='black'
position: 'relative', ref={(ref) => {
}}> this.sigCanvas = ref;
{url ? ( }}
<img src={config.httpServer + url} style={{ width: width, height: height }} /> canvasProps={{
) : ( width: width || 400,
<SignatureCanvas height: height || 200,
penColor="black" className: 'sigCanvas',
ref={(ref) => { }}
this.sigCanvas = ref; />
}} )}
canvasProps={{ <div style={{
width: width || 400, position: 'absolute',
height: height || 200, left: 5,
className: 'sigCanvas', bottom: 5,
}} }}>
/> {url ? (
)} <Button type='danger' size='small' onClick={this.delete}>
<div style={{ position: 'absolute', left: 5, bottom: 5 }}> 重写
{url ? ( </Button>
<Button type="danger" size="small" onClick={this.delete}> ) : (
重写 <>
</Button> <Button style={{ marginLeft: 12 }} type='danger' size='small' onClick={this.clear}>
) : ( 清除
<> </Button>
<Button style={{ marginLeft: 12 }} type="danger" size="small" onClick={this.clear}> <Button style={{ marginLeft: 12 }} onClick={this.trim} size='small' type='primary'>
清除 保存
</Button> </Button>
<Button style={{ marginLeft: 12 }} onClick={this.trim} size="small" type="primary"> </>
保存 )}
</Button> </div>
</> </div>
)} </div>
</div> );
</div> }
</div>
);
}
} }
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论