查看代码

one_stop_public/libs/PictureSignature/PictureSignature.js

@@ -5,12 +5,43 @@ import ShowItem, { dragEventList, zipImage } from './ShowItem';
 import { apiRequest } from '../../utils/request';
 import { deepCopy } from '@/webPublic/one_stop_public/utils/myutils';
 import { getModal } from '@/webPublic/one_stop_public/utils/utils';
-const Modal = getModal();
-
 
-let fakeFileInfo = {
-  path: '/u/202112/25143111x0ki.jpg', // 超大的图片
-  name: '摇摇后摇.jpg',
+const Modal = getModal();
+const styleList = {
+  modalParentDiv: {
+    display: 'grid',
+    placeItems: 'center',
+    width: '100%',
+    height: '100%',
+  },
+  modalDiv: {
+    display: 'grid',
+    position: 'relative',
+    overflow: 'auto',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    backgroundSize: 'cover',
+  },
+  oneSetItem: {
+    position: 'absolute',
+    border: '1px solid red',
+  },
+  oneSetItemP: {
+    marginBottom: 0,
+    userSelect: 'none',
+  },
+  draggableIcon:{
+    position: 'absolute',
+    left: '10',
+    top: '10',
+    color: 'red',
+    zIndex: '10000',
+  },
+  readOnlyImage: {
+    width: '100%',
+    display: 'grid',
+    placeItems: 'center',
+  },
 };
 
 const getContent = (signConfig = [], ratioX) => {
@@ -38,15 +69,15 @@ const getContent = (signConfig = [], ratioX) => {
 };
 
 export default function PictureSignature({
-  json,
-  disabled,
-  basicUrl,
-  onChangeFile,
-  imageIndex,
-  form,
-  // fileInfo,
-  ...others
-}) {
+                                           json,
+                                           disabled,
+                                           basicUrl,
+                                           onChangeFile,
+                                           imageIndex,
+                                           form,
+                                           // fileInfo,
+                                           ...others
+                                         }) {
   let imageRef = useRef();
   const [fileInfo, setFileInfo] = useState({ ...others?.fileInfo });
   // const [fileInfo, setFileInfo] = useState(fakeFileInfo);
@@ -57,22 +88,23 @@ export default function PictureSignature({
   const changeShowModal = () => {
     if (!showModal) {
       if (!imageInfo && !disabled) {
-        zipImage(fileInfo.path, fileInfo.name, otherProps?.backgroundImageWidth).then(res => {
-          let image = new Image(); //新建一个img标签（还没嵌入DOM节点)
-          image.src = basicUrl + res;
-          image.onload = () => {
-            // alert(image.width);
-            setImageInfo({
-              width: image.width,
-              height: image.height,
+        zipImage(fileInfo.path, fileInfo.name, otherProps?.backgroundImageWidth)
+          .then(res => {
+            let image = new Image(); //新建一个img标签（还没嵌入DOM节点)
+            image.src = basicUrl + res;
+            image.onload = () => {
+              // alert(image.width);
+              setImageInfo({
+                width: image.width,
+                height: image.height,
+              });
+            };
+            setFileInfo({
+              path: res,
+              name: fileInfo.name,
+              originPath: res,
             });
-          };
-          setFileInfo({
-            path: res,
-            name: fileInfo.name,
-            originPath: res,
           });
-        });
       }
     }
     setShowModal(!showModal);
@@ -128,21 +160,22 @@ export default function PictureSignature({
         apiRequest('/ImageLibApi/merge', {
           background: fileInfo?.path,
           content,
-        }).then(res => {
-          if (form && saveSignConfigValue) {
-            form.setFieldsValue({
-              [saveSignConfigValue]: content,
-            });
-          }
-          if (res && res.path) {
-            message.success('操作成功');
-            let newPath = res.path;
-            fileInfo.originPath = fileInfo.path;
-            fileInfo.path = newPath;
-            setFileInfo({ ...fileInfo });
-            setOpenEdit(false);
-          }
-        });
+        })
+          .then(res => {
+            if (form && saveSignConfigValue) {
+              form.setFieldsValue({
+                [saveSignConfigValue]: content,
+              });
+            }
+            if (res && res.path) {
+              message.success('操作成功');
+              let newPath = res.path;
+              fileInfo.originPath = fileInfo.path;
+              fileInfo.path = newPath;
+              setFileInfo({ ...fileInfo });
+              setOpenEdit(false);
+            }
+          });
         break;
       case 'restore': // 还原图片
         if (fileInfo.originPath) {
@@ -223,11 +256,11 @@ export default function PictureSignature({
           }}
           {...ModalProps}
         >
-          <div className={styles.modalParentDiv}>
+          <div style={styleList.modalParentDiv}>
             {openEdit && ( // 开启签章功能
               <div
-                className={styles.modalDiv}
                 style={{
+                  ...styleList.modalDiv,
                   backgroundImage: `url(${basicUrl + fileInfo?.path})`,
                   width: showImageWidth,
                   height: imageInfo.height / (imageInfo.width / showImageWidth),
@@ -237,34 +270,39 @@ export default function PictureSignature({
                 id={'dropZone'}
               >
                 {Array.isArray(signConfig) &&
-                  signConfig.map(g => {
-                    return (
-                      <div
-                        key={g.key}
-                        data-mes={g.key}
-                        draggable={false}
-                        className={styles.oneSetItem}
-                        style={{
-                          top: g.y,
-                          left: g.x,
-                        }}
+                signConfig.map(g => {
+                  return (
+                    <div
+                      key={g.key}
+                      data-mes={g.key}
+                      draggable={false}
+                      style={{
+                        ...styleList.oneSetItem,
+                        top: g.y,
+                        left: g.x,
+                      }}
+                    >
+                      <div style={styleList.draggableIcon}
+                           data-mes={g.key}
+                           draggable={true}
                       >
-                        <div className={styles.draggableIcon} data-mes={g.key} draggable={true}>
-                          <Icon type="scissor" />
-                        </div>
-                        <ShowItem {...g} basicUrl={basicUrl} />
+                        <Icon type='scissor' />
                       </div>
-                    );
-                  })}
+                      <ShowItem {...g} basicUrl={basicUrl} />
+                    </div>
+                  );
+                })}
               </div>
             )}
             {!openEdit && ( // 不开启签章功能 只是预览图片
-              <div className={styles.readOnlyImage}>
+              <div style={styleList.readOnlyImage}
+              >
                 <img
                   src={basicUrl + fileInfo?.path + `?v=${Math.random()}`}
                   alt={fileInfo.name}
                   style={{
                     width: `${showImageWidth}px`,
+                    height: 'auto',
                   }}
                 />
               </div>
@@ -277,7 +315,13 @@ export default function PictureSignature({
 }
 
 export function SignArray(props) {
-  const { value, onChange, basicUrl, json, form } = props;
+  const {
+    value,
+    onChange,
+    basicUrl,
+    json,
+    form,
+  } = props;
   let files = value?.files || [];
   const onChangeFile = (newFielInfo, imageIndex) => {
     if (newFielInfo && newFielInfo.path) {

one_stop_public/libs/PictureSignature/ShowItem.js

 import React from "react";
 import {queryApiActionPath} from "@/webPublic/one_stop_public/utils/queryConfig";
-import {apiRequest} from "@/webPublic/one_stop_public/utils/request";
 import {getToken} from "@/webPublic/one_stop_public/utils/token";
 
+const oneSetItemP = {
+  marginBottom: 0,
+  userSelect: 'none',
+};
+
 const ShowItem = ({ basicUrl, type, x, y, ...otherInfo }) => {
   switch (type) {
     case 'image':
@@ -27,6 +31,7 @@ const ShowItem = ({ basicUrl, type, x, y, ...otherInfo }) => {
           key={otherInfo.key}
           style={{
             // border: '1px solid red',
+            ...oneSetItemP,
             cursor: 'pointer',
             fontSize: otherInfo?.fontSize ? otherInfo.fontSize + 'px' : undefined,
             fontFamily: otherInfo?.fontFamily ? otherInfo.fontFamily : undefined,

one_stop_public/libs/PictureSignature/styles.less

@@ -10,32 +10,23 @@
 
 .modalDiv{
   display: grid;
-  //width: 1200px;
-  //grid-template-columns: 100px 1fr;
-  //grid-template-rows;
   position: relative;
   overflow: auto;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  .rightSide{
-    overflow: auto;
-  }
 }
 
 .readOnlyImage{
   width: 100%;
   display: grid;
   place-items: center;
-  //min-height: 800px;
   img{
-    //width: 1200px;
     height: auto;
   }
 }
 .oneSetItem{
   position: absolute;
-  //margin-top: 20px;
   border: 1px solid red;
   p{
     margin-bottom: 0;
@@ -60,7 +51,6 @@
   position: absolute;
   left: 10;
   top: 10;
-  //border: 1px solid #f2f2f2;
   color: red;
   z-index: 10000;
 }