Skip to content

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

签名组件优化

上级 c107150f
隐藏空白字符变更
内嵌 并排
正在显示 包含 304 行增加 和 266 行删除
one_stop_public/Signature/Split.js 0 → 100644
浏览文件 @ f51f0bd1
// 保存签名 到用户基础信息上
import { 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';
export function saveSign(url) {
if (typeof url !== 'string' || url.length < 15) {
return true;
}
const userInfo = getUserInfo();
uaaRequest('/UserApi/saveMySysBackgroundImage', {
username: userInfo.stuNo,
backgroundImageUrl: userInfo.backgroundImageUrl || 'fakeBackgroundImageUrl', // 假数据
isUseBackImage: userInfo.isUseBackImage || false,
userSign: url,
}).then((g) => {
getOneStopMyInfo();
return true;
});
}
export 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 });
}
export function blobToFile(Blob, fileName) {
Blob.lastModifiedDate = new Date();
Blob.name = fileName;
return Blob;
}
one_stop_public/Signature/index.jsx
浏览文件 @ f51f0bd1
...@@ -2,296 +2,276 @@ ...@@ -2,296 +2,276 @@
* 徐立 * 徐立
* 2019年12月6日 * 2019年12月6日
* 电子签章多功能封装 * 电子签章多功能封装
* 2022年8月17日
* 从个人基本信息中拿默认签名.
*/ */
import React, { Component } from 'react'; import React, { Component } from 'react';
import SignatureCanvas from 'react-signature-canvas'; import SignatureCanvas from 'react-signature-canvas';
import { message, Button, Modal } from 'antd'; import { message, Button, Modal, Icon } 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, getUserInfo } 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';
import styles from './mobileSign.less'; import styles from './mobileSign.less';
import { saveSign, dataURLtoBlob, blobToFile } from './Split';
// 保存签名 到用户基础信息上
function saveSign(url) {
if (typeof url !== 'string' || url.length < 15) {
return true;
}
const userInfo = getUserInfo();
uaaRequest('/UserApi/saveMySysBackgroundImage', {
username: userInfo.stuNo,
backgroundImageUrl: userInfo.backgroundImageUrl || 'fakeBackgroundImageUrl', // 假数据
isUseBackImage: userInfo.isUseBackImage || false,
userSign: url,
})
.then((g) => {
getOneStopMyInfo();
return true;
});
}
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 });
}
function blobToFile(Blob, fileName) {
Blob.lastModifiedDate = new Date();
Blob.name = fileName;
return Blob;
}
export default class Signature extends Component { export default class Signature extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
const value = props.value; const value = props.value;
this.state = { this.state = {
url: value || getUserInfo().userSign, url: value || getUserInfo().userSign,
showModal: false, showModal: false,
}; };
} }
triggerChange = (changedValue) => { triggerChange = (changedValue) => {
const onChange = this.props.onChange; const onChange = this.props.onChange;
if (onChange) { if (onChange) {
onChange(changedValue); onChange(changedValue);
} }
}; };
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
// Should be a controlled component. // Should be a controlled component.
if ('value' in nextProps && nextProps.value) { if ('value' in nextProps && nextProps.value) {
const value = nextProps.value; const value = nextProps.value;
if (value !== this.state.url) { if (value !== this.state.url) {
this.setState({ url: value }); this.setState({ url: value });
} }
} }
} }
sigCanvas = { sigCanvas = {
clear: () => { clear: () => {},
}, toDataURL: (param) => {
toDataURL: (param) => { return '';
return ''; },
}, };
};
clear = () => { clear = () => {
this.sigCanvas.clear(); this.sigCanvas.clear();
}; };
delete = () => { delete = () => {
if (!('value' in this.props)) { if (!('value' in this.props)) {
this.setState({ url: null }); this.setState({ url: null });
} }
this.triggerChange(null); this.triggerChange(null);
}; };
trim = () => {
message.info('正在保存签名，请等待');
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');
formData.append('token', getToken());
reqwest({
url: config.uploadUrl,
method: 'post',
processData: false,
data: formData,
success: (url) => {
/**
* 这里的成功 是走的下面的 error
* */
// console.log('22334455');
// if (!('value' in this.props)) {
// this.setState({ url: url });
// }
// this.triggerChange(url); trim = () => {
// message.info('正在保存签名，请等待');
message.success('保存成功'); const formData = new FormData();
}, const xx = dataURLtoBlob(this.sigCanvas.toDataURL('image/png'));
error: (e) => { const file = blobToFile(xx, 'sign.png');
if (e.status === 200) { if (file == null) {
const urlP = e.response; return;
saveSign(urlP); }
message.success('保存成功'); formData.append('file', file, 'sign.png');
if (!('value' in this.props)) { formData.append('token', getToken());
this.setState({ url: e.response }); reqwest({
} url: config.uploadUrl,
this.changeShowModal(); method: 'post',
this.triggerChange(e.response); processData: false,
} else { data: formData,
message.error('保存失败'); success: (url) => {
} /**
}, * 这里的成功 是走的下面的 error
}); * */
}; message.success('保存成功');
},
error: (e) => {
if (e.status === 200) {
const urlP = e.response;
saveSign(urlP);
message.success('保存成功');
if (!('value' in this.props)) {
this.setState({ url: e.response });
}
this.changeShowModal();
this.triggerChange(e.response);
} else {
message.error('保存失败');
}
},
});
};
componentDidMount() { componentDidMount() {
if (!this.props.value && this.state.url) { if (!this.props.value && this.state.url) {
setTimeout(() => { setTimeout(() => {
this.triggerChange(this.state.url); this.triggerChange(this.state.url);
}, 2000); }, 2000);
} }
} }
changeShowModal = () => { changeShowModal = () => {
this.setState({ this.setState({
showModal: !this.state.showModal, showModal: !this.state.showModal,
}); });
}; };
// 移动端签名组件 showSignImage = () => {
MobileSign = () => {
const { url } = this.state; const { url } = this.state;
if (url) { Modal.info({
return <div className={styles.mobileSign}> title: '查看签名',
<Button type={'primary'} content: <div className={styles.showDiv}>
onClick={this.changeShowModal} <img src={config.httpServer + url}/>
className={styles.reSign} </div>,
> footer: null,
重新签名 });
</Button>
<img src={config.httpServer + url} style={{}}
/>
</div>;
} else {
return <div className={styles.mobileSign2}>
<Button type={'primary'} onClick={this.changeShowModal}>
点击开始签名
</Button>
</div>;
}
}; };
MobileModal = () => { EditIcon = () => {
const { showModal } = this.state; return <Icon type="edit" onClick={this.changeShowModal} className={styles.editIcon}/>
const height = 300; }
const width = window.screen.width - 50;
return (
showModal && <Modal className={styles.mobileModal}
width={'100vw'}
onCancel={this.changeShowModal}
visible={true}
onOk={this.trim}
title={'签名'}
bodyStyle={{
minHeight: '350px',
padding: '24px 12px',
}}
>
<div className={styles.borderDiv}>
<SignatureCanvas
penColor="black"
ref={(ref) => {
this.sigCanvas = ref;
}}
canvasProps={{
width: width + 'px',
height: height + 'px',
className: 'sigCanvas',
}}
/>
</div>
</Modal>);
};
WebModal = () => { // 移动端签名组件
const { showModal } = this.state; MobileSign = () => {
const height = 300; const { url } = this.state;
const width = 600; if (url) {
return ( return (
showModal && <Modal className={styles.mobileModal} <div className={styles.mobileSign}>
width={700} <this.EditIcon />
onCancel={this.changeShowModal} {/* <Button
visible={true} type={'primary'}
onOk={this.trim} onClick={this.changeShowModal}
title={'签名'} className={styles.reSign}>
bodyStyle={{ 重新签名
minHeight: '350px', </Button>*/}
padding: '24px 12px', <img src={config.httpServer + url} className={styles.littleSign} onClick={this.showSignImage}/>
}} </div>
> );
<div className={styles.borderDiv}> } else {
<SignatureCanvas return (
penColor="black" <div className={styles.mobileSign2}>
ref={(ref) => { <this.EditIcon />
this.sigCanvas = ref; {/*<Button type={'primary'} onClick={this.changeShowModal}>
}} 点击开始签名
canvasProps={{ </Button>*/}
width: width + 'px', </div>
height: height + 'px', );
className: 'sigCanvas', }
}} };
/>
</div>
</Modal>);
};
WebSign = () => { MobileModal = () => {
const { const { showModal } = this.state;
width, const height = 300;
height, const width = window.screen.width - 50;
} = this.props; return (
// console.log(this.props); showModal && (
const { url } = this.state; <Modal
if (url) { className={styles.mobileModal}
return <div className={styles.webSign}> width={'100vw'}
<Button type={'primary'} onCancel={this.changeShowModal}
onClick={this.changeShowModal} visible={true}
> onOk={this.trim}
重新签名 title={'签名'}
</Button> bodyStyle={{
<img src={config.httpServer + url} style={{ minHeight: '350px',
height, padding: '24px 12px',
width, }}>
}} <div className={styles.borderDiv}>
/> <SignatureCanvas
</div>; penColor="black"
} else { ref={(ref) => {
return <div className={styles.mobileSign2}> this.sigCanvas = ref;
<Button type={'primary'} onClick={this.changeShowModal}> }}
点击开始签名 canvasProps={{
</Button> width: width + 'px',
</div>; height: height + 'px',
} className: 'sigCanvas',
return null; }}
}; />
</div>
</Modal>
)
);
};
WebModal = () => {
const { showModal } = this.state;
const height = 300;
const width = 600;
return (
showModal && (
<Modal
className={styles.mobileModal}
width={700}
onCancel={this.changeShowModal}
visible={true}
onOk={this.trim}
title={'签名'}
bodyStyle={{
minHeight: '350px',
padding: '24px 12px',
}}>
<div className={styles.borderDiv}>
<SignatureCanvas
penColor="black"
ref={(ref) => {
this.sigCanvas = ref;
}}
canvasProps={{
width: width + 'px',
height: height + 'px',
className: 'sigCanvas',
}}
/>
</div>
</Modal>
)
);
};
render() { WebSign = () => {
// console.log('签名组件'); const { width, height } = this.props;
const { // console.log(this.props);
width, const { url } = this.state;
height, if (url) {
get, return (
<div className={styles.webSign}>
<this.EditIcon />
<img
onClick={this.showSignImage}
src={config.httpServer + url}
style={{
height,
width,
}}
/>
</div>
);
} else {
return (
<div className={styles.mobileSign2}>
<this.EditIcon />
</div>
);
}
return null;
};
} = this.props; render() {
const { url } = this.state; // console.log('签名组件');
const { width, height, get } = this.props;
const { url } = this.state;
if (get === 'mobile') { if (get === 'mobile') {
// const MobileSign = this.MobileSign; // const MobileSign = this.MobileSign;
// const MobileModal = this.MobileModal; // const MobileModal = this.MobileModal;
return <> return (
<this.MobileSign/> <>
<this.MobileModal/> <this.MobileSign />
</>; <this.MobileModal />
} else { </>
return <> );
<this.WebSign/> } else {
<this.WebModal/> return (
</>; <>
} <this.WebSign />
} <this.WebModal />
</>
);
}
}
} }
one_stop_public/Signature/mobileSign.less
浏览文件 @ f51f0bd1
...@@ -29,3 +29,23 @@ ...@@ -29,3 +29,23 @@
border: 1px solid #f2f2f2; border: 1px solid #f2f2f2;
} }
} }
.showDiv{
max-width: 300px;
height: auto;
img{
//width: 100%;
height: auto;
max-width: 100%;
}
}
.editIcon{
cursor: pointer;
font-size: 20px;
color: #0c81e0;
margin-right: 10px;
}
.littleSign{
cursor: pointer;
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论