12 changed files with 538 additions and 23 deletions
@ -0,0 +1,198 @@ |
|||
'use strict'; |
|||
|
|||
import React from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Modal, Spin, Notification, Row } from '@douyinfe/semi-ui'; |
|||
import { RouteTable } from '../../utils/webapi'; |
|||
import { RouteRequest } from '@peace/utils'; |
|||
import { useState } from 'react'; |
|||
import { useEffect } from 'react'; |
|||
import { IconClose } from '@douyinfe/semi-icons'; |
|||
// import { delDraft } from '../../sections/myform/actions/myform';
|
|||
import './index.less' |
|||
|
|||
const { confirm } = Modal; |
|||
|
|||
const WorkFlowModal = (props) => { |
|||
const { successCallBack = () => { }, title, visible, clientHeight, postData, processId, user, dispatch } = props; |
|||
const [loading, setLoading] = useState(true); |
|||
const [ifShowMessage, setIfShowMessage] = useState(true); |
|||
const [webUrl, setWebUrl] = useState(null); |
|||
const [customVisible, setCustomVisible] = useState(false); |
|||
const [draftId, setDraftId] = useState(); |
|||
const iframeRef = React.createRef(); |
|||
|
|||
const handelCancel = () => { |
|||
if (draftId) { |
|||
setCustomVisible(false); |
|||
} else { |
|||
const { onCancel } = props; |
|||
onCancel && onCancel(); |
|||
setLoading(false); |
|||
} |
|||
} |
|||
|
|||
const showConfirm = () => { |
|||
if (draftId) { |
|||
setCustomVisible(true); |
|||
} else { |
|||
confirm({ |
|||
title: '确定关闭此表单吗?', |
|||
onOk () { |
|||
handelCancel() |
|||
}, |
|||
onCancel () { }, |
|||
}); |
|||
} |
|||
} |
|||
|
|||
const handelApprovalCenter = (activeKey) => { |
|||
RouteRequest.get(RouteTable.getWebUrl + `?sys=emisWebUrl`).then(res => { |
|||
if (res.url) { |
|||
window.open(res.url + "/approval/center?activeKey=" + activeKey); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
const handelOk = () => { |
|||
const { onCancel } = props; |
|||
onCancel && onCancel(); |
|||
setLoading(false); |
|||
setCustomVisible(false); |
|||
setDraftId(null); |
|||
} |
|||
|
|||
const handelDeny = () => { |
|||
// dispatch(delDraft(draftId)).then(res => {
|
|||
// if (res.success) {
|
|||
// Notification.success('删除草稿成功');
|
|||
// const { onCancel } = props;
|
|||
// onCancel && onCancel();
|
|||
// setLoading(false);
|
|||
// setCustomVisible(false);
|
|||
// setDraftId(null);
|
|||
// } else {
|
|||
// Notification.error('删除草稿失败，请联系管理员');
|
|||
// }
|
|||
// })
|
|||
} |
|||
|
|||
const cancel = () => { |
|||
setCustomVisible(false); |
|||
} |
|||
|
|||
useEffect(() => { |
|||
window.receiveMessageFromIndex = function (event) { |
|||
if (event && event.data && typeof (event.data) == 'string') { |
|||
let data = JSON.parse(event.data); |
|||
const { type, isSaveDraft, setIntervalSave, draftId, msg } = data; |
|||
if (msg) { |
|||
Notification.success(msg) |
|||
} |
|||
setDraftId(draftId); |
|||
if (type == 'saveSuccess' && successCallBack) { |
|||
if (ifShowMessage) { |
|||
if (isSaveDraft) { |
|||
if (setIntervalSave) { |
|||
Notification.success('60秒，表单暂存草稿成功'); |
|||
} else { |
|||
Notification.success(<span>保存草稿成功，可在<a onClick={() => handelApprovalCenter("save")}>【审批中心/保存待发】</a>查看详情</span>, 10); |
|||
} |
|||
} else { |
|||
Notification.success('提交成功，可在【审批中心/由我发起】查看详情'); |
|||
successCallBack(); |
|||
} |
|||
//防止提示多次
|
|||
setIfShowMessage(false); |
|||
} |
|||
// successCallBack(); 阻止页面关闭
|
|||
setLoading(false); |
|||
} |
|||
} |
|||
} |
|||
//监听message事件
|
|||
window.addEventListener('message', receiveMessageFromIndex, false); |
|||
//获取企业统一认证管理平台web的URL
|
|||
if (!webUrl) { |
|||
RouteRequest.get(RouteTable.getEmisWebUrl).then(res => { |
|||
if (res.url) { |
|||
setWebUrl(res.url); |
|||
} |
|||
}); |
|||
} |
|||
}, []) |
|||
|
|||
return ( |
|||
<div> |
|||
<Modal |
|||
fullScreen |
|||
visible={visible} |
|||
width={'100%'} |
|||
// style={{ top: 0, left: 0, padding: 0, maxWidth: '100%' }}
|
|||
// bodyStyle={{ paddingLeft: 32, paddingRight: 32, margin: 0, backgroundColor: '#FAFAFA', height: '100%', overflowY: 'auto' }}
|
|||
title={''} |
|||
closable={false} |
|||
hasCancel={false} |
|||
footer={null} |
|||
wrapClassName='process_modal_wrap' |
|||
onCancel={showConfirm} |
|||
destroyOnClose |
|||
> |
|||
<Row> |
|||
<div className='workflow-body'> |
|||
<div className='workflow-body-header'> |
|||
<img src='/assets/images/fs-logo.png' /> |
|||
<span className='workflow-body-header_title'> |
|||
<span className='workflow-body-header_title_shu'>|</span> |
|||
<span className='workflow-body-header_title_zi'>让世间万物拥有感知，服务人类社会于美好</span> |
|||
</span> |
|||
<IconClose className="workflow-body-header_closeIcon" onClick={showConfirm} /> |
|||
</div> |
|||
<div className='workflow-body-form'> |
|||
<Spin |
|||
spinning={loading} |
|||
> |
|||
{webUrl && processId ? <iframe |
|||
id='workflowFrame' |
|||
onLoad={() => { |
|||
let frameWin = document.getElementById('workflowFrame'); |
|||
frameWin.contentWindow.postMessage(JSON.stringify(postData), '*'); |
|||
setLoading(false); |
|||
}} |
|||
allowTransparency="true" |
|||
ref={iframeRef} |
|||
src={`${webUrl}/process/${processId}/apply?token=${user.token}`} |
|||
width={'100%'} |
|||
style={{ height: '100vh' }} |
|||
frameBorder="0" |
|||
></iframe> : ''} |
|||
</Spin> |
|||
</div> |
|||
</div> |
|||
{ |
|||
customVisible ? <div className='modalBox'> |
|||
<div className='modal'> |
|||
<p className='content'>此表单已保存为草稿，是否需要保留</p> |
|||
<ul className='btn'> |
|||
<li className='confirm' onClick={() => handelOk()}>是</li> |
|||
<li className='deny' onClick={() => handelDeny()}>否</li> |
|||
<li className='cancel' onClick={() => cancel()}>取消</li> |
|||
</ul> |
|||
</div> |
|||
</div> : '' |
|||
} |
|||
</Row> |
|||
</Modal > |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global } = state; |
|||
return { |
|||
user: auth.user, |
|||
clientHeight: global.clientHeight, |
|||
} |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(WorkFlowModal); |
|||
@ -0,0 +1,123 @@ |
|||
.process_modal_wrap { |
|||
overflow: hidden !important; |
|||
} |
|||
|
|||
.workflow-body { |
|||
height : 100vh; |
|||
width : 100%; |
|||
position: relative; |
|||
|
|||
&-header { |
|||
width : calc(100vw - 71px); |
|||
height : 80px; |
|||
background: linear-gradient(90deg, #1890ff 0%, #1271c9 100%); |
|||
position : fixed; |
|||
top : 0px; |
|||
left : 32px; |
|||
z-index : 1; |
|||
|
|||
img { |
|||
// padding: 12px 0 0 18px; |
|||
position: relative; |
|||
// top: 18%; |
|||
left : 18px; |
|||
top : 8px; |
|||
} |
|||
|
|||
&_title { |
|||
span { |
|||
margin-top : 32px; |
|||
position : relative; |
|||
top : 10px; |
|||
left : 12px; |
|||
padding-left: 20px; |
|||
} |
|||
|
|||
&_shu { |
|||
font-size: 25px; |
|||
color : rgba(255, 255, 255, 0.5); |
|||
} |
|||
|
|||
&_zi { |
|||
font-size : 16px; |
|||
color : #fff; |
|||
line-height: 60px; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
|
|||
&_closeIcon { |
|||
position : absolute; |
|||
top : 0px; |
|||
right : 0px; |
|||
font-size: 37px; |
|||
color : #999999 !important; |
|||
} |
|||
} |
|||
|
|||
&-form { |
|||
position: fixed; |
|||
top : 0; |
|||
bottom : 0; |
|||
left : 0; |
|||
right : 0; |
|||
height : 100vh; |
|||
} |
|||
} |
|||
|
|||
.modalBox { |
|||
position : fixed; |
|||
width : 96.3%; |
|||
height : 100%; |
|||
background: rgba(0, 0, 0, 0.3); |
|||
|
|||
.modal { |
|||
background : #fff; |
|||
position : absolute; |
|||
top : 20%; |
|||
left : 50%; |
|||
margin-left : -112px; |
|||
padding : 10px 20px; |
|||
border : 1px solid #ddd; |
|||
border-radius: 2px; |
|||
width : 370px; |
|||
|
|||
.content { |
|||
margin-top : 20px; |
|||
font-size : 18px; |
|||
color : #000; |
|||
} |
|||
|
|||
.btn { |
|||
display : flex; |
|||
justify-content: flex-end; |
|||
width : 100%; |
|||
font-size : 16px; |
|||
|
|||
.confirm { |
|||
padding : 0 10px; |
|||
color : #fff; |
|||
border-radius: 3px; |
|||
background : #1890FF; |
|||
cursor : pointer; |
|||
} |
|||
|
|||
.deny { |
|||
padding : 0 10px; |
|||
color : #1890FF; |
|||
border-radius: 3px; |
|||
border : 1px solid #1890FF; |
|||
margin : 0 10px; |
|||
cursor : pointer; |
|||
} |
|||
|
|||
.cancel { |
|||
padding : 0 10px; |
|||
color : #1890FF; |
|||
border-radius: 3px; |
|||
border : 1px solid #1890FF; |
|||
cursor : pointer; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,110 @@ |
|||
'use strict'; |
|||
|
|||
import React from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
// import { Modal, Spin, message, Row } from 'antd';
|
|||
import { RouteTable } from '../../utils/webapi'; |
|||
import { RouteRequest } from '@peace/utils'; |
|||
import { useState } from 'react'; |
|||
import { useEffect } from 'react'; |
|||
import { CloseCircleFilled } from '@ant-design/icons'; |
|||
import './index.less' |
|||
|
|||
const { confirm } = Modal; |
|||
|
|||
const WorkFlowViewModal = (props) => { |
|||
// const { successCallBack, title, visible, clientHeight, postData, processId, user } = props;
|
|||
// const [loading, setLoading] = useState(true);
|
|||
// const [ifShowMessage, setIfShowMessage] = useState(true);
|
|||
// const [webUrl, setWebUrl] = useState(null);
|
|||
// const iframeRef = React.createRef();
|
|||
|
|||
// const handelCancel = () => {
|
|||
// const { onCancel } = props;
|
|||
// onCancel && onCancel();
|
|||
// setLoading(false);
|
|||
// }
|
|||
|
|||
// const showConfirm = () => {
|
|||
// confirm({
|
|||
// title: '确定关闭此表单吗?',
|
|||
// onOk() {
|
|||
// handelCancel()
|
|||
// },
|
|||
// onCancel() { },
|
|||
// });
|
|||
// }
|
|||
|
|||
// useEffect(() => {
|
|||
// if (!webUrl) {
|
|||
// RouteRequest.get(RouteTable.getEmisWebUrl).then(res => {
|
|||
// if (res.url) {
|
|||
// setWebUrl(res.url);
|
|||
// }
|
|||
// });
|
|||
// }
|
|||
// }, [])
|
|||
const bodyStyle = { paddingLeft: 32, paddingRight: 32, margin: 0, backgroundColor: '#FAFAFA', height: '100%', overflowY: 'auto' } |
|||
return ( |
|||
<div> |
|||
{/* <Modal |
|||
visible={visible} |
|||
width={'100%'} |
|||
style={{ top: 0, left: 0, padding: 0, maxWidth: '100%' }} |
|||
bodyStyle={bodyStyle} |
|||
title={''} |
|||
closable={false} |
|||
footer={null} |
|||
wrapClassName='process_modal_wrap' |
|||
onCancel={showConfirm} |
|||
destroyOnClose |
|||
> |
|||
<Row> |
|||
<div className='workflow-body'> |
|||
<div id="processHeader" className='workflow-body-header'> |
|||
<img src='/assets/images/fs-logo.png' /> |
|||
<span className='workflow-body-header_title'> |
|||
<span className='workflow-body-header_title_shu'>|</span> |
|||
<span className='workflow-body-header_title_zi'>让世间万物拥有感知，服务人类社会于美好</span> |
|||
</span> |
|||
<CloseCircleFilled className="workflow-body-header_closeIcon" onClick={showConfirm} /> |
|||
</div> |
|||
<div className='workflow-body-form'> |
|||
<Spin |
|||
spinning={loading} |
|||
> |
|||
{webUrl && processId ? <iframe |
|||
id='workflowViewFrame' |
|||
name='workflowViewFrame' |
|||
onLoad={() => { |
|||
let frameWin = document.getElementById('workflowViewFrame'); |
|||
frameWin.contentWindow.postMessage(JSON.stringify(postData), '*'); |
|||
setLoading(false); |
|||
}} |
|||
allowTransparency="true" |
|||
ref={iframeRef} |
|||
src={`${webUrl}/process/my-apply?token=${user.token}&processInstanceId=${processId}&type=oaleader`} |
|||
width={'100%'} |
|||
style={{ height: '100vh' }} |
|||
frameBorder="0" |
|||
></iframe> : ''} |
|||
</Spin> |
|||
</div> |
|||
</div> |
|||
</Row> |
|||
|
|||
</Modal > */} |
|||
</div> |
|||
|
|||
) |
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { auth, global } = state; |
|||
return { |
|||
user: auth.user, |
|||
clientHeight: global.clientHeight, |
|||
} |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(WorkFlowViewModal); |
|||
@ -1,2 +1,7 @@ |
|||
'use strict'; |
|||
|
|||
import * as jobOrder from './jobOrder' |
|||
|
|||
export default { |
|||
...jobOrder |
|||
} |
|||
@ -1,24 +1,73 @@ |
|||
import React, { useEffect } from 'react'; |
|||
import React, { useEffect, useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import moment from 'moment'; |
|||
import { WorkflowModal } from "$components" |
|||
import { Card, Typography, Space, Button } from '@douyinfe/semi-ui'; |
|||
import { IconArticle } from '@douyinfe/semi-icons'; |
|||
import '../style.less' |
|||
|
|||
const { Meta } = Card; |
|||
|
|||
const JobOrder = (props) => { |
|||
const { dispatch, actions, user, loading, socket } = props |
|||
const { dispatch, actions, user, workflowProcess } = props |
|||
const { workOrder } = actions |
|||
const [workflowModalVisible, setWorkflowModalVisible] = useState(false) |
|||
const [launchProcessId, setLaunchProcessId] = useState(null) |
|||
|
|||
useEffect(() => { |
|||
|
|||
dispatch(workOrder.getEnabledWorkflowProcess()) |
|||
}, []) |
|||
|
|||
return ( |
|||
<div className='work-order-container' style={{ |
|||
display: 'grid', gridTemplateColumns: `repeat(auto-fit, minmax(340px, 1fr))`, gridAutoRows: `minmax(0, auto)`, gridGap: 12, |
|||
}}> |
|||
{ |
|||
workflowProcess.map(p => { |
|||
return ( |
|||
<Card |
|||
className='work-order-card' |
|||
style={{ gridColumn: `span 1`, cursor: 'pointer' }} |
|||
footerLine={true} |
|||
footerStyle={{ display: 'flex', justifyContent: 'flex-end' }} |
|||
footer={ |
|||
`创建时间：${moment(p.createTime || p.updateTime).format('YYYY-MM-DD HH:mm:ss')}` |
|||
} |
|||
onClick={() => { |
|||
setLaunchProcessId(p.id) |
|||
setWorkflowModalVisible(true) |
|||
}} |
|||
> |
|||
<div> |
|||
|
|||
<Meta |
|||
title={p.name} |
|||
// description="全面、易用、优质" |
|||
avatar={ |
|||
<IconArticle style={{ fontSize: 42 }} /> |
|||
} |
|||
/> |
|||
</div> |
|||
</Card> |
|||
) |
|||
}) |
|||
} |
|||
<WorkflowModal |
|||
visible={workflowModalVisible} |
|||
title={''} |
|||
processId={launchProcessId} |
|||
onCancel={() => { setWorkflowModalVisible(false) }} |
|||
successCallBack={() => { setWorkflowModalVisible(false) }} |
|||
/> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global, members, webSocket } = state; |
|||
const { auth, global, workflowProcess } = state; |
|||
return { |
|||
// user: auth.user, |
|||
user: auth.user, |
|||
actions: global.actions, |
|||
workflowProcess: workflowProcess.data || [] |
|||
}; |
|||
} |
|||
|
|||
|
|||
@ -1,7 +1,6 @@ |
|||
#example { |
|||
box-shadow: 3px 3px 2px black; |
|||
} |
|||
|
|||
#example:hover { |
|||
color: yellowgreen; |
|||
.work-order-container { |
|||
.work-order-card:hover { |
|||
// 阴影 |
|||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue