查看代码

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) => {
@@ -46,7 +77,7 @@ export default function PictureSignature({
                                            form,
                                            // fileInfo,
                                            ...others
-}) {
+                                         }) {
   let imageRef = useRef();
   const [fileInfo, setFileInfo] = useState({ ...others?.fileInfo });
   // const [fileInfo, setFileInfo] = useState(fakeFileInfo);
@@ -57,7 +88,8 @@ export default function PictureSignature({
   const changeShowModal = () => {
     if (!showModal) {
       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节点)
             image.src = basicUrl + res;
             image.onload = () => {
@@ -128,7 +160,8 @@ export default function PictureSignature({
         apiRequest('/ImageLibApi/merge', {
           background: fileInfo?.path,
           content,
-        }).then(res => {
+        })
+          .then(res => {
             if (form && saveSignConfigValue) {
               form.setFieldsValue({
                 [saveSignConfigValue]: content,
@@ -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),
@@ -243,14 +276,17 @@ export default function PictureSignature({
                       key={g.key}
                       data-mes={g.key}
                       draggable={false}
-                        className={styles.oneSetItem}
                       style={{
+                        ...styleList.oneSetItem,
                         top: g.y,
                         left: g.x,
                       }}
                     >
-                        <div className={styles.draggableIcon} data-mes={g.key} draggable={true}>
-                          <Icon type="scissor" />
+                      <div style={styleList.draggableIcon}
+                           data-mes={g.key}
+                           draggable={true}
+                      >
+                        <Icon type='scissor' />
                       </div>
                       <ShowItem {...g} basicUrl={basicUrl} />
                     </div>
@@ -259,12 +295,14 @@ export default function PictureSignature({
               </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;
 }