Skip to content

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

签章组件 支持自定义图片宽度

上级 465eb2f8
隐藏空白字符变更
内嵌 并排
正在显示 包含 99 行增加 和 93 行删除
one_stop_public/libs/PictureSignature/PictureSignature.js
浏览文件 @ 918883fe
import React, {useState, useEffect, useRef} from 'react'; import React, { useState, useEffect, useRef } from 'react';
import styles from './styles.less'; import styles from './styles.less';
import {Modal, Button, Icon, message} from 'antd'; import { Modal, Button, Icon, message } from 'antd';
import ShowItem, {dragEventList, zipImage} from './ShowItem'; import ShowItem, { dragEventList, zipImage } from './ShowItem';
import {apiRequest} from "../../utils/request"; import { apiRequest } from '../../utils/request';
import {deepCopy} from "@/webPublic/one_stop_public/utils/myutils"; import { deepCopy } from '@/webPublic/one_stop_public/utils/myutils';
let fakeFileInfo = { let fakeFileInfo = {
path: '/u/202112/25143111x0ki.jpg', // 超大的图片 path: '/u/202112/25143111x0ki.jpg', // 超大的图片
name: '摇摇后摇.jpg', name: '摇摇后摇.jpg',
}; };
const getContent = (signConfig = [], ratioX) => { const getContent = (signConfig = [], ratioX) => {
let data = deepCopy(signConfig); let data = deepCopy(signConfig);
return JSON.stringify({ return JSON.stringify({
objs: data.map((g) => { objs: data.map(g => {
// 1200 的 x => 1500的 x // 1200 的 x => 1500的 x
// //
g.x = Math.ceil(g.x * ratioX, 10); g.x = Math.ceil(g.x * ratioX, 10);
g.y = Math.ceil(g.y * ratioX, 10); g.y = Math.ceil(g.y * ratioX, 10);
if (g.type === 'text') { if (g.type === 'text') {
g.fontSize = Math.ceil(g.fontSize * ratioX); g.fontSize = Math.ceil(g.fontSize * ratioX);
g.y = g.y + 20; g.y = g.y + 20;
// g.x = g.x + 20; // g.x = g.x + 20;
} }
if(g.type === 'image'){ if (g.type === 'image') {
g.w = Math.ceil(g.w * ratioX); g.w = Math.ceil(g.w * ratioX);
g.h = Math.ceil(g.h * ratioX); g.h = Math.ceil(g.h * ratioX);
} }
...@@ -35,28 +34,27 @@ const getContent = (signConfig = [], ratioX) => { ...@@ -35,28 +34,27 @@ const getContent = (signConfig = [], ratioX) => {
}); });
}; };
export default function PictureSignature({ export default function PictureSignature({
json, json,
disabled, disabled,
basicUrl, basicUrl,
onChangeFile, onChangeFile,
imageIndex, imageIndex,
form, form,
// fileInfo, // fileInfo,
...others ...others
}) { }) {
let imageRef = useRef(); let imageRef = useRef();
const [fileInfo, setFileInfo] = useState({...others?.fileInfo}); const [fileInfo, setFileInfo] = useState({ ...others?.fileInfo });
// const [fileInfo, setFileInfo] = useState(fakeFileInfo); // const [fileInfo, setFileInfo] = useState(fakeFileInfo);
const [openEdit, setOpenEdit] = useState(false); const [openEdit, setOpenEdit] = useState(false);
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
const [otherProps, setOtherProps] = useState({}); const [otherProps, setOtherProps] = useState({});
const [imageInfo, setImageInfo] = useState(null); const [imageInfo, setImageInfo] = useState(null);
const changeShowModal = () => { const changeShowModal = () => {
if(!showModal){ if (!showModal) {
if (!imageInfo && !disabled) { if (!imageInfo && !disabled) {
zipImage(fileInfo.path, fileInfo.name, otherProps?.backgroundImageWidth).then((res) => { zipImage(fileInfo.path, fileInfo.name, otherProps?.backgroundImageWidth).then(res => {
let image = new Image(); //新建一个img标签（还没嵌入DOM节点) let image = new Image(); //新建一个img标签（还没嵌入DOM节点)
image.src = basicUrl + res; image.src = basicUrl + res;
image.onload = () => { image.onload = () => {
...@@ -83,7 +81,6 @@ export default function PictureSignature({ ...@@ -83,7 +81,6 @@ export default function PictureSignature({
imageRef.current = true; imageRef.current = true;
dragEventList(setOtherProps, otherProps); dragEventList(setOtherProps, otherProps);
} }
}, [otherProps]); }, [otherProps]);
useEffect(() => { useEffect(() => {
...@@ -100,21 +97,28 @@ export default function PictureSignature({ ...@@ -100,21 +97,28 @@ export default function PictureSignature({
} }
}, [json.otherProps]); }, [json.otherProps]);
const {ModalProps, signConfig, footerButtons, originButtons, backgroundImageWidth, saveSignConfigValue = ''} = otherProps; const {
ModalProps,
signConfig,
footerButtons,
originButtons,
backgroundImageWidth,
saveSignConfigValue = '',
showImageWidth = 1200,
} = otherProps;
const handleClickButton = (clickType) => { const handleClickButton = clickType => {
switch (clickType) { switch (clickType) {
case 'startEdit': // 开始签章 case 'startEdit': // 开始签章
// console.log(imageInfo); // console.log(imageInfo);
setOpenEdit(true); setOpenEdit(true);
break; break;
case 'confirm': // 确定 case 'confirm': // 确定
onChangeFile({ ...fileInfo }, imageIndex);
onChangeFile({...fileInfo}, imageIndex);
changeShowModal(); changeShowModal();
break; break;
case 'save': // 保存签章 case 'save': // 保存签章
let ratioX = backgroundImageWidth / 1200; // 本来是 1500 的 图片 宽度变成了 1200 高度变成了 1200/1500 * imageInfo.height; let ratioX = backgroundImageWidth / showImageWidth; // 本来是 1500 的 图片 宽度变成了 1200 高度变成了 1200/1500 * imageInfo.height;
// let ratioY = 1200 / backgroundImageWidth * imageInfo.height; // let ratioY = 1200 / backgroundImageWidth * imageInfo.height;
// console.log(ratioX); // console.log(ratioX);
// return ; // return ;
...@@ -122,33 +126,33 @@ export default function PictureSignature({ ...@@ -122,33 +126,33 @@ export default function PictureSignature({
apiRequest('/ImageLibApi/merge', { apiRequest('/ImageLibApi/merge', {
background: fileInfo?.path, background: fileInfo?.path,
content, content,
}).then((res) => { }).then(res => {
if(form && saveSignConfigValue){ if (form && saveSignConfigValue) {
form.setFieldsValue({ form.setFieldsValue({
[saveSignConfigValue]: content, [saveSignConfigValue]: content,
}) });
} }
if (res && res.path) { if (res && res.path) {
message.success('操作成功'); message.success('操作成功');
let newPath = res.path; let newPath = res.path;
fileInfo.originPath = fileInfo.path; fileInfo.originPath = fileInfo.path;
fileInfo.path = newPath; fileInfo.path = newPath;
setFileInfo({...fileInfo}); setFileInfo({ ...fileInfo });
setOpenEdit(false); setOpenEdit(false);
} }
}) });
break; break;
case 'restore': // 还原图片 case 'restore': // 还原图片
if (fileInfo.originPath) { if (fileInfo.originPath) {
fileInfo.path = fileInfo.originPath; fileInfo.path = fileInfo.originPath;
setFileInfo({...fileInfo}); setFileInfo({ ...fileInfo });
setOpenEdit(false); setOpenEdit(false);
} }
break; break;
default: default:
return true; return true;
} }
} };
const Footer = () => { const Footer = () => {
if (disabled) { if (disabled) {
...@@ -157,11 +161,12 @@ export default function PictureSignature({ ...@@ -157,11 +161,12 @@ export default function PictureSignature({
if (openEdit) { if (openEdit) {
return footerButtons.map(g => { return footerButtons.map(g => {
return ( return (
<Button type={g.type} <Button
key={g.key} type={g.type}
onClick={() => { key={g.key}
handleClickButton(g.clickType) onClick={() => {
}} handleClickButton(g.clickType);
}}
> >
{g.name} {g.name}
</Button> </Button>
...@@ -170,11 +175,12 @@ export default function PictureSignature({ ...@@ -170,11 +175,12 @@ export default function PictureSignature({
} else { } else {
return originButtons.map(g => { return originButtons.map(g => {
return ( return (
<Button type={g.type} <Button
key={g.key} type={g.type}
onClick={() => { key={g.key}
handleClickButton(g.clickType) onClick={() => {
}} handleClickButton(g.clickType);
}}
> >
{g.name} {g.name}
</Button> </Button>
...@@ -187,8 +193,7 @@ export default function PictureSignature({ ...@@ -187,8 +193,7 @@ export default function PictureSignature({
} }
// console.log(imageInfo, fileInfo); // console.log(imageInfo, fileInfo);
return ( return (
<div className={styles.outSideDiv} <div className={styles.outSideDiv}>
>
{fileInfo && fileInfo?.path && ( {fileInfo && fileInfo?.path && (
<img <img
className={styles.onePic} className={styles.onePic}
...@@ -205,9 +210,9 @@ export default function PictureSignature({ ...@@ -205,9 +210,9 @@ export default function PictureSignature({
onCancel={changeShowModal} onCancel={changeShowModal}
getContainer={false} getContainer={false}
className={styles.ModalClass} className={styles.ModalClass}
footer={<Footer/>} footer={<Footer />}
title={'图片签章'} title={'图片签章'}
width={'1250px'} width={showImageWidth + 50 + 'px'}
bodyStyle={{ bodyStyle={{
minHeight: '700px', minHeight: '700px',
overflow: 'auto', overflow: 'auto',
...@@ -223,37 +228,33 @@ export default function PictureSignature({ ...@@ -223,37 +228,33 @@ export default function PictureSignature({
className={styles.modalDiv} className={styles.modalDiv}
style={{ style={{
backgroundImage: `url(${basicUrl + fileInfo?.path})`, backgroundImage: `url(${basicUrl + fileInfo?.path})`,
width: 1200, width: showImageWidth,
height: (imageInfo.height / (imageInfo.width / 1200)), height: imageInfo.height / (imageInfo.width / showImageWidth),
}} }}
alt={'拖拽区域'} alt={'拖拽区域'}
draggable={false} draggable={false}
id={'dropZone'} id={'dropZone'}
> >
{Array.isArray(signConfig) && {Array.isArray(signConfig) &&
signConfig.map(g => { signConfig.map(g => {
return ( return (
<div <div
key={g.key} key={g.key}
data-mes={g.key} data-mes={g.key}
draggable={false} draggable={false}
className={styles.oneSetItem} className={styles.oneSetItem}
style={{ style={{
top: g.y, top: g.y,
left: g.x, left: g.x,
}} }}
> >
<div className={styles.draggableIcon} <div className={styles.draggableIcon} data-mes={g.key} draggable={true}>
data-mes={g.key} <Icon type="scissor" />
draggable={true}> </div>
<Icon type="scissor" /> <ShowItem {...g} basicUrl={basicUrl} />
</div> </div>
<ShowItem {...g} );
basicUrl={basicUrl} })}
/>
</div>
);
})}
</div> </div>
)} )}
{!openEdit && ( // 不开启签章功能 只是预览图片 {!openEdit && ( // 不开启签章功能 只是预览图片
...@@ -261,6 +262,9 @@ export default function PictureSignature({ ...@@ -261,6 +262,9 @@ export default function PictureSignature({
<img <img
src={basicUrl + fileInfo?.path} src={basicUrl + fileInfo?.path}
alt={fileInfo.name} alt={fileInfo.name}
style={{
width: `${showImageWidth}px`,
}}
/> />
</div> </div>
)} )}
...@@ -272,29 +276,31 @@ export default function PictureSignature({ ...@@ -272,29 +276,31 @@ export default function PictureSignature({
} }
export function SignArray(props) { export function SignArray(props) {
const {value, onChange, basicUrl, json, form} = props; const { value, onChange, basicUrl, json, form } = props;
// console.log(props); // console.log(props);
let files = value?.files || []; let files = value?.files || [];
const onChangeFile = (newFielInfo, imageIndex) => { const onChangeFile = (newFielInfo, imageIndex) => {
if(newFielInfo && newFielInfo.path){ if (newFielInfo && newFielInfo.path) {
files[imageIndex] = newFielInfo; files[imageIndex] = newFielInfo;
value.files = files; value.files = files;
onChange(value); onChange(value);
} }
} };
// console.log(value, '222222222222222') // console.log(value, '222222222222222')
return <div> return (
{ <div>
files.map((g, index) => { {files.map((g, index) => {
return <PictureSignature json={json} return (
basicUrl={basicUrl} <PictureSignature
fileInfo={g} json={json}
form={form} basicUrl={basicUrl}
imageIndex={index} fileInfo={g}
onChangeFile={onChangeFile} form={form}
imageIndex={index}
/> onChangeFile={onChangeFile}
}) />
} );
</div> })}
</div>
);
} }
one_stop_public/libs/PictureSignature/styles.less
浏览文件 @ 918883fe
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
place-items: center; place-items: center;
//min-height: 800px; //min-height: 800px;
img{ img{
width: 1200px; //width: 1200px;
height: auto; height: auto;
} }
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论