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

28146 审核时如果有必填项 审核框位置往下移动不要挡住必填项 【或者给一个弹窗提示 请先填写必填项】

上级 2926881d
...@@ -10,210 +10,251 @@ import Btn from '../pagesBtn'; ...@@ -10,210 +10,251 @@ 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'; import stylesList from './styles-in-line';
import { checkNeedFormValidateFieldsAndScroll } from '@/webPublic/one_stop_public/DetailForAudit/splitDetailSplit';
const { TextArea } = Input; const { TextArea } = Input;
export default class userButton extends Component { export default class userButton extends Component {
constructor() { constructor() {
super(); super();
this.state = { this.state = {
// 路由位置 // 路由位置
visibleOk: false, // 通过模态框状态 visibleOk: false, // 通过模态框状态
value: '', // 文本域输入 value: '', // 文本域输入
user: '', // 用于保存用户点击了对应按钮 user: '', // 用于保存用户点击了对应按钮
returnText: '', returnText: '',
key: '', // 后端返回按钮规格 key: '', // 后端返回按钮规格
btnValue: '', // 后端返回按钮状态 btnValue: '', // 后端返回按钮状态
checked: '', // 是否使用签名 checked: '', // 是否使用签名
}; };
} }
/** /**
* 通过按钮点击事件 * 通过按钮点击事件
*/ */
showModal = (str, key, value) => { showModal = (str, key, value) => {
switch (str) { switch (str) {
case '通过': case '通过':
this.setState({ this.setState({
returnText: '已通过该申请!', returnText: '已通过该申请!',
}); });
break; break;
case '驳回': case '驳回':
this.setState({ this.setState({
returnText: '已驳回该申请!', returnText: '已驳回该申请!',
}); });
break; break;
case '不通过': case '不通过':
this.setState({ this.setState({
returnText: '该申请未通过!', returnText: '该申请未通过!',
}); });
break; break;
case '提交': case '提交':
this.setState({ this.setState({
returnText: '该申请已提交!', returnText: '该申请已提交!',
}); });
} }
this.setState({ this.setState({
user: str, user: str,
visibleOk: true, visibleOk: true,
key, key,
btnValue: value, btnValue: value,
}); });
}; };
/** /**
* 审核状态,返回对应样式html * 审核状态,返回对应样式html
*/ */
getUser = () => { getUser = () => {
const { user } = this.state; const { user } = this.state;
switch (user) { switch (user) {
case '通过': case '通过':
return <span style={{ color: '#31C93F' }}>{user}</span>; return <span style={{ color: '#31C93F' }}>{user}</span>;
case '驳回': case '驳回':
return <span style={{ color: '#FF9B00' }}>{user}</span>; return <span style={{ color: '#FF9B00' }}>{user}</span>;
case '拒绝': case '拒绝':
return <span style={{ color: '#FF5350' }}>{user}</span>; return <span style={{ color: '#FF5350' }}>{user}</span>;
case '不通过': case '不通过':
return <span style={{ color: '#FF5350' }}>{user}</span>; return <span style={{ color: '#FF5350' }}>{user}</span>;
default: default:
return <span>{user}</span>; return <span>{user}</span>;
} }
}; };
/** /**
* 通过按钮模态框取消状态 * 通过按钮模态框取消状态
*/ */
handleCancelOk = () => { handleCancelOk = () => {
this.setState({ this.setState({
visibleOk: false, visibleOk: false,
}); });
}; };
/** /**
* 根据不同值,返回对应样式 * 根据不同值,返回对应样式
*/ */
getStyle = (key, value) => { getStyle = (key, value) => {
if (key === 'examine') { if (key === 'examine') {
switch (value) { switch (value) {
case 1: case 1:
return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(' '); return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(' ');
case 2: case 2:
return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' '); return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ');
case 0: case 0:
return 'deafalut'; return 'deafalut';
case '1': case '1':
return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(' '); return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(' ');
case '2': case '2':
return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' '); return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ');
case '0': case '0':
return 'deafalut'; return 'deafalut';
} }
} else { } else {
return 'deafalut'; return 'deafalut';
} }
}; };
/** /**
* 用于确认用户输入 * 用于确认用户输入
*/ */
postUser = () => { postUser = () => {
const { key, btnValue, value, checked } = this.state; const {
this.props.affairOk(key, btnValue, value, checked); key,
}; btnValue,
value,
checked
} = this.state;
this.props.affairOk(key, btnValue, value, checked);
};
/** /**
* 文本域同步 * 文本域同步
*/ */
onChange = ({ target: { value } }) => { onChange = ({ target: { value } }) => {
this.setState({ value }); this.setState({ value });
}; };
/** /**
* 判断是否使用自己的签名 * 判断是否使用自己的签名
*/ */
onChange1 = (e) => { onChange1 = (e) => {
this.setState({ checked: e.target.checked }); this.setState({ checked: e.target.checked });
}; };
checkAndShowModal(item = {}) {
const {
form,
btns
} = this.props;
const showM = () => {
this.showModal(item.name, item.key, item.value);
return true;
};
if (form && form.validateFieldsAndScroll) {
let checkSumbitInfo = checkNeedFormValidateFieldsAndScroll({ // 检查是否必须填写表单值
btns,
btnValue: item.value,
});
if (!checkSumbitInfo) { // 如果不需要校验 直接提交数据
return showM();
} else {
form.validateFieldsAndScroll((err, values) => {
if (!err) {
return showM();
}
});
}
} else {
return showM();
}
}
render() {
const {
visibleOk,
value,
user
} = this.state;
const {
btns,
isSecond,
isSumbitLoading,
addition, // 附件按钮 只负责显示
Sign, // 判断是否有签名
form,
} = this.props;
render() { return (
const { visibleOk, value, user } = this.state; <>
const { <div className={styles.btn_page} id={'form_btns_list'}>
btns, {btns.length > 0
isSecond, ? btns.map((item, index) => {
isSumbitLoading, const className = this.getStyle(item.key, item.value);
addition, // 附件按钮 只负责显示 return (
Sign, // 判断是否有签名 <Btn
} = this.props; get="8"
return ( key={index}
<> btnOne={this.checkAndShowModal.bind(this, item)}
<div className={styles.btn_page} id={'form_btns_list'}> text={item.name}
{btns.length > 0 style={className}
? btns.map((item, index) => { />
const className = this.getStyle(item.key, item.value); );
return ( })
<Btn : ''}
get="8" {addition && !isSumbitLoading && addition}
key={index} </div>
btnOne={() => { {/* <Btn get='2' btnOne={()=>{this.showModal('不同意')}} btnTwo={()=>{this.showModal('驳回')}} btnThree={()=>{this.showModal('通过')}}/> */}
this.showModal(item.name, item.key, item.value); <MyModal
}} visible={visibleOk}
text={item.name} title={isSecond ? '重新发起' : '审批'}
style={className} width={600}
/> handleCancel={this.handleCancelOk}>
); <div style={stylesList.is_ok}>
}) <p style={stylesList.header}>
: ''} <span style={{ ...stylesList.headerSpan, ...stylesList.headerSpan_1 }}>
{addition && !isSumbitLoading && addition}
</div>
{/* <Btn get='2' btnOne={()=>{this.showModal('不同意')}} btnTwo={()=>{this.showModal('驳回')}} btnThree={()=>{this.showModal('通过')}}/> */}
<MyModal
visible={visibleOk}
title={isSecond ? '重新发起' : '审批'}
width={600}
handleCancel={this.handleCancelOk}>
<div style={stylesList.is_ok}>
<p style={stylesList.header}>
<span style={{...stylesList.headerSpan, ...stylesList.headerSpan_1}}>
{isSecond ? '当前状态' : '审批结果'} {isSecond ? '当前状态' : '审批结果'}
</span> </span>
{this.getUser()} {this.getUser()}
</p> </p>
<div style={stylesList.body}> <div style={stylesList.body}>
<span style={{...stylesList.body_span, ...stylesList.body_span_1}}> <span style={{ ...stylesList.body_span, ...stylesList.body_span_1 }}>
{isSecond ? '发起说明' : '审批说明'} {isSecond ? '发起说明' : '审批说明'}
</span> </span>
<span id={'textarea_shen_pi_li_you'}> <span id={'textarea_shen_pi_li_you'}>
<TextArea <TextArea
value={value} value={value}
onChange={this.onChange} onChange={this.onChange}
placeholder={isSecond ? '请输入发起说明' : '请输入审批理由'} placeholder={isSecond ? '请输入发起说明' : '请输入审批理由'}
style={{ width: 380, height: 120, color: '#7F8B95' }} style={{
/> width: 380,
height: 120,
color: '#7F8B95'
}}
/>
</span> </span>
</div> </div>
{Sign ? ( {Sign ? (
<div style={stylesList.body}> <div style={stylesList.body}>
<span style={{...stylesList.body_span, ...stylesList.body_span_1}}> <span style={{ ...stylesList.body_span, ...stylesList.body_span_1 }}>
使用签名 使用签名
</span> </span>
<span style={{...stylesList.body_span}}> <span style={{ ...stylesList.body_span }}>
<Checkbox defaultChecked={user.isUseBackImage} onChange={this.onChange1} /> <Checkbox defaultChecked={user.isUseBackImage} onChange={this.onChange1}/>
</span> </span>
</div> </div>
) : ( ) : (
'' ''
)} )}
<div style={{ marginBottom: 20 }}> <div style={{ marginBottom: 20 }}>
<Btn <Btn
get="4" get="4"
isSumbitLoading={isSumbitLoading || false} isSumbitLoading={isSumbitLoading || false}
btnOne={this.handleCancelOk} btnOne={this.handleCancelOk}
btnTwo={this.postUser} btnTwo={this.postUser}
/> />
</div> </div>
</div> </div>
</MyModal> </MyModal>
</> </>
); );
} }
} }
...@@ -315,12 +315,12 @@ export default class DetailSplit extends Component { ...@@ -315,12 +315,12 @@ export default class DetailSplit extends Component {
callback(); callback();
} }
let checkSumbitInfo = checkNeedFormValidateFieldsAndScroll({ let checkSumbitInfo = checkNeedFormValidateFieldsAndScroll({ // 检查是否必填表单值
btns, btns,
btnValue, btnValue,
}); });
let needWriteAuditInfo = checkNeedWriteAuditInfo({ let needWriteAuditInfo = checkNeedWriteAuditInfo({ // 检查是否必填审批理由
btns, btns,
btnValue, btnValue,
}); });
...@@ -867,6 +867,7 @@ export default class DetailSplit extends Component { ...@@ -867,6 +867,7 @@ export default class DetailSplit extends Component {
isSumbitLoading={isSumbitLoading} isSumbitLoading={isSumbitLoading}
isSecond={isSecond} isSecond={isSecond}
affairOk={this.affairOk} affairOk={this.affairOk}
form={this.props.form}
btns={btns} btns={btns}
addition={ addition={
<> <>
......
...@@ -35,7 +35,6 @@ export default class GetDetail extends Component { ...@@ -35,7 +35,6 @@ export default class GetDetail extends Component {
render() { render() {
const {id} = this.state; const {id} = this.state;
console.log(this.props.showPrint);
const { const {
detailInfoDivStyle = { detailInfoDivStyle = {
backgroundColor: '#FFFFFF', backgroundColor: '#FFFFFF',
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论