提交 4a806a18 authored 作者: 钟是志's avatar 钟是志

签名组件优化

上级 800f57e3
...@@ -8,7 +8,26 @@ import SignatureCanvas from 'react-signature-canvas'; ...@@ -8,7 +8,26 @@ import SignatureCanvas from 'react-signature-canvas';
import { message, Button } from 'antd'; import { message, Button } from 'antd';
import config from '@/webPublic/one_stop_public/config'; import config from '@/webPublic/one_stop_public/config';
import reqwest from 'reqwest'; import reqwest from 'reqwest';
import { getToken } from '@/webPublic/one_stop_public/utils/token'; import { getToken, getUserInfo } from '@/webPublic/one_stop_public/utils/token';
import { uaaRequest } from '@/webPublic/one_stop_public/utils/request';
import { getOneStopMyInfo } from '@/webPublic/one_stop_public/utils/utils';
// 保存签名 到用户基础信息上
function saveSign(url){
if(typeof url !== 'string' || url.length < 15){
return true;
}
const userInfo = getUserInfo();
uaaRequest('/UserApi/saveMySysBackgroundImage', {
username: userInfo.stuNo,
backgroundImageUrl: userInfo.backgroundImageUrl,
isUseBackImage: userInfo.isUseBackImage,
userSign: url,
}).then((g) => {
getOneStopMyInfo();
return true;
});
}
function dataURLtoBlob(toDataURL) { function dataURLtoBlob(toDataURL) {
var arr = toDataURL.split(','), var arr = toDataURL.split(','),
...@@ -33,7 +52,7 @@ export default class Index extends Component { ...@@ -33,7 +52,7 @@ export default class Index extends Component {
super(props); super(props);
const value = props.value; const value = props.value;
this.state = { this.state = {
url: value, url: value || getUserInfo().userSign,
}; };
} }
...@@ -88,15 +107,23 @@ export default class Index extends Component { ...@@ -88,15 +107,23 @@ export default class Index extends Component {
processData: false, processData: false,
data: formData, data: formData,
success: (url) => { success: (url) => {
if (!('value' in this.props)) { /**
this.setState({ url: url }); * 这里的成功 是走的下面的 error
} * */
this.triggerChange(url); // console.log('22334455');
// if (!('value' in this.props)) {
// this.setState({ url: url });
// }
// console.log(url);
// this.triggerChange(url);
//
message.success('保存成功'); message.success('保存成功');
}, },
error: (e) => { error: (e) => {
if (e.status == 200) { if (e.status === 200) {
const urlP = e.response;
saveSign(urlP);
message.success('保存成功'); message.success('保存成功');
if (!('value' in this.props)) { if (!('value' in this.props)) {
this.setState({ url: e.response }); this.setState({ url: e.response });
...@@ -107,18 +134,23 @@ export default class Index extends Component { ...@@ -107,18 +134,23 @@ export default class Index extends Component {
} }
}, },
}); });
//let trimmedCanvas = this.sigCanvas.getTrimmedCanvas();
// this.setState({trimmedDataURL: this.sigCanvas.toDataURL('image/png')})
}; };
componentDidMount() {
if(!this.props.value && this.state.value){
this.triggerChange(this.state.value);
}
}
render() { render() {
console.log('签名组件');
const { const {
width, width,
height, height,
} = this.props; } = this.props;
const { url } = this.state; const { url } = this.state;
return ( return (
<div id='canvas_signature' style={{ <div id="canvas_signature" style={{
width: '100%', width: '100%',
height: '100%', height: '100%',
marginLeft: 5, marginLeft: 5,
...@@ -134,17 +166,17 @@ export default class Index extends Component { ...@@ -134,17 +166,17 @@ export default class Index extends Component {
{url ? ( {url ? (
<img src={config.httpServer + url} style={{ <img src={config.httpServer + url} style={{
width: width, width: width,
height: height, height: height - 20,
}} /> }}/>
) : ( ) : (
<SignatureCanvas <SignatureCanvas
penColor='black' penColor="black"
ref={(ref) => { ref={(ref) => {
this.sigCanvas = ref; this.sigCanvas = ref;
}} }}
canvasProps={{ canvasProps={{
width: width || 400, width: width || 400,
height: height || 200, height: height ? height - 20 : 200,
className: 'sigCanvas', className: 'sigCanvas',
}} }}
/> />
...@@ -155,15 +187,15 @@ export default class Index extends Component { ...@@ -155,15 +187,15 @@ export default class Index extends Component {
bottom: 5, bottom: 5,
}}> }}>
{url ? ( {url ? (
<Button type='danger' size='small' onClick={this.delete}> <Button type="danger" size="small" onClick={this.delete}>
重写 重写
</Button> </Button>
) : ( ) : (
<> <>
<Button style={{ marginLeft: 12 }} type='danger' size='small' onClick={this.clear}> <Button style={{ marginLeft: 12 }} type="danger" size="small" onClick={this.clear}>
清除 清除
</Button> </Button>
<Button style={{ marginLeft: 12 }} onClick={this.trim} size='small' type='primary'> <Button style={{ marginLeft: 12 }} onClick={this.trim} size="small" type="primary">
保存 保存
</Button> </Button>
</> </>
......
...@@ -3754,6 +3754,7 @@ ${obj[dataColumn.base52]} ...@@ -3754,6 +3754,7 @@ ${obj[dataColumn.base52]}
: json.width : json.width
} }
height={json.height} height={json.height}
get={get}
/>, />,
); );
if ( if (
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论