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

25020 流程审核时弹窗优化

上级 d9cecbce
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
*/ */
import React, {Component} from 'react'; import React, {Component} from 'react';
import { Button } from 'antd'; import { Button } from 'antd';
import styles from './index.less';
import { getModal } from '@/webPublic/one_stop_public/utils/utils'; import { getModal } from '@/webPublic/one_stop_public/utils/utils';
import stylesList from '@/webPublic/one_stop_public/AffairButton/AuditButton/Modal/stylesList';
const Modal = getModal(); const Modal = getModal();
...@@ -60,10 +60,11 @@ export default class WebModal extends Component { ...@@ -60,10 +60,11 @@ export default class WebModal extends Component {
width={!!width ? width : 800} width={!!width ? width : 800}
handleCancel={handleCancel} handleCancel={handleCancel}
style={style}> style={style}>
<div className={styles.content_div}> <div style={stylesList.content_div}>
<div className={styles.title}> <div style={stylesList.title}>
{title} {title}
<Button className={styles.button} onClick={handleCancel}> <Button style={stylesList.button}
onClick={handleCancel}>
X X
</Button> </Button>
</div> </div>
......
const stylesList = {
content_div: {
margin: '-24px',
position: 'relative',
},
title: {
color: '#333',
fontSize: '16px',
fontWeight: 'bold',
width: '100%',
lineHeight: '44px',
textAlign: 'center',
backgroundColor: '#E0E7EE',
},
button: {
backgroundColor: 'rgba(255, 255, 255, 0)',
border: '0 solid #cccccc',
float: 'right',
marginTop: '5px',
},
};
export default stylesList;
...@@ -22,204 +22,207 @@ ...@@ -22,204 +22,207 @@
*/ */
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Button } from 'antd'; import { Button } from 'antd';
import styles from './styles.less'; import styleList from './styleList.js';
import Item from 'antd-mobile/lib/popover/Item'; import Item from 'antd-mobile/lib/popover/Item';
export default class pagesBtn extends Component { export default class pagesBtn extends Component {
render() { render() {
let { let {
get, get,
btnOne, btnOne,
disabled, // 按钮控制状态 disabled, // 按钮控制状态
btnTwo, btnTwo,
btnThree, btnThree,
btnList, // 自定义按钮时使用,传入数组进行按钮组装 btnList, // 自定义按钮时使用,传入数组进行按钮组装
style, // 自定义单个按钮样式 style, // 自定义单个按钮样式
text, // 自定义按钮文本 text, // 自定义按钮文本
isSumbitLoading, // 提交状态 isSumbitLoading, // 提交状态
} = this.props; } = this.props;
switch (get) { switch (get) {
/** /**
* 常用于发起流程底部按钮 * 常用于发起流程底部按钮
*/ */
case '1': case '1':
return ( return (
<div className={styles.btn_page}> <div style={styleList.btn_page}>
<Button <Button
className={[`${styles.btn_margin}`, `${styles.btn}`].join(' ')} style={{ ...styleList.btn_margin, ...styleList.btn }}
disabled={disabled} disabled={disabled}
onClick={btnOne} onClick={btnOne}
loading={isSumbitLoading}> loading={isSumbitLoading}>
暂存草稿 暂存草稿
</Button> </Button>
<Button <Button
loading={isSumbitLoading} loading={isSumbitLoading}
className={styles.btn} style={{ ...styleList.btn }}
onClick={btnTwo} onClick={btnTwo}
disabled={disabled} disabled={disabled}
type="primary"> type='primary'>
提交 提交
</Button> </Button>
</div> </div>
); );
/** /**
* 常用于审核用底部按钮 * 常用于审核用底部按钮
*/ */
case '2': case '2':
return ( return (
<div className={styles.btn_page}> <div style={styleList.btn_page}>
<Button <Button
disabled={disabled} disabled={disabled}
className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ')} style={{ ...styleList.btn_margin, ...styleList.btn, ...styleList.btn_no }}
onClick={btnOne} onClick={btnOne}
loading={isSumbitLoading && isSumbitLoading}> loading={isSumbitLoading && isSumbitLoading}>
不通过 不通过
</Button> </Button>
<Button <Button
disabled={disabled} disabled={disabled}
loading={isSumbitLoading && isSumbitLoading} loading={isSumbitLoading && isSumbitLoading}
className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join( style={{ ...styleList.btn_margin, ...styleList.btn, ...styleList.btn_reject }}
' ', onClick={btnTwo}>
)} 驳回
onClick={btnTwo}> </Button>
驳回 <Button
</Button> disabled={disabled}
<Button style={{ ...styleList.btn }}
disabled={disabled} type='primary'
className={styles.btn} loading={isSumbitLoading && isSumbitLoading}
type="primary" onClick={btnThree}>
loading={isSumbitLoading && isSumbitLoading} 通过
onClick={btnThree}> </Button>
通过 </div>
</Button> );
</div> /**
); * 查询类底部按钮
/** */
* 查询类底部按钮 case '3':
*/ return (
case '3': <div style={styleList.btn_page}>
return ( <Button
<div className={styles.btn_page}> disabled={disabled}
<Button style={{ ...styleList.btn }}
disabled={disabled} type='primary'
className={styles.btn} onClick={btnOne}
type="primary" loading={isSumbitLoading && isSumbitLoading}>
onClick={btnOne} 查询
loading={isSumbitLoading && isSumbitLoading}> </Button>
查询 </div>
</Button> );
</div> /**
); * 模态框常用底部按钮
/** */
* 模态框常用底部按钮 case '4':
*/ return (
case '4': <div style={styleList.btn_page}>
return ( <Button
<div className={styles.btn_page}> disabled={disabled}
<Button style={{ ...styleList.btn_margin, ...styleList.btn }}
disabled={disabled}
className={[`${styles.btn_margin}`, `${styles.btn}`].join(' ')} onClick={btnOne}
onClick={btnOne} loading={isSumbitLoading && isSumbitLoading}>
loading={isSumbitLoading && isSumbitLoading}> 取消
取消 </Button>
</Button> <Button
<Button disabled={disabled}
disabled={disabled} style={{ ...styleList.btn }}
className={styles.btn}
type="primary" type='primary'
onClick={btnTwo} onClick={btnTwo}
loading={isSumbitLoading && isSumbitLoading}> loading={isSumbitLoading && isSumbitLoading}>
确定 确定
</Button> </Button>
</div> </div>
); );
/** /**
* 常用于审核底部按钮 驳回 通过 * 常用于审核底部按钮 驳回 通过
*/ */
case '5': case '5':
return ( return (
<div className={styles.btn_page}> <div style={styleList.btn_page}>
<Button <Button
disabled={disabled} disabled={disabled}
className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join( style={{ ...styleList.btn_margin, ...styleList.btn, ...styleList.btn_reject }}
' ',
)} onClick={btnOne}
onClick={btnOne} loading={isSumbitLoading && isSumbitLoading}>
loading={isSumbitLoading && isSumbitLoading}> 驳回
驳回 </Button>
</Button> <Button
<Button disabled={disabled}
disabled={disabled} style={{ ...styleList.btn }}
className={styles.btn} loading={isSumbitLoading && isSumbitLoading}
loading={isSumbitLoading && isSumbitLoading} type='primary'
type="primary" onClick={btnTwo}>
onClick={btnTwo}> 通过
通过 </Button>
</Button> </div>
</div> );
); /**
/** * 常用于审核底部按钮 驳回 通过
* 常用于审核底部按钮 驳回 通过 */
*/ case '6':
case '6': return (
return ( <div style={styleList.btn_page}>
<div className={styles.btn_page}> <Button
<Button disabled={disabled}
disabled={disabled} style={{ ...styleList.btn_margin, ...styleList.btn, ...styleList.btn_no }}
className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ')} onClick={btnOne}
onClick={btnOne} loading={isSumbitLoading && isSumbitLoading}>
loading={isSumbitLoading && isSumbitLoading}> 拒绝
拒绝 </Button>
</Button> <Button
<Button disabled={disabled}
disabled={disabled} style={{ ...styleList.btn }}
className={styles.btn} loading={isSumbitLoading && isSumbitLoading}
loading={isSumbitLoading && isSumbitLoading} type='primary'
type="primary" onClick={btnTwo}>
onClick={btnTwo}> 通过
通过 </Button>
</Button> </div>
</div> );
); /**
/** * 自定义按钮数量 样式 以及按钮内容
* 自定义按钮数量 样式 以及按钮内容 */
*/ case '7':
case '7': return (
return ( <div style={styleList.btn_page}>
<div className={styles.btn_page}> {btnList.length > 0
{btnList.length > 0 ? btnList.map((item, index) => {
? btnList.map((item, index) => { return (
return ( <Button
<Button disabled={disabled}
disabled={disabled} key={index}
key={index} type={Item.type}
type={Item.type} style={item.style}
style={item.style} onClick={item.click}
onClick={item.click} loading={isSumbitLoading && isSumbitLoading}
loading={isSumbitLoading && isSumbitLoading} style={item.margin ? { ...styles.btn_margin, ...styleList.btn } : { ...styleList.btn }}
className={[`${item.margin ? styles.btn_margin : ''}`, `${styles.btn}`].join( >
' ', {item.content}
)}> </Button>
{item.content} );
</Button> })
); : ''}
}) </div>
: ''} );
</div> /**
); * 自定义单个组件按钮
/** */
* 自定义单个组件按钮 case '8':
*/ return (
case '8': <Button
return ( type={style === 'deafalut' ? 'primary' : ''}
<Button className={style !== 'deafalut' ? style : ''}
type={style === 'deafalut' ? 'primary' : ''} style={{
className={style !== 'deafalut' ? style : ''} minHeight: 32,
style={{ minHeight: 32, minWidth: 90, marginLeft: style === 'deafalut' ? 16 : '' }} minWidth: 90,
onClick={btnOne} marginLeft: style === 'deafalut' ? 16 : '',
loading={isSumbitLoading && isSumbitLoading}> }}
{text} onClick={btnOne}
</Button> loading={isSumbitLoading && isSumbitLoading}>
); {text}
} </Button>
} );
}
}
} }
const styleList = {
btn_page: {
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexWrap: 'wrap',
},
btn: {
minWidth: '90px',
minHeight: '32px',
borderRadius: '2px',
},
btn_margin: {
marginRight: '16px',
},
btn_no: {
color: '#FF5350',
border: '1px solid #FF5350',
},
btn_reject: {
color: '#FF9B00',
border: '1px solid #FF9B00',
},
};
export default styleList;
...@@ -9,7 +9,7 @@ import { Input, Checkbox } from 'antd'; ...@@ -9,7 +9,7 @@ import { Input, Checkbox } from 'antd';
import Btn from '../pagesBtn'; import Btn from '../pagesBtn';
import MyModal from '../Modal'; import MyModal from '../Modal';
import styles from './styles.less'; import styles from './styles.less';
import stylesList from './styles-in-line';
const { TextArea } = Input; const { TextArea } = Input;
export default class userButton extends Component { export default class userButton extends Component {
constructor() { constructor() {
...@@ -171,13 +171,17 @@ export default class userButton extends Component { ...@@ -171,13 +171,17 @@ export default class userButton extends Component {
title={isSecond ? '重新发起' : '审批'} title={isSecond ? '重新发起' : '审批'}
width={600} width={600}
handleCancel={this.handleCancelOk}> handleCancel={this.handleCancelOk}>
<div className={styles.is_ok}> <div style={stylesList.is_ok}>
<p className={styles.header}> <p style={stylesList.header}>
<span>{isSecond ? '当前状态' : '审批结果'}</span> <span style={{...stylesList.headerSpan, ...stylesList.headerSpan_1}}>
{isSecond ? '当前状态' : '审批结果'}
</span>
{this.getUser()} {this.getUser()}
</p> </p>
<div className={styles.body}> <div style={stylesList.body}>
<span>{isSecond ? '发起说明' : '审批说明'}</span> <span style={{...stylesList.body_span, ...stylesList.body_span_1}}>
{isSecond ? '发起说明' : '审批说明'}
</span>
<span> <span>
<TextArea <TextArea
value={value} value={value}
...@@ -188,9 +192,11 @@ export default class userButton extends Component { ...@@ -188,9 +192,11 @@ export default class userButton extends Component {
</span> </span>
</div> </div>
{Sign ? ( {Sign ? (
<div className={styles.body}> <div style={stylesList.body}>
<span>使用签名</span> <span style={{...stylesList.body_span, ...stylesList.body_span_1}}>
<span> 使用签名
</span>
<span style={{...stylesList.body_span}}>
<Checkbox defaultChecked={user.isUseBackImage} onChange={this.onChange1} /> <Checkbox defaultChecked={user.isUseBackImage} onChange={this.onChange1} />
</span> </span>
</div> </div>
......
const styles = {
is_ok: {
minHeight: '336px',
boxSizing: 'border-box',
padding: '60px 81px 0px 59px',
overflow: 'hidden',
},
header: {
marginBottom: '23px',
},
headerSpan: {
fontSize: '14px',
lineHeight: '24px',
},
headerSpan_1: {
color: '#666',
textAlign: 'right',
marginRight: '24px',
},
headerSpan_2: {
fontWeight: 'bold',
},
body: {
display: 'flex',
marginBottom: '60px',
},
body_span: {
fontSize: '14px',
lineHeight: '24px',
color: '#666',
},
body_span_1: {
textAlign: 'right',
marginRight: '24px',
},
};
export default styles;
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
*/ */
import React, {Component} from 'react'; import React, {Component} from 'react';
import {checkIsImage} from '@/webPublic/one_stop_public/libs/UploadCom'; import {checkIsImage} from '@/webPublic/one_stop_public/libs/UploadCom';
import { getModal, getPopconfirm } from '@/webPublic/one_stop_public/utils/utils'; import { getModal, getPopconfirm, isFromIframe } from '@/webPublic/one_stop_public/utils/utils';
const FileViewer = CLIENT_TYPE === 'mobile' ? null : require('react-file-viewer'); const FileViewer = CLIENT_TYPE === 'mobile' ? null : require('react-file-viewer');
const Modal = getModal(); const Modal = getModal();
...@@ -20,7 +20,7 @@ export default class index extends Component { ...@@ -20,7 +20,7 @@ export default class index extends Component {
} }
showModal = () => { showModal = () => {
if(window?.parent?.iframeParentComponent){ if(isFromIframe()){
return false; return false;
} }
this.setState({ this.setState({
...@@ -81,7 +81,7 @@ export default class index extends Component { ...@@ -81,7 +81,7 @@ export default class index extends Component {
okText='下载' okText='下载'
onCancel={this.showModal} onCancel={this.showModal}
cancelText={ window?.parent?.iframeParentComponent ? '取消' : '预览'}> cancelText={ isFromIframe() ? '取消' : '预览'}>
{isImg ? ( {isImg ? (
<img <img
ref={(node)=>{ this.imageDom = node;}} ref={(node)=>{ this.imageDom = node;}}
......
import React from "react"; import React from "react";
import {queryApiActionPath} from "@/webPublic/one_stop_public/utils/queryConfig"; import {queryApiActionPath} from "@/webPublic/one_stop_public/utils/queryConfig";
import {getToken} from "@/webPublic/one_stop_public/utils/token"; import {getToken} from "@/webPublic/one_stop_public/utils/token";
import { isFromIframe } from '@/webPublic/one_stop_public/utils/utils';
const oneSetItemP = { const oneSetItemP = {
marginBottom: 0, marginBottom: 0,
...@@ -51,7 +52,7 @@ const ShowItem = ({ basicUrl, type, x, y, ...otherInfo }) => { ...@@ -51,7 +52,7 @@ const ShowItem = ({ basicUrl, type, x, y, ...otherInfo }) => {
export const dragEventList = (setOtherProps, otherProps) => { export const dragEventList = (setOtherProps, otherProps) => {
let draggedRef = null; let draggedRef = null;
let documentThis = window?.parent?.iframeParentComponent?.Modal ? window?.parent?.document : document; let documentThis = isFromIframe() ? window?.parent?.document : document;
documentThis.onmousedown = function(evt){ documentThis.onmousedown = function(evt){
startX = evt.offsetX; startX = evt.offsetX;
startY = evt.offsetY; startY = evt.offsetY;
......
...@@ -34,26 +34,18 @@ export const dispatch = (type, payload, callback) => { ...@@ -34,26 +34,18 @@ export const dispatch = (type, payload, callback) => {
}; };
export const isFromIframe = () => { // 判断是否来自iframe 嵌入页面
return !!window?.parent?.iframeParentComponent?.Modal;
}
export const getModal = () => { export const getModal = () => {
if (window?.parent?.iframeParentComponent?.Modal) { return isFromIframe() ? window?.parent?.iframeParentComponent?.Modal : Modal;
return window?.parent?.iframeParentComponent?.Modal;
} else {
return Modal;
}
}; };
export const getPopconfirm = () => { export const getPopconfirm = () => {
if (window?.parent?.iframeParentComponent?.Popconfirm) { return isFromIframe() ? window?.parent?.iframeParentComponent?.Popconfirm : Popconfirm;
return window?.parent?.iframeParentComponent?.Popconfirm;
} else {
return Popconfirm;
}
}; };
export const getMessage = () => { export const getMessage = () => {
if (window?.parent?.iframeParentComponent?.Popconfirm) { return isFromIframe() ? window?.parent?.iframeParentComponent?.message : message;
return window?.parent?.iframeParentComponent?.message;
} else {
return message;
}
}; };
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论