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