Skip to content

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

25020 流程审核时弹窗优化

上级 d9cecbce
隐藏空白字符变更
内嵌 并排
正在显示 包含 319 行增加 和 230 行删除
one_stop_public/AffairButton/AuditButton/Modal/index.jsx
浏览文件 @ 0b31747f
......@@ -5,8 +5,8 @@
*/
import React, {Component} from 'react';
import { Button } from 'antd';
import styles from './index.less';
import { getModal } from '@/webPublic/one_stop_public/utils/utils';
import stylesList from '@/webPublic/one_stop_public/AffairButton/AuditButton/Modal/stylesList';
const Modal = getModal();
......@@ -60,10 +60,11 @@ export default class WebModal extends Component {
width={!!width ? width : 800}
handleCancel={handleCancel}
style={style}>
<div className={styles.content_div}>
<div className={styles.title}>
<div style={stylesList.content_div}>
<div style={stylesList.title}>
{title}
<Button className={styles.button} onClick={handleCancel}>
<Button style={stylesList.button}
onClick={handleCancel}>
X
</Button>
</div>
......
one_stop_public/AffairButton/AuditButton/Modal/stylesList.js 0 → 100644
浏览文件 @ 0b31747f
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;
one_stop_public/AffairButton/AuditButton/pagesBtn/index.jsx
浏览文件 @ 0b31747f
......@@ -22,204 +22,207 @@
*/
import React, { Component } from 'react';
import { Button } from 'antd';
import styles from './styles.less';
import styleList from './styleList.js';
import Item from 'antd-mobile/lib/popover/Item';
export default class pagesBtn extends Component {
render() {
let {
get,
btnOne,
disabled, // 按钮控制状态
btnTwo,
btnThree,
btnList, // 自定义按钮时使用，传入数组进行按钮组装
style, // 自定义单个按钮样式
text, // 自定义按钮文本
isSumbitLoading, // 提交状态
} = this.props;
switch (get) {
/**
* 常用于发起流程底部按钮
*/
case '1':
return (
<div className={styles.btn_page}>
<Button
className={[`${styles.btn_margin}`, `${styles.btn}`].join(' ')}
disabled={disabled}
onClick={btnOne}
loading={isSumbitLoading}>
暂存草稿
</Button>
<Button
loading={isSumbitLoading}
className={styles.btn}
onClick={btnTwo}
disabled={disabled}
type="primary">
提交
</Button>
</div>
);
/**
* 常用于审核用底部按钮
*/
case '2':
return (
<div className={styles.btn_page}>
<Button
disabled={disabled}
className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ')}
onClick={btnOne}
loading={isSumbitLoading && isSumbitLoading}>
不通过
</Button>
<Button
disabled={disabled}
loading={isSumbitLoading && isSumbitLoading}
className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(
' ',
)}
onClick={btnTwo}>
驳回
</Button>
<Button
disabled={disabled}
className={styles.btn}
type="primary"
loading={isSumbitLoading && isSumbitLoading}
onClick={btnThree}>
通过
</Button>
</div>
);
/**
* 查询类底部按钮
*/
case '3':
return (
<div className={styles.btn_page}>
<Button
disabled={disabled}
className={styles.btn}
type="primary"
onClick={btnOne}
loading={isSumbitLoading && isSumbitLoading}>
查询
</Button>
</div>
);
/**
* 模态框常用底部按钮
*/
case '4':
return (
<div className={styles.btn_page}>
<Button
disabled={disabled}
className={[`${styles.btn_margin}`, `${styles.btn}`].join(' ')}
onClick={btnOne}
loading={isSumbitLoading && isSumbitLoading}>
取消
</Button>
<Button
disabled={disabled}
className={styles.btn}
type="primary"
onClick={btnTwo}
loading={isSumbitLoading && isSumbitLoading}>
确定
</Button>
</div>
);
/**
* 常用于审核底部按钮 驳回 通过
*/
case '5':
return (
<div className={styles.btn_page}>
<Button
disabled={disabled}
className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(
' ',
)}
onClick={btnOne}
loading={isSumbitLoading && isSumbitLoading}>
驳回
</Button>
<Button
disabled={disabled}
className={styles.btn}
loading={isSumbitLoading && isSumbitLoading}
type="primary"
onClick={btnTwo}>
通过
</Button>
</div>
);
/**
* 常用于审核底部按钮 驳回 通过
*/
case '6':
return (
<div className={styles.btn_page}>
<Button
disabled={disabled}
className={[`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ')}
onClick={btnOne}
loading={isSumbitLoading && isSumbitLoading}>
拒绝
</Button>
<Button
disabled={disabled}
className={styles.btn}
loading={isSumbitLoading && isSumbitLoading}
type="primary"
onClick={btnTwo}>
通过
</Button>
</div>
);
/**
* 自定义按钮数量 样式 以及按钮内容
*/
case '7':
return (
<div className={styles.btn_page}>
{btnList.length > 0
? btnList.map((item, index) => {
return (
<Button
disabled={disabled}
key={index}
type={Item.type}
style={item.style}
onClick={item.click}
loading={isSumbitLoading && isSumbitLoading}
className={[`${item.margin ? styles.btn_margin : ''}`, `${styles.btn}`].join(
' ',
)}>
{item.content}
</Button>
);
})
: ''}
</div>
);
/**
* 自定义单个组件按钮
*/
case '8':
return (
<Button
type={style === 'deafalut' ? 'primary' : ''}
className={style !== 'deafalut' ? style : ''}
style={{ minHeight: 32, minWidth: 90, marginLeft: style === 'deafalut' ? 16 : '' }}
onClick={btnOne}
loading={isSumbitLoading && isSumbitLoading}>
{text}
</Button>
);
}
}
render() {
let {
get,
btnOne,
disabled, // 按钮控制状态
btnTwo,
btnThree,
btnList, // 自定义按钮时使用，传入数组进行按钮组装
style, // 自定义单个按钮样式
text, // 自定义按钮文本
isSumbitLoading, // 提交状态
} = this.props;
switch (get) {
/**
* 常用于发起流程底部按钮
*/
case '1':
return (
<div style={styleList.btn_page}>
<Button
style={{ ...styleList.btn_margin, ...styleList.btn }}
disabled={disabled}
onClick={btnOne}
loading={isSumbitLoading}>
暂存草稿
</Button>
<Button
loading={isSumbitLoading}
style={{ ...styleList.btn }}
onClick={btnTwo}
disabled={disabled}
type='primary'>
提交
</Button>
</div>
);
/**
* 常用于审核用底部按钮
*/
case '2':
return (
<div style={styleList.btn_page}>
<Button
disabled={disabled}
style={{ ...styleList.btn_margin, ...styleList.btn, ...styleList.btn_no }}
onClick={btnOne}
loading={isSumbitLoading && isSumbitLoading}>
不通过
</Button>
<Button
disabled={disabled}
loading={isSumbitLoading && isSumbitLoading}
style={{ ...styleList.btn_margin, ...styleList.btn, ...styleList.btn_reject }}
onClick={btnTwo}>
驳回
</Button>
<Button
disabled={disabled}
style={{ ...styleList.btn }}
type='primary'
loading={isSumbitLoading && isSumbitLoading}
onClick={btnThree}>
通过
</Button>
</div>
);
/**
* 查询类底部按钮
*/
case '3':
return (
<div style={styleList.btn_page}>
<Button
disabled={disabled}
style={{ ...styleList.btn }}
type='primary'
onClick={btnOne}
loading={isSumbitLoading && isSumbitLoading}>
查询
</Button>
</div>
);
/**
* 模态框常用底部按钮
*/
case '4':
return (
<div style={styleList.btn_page}>
<Button
disabled={disabled}
style={{ ...styleList.btn_margin, ...styleList.btn }}
onClick={btnOne}
loading={isSumbitLoading && isSumbitLoading}>
取消
</Button>
<Button
disabled={disabled}
style={{ ...styleList.btn }}
type='primary'
onClick={btnTwo}
loading={isSumbitLoading && isSumbitLoading}>
确定
</Button>
</div>
);
/**
* 常用于审核底部按钮 驳回 通过
*/
case '5':
return (
<div style={styleList.btn_page}>
<Button
disabled={disabled}
style={{ ...styleList.btn_margin, ...styleList.btn, ...styleList.btn_reject }}
onClick={btnOne}
loading={isSumbitLoading && isSumbitLoading}>
驳回
</Button>
<Button
disabled={disabled}
style={{ ...styleList.btn }}
loading={isSumbitLoading && isSumbitLoading}
type='primary'
onClick={btnTwo}>
通过
</Button>
</div>
);
/**
* 常用于审核底部按钮 驳回 通过
*/
case '6':
return (
<div style={styleList.btn_page}>
<Button
disabled={disabled}
style={{ ...styleList.btn_margin, ...styleList.btn, ...styleList.btn_no }}
onClick={btnOne}
loading={isSumbitLoading && isSumbitLoading}>
拒绝
</Button>
<Button
disabled={disabled}
style={{ ...styleList.btn }}
loading={isSumbitLoading && isSumbitLoading}
type='primary'
onClick={btnTwo}>
通过
</Button>
</div>
);
/**
* 自定义按钮数量 样式 以及按钮内容
*/
case '7':
return (
<div style={styleList.btn_page}>
{btnList.length > 0
? btnList.map((item, index) => {
return (
<Button
disabled={disabled}
key={index}
type={Item.type}
style={item.style}
onClick={item.click}
loading={isSumbitLoading && isSumbitLoading}
style={item.margin ? { ...styles.btn_margin, ...styleList.btn } : { ...styleList.btn }}
>
{item.content}
</Button>
);
})
: ''}
</div>
);
/**
* 自定义单个组件按钮
*/
case '8':
return (
<Button
type={style === 'deafalut' ? 'primary' : ''}
className={style !== 'deafalut' ? style : ''}
style={{
minHeight: 32,
minWidth: 90,
marginLeft: style === 'deafalut' ? 16 : '',
}}
onClick={btnOne}
loading={isSumbitLoading && isSumbitLoading}>
{text}
</Button>
);
}
}
}
one_stop_public/AffairButton/AuditButton/pagesBtn/styleList.js 0 → 100644
浏览文件 @ 0b31747f
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;
one_stop_public/AffairButton/AuditButton/userTable/index.jsx
浏览文件 @ 0b31747f
......@@ -9,7 +9,7 @@ import { Input, Checkbox } from 'antd';
import Btn from '../pagesBtn';
import MyModal from '../Modal';
import styles from './styles.less';
import stylesList from './styles-in-line';
const { TextArea } = Input;
export default class userButton extends Component {
constructor() {
......@@ -171,13 +171,17 @@ export default class userButton extends Component {
title={isSecond ? '重新发起' : '审批'}
width={600}
handleCancel={this.handleCancelOk}>
<div className={styles.is_ok}>
<p className={styles.header}>
<span>{isSecond ? '当前状态' : '审批结果'}</span>
<div style={stylesList.is_ok}>
<p style={stylesList.header}>
<span style={{...stylesList.headerSpan, ...stylesList.headerSpan_1}}>
{isSecond ? '当前状态' : '审批结果'}
</span>
{this.getUser()}
</p>
<div className={styles.body}>
<span>{isSecond ? '发起说明' : '审批说明'}</span>
<div style={stylesList.body}>
<span style={{...stylesList.body_span, ...stylesList.body_span_1}}>
{isSecond ? '发起说明' : '审批说明'}
</span>
<span>
<TextArea
value={value}
......@@ -188,9 +192,11 @@ export default class userButton extends Component {
</span>
</div>
{Sign ? (
<div className={styles.body}>
<span>使用签名</span>
<span>
<div style={stylesList.body}>
<span style={{...stylesList.body_span, ...stylesList.body_span_1}}>
使用签名
</span>
<span style={{...stylesList.body_span}}>
<Checkbox defaultChecked={user.isUseBackImage} onChange={this.onChange1} />
</span>
</div>
......
one_stop_public/AffairButton/AuditButton/userTable/styles-in-line.js 0 → 100644
浏览文件 @ 0b31747f
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;
one_stop_public/filePreview/index.jsx
浏览文件 @ 0b31747f
......@@ -3,7 +3,7 @@
*/
import React, {Component} from 'react';
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 Modal = getModal();
......@@ -20,7 +20,7 @@ export default class index extends Component {
}
showModal = () => {
if(window?.parent?.iframeParentComponent){
if(isFromIframe()){
return false;
}
this.setState({
......@@ -81,7 +81,7 @@ export default class index extends Component {
okText='下载'
onCancel={this.showModal}
cancelText={ window?.parent?.iframeParentComponent ? '取消' : '预览'}>
cancelText={ isFromIframe() ? '取消' : '预览'}>
{isImg ? (
<img
ref={(node)=>{ this.imageDom = node;}}
......
one_stop_public/libs/PictureSignature/ShowItem.js
浏览文件 @ 0b31747f
import React from "react";
import {queryApiActionPath} from "@/webPublic/one_stop_public/utils/queryConfig";
import {getToken} from "@/webPublic/one_stop_public/utils/token";
import { isFromIframe } from '@/webPublic/one_stop_public/utils/utils';
const oneSetItemP = {
marginBottom: 0,
......@@ -51,7 +52,7 @@ 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;
let documentThis = isFromIframe() ? window?.parent?.document : document;
documentThis.onmousedown = function(evt){
startX = evt.offsetX;
startY = evt.offsetY;
......
one_stop_public/utils/utils.js
浏览文件 @ 0b31747f
......@@ -34,26 +34,18 @@ export const dispatch = (type, payload, callback) => {
};
export const isFromIframe = () => { // 判断是否来自iframe 嵌入页面
return !!window?.parent?.iframeParentComponent?.Modal;
}
export const getModal = () => {
if (window?.parent?.iframeParentComponent?.Modal) {
return window?.parent?.iframeParentComponent?.Modal;
} else {
return Modal;
}
return isFromIframe() ? window?.parent?.iframeParentComponent?.Modal : Modal;
};
export const getPopconfirm = () => {
if (window?.parent?.iframeParentComponent?.Popconfirm) {
return window?.parent?.iframeParentComponent?.Popconfirm;
} else {
return Popconfirm;
}
return isFromIframe() ? window?.parent?.iframeParentComponent?.Popconfirm : Popconfirm;
};
export const getMessage = () => {
if (window?.parent?.iframeParentComponent?.Popconfirm) {
return window?.parent?.iframeParentComponent?.message;
} else {
return message;
}
return isFromIframe() ? window?.parent?.iframeParentComponent?.message : message;
};
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论