签名组件优化

one_stop_public/Signature/Split.js

+// 保存签名 到用户基础信息上
+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

@@ -2,52 +2,17 @@
  * 徐立
  * 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) {
@@ -77,8 +42,7 @@ export default class Signature extends Component {
 	}
 
 	sigCanvas = {
-    clear: () => {
-    },
+		clear: () => {},
 		toDataURL: (param) => {
 			return '';
 		},
@@ -93,6 +57,7 @@ export default class Signature extends Component {
 		}
 		this.triggerChange(null);
 	};
+
 	trim = () => {
 		message.info('正在保存签名，请等待');
 		const formData = new FormData();
@@ -112,13 +77,6 @@ export default class Signature extends Component {
 				/**
 				 * 这里的成功 是走的下面的 error
 				 * */
-        // console.log('22334455');
-        // if (!('value' in this.props)) {
-        //   this.setState({ url: url });
-        // }
-
-        // this.triggerChange(url);
-        //
 				message.success('保存成功');
 			},
 			error: (e) => {
@@ -152,26 +110,46 @@ export default class Signature extends Component {
 		});
 	};
 
+  showSignImage = () => {
+    const { url } = this.state;
+    Modal.info({
+      title: '查看签名',
+      content: <div className={styles.showDiv}>
+        <img src={config.httpServer + url}/>
+      </div>,
+      footer: null,
+    });
+  };
+
+  EditIcon = () => {
+    return <Icon type="edit" onClick={this.changeShowModal} className={styles.editIcon}/>
+  }
+
 	// 移动端签名组件
 	MobileSign = () => {
 		const { url } = this.state;
 		if (url) {
-      return <div className={styles.mobileSign}>
-        <Button type={'primary'}
+			return (
+				<div className={styles.mobileSign}>
+          <this.EditIcon />
+       {/*   <Button
+						type={'primary'}
 						onClick={this.changeShowModal}
-                className={styles.reSign}
-        >
+						className={styles.reSign}>
 						重新签名
-        </Button>
-        <img src={config.httpServer + url} style={{}}
-        />
-      </div>;
+					</Button>*/}
+					<img src={config.httpServer + url} className={styles.littleSign} onClick={this.showSignImage}/>
+				</div>
+			);
 		} else {
-      return <div className={styles.mobileSign2}>
-        <Button type={'primary'} onClick={this.changeShowModal}>
+			return (
+				<div className={styles.mobileSign2}>
+          <this.EditIcon />
+					{/*<Button type={'primary'} onClick={this.changeShowModal}>
 						点击开始签名
-        </Button>
-      </div>;
+					</Button>*/}
+				</div>
+			);
 		}
 	};
 
@@ -180,7 +158,9 @@ export default class Signature extends Component {
 		const height = 300;
 		const width = window.screen.width - 50;
 		return (
-      showModal && <Modal className={styles.mobileModal}
+			showModal && (
+				<Modal
+					className={styles.mobileModal}
 					width={'100vw'}
 					onCancel={this.changeShowModal}
 					visible={true}
@@ -189,8 +169,7 @@ export default class Signature extends Component {
 					bodyStyle={{
 						minHeight: '350px',
 						padding: '24px 12px',
-                          }}
-      >
+					}}>
 					<div className={styles.borderDiv}>
 						<SignatureCanvas
 							penColor="black"
@@ -204,7 +183,9 @@ export default class Signature extends Component {
 							}}
 						/>
 					</div>
-      </Modal>);
+				</Modal>
+			)
+		);
 	};
 
 	WebModal = () => {
@@ -212,7 +193,9 @@ export default class Signature extends Component {
 		const height = 300;
 		const width = 600;
 		return (
-      showModal && <Modal className={styles.mobileModal}
+			showModal && (
+				<Modal
+					className={styles.mobileModal}
 					width={700}
 					onCancel={this.changeShowModal}
 					visible={true}
@@ -221,8 +204,7 @@ export default class Signature extends Component {
 					bodyStyle={{
 						minHeight: '350px',
 						padding: '24px 12px',
-                          }}
-      >
+					}}>
 					<div className={styles.borderDiv}>
 						<SignatureCanvas
 							penColor="black"
@@ -236,62 +218,60 @@ export default class Signature extends Component {
 							}}
 						/>
 					</div>
-      </Modal>);
+				</Modal>
+			)
+		);
 	};
 
 	WebSign = () => {
-    const {
-      width,
-      height,
-    } = this.props;
+		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={{
+			return (
+				<div className={styles.webSign}>
+          <this.EditIcon />
+					<img
+            onClick={this.showSignImage}
+						src={config.httpServer + url}
+						style={{
 							height,
 							width,
 						}}
 					/>
-      </div>;
+				</div>
+			);
 		} else {
-      return <div className={styles.mobileSign2}>
-        <Button type={'primary'} onClick={this.changeShowModal}>
-          点击开始签名
-        </Button>
-      </div>;
+			return (
+				<div className={styles.mobileSign2}>
+          <this.EditIcon />
+				</div>
+			);
 		}
 		return null;
 	};
 
-
 	render() {
 		// console.log('签名组件');
-    const {
-      width,
-      height,
-      get,
-
-    } = this.props;
+		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/>
-      </>;
+			return (
+				<>
+					<this.MobileSign />
+					<this.MobileModal />
+				</>
+			);
 		} else {
-      return <>
-        <this.WebSign/>
-        <this.WebModal/>
-      </>;
+			return (
+				<>
+					<this.WebSign />
+					<this.WebModal />
+				</>
+			);
 		}
 	}
 }

one_stop_public/Signature/mobileSign.less

@@ -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;
+}