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 @@
* 徐立
* 2019年12月6日
* 电子签章多功能封装
* 2022年8月17日
* 从个人基本信息中拿默认签名.
*/
import React, { Component } from 'react';
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 reqwest from 'reqwest';
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';
// 保存签名 到用户基础信息上
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;
}
import { saveSign, dataURLtoBlob, blobToFile } from './Split';
export default class Signature extends Component {
constructor(props) {
super(props);
const value = props.value;
this.state = {
url: value || getUserInfo().userSign,
showModal: false,
};
}
constructor(props) {
super(props);
const value = props.value;
this.state = {
url: value || getUserInfo().userSign,
showModal: false,
};
}
triggerChange = (changedValue) => {
const onChange = this.props.onChange;
if (onChange) {
onChange(changedValue);
}
};
triggerChange = (changedValue) => {
const onChange = this.props.onChange;
if (onChange) {
onChange(changedValue);
}
};
componentWillReceiveProps(nextProps) {
// Should be a controlled component.
if ('value' in nextProps && nextProps.value) {
const value = nextProps.value;
if (value !== this.state.url) {
this.setState({ url: value });
}
}
}
componentWillReceiveProps(nextProps) {
// Should be a controlled component.
if ('value' in nextProps && nextProps.value) {
const value = nextProps.value;
if (value !== this.state.url) {
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 = () => {
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 });
// }
clear = () => {
this.sigCanvas.clear();
};
delete = () => {
if (!('value' in this.props)) {
this.setState({ url: null });
}
this.triggerChange(null);
};
// this.triggerChange(url);
//
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('保存失败');
}
},
});
};
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
* */
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() {
if (!this.props.value && this.state.url) {
setTimeout(() => {
this.triggerChange(this.state.url);
}, 2000);
}
}
componentDidMount() {
if (!this.props.value && this.state.url) {
setTimeout(() => {
this.triggerChange(this.state.url);
}, 2000);
}
}
changeShowModal = () => {
this.setState({
showModal: !this.state.showModal,
});
};
changeShowModal = () => {
this.setState({
showModal: !this.state.showModal,
});
};
// 移动端签名组件
MobileSign = () => {
showSignImage = () => {
const { url } = this.state;
if (url) {
return <div className={styles.mobileSign}>
<Button type={'primary'}
onClick={this.changeShowModal}
className={styles.reSign}
>
重新签名
</Button>
<img src={config.httpServer + url} style={{}}
/>
</div>;
} else {
return <div className={styles.mobileSign2}>
<Button type={'primary'} onClick={this.changeShowModal}>
点击开始签名
</Button>
</div>;
}
Modal.info({
title: '查看签名',
content: <div className={styles.showDiv}>
<img src={config.httpServer + url}/>
</div>,
footer: null,
});
};
MobileModal = () => {
const { showModal } = this.state;
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>);
};
EditIcon = () => {
return <Icon type="edit" onClick={this.changeShowModal} className={styles.editIcon}/>
}
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>);
};
// 移动端签名组件
MobileSign = () => {
const { url } = this.state;
if (url) {
return (
<div className={styles.mobileSign}>
<this.EditIcon />
{/* <Button
type={'primary'}
onClick={this.changeShowModal}
className={styles.reSign}>
重新签名
</Button>*/}
<img src={config.httpServer + url} className={styles.littleSign} onClick={this.showSignImage}/>
</div>
);
} else {
return (
<div className={styles.mobileSign2}>
<this.EditIcon />
{/*<Button type={'primary'} onClick={this.changeShowModal}>
点击开始签名
</Button>*/}
</div>
);
}
};
WebSign = () => {
const {
width,
height,
} = this.props;
// console.log(this.props);
const { url } = this.state;
if (url) {
return <div className={styles.webSign}>
<Button type={'primary'}
onClick={this.changeShowModal}
>
重新签名
</Button>
<img src={config.httpServer + url} style={{
height,
width,
}}
/>
</div>;
} else {
return <div className={styles.mobileSign2}>
<Button type={'primary'} onClick={this.changeShowModal}>
点击开始签名
</Button>
</div>;
}
return null;
};
MobileModal = () => {
const { showModal } = this.state;
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;
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() {
// console.log('签名组件');
const {
width,
height,
get,
WebSign = () => {
const { width, height } = this.props;
// console.log(this.props);
const { url } = this.state;
if (url) {
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;
const { url } = this.state;
render() {
// console.log('签名组件');
const { width, height, get } = this.props;
const { url } = this.state;
if (get === 'mobile') {
// const MobileSign = this.MobileSign;
// const MobileModal = this.MobileModal;
return <>
<this.MobileSign/>
<this.MobileModal/>
</>;
} else {
return <>
<this.WebSign/>
<this.WebModal/>
</>;
}
}
if (get === 'mobile') {
// const MobileSign = this.MobileSign;
// const MobileModal = this.MobileModal;
return (
<>
<this.MobileSign />
<this.MobileModal />
</>
);
} else {
return (
<>
<this.WebSign />
<this.WebModal />
</>
);
}
}
}
one_stop_public/Signature/mobileSign.less
浏览文件 @ f51f0bd1
......@@ -29,3 +29,23 @@
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论