提交 cd4a4b30 authored 作者: 钟是志's avatar 钟是志

增加签章组件

上级 4102219b
import React, { Fragment, Component } from 'react';
const getUrlInfo = param => {
let url = window.document.location.href.toString();
let u = url.split('?');
if (typeof u[1] == 'string') {
u = u[1].split('&');
let get = {};
for (let i in u) {
let j = u[i].split('=');
get[j[0]] = decodeURIComponent(j[1]);
}
return get;
} else {
return {};
}
};
export default class Detail extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
window.addEventListener(
'message',
event => {
if (event.data && event.data.indexOf && event.data.indexOf('iframeDetailHeight') > -1) {
const height = Number(event.data.split('-')[1]);
document.getElementById('detailIframeId').height = height + 50;
setTimeout(() => {
//document.getElementsByClassName('ant-layout-content')[0].scrollTo(0, height);
// 23627 签约审核/另行签约审核,审核框优化,自动显示到当前页面,不要一直拉
// 需求存在争议 暂时这样解决
}, 500);
}
},
false,
);
}
render() {
let iframeUrl = `http://localhost:8000/onestop/IframeForDetail?id=1471409591622303744&token=2055c709-a144-4897-b8b8-0e907f9e9221`;
return (
<div>
<iframe
src={iframeUrl}
frameBorder={0}
id="detailIframeId"
name="applyIframe"
marginWidth="0"
marginHeight="0"
onLoad={this.showAll}
allowtransparency="yes"
seamless
scrolling={'no'}
style={{
width: '100%',
overflowY: 'hidden',
minHeight: '800px',
}}
/>
</div>
);
}
}
...@@ -3,10 +3,12 @@ ...@@ -3,10 +3,12 @@
* 2019年9月16日 * 2019年9月16日
* Modal定制样式 * Modal定制样式
*/ */
import React, { Component } from 'react'; import React, {Component} from 'react';
import { Modal, Button } from 'antd'; import {Modal, Button} from 'antd';
import styles from './index.less'; import styles from './index.less';
import {getContainer} from "@/webPublic/one_stop_public/utils/utils"; import {getContainer} from "@/webPublic/one_stop_public/utils/utils";
export default class WebModal extends Component { export default class WebModal extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
...@@ -14,6 +16,7 @@ export default class WebModal extends Component { ...@@ -14,6 +16,7 @@ export default class WebModal extends Component {
top: 0, top: 0,
}; };
} }
/** /**
* 钟是志 * 钟是志
* 2020年4月22日 17:07:53 * 2020年4月22日 17:07:53
...@@ -35,21 +38,26 @@ export default class WebModal extends Component { ...@@ -35,21 +38,26 @@ export default class WebModal extends Component {
} }
render() { render() {
let { visible, handleCancel, title, width } = this.props; let {visible, handleCancel, title, width} = this.props;
const { top } = this.state; const {top} = this.state;
const style = { const style = {
borderRadius: 4, borderRadius: 4,
}; };
if (top) { if (top) {
style.top = top; style.top = top;
} }
let dom = document.getElementsByClassName('antd-pro-web-public-one_stop_public-affair-button-audit-button-user-table-styles-btn_page');
if(dom && dom.length){
dom = dom[0];
}
return ( return (
<div>
<Modal <Modal
closable={false} closable={false}
visible={visible} visible={visible}
footer={null} footer={null}
getContainer={getContainer} getContainer={() => {
return getContainer(dom);
}}
destroyOnClose={true} destroyOnClose={true}
width={!!width ? width : 800} width={!!width ? width : 800}
handleCancel={handleCancel} handleCancel={handleCancel}
...@@ -64,7 +72,6 @@ export default class WebModal extends Component { ...@@ -64,7 +72,6 @@ export default class WebModal extends Component {
{this.props.children} {this.props.children}
</div> </div>
</Modal> </Modal>
</div>
); );
} }
} }
...@@ -90,13 +90,16 @@ export default class index extends Component { ...@@ -90,13 +90,16 @@ export default class index extends Component {
{pathName} {pathName}
</a> </a>
)} )}
{
visible &&
<Modal <Modal
title={pathName} title={pathName}
visible={visible} visible={visible}
width={1200} width={1200}
destroyOnClose destroyOnClose
getContainer={getContainer} getContainer={() => {
return getContainer(this.imageDom.parentNode.parentNode.parentNode);
}}
centered={true} centered={true}
onOk={this.handleOk} onOk={this.handleOk}
onCancel={this.handleCancel}> onCancel={this.handleCancel}>
...@@ -128,6 +131,8 @@ export default class index extends Component { ...@@ -128,6 +131,8 @@ export default class index extends Component {
</div> </div>
)} )}
</Modal> </Modal>
}
</> </>
); );
} }
......
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 } from 'antd'; import {Modal, Button, Icon, message} from 'antd';
import ShowItem, { dragEventList } from './ShowItem'; import ShowItem, {dragEventList} from './ShowItem';
import { apiRequest } from "../../utils/request"; import {apiRequest} from "../../utils/request";
import {getContainer} from "../../utils/utils"; import {getContainer} from "../../utils/utils";
let fakeFileInfo = { let fakeFileInfo = {
path: '/u/202112/09145847wsz2.jpg', path: '/u/202112/22111913hyia.png',
name: '摇摇后摇', name: '摇摇后摇',
}; };
export default function PictureSignature({ export default function PictureSignature({
json, json,
// fileInfo, disabled,
basicUrl, basicUrl,
openEdit = true, onChangeFile,
}) { // fileInfo,
let fileInfo = fakeFileInfo; ...others
}) {
let imageRef = useRef(); let imageRef = useRef();
const [fileInfo, setFileInfo] = useState(others?.fileInfo);
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({ const [imageInfo, setImageInfo] = useState({
...@@ -29,6 +31,7 @@ export default function PictureSignature({ ...@@ -29,6 +31,7 @@ export default function PictureSignature({
const changeShowModal = () => { const changeShowModal = () => {
setShowModal(!showModal); setShowModal(!showModal);
}; };
console.log(json);
useEffect(() => { useEffect(() => {
if (json.otherProps) { if (json.otherProps) {
...@@ -53,22 +56,40 @@ export default function PictureSignature({ ...@@ -53,22 +56,40 @@ export default function PictureSignature({
} }
}, [json.otherProps]); }, [json.otherProps]);
const { ModalProps, signConfig, footerButtons } = otherProps; const {ModalProps, signConfig, footerButtons, originButtons} = otherProps;
const handleClickButton = (clickType) => { const handleClickButton = (clickType) => {
switch (clickType){ switch (clickType) {
case 'startEdit':
setOpenEdit(true);
break;
case 'confirm':
onChangeFile({...fileInfo});
changeShowModal();
break;
case 'save': case 'save':
apiRequest('/ImageLibApi/merge', { apiRequest('/ImageLibApi/merge', {
background: fileInfo?.path, background: fileInfo?.path,
content: JSON.stringify({ content: JSON.stringify({
objs: otherProps.signConfig, objs: otherProps.signConfig,
}), }),
}).then((res) => {
if (res && res.path) {
message.success('操作成功');
let newPath = res.path;
fileInfo.originPath = fileInfo.path;
fileInfo.path = newPath;
setFileInfo({...fileInfo});
setOpenEdit(false);
}
}) })
break; break;
case 'restore': case 'restore':
let func = new Function(json.otherProps); if (fileInfo.originPath) {
let otherPropsX = func(); fileInfo.path = fileInfo.originPath;
setOtherProps(otherPropsX); setFileInfo({...fileInfo});
setOpenEdit(false);
}
break; break;
default: default:
return true; return true;
...@@ -76,27 +97,47 @@ export default function PictureSignature({ ...@@ -76,27 +97,47 @@ export default function PictureSignature({
} }
const Footer = () => { const Footer = () => {
if (disabled) {
return null;
}
if (openEdit) { if (openEdit) {
return footerButtons.map(g => { return footerButtons.map(g => {
return ( return (
<Button type={g.type} <Button type={g.type}
key={g.key} key={g.key}
onClick={()=>{handleClickButton(g.clickType)}} onClick={() => {
handleClickButton(g.clickType)
}}
>
{g.name}
</Button>
);
});
} else {
return originButtons.map(g => {
return (
<Button type={g.type}
key={g.key}
onClick={() => {
handleClickButton(g.clickType)
}}
> >
{g.name} {g.name}
</Button> </Button>
); );
}); });
}else{
return null;
} }
}; };
if (!fileInfo) {
return null;
}
return ( return (
<div className={styles.outSideDiv}> <div className={styles.outSideDiv} ref={imageRef}
>
{fileInfo && fileInfo?.path && ( {fileInfo && fileInfo?.path && (
<img <img
className={styles.onePic} className={styles.onePic}
ref={imageRef}
src={basicUrl + fileInfo?.path} src={basicUrl + fileInfo?.path}
alt={fileInfo.name} alt={fileInfo.name}
onClick={changeShowModal} onClick={changeShowModal}
...@@ -108,14 +149,18 @@ export default function PictureSignature({ ...@@ -108,14 +149,18 @@ export default function PictureSignature({
destroyOnClose={true} destroyOnClose={true}
maskClosable={false} maskClosable={false}
onCancel={changeShowModal} onCancel={changeShowModal}
getContainer={getContainer} // getContainer={() => {getContainer(imageRef.current)}}
getContainer={false}
className={styles.ModalClass} className={styles.ModalClass}
footer={<Footer />} footer={<Footer/>}
title={'图片签章'} title={'图片签章'}
width={'90vw'} width={'90vw'}
bodyStyle={{ bodyStyle={{
minHeight: '800px', minHeight: '800px',
overflow: 'auto', overflow: 'auto',
padding: '20px',
maxWidth: '99%',
maxHeight: '99%',
}} }}
{...ModalProps} {...ModalProps}
> >
...@@ -146,7 +191,7 @@ export default function PictureSignature({ ...@@ -146,7 +191,7 @@ export default function PictureSignature({
}} }}
> >
<div className={styles.draggableIcon} draggable={true}> <div className={styles.draggableIcon} draggable={true}>
<Icon type="edit" /> <Icon type="edit"/>
</div> </div>
<ShowItem {...g} <ShowItem {...g}
basicUrl={basicUrl} basicUrl={basicUrl}
...@@ -161,7 +206,6 @@ export default function PictureSignature({ ...@@ -161,7 +206,6 @@ export default function PictureSignature({
<img <img
src={basicUrl + fileInfo?.path} src={basicUrl + fileInfo?.path}
alt={fileInfo.name} alt={fileInfo.name}
style={{ maxWidth: '95vw' }}
/> />
</div> </div>
)} )}
...@@ -171,3 +215,30 @@ export default function PictureSignature({ ...@@ -171,3 +215,30 @@ export default function PictureSignature({
</div> </div>
); );
} }
export function SignArray(props){
const {value, onChange, basicUrl, json, } = props;
console.log(props);
let files = value?.files || [];
const onChangeFile = (newFielInfo) => {
for(let item of files){
if((item.path || item.originPath) === newFielInfo.originPath){
item = newFielInfo;
}
}
value.files = files;
onChange({files});
}
return <div>
{
files.map((g) => {
return <PictureSignature json={json}
basicUrl={basicUrl}
fileInfo={g}
onChangeFile={onChangeFile}
/>
})
}
</div>
}
...@@ -30,7 +30,11 @@ ...@@ -30,7 +30,11 @@
width: 100%; width: 100%;
display: grid; display: grid;
place-items: center; place-items: center;
min-height: 60vh; min-height: 800px;
img{
max-width: 1300px;
height: auto;
}
} }
.oneSetItem{ .oneSetItem{
position: absolute; position: absolute;
......
...@@ -59,7 +59,7 @@ import DraftEditorCom from '../App/DraftEditorCom'; ...@@ -59,7 +59,7 @@ import DraftEditorCom from '../App/DraftEditorCom';
import MobileItem from './MobileItem'; import MobileItem from './MobileItem';
import MobileCascader from './CascaderDiy/MobileCascader'; import MobileCascader from './CascaderDiy/MobileCascader';
import { equal, errorHandler, getBase64, getRender, isJSON } from './Split_Index/staticInfo'; import { equal, errorHandler, getBase64, getRender, isJSON } from './Split_Index/staticInfo';
import PictureSignature from "@/webPublic/one_stop_public/libs/PictureSignature/PictureSignature"; import PictureSignature, { SignArray } from "@/webPublic/one_stop_public/libs/PictureSignature/PictureSignature";
const { TextArea } = Input; const { TextArea } = Input;
const { Option } = Select; const { Option } = Select;
...@@ -2039,6 +2039,7 @@ export default class tableCom extends Component { ...@@ -2039,6 +2039,7 @@ export default class tableCom extends Component {
return ( return (
<li key={f.path}> <li key={f.path}>
<PictureSignature json={json} <PictureSignature json={json}
disabled={true} // 只读模式
basicUrl={queryApiActionPath()} basicUrl={queryApiActionPath()}
fileInfo={f} fileInfo={f}
...@@ -2057,6 +2058,7 @@ export default class tableCom extends Component { ...@@ -2057,6 +2058,7 @@ export default class tableCom extends Component {
return ( return (
<li key={f.path}> <li key={f.path}>
<PictureSignature json={json} <PictureSignature json={json}
disabled={true} // 只读模式
basicUrl={queryApiActionPath()} basicUrl={queryApiActionPath()}
fileInfo={f} fileInfo={f}
...@@ -2992,11 +2994,10 @@ export default class tableCom extends Component { ...@@ -2992,11 +2994,10 @@ export default class tableCom extends Component {
cm = getFieldDecorator(dataColumn.base52, { cm = getFieldDecorator(dataColumn.base52, {
initialValue: { files: filesPictureSignature }, initialValue: { files: filesPictureSignature },
})( })(
<PictureSignature <SignArray json={json}
json={json}
disabled={disabled || isPreview} disabled={disabled || isPreview}
/>, basicUrl={queryApiActionPath()}
); />);
if ( if (
get === 'mobile' && get === 'mobile' &&
((json.isMobileLabel != null && json.isMobileLabel) || ((json.isMobileLabel != null && json.isMobileLabel) ||
......
...@@ -27,10 +27,10 @@ export const dispatch = (type, payload, callback) => { ...@@ -27,10 +27,10 @@ export const dispatch = (type, payload, callback) => {
window.g_app._store.dispatch({ type, payload, callback }); window.g_app._store.dispatch({ type, payload, callback });
}; };
export const getContainer = () => { export const getContainer = (node) => {
if(window.location.href.indexOf('localhost') > -1) { console.log(node);
return document.body; if(window.parent?.document && node){
}else{ return node;
return window.parent?.document?.body || document.body;
} }
return document.body;
} }
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论