Skip to content

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

增加申请组件

上级 19e28f73
显示空白字符变更
内嵌 并排
正在显示 包含 821 行增加 和 0 行删除
one_stop_public/ForZydApply/SponsorForm/AddModal.jsx 0 → 100644
浏览文件 @ d610672e
/**
* 徐立
* 2019年9月19日
* 事务发起提交多次弹框
*/
import React, {Component} from 'react'
import { getModal } from '@/webPublic/one_stop_public/utils/utils';
const Modal = getModal();
export default class AddModal extends Component {
constructor(props) {
super(props);
this.state = {
top: 0,
}
}
componentDidMount() {
setTimeout(() => {
let dom = document.getElementById('tabsTableFromIframe');
if (dom && dom.offsetHeight) {
let height = dom.offsetHeight;
if (height > 700) {
this.setState({
top: height - 700,
})
}
// console.log(height, 'Iframe页面的高度');
}
}, 1500);
}
render() {
let {visible, handleCancel, handleOk, loading} = this.props;
const { top } = this.state;
const style = {
};
if(top){
style.top = top;
}
return (
<Modal
title="提交申请"
visible={visible}
onOk={handleOk}
confirmLoading={loading}
onCancel={handleCancel}
width={400}
style={style}
>
<p style={{width: '100%', textAlign: 'center', fontSize: 14, color: '#666666'}}>确定要提交申请吗？</p>
</Modal>
)
}
}
one_stop_public/ForZydApply/SponsorForm/index.jsx 0 → 100644
浏览文件 @ d610672e
/**
* 徐立
* 2019年9月18日
* 发起流程表单申请列表
*/
import React, { Component } from 'react';
import styles from './styles.less';
import { Form, Button, Spin } from 'antd';
import AddModal from './AddModal';
import openToast from '@/webPublic/one_stop_public/DetailForAudit/components/Notification';
import { connect } from 'dva';
import ZdyTable from '@/webPublic/one_stop_public/Table';
import { preHandle } from '@/webPublic/one_stop_public/utils/myutils';
import router from 'umi/router';
import { isEmpty } from 'lodash';
import { callbackApplyData } from '@/webPublic/one_stop_public/models/callbackExamineProcess';
import { isJSON } from '@/webPublic/one_stop_public/tableCompon/Split_Index/staticInfo';
import { getModal } from '@/webPublic/one_stop_public/utils/utils';
import beforeApplySubmit from '@/webPublic/one_stop_public/utils/beforeApplySubmit';
const Modal = getModal();
// let dingshiqi = {};
// const ThisWindow = window;
class SponsorForm extends Component {
constructor(props) {
super(props);
this.setEditor = editor => {
this.editor = editor;
};
this.focusEditor = () => {
if (this.editor) {
this.editor.focus();
}
};
const { propsState } = props;
this.state = {
visible: false, // 确认弹框状态
img: '', // 上传图片路径
items: [], // 动态列表数据
left: 0,
top: 0,
max: 4,
width: 100,
init: {}, // 默认值
disabled: false, // 按钮控制状态
data: '', //当前用户数据
appId: propsState.appId,
postData: propsState.postData,
isLoading: propsState.isLoading,
draftId: propsState.draftId,
};
}
/**
* 发起请求拿取表单
*/
componentDidMount() {
// dingshiqi = ThisWindow.setTimeout(() => {
// this.giveMessageTop();
// }, 500);
}
// giveMessageTop = () => {
// if (this.props.history.location.state) {
// let { noNeedCaoGao } = this.props.history.location.state;
// if (noNeedCaoGao) {
// let dom = document.getElementById('tabsTableFromIframe');
// if (typeof dom.scrollHeight !== 'undefined') {
// ThisWindow.top.postMessage('iframeHeight-' + dom.scrollHeight, '*');
// }
// clearTimeout(dingshiqi);
// }
// }
// };
// 钟是志 iframe Modal样式修改
countHeight = () => {
let dom = document.getElementById('tabsTableFromIframe');
let top = 0;
if (dom && dom.offsetHeight) {
let height = dom.offsetHeight;
if (height > 700) {
top = height - 700;
}
}
return top;
};
/**
* 提交完成后用户提示
*/
info = () => {
let { isCg, noNeedCaoGao } = this.props.history.location.state;
let top = this.countHeight();
let style = {};
if (top) {
style = {
top: 10,
};
}
Modal.info({
title: '提交申请',
centered: true,
style,
content: (
<div>
<p
style={{
width: '100%',
textAlign: 'center',
fontSize: 14,
color: '#666666',
}}
>
已提交申请！请耐心等待审核。
</p>
</div>
),
okText: '确定',
onOk: () => {
return new Promise((resolve, reject) => {
this.setState({
disabled: true,
});
/***
* 需要加入跳转功能;
* 钟是志
* 在iframe中打开时 直接返回一个postMessage;
* */
if (noNeedCaoGao) {
// if (ThisWindow && ThisWindow.top) {
// ThisWindow.top.postMessage('returnList', '*');
// }
resolve(true);
return true;
}
router.goBack();
resolve(true);
return true;
});
},
});
};
/**
* 用户最终确认 发起提交
*/
userTrue = () => {
this.setState({
isUser: true,
});
};
/**
* 展示确认级弹框状态
*/
showModal = e => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
this.setState({
visible: true,
});
} else {
console.error(err);
}
});
};
/**
* 隐藏弹框
*/
handleCancel = e => {
this.setState({
visible: false,
});
};
/**
* 删除已添加人物
*/
// removePeo = (id) => {
// this.setState({
// people: this.state.people.filter(item => item.id !== id)
// })
// }
/**
* 下拉选择框事件
*/
onChange = value => {
console.log(`selected ${value}`);
};
/**
* 确认提交后触发提交申请，返回true时提示用户提交完成
*/
handleOk = e => {
this.handleSubmit();
// 关闭弹框
this.handleCancel();
};
/**
* 上传文件函数
*/
normFile = e => {
console.log('Upload event:', e);
if (Array.isArray(e)) {
return e;
}
return e && e.fileList;
};
/**
* 确认完用户状态发起请求
*/
handleSubmit = () => {
let { dispatch, radioValue } = this.props;
let isCloseFlowPath = sessionStorage.getItem('isCloseFlowPath')
? JSON.parse(sessionStorage.getItem('isCloseFlowPath'))
: false;
this.props.form.validateFields((err, values) => {
if (!err) {
if (isCloseFlowPath) {
} else if (!radioValue) {
openToast('success', '请选择紧急度');
return;
}
preHandle(values);
//如果是从流程仿真进入
if (this.props.onSub) {
dispatch({
type: 'affair/startProcessByService',
payload: {
content: JSON.stringify(values), // 表单数据
level: radioValue, // 流程紧急度 非必填 可以不传
appId: this.state.appId, // 这里应该由上级路由跳转传入 事务Id
id: !!this.state.draftId ? this.state.draftId : null, // 确认是否存在草稿表单Id存在即传入
startUser: this.props.startUser ? this.props.startUser : null,
},
callback: val => {
if (val) {
this.props.onSub(val);
} else {
openToast('error', '保存失败', '请尝试');
}
},
});
} else {
let params = {
content: JSON.stringify(values), // 表单数据
level: radioValue, // 流程紧急度 非必填 可以不传
appId: this.state.appId, // 这里应该由上级路由跳转传入 事务Id
id: !!this.state.draftId ? this.state.draftId : null, // 确认是否存在草稿表单Id存在即传入
userNowInfo:
(localStorage.getItem('user') &&
isJSON(localStorage.getItem('user')) &&
JSON.parse(localStorage.getItem('user'))) ||
{}, // 用户信息
};
params = callbackApplyData(params);
if (!params) {
return;
}
beforeApplySubmit(params).then(resParams => {
if (!resParams) {
return false;
}
dispatch({
type: 'affair/startProcess',
payload: resParams,
callback: val => {
if (val) {
this.info();
} else {
openToast('error', '保存失败', '请尝试');
}
},
});
});
}
} else {
openToast('error', '提交失败', '请填写必填项');
}
});
};
render() {
let { disabled, visible, postData, isLoading } = this.state;
let { init, noNeedApplyButton } = this.props;
let { isCg, noNeedCaoGao } = this.props.history.location.state;
let routerState = {
history: this.props?.history,
location: this.props?.location,
match: this.props?.match,
computedMatch: this.props?.computedMatch,
route: this.props?.route,
};
return (
<>
{isLoading ? (
<>
<div className={styles.form} id="add_form">
{isEmpty(postData) === false ? (
<ZdyTable
isCg={isCg}
get="web"
postData={postData}
form={this.props.form}
routerState={routerState}
init={init}
/>
) : (
''
)}
{isEmpty(postData) === false && !postData?.isUpdate && !noNeedApplyButton ? (
<Form.Item
wrapperCol={{
span: 12,
offset: 6,
}}
>
<Button
disabled={disabled}
type="primary"
loading={this.props.loading}
onClick={this.showModal}
style={{ marginLeft: 16 }}
>
提交
</Button>
</Form.Item>
) : (
''
)}
{/* <DataVBank /> */}
{/* 提交申请的弹窗 */}
<AddModal
visible={visible}
handleOk={this.handleOk}
userTrue={this.userTrue}
loading={this.props.loading}
handleCancel={this.handleCancel}
/>
</div>
</>
) : (
<div
style={{
width: '100%',
height: 200,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Spin size="large" />
</div>
)}
</>
);
}
}
@connect(({ affair, loading }) => ({
affair,
loading: loading.models.affair,
}))
export default class SponsorFormDetail extends Component {
constructor(props) {
super(props);
this.state = {
postData: null,
};
}
componentDidMount() {
let { id, dispatch, history } = this.props;
let { isCg, draftId } = history.location.state;
dispatch({
type: 'modileHome/getDetail',
payload: {
id: id,
userCode: this.props.startUser ? this.props.startUser : null,
},
callback: val => {
if (val) {
this.setState(
{
appId: val.id,
isLoading: true,
postData: val,
draftId: !!draftId ? draftId : '',
},
() => {},
);
}
},
});
}
render() {
const { postData } = this.state;
if (!postData) {
return null;
} else {
const SponsorFormNew = Form.create(
window.zdyTableTemplateWillMountProps?.formCreateOptions || undefined,
)(SponsorForm);
return <SponsorFormNew {...this.props} propsState={this.state} />;
}
}
}
one_stop_public/ForZydApply/SponsorForm/styles.less 0 → 100644
浏览文件 @ d610672e
/*表单样式*/
.form{
padding: 60px 0;
width: 100%;
padding-top: 0px;
text-align: center;
.form_input{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
.form_span{
float: right;
margin-bottom: 24px;
margin-right: 15px;
color: #666666;
font-size: 14px;
}
.icon_div{
margin-left: -117px;
}
}
.form_people{
width: 100%;
display: flex;
justify-content: center;
span{
float: right;
margin-bottom: 24px;
margin-right: 19px;
color: #666666;
font-size: 14px;
}
.form_people_div{
margin-left: -10px;
>div{
margin-top: -12px;
width: 380px;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.add_people_add_img{
margin-top: 12px;
width: 20%;
height: 68px;
text-align: center;
img{
width: 36px;
height: 36px;
}
}
}
}
}
/*添加任务list组件样式*/
.list_div{
height: 89px;
width: 25%;
margin-top: 12px;
display: flex;
text-align: center;
>div:nth-child(1){
>div{
width: 100%;
height: 36px;
position: relative;
img{
width: 36px;
height: 100%;
}
.img_remove{
width: 12px;
height: 12px;
position: absolute;
right: 12px;
top:0px;
}
}
>p:nth-child(2){
font-size: 12px;
color: #333333;
font-weight: 400;
}
>p:nth-child(3){
font-size: 11px;
color: #cccccc;
font-weight: 400;
}
}
>div:nth-child(2){
margin:0 4px;
flex:1;
color:#cccccc;
}
}
.body_hea{
h3{
font-weight: bold;
color: #333333;
font-size: 16px;
margin-bottom: 28px;
text-align: left;
margin-left: 24px;
}
.hea_title{
font-size: 14px;
color: #666666;
margin-left: 41px;
width: 20%;
text-align: right;
display: inline-block;
}
.hew_content{
color: #333333;
font-size: 14px;
margin-left: 23px;
}
/*事项理由样式*/
.title{
text-align: right;
font-size: 14px;
color: #666666;
}
.body{
padding-left:24px;
color: #333333;
font-size: 14px;
}
/*附件样式*/
.file{
margin-bottom: 16px;
img{
width: 14px;
height: 16px;
margin-right: 9px;
margin-top: -5px;
}
}
.row{
margin-bottom: 28px;
}
}
.header{
width: 100%;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #333333;
padding: 32px 0 32px 0;
}
\ No newline at end of file
one_stop_public/ForZydApply/index.js 0 → 100644
浏览文件 @ d610672e
/**
钟是志
学工里面的流程申请页面不再使用iframe
2022年5月26日 13:41:08
* */
import React from 'react';
import classNames from 'classnames/bind';
import { connect } from 'dva';
import SponsorForm from './SponsorForm/index';
import { isJSON } from '@/webPublic/one_stop_public/copy';
import { getUrlInfo } from '@/webPublic/one_stop_public/DetailForAudit/utils';
import { setToken } from '@/webPublic/one_stop_public/utils/token';
const names = classNames.bind(require('./style.less'));
/**
* props:{
* id, // 流程id
init, // 表单的初始化数据 用于发起时传入默认值 需要转码 详见 constructor
noNeedApply, // 不需要申请提交按钮
noNeedTitle, // 不需要标题
* }
* */
@connect(({
affair,
modileHome,
}) => ({
affair,
modileHome,
}))
export default class IframeForApply extends React.Component {
constructor(props) {
super(props);
const { token } = getUrlInfo();
if (token) {
setToken(token);
}
const {
id,
init,
noNeedApply,
noNeedTitle,
} = props;
this.state = {
id, // 传入id
init: init && isJSON(init) ? JSON.parse(decodeURIComponent(init)) : undefined,
value: '', // 紧急度选择
btnList: [], // 紧急度按钮返回数据
noNeedApply,
noNeedTitle,
};
this.nodeChild = null;
}
componentDidMount() {
this.props.dispatch({
type: 'urge/GetMyBtn',
payload: {},
callback: val => {
this.setState({
btnList: val,
value: val[val.length - 1].id,
});
},
});
// document.getElementById('root').style.backgroundColor = '#fff';
}
onChange = e => {
this.setState({
value: e.target.value,
});
};
setRadio = value => {
this.setState({
value,
});
};
render() {
const {
id,
value,
init,
noNeedApply,
noNeedTitle,
} = this.state;
const { modileHome } = this.props;
return (
<div
className={names('warp IframeDiy')}
id='tabsTableFromIframe'
style={{
overflowY: 'auto',
height: '100%',
}}
>
{!noNeedTitle && (
<h1 style={{
fontWeight: 'bold',
textAlign: 'center',
}}>
{modileHome?.affair?.name ? modileHome?.affair.name : modileHome?.affair?.appName}
</h1>
)}
<div className={names('content-container')}>
<div style={{ padding: '0 24px 24px' }}>
<div style={{ minHeight: 569 }}>
<SponsorForm
id={id}
setRadio={this.setRadio}
radioValue={value}
noNeedApplyButton={noNeedApply}
init={init} // 表单的初始化数据 用于发起时传入默认值
history={{
...this.props.history,
location: {
...this.props.history.location,
state: {
id,
noNeedCaoGao: true,
app: {},
},
},
}}
/>
</div>
</div>
</div>
</div>
);
}
}
one_stop_public/ForZydApply/style.less 0 → 100644
浏览文件 @ d610672e
.warp {
padding: 0 24px 60px;
.breadcrumb-row {
padding: 16px 0;
& > div {
display: inline;
}
}
.content-container {
width: 1200px;
margin: 0 auto;
background: #ffffff;
.top-border{
height: 4px;
background: @primary-color;
}
h1{
text-align: center;
font-size: 20px;
line-height: 108px;
}
}
}
.top-radio-div{
position: relative;
.radio-check{
position: absolute;
left:20px;
top:76%;
}
}
.content {
height: 400px;
margin: 130px 24px 24px 24px;
div{
text-align: center;
img{
margin: 0 30px 0 0;
}
}
>.fostSizeP{
text-align: center;
width: 100%;
font-size: 16px;
font-weight: bold;
color: #666666;
}
}
.IframeDiy{
:global(.antd-pro-pages-portal-pages-sponsor-style-content-container) {
width: 100% !important;
}
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论