24999 学生签约审核 拖拽范围和组件顺序优化

one_stop_public/filePreview/index.jsx

@@ -2,12 +2,12 @@
  * web端文件预览功能
  */
 import React, {Component} from 'react';
-import { Popconfirm } from 'antd';
 import {checkIsImage} from '@/webPublic/one_stop_public/libs/UploadCom';
-import { getModal } from '@/webPublic/one_stop_public/utils/utils';
+import { getModal, getPopconfirm } from '@/webPublic/one_stop_public/utils/utils';
 
 const FileViewer = CLIENT_TYPE === 'mobile' ? null : require('react-file-viewer');
 const Modal = getModal();
+const Popconfirm = getPopconfirm();
 
 
 export default class index extends Component {

one_stop_public/libs/PictureSignature/PictureSignature.js

 import React, { useState, useEffect, useRef } from 'react';
 import styles from './styles.less';
-import { Button, Icon, message } from 'antd';
+import { Button, Icon } from 'antd';
 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';
+import { getMessage, getModal, getPopconfirm } from '@/webPublic/one_stop_public/utils/utils';
 
 const Modal = getModal();
+const message = getMessage();
 const styleList = {
   modalParentDiv: {
     display: 'grid',
@@ -24,18 +25,18 @@ const styleList = {
   },
   oneSetItem: {
     position: 'absolute',
-    border: '1px solid red',
   },
   oneSetItemP: {
     marginBottom: 0,
     userSelect: 'none',
   },
-  draggableIcon:{
-    position: 'absolute',
-    left: '10',
-    top: '10',
-    color: 'red',
+  draggableIcon: {
+    // position: 'absolute',
+    // left: '10',
+    // top: '10',
+    // color: 'red',
     zIndex: '10000',
+    border: '1px solid red',
   },
   readOnlyImage: {
     width: '100%',
@@ -77,19 +78,19 @@ export default function PictureSignature({
   form,
   // fileInfo,
   ...others
-                                         }) {
+}) {
   let imageRef = useRef();
   const [fileInfo, setFileInfo] = useState({ ...others?.fileInfo });
   // const [fileInfo, setFileInfo] = useState(fakeFileInfo);
   const [openEdit, setOpenEdit] = useState(false);
+  const [originSignConfig, setOriginConfig] = useState([]);
   const [showModal, setShowModal] = useState(false);
   const [otherProps, setOtherProps] = useState({});
   const [imageInfo, setImageInfo] = useState(null);
   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 = () => {
@@ -124,6 +125,7 @@ export default function PictureSignature({
         let func = new Function(json.otherProps);
         let otherPropsX = func();
         setOtherProps(otherPropsX);
+        setOriginConfig([...otherPropsX.signConfig]);
       } catch (e) {
         console.log('签章组件 其余配置项出错,没有返回一个正确的值');
         return false;
@@ -140,11 +142,24 @@ export default function PictureSignature({
     saveSignConfigValue = '',
     showImageWidth = 1200,
   } = otherProps;
-
+  const deleteSignConfig = key => {
+    let findX = signConfig.findIndex(g => g.key === key);
+    signConfig.splice(findX, 1);
+    setOtherProps({
+      ...otherProps,
+      signConfig,
+    });
+  };
   const handleClickButton = clickType => {
     switch (clickType) {
       case 'startEdit': // 开始签章
         // console.log(imageInfo);
+        if (signConfig && signConfig.length < originSignConfig.length) {
+          setOtherProps({
+            ...otherProps,
+            signConfig: originSignConfig,
+          });
+        }
         setOpenEdit(true);
         break;
       case 'confirm': // 确定
@@ -152,16 +167,18 @@ export default function PictureSignature({
         changeShowModal();
         break;
       case 'save': // 保存签章
+        Modal.confirm({
+          title: '是否确认生成签章图片?',
+          content: '生成后图片不能还原,请谨慎操作!',
+          okText: '确定',
+          cancelText: '取消',
+          onOk: () => {
             let ratioX = backgroundImageWidth / showImageWidth; // 本来是 1500 的 图片 宽度变成了 1200 高度变成了 1200/1500 * imageInfo.height;
-        // let ratioY = 1200 / backgroundImageWidth * imageInfo.height;
-        // console.log(ratioX);
-        // return ;
             let content = getContent(otherProps.signConfig, ratioX);
             apiRequest('/ImageLibApi/merge', {
               background: fileInfo?.path,
               content,
-        })
-          .then(res => {
+            }).then(res => {
               if (form && saveSignConfigValue) {
                 form.setFieldsValue({
                   [saveSignConfigValue]: content,
@@ -176,6 +193,10 @@ export default function PictureSignature({
                 setOpenEdit(false);
               }
             });
+          }
+        })
+
+
         break;
       case 'restore': // 还原图片
         if (fileInfo.originPath) {
@@ -209,6 +230,32 @@ export default function PictureSignature({
       });
     } else {
       return originButtons.map(g => {
+        // if (g.clickType === 'startEdit') {
+        //   console.log(signConfig);
+        //   return   <Popconfirm
+        //     title={<div>
+        //       <p>选择签章组件</p>
+        //       <div>
+        //         {signConfig.map((g) => {
+        //           return <p key={g.key}>{g.name}</p>
+        //         })}
+        //       </div>
+        //     </div>}
+        //     onConfirm={()=>{
+        //       handleClickButton(g.clickType);
+        //     }}
+        //     onCancel={()=>{}}
+        //     okText="确定"
+        //     key={g.key}
+        //     cancelText="取消"
+        //   >
+        //     <Button
+        //       type={g.type}
+        //     >
+        //       {g.name}
+        //     </Button>
+        //   </Popconfirm>
+        // }
         return (
           <Button
             type={g.type}
@@ -263,7 +310,7 @@ export default function PictureSignature({
                   ...styleList.modalDiv,
                   backgroundImage: `url(${basicUrl + fileInfo?.path})`,
                   width: showImageWidth,
-                  height: imageInfo.height / (imageInfo.width / showImageWidth),
+                  height: (imageInfo && imageInfo.height / (imageInfo.width / showImageWidth)) || 0,
                 }}
                 alt={'拖拽区域'}
                 draggable={false}
@@ -282,24 +329,43 @@ export default function PictureSignature({
                           left: g.x,
                         }}
                       >
-                      <div style={styleList.draggableIcon}
-                           data-mes={g.key}
-                           draggable={true}
+                        <div style={styleList.draggableIcon} data-mes={g.key} draggable={true}>
+                          <div
+                            style={{
+                              display: 'inline',
+                            }}
                           >
-                        <Icon type='scissor' />
+                            <Icon
+                              type="close-circle"
+                              onClick={e => {
+                                if (e && e.stopPropagation) {
+                                  e.stopPropagation();
+                                  e.preventDefault();
+                                  deleteSignConfig(g.key);
+                                }
+                              }}
+                              style={{
+                                position: 'absolute',
+                                top: 0,
+                                right: 0,
+                                cursor: 'pointer',
+                                color: 'red',
+                              }}
+                            />
                           </div>
                           <ShowItem {...g} basicUrl={basicUrl} />
                         </div>
+                      </div>
                     );
                   })}
               </div>
             )}
             {!openEdit && ( // 不开启签章功能 只是预览图片
-              <div style={styleList.readOnlyImage}
-              >
+              <div style={styleList.readOnlyImage} draggable={false}>
                 <img
                   src={basicUrl + fileInfo?.path + `?v=${Math.random()}`}
                   alt={fileInfo.name}
+                  draggable={false}
                   style={{
                     width: `${showImageWidth}px`,
                     height: 'auto',
@@ -315,13 +381,7 @@ 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

@@ -6,6 +6,8 @@ const oneSetItemP = {
   marginBottom: 0,
   userSelect: 'none',
 };
+let startX = 0;
+let startY = 0;
 
 const ShowItem = ({ basicUrl, type, x, y, ...otherInfo }) => {
   switch (type) {
@@ -50,13 +52,17 @@ const ShowItem = ({ basicUrl, type, x, y, ...otherInfo }) => {
 export const dragEventList = (setOtherProps, otherProps) => {
   let draggedRef = null;
   let documentThis = window?.parent?.iframeParentComponent?.Modal ? window?.parent?.document : document;
+  documentThis.onmousedown = function(evt){
+   startX = evt.offsetX;
+   startY = evt.offsetY;
+  }
 
   documentThis.addEventListener(
     'dragstart',
     function(event) {
       // 保存拖动元素的引用(ref.)
       draggedRef = event.target;
-      event.target.style.opacity = 0.5;
+      event.target.style.opacity = 0.2;
     },
     false,
   );
@@ -85,8 +91,11 @@ export const dragEventList = (setOtherProps, otherProps) => {
       event.preventDefault();
       // 将拖动的元素到所选择的放置目标节点中
       let infoClientRect = documentThis.getElementById('dropZone').getBoundingClientRect();
-      let leftNew = Math.ceil(event.clientX - infoClientRect.left);
-      let topNew = Math.ceil(event.clientY - infoClientRect.top);
+      // console.log(startX, typeof startX, startY);
+      // return ;
+      let leftNew = Math.ceil(event.clientX - infoClientRect.left) - startX;
+      let topNew = Math.ceil(event.clientY - infoClientRect.top) - startY;
+      // console.log(leftNew, topNew);
       if(leftNew < 0 || leftNew > infoClientRect.width || topNew < 0 || topNew > infoClientRect.height){
         console.log('拖拽到了图片区域外部,不能进行拖拽');
         return false;

one_stop_public/libs/formList/TreeList.js

@@ -4,17 +4,14 @@ import {
 	Card,
 	DatePicker,
 	Divider,
-	Table,
 	Form,
 	Row,
 	Col,
 	Input,
 	InputNumber,
 	message,
-	Modal,
 	Select,
 	Tree,
-	Popconfirm,
 	Tooltip,
 	Spin,
 } from 'antd';
@@ -35,7 +32,10 @@ import { isEmpty } from 'lodash';
 import FilePreview from '@/webPublic/one_stop_public/filePreview';
 import { queryApiActionPath } from '@/webPublic/one_stop_public/utils/queryConfig';
 import UploadCom from '@/webPublic/one_stop_public/libs/UploadCom';
+import { getModal, getPopconfirm } from '@/webPublic/one_stop_public/utils/utils';
 
+const Popconfirm = getPopconfirm();
+const Modal = getModal();
 const FormItem = Form.Item;
 let AllWidth = 0; // 表格总长度
 const { RangePicker } = DatePicker;

one_stop_public/libs/formList/index.js

@@ -9,9 +9,7 @@ import {
 	Col,
 	Input,
 	message,
-	Modal,
 	Select,
-	Popconfirm,
 	Tooltip,
 	Spin,
 	Popover,
@@ -37,8 +35,11 @@ import { queryApiActionPath } from '@/webPublic/one_stop_public/utils/queryConfi
 import UploadCom from '@/webPublic/one_stop_public/libs/UploadCom';
 import ButtonDiy from '../../App/ButtonDiy/ButtonDiy';
 import { cloneDeep } from '../../copy/index';
+import { getPopconfirm, getModal } from '@/webPublic/one_stop_public/utils/utils';
 
 const FormItem = Form.Item;
+const Popconfirm = getPopconfirm();
+const Modal = getModal();
 let AllWidth = 0; // 表格总长度
 const { RangePicker } = DatePicker;
 

one_stop_public/location/index.jsx

@@ -4,10 +4,14 @@
 import React, { Component } from 'react';
 import styles from './styles.less';
 import Location from './components';
-import { Button, Popconfirm } from 'antd';
+import { Button } from 'antd';
 import { isEmpty } from 'lodash';
 import { openToast } from './Notification';
 import { successToast, failToast } from './Toast';
+import { getPopconfirm } from '@/webPublic/one_stop_public/utils/utils';
+
+const Popconfirm = getPopconfirm();
+
 export default class location extends Component {
 	constructor(props) {
 		super(props);

one_stop_public/utils/utils.js

 /* eslint no-useless-escape:0 import/prefer-default-export:0 */
-import { Modal } from 'antd';
+import { Modal, Popconfirm } from 'antd';
 
 const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
 
@@ -41,3 +41,19 @@ export const getModal = () => {
     return Modal;
   }
 };
+
+export const getPopconfirm = () => {
+  if (window?.parent?.iframeParentComponent?.Popconfirm) {
+    return window?.parent?.iframeParentComponent?.Popconfirm;
+  } else {
+    return Popconfirm;
+  }
+};
+
+export const getMessage = () => {
+  if (window?.parent?.iframeParentComponent?.Popconfirm) {
+    return window?.parent?.iframeParentComponent?.message;
+  } else {
+    return message;
+  }
+};