Skip to content

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

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

上级 b7af1ad5
隐藏空白字符变更
内嵌 并排
正在显示 包含 188 行增加 和 98 行删除
one_stop_public/filePreview/index.jsx
浏览文件 @ 8dbb169b
......@@ -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
浏览文件 @ 8dbb169b
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%',
......@@ -69,42 +70,42 @@ 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);
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 => {
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,
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,
});
});
}
}
setShowModal(!showModal);
......@@ -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,30 +167,36 @@ export default function PictureSignature({
changeShowModal();
break;
case 'save': // 保存签章
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,
Modal.confirm({
title: '是否确认生成签章图片?',
content: '生成后图片不能还原,请谨慎操作!',
okText: '确定',
cancelText: '取消',
onOk: () => {
let ratioX = backgroundImageWidth / showImageWidth; // 本来是 1500 的 图片 宽度变成了 1200 高度变成了 1200/1500 * imageInfo.height;
let content = getContent(otherProps.signConfig, ratioX);
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) {
......@@ -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,43 +310,62 @@ 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}
id={'dropZone'}
>
{Array.isArray(signConfig) &&
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}
signConfig.map(g => {
return (
<div
key={g.key}
data-mes={g.key}
draggable={false}
style={{
...styleList.oneSetItem,
top: g.y,
left: g.x,
}}
>
<Icon type='scissor' />
<div style={styleList.draggableIcon} data-mes={g.key} draggable={true}>
<div
style={{
display: 'inline',
}}
>
<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>
<ShowItem {...g} basicUrl={basicUrl} />
</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
浏览文件 @ 8dbb169b
......@@ -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
浏览文件 @ 8dbb169b
......@@ -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
浏览文件 @ 8dbb169b
......@@ -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
浏览文件 @ 8dbb169b
......@@ -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
浏览文件 @ 8dbb169b
/* 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;
}
};
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论