Skip to content

W
WebPublic
提交 687a07d8 authored 作者: wanyielin's avatar wanyielin
浏览文件
操作

上传代码

上级 6b27371b
隐藏空白字符变更
内嵌 并排
正在显示 包含 251 行增加 和 209 行删除
one_stop_public/AffairButton/AuditButton/userTable/index.jsx
浏览文件 @ 687a07d8
...@@ -4,169 +4,213 @@ ...@@ -4,169 +4,213 @@
* 三次封装用户通过,驳回,拒绝状态 * 三次封装用户通过,驳回,拒绝状态
* @param { jsx } addition 附件按钮 由外部添加 * @param { jsx } addition 附件按钮 由外部添加
*/ */
import React, { Component } from 'react' import React, { Component } from 'react';
import { Input, Row, Col, Modal, 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 { Input,Row,Col,Modal } from 'antd';
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: '', // 是否使用签名
} };
/** }
* 通过按钮点击事件
*/ /**
showModal = (str,key,value) => { * 通过按钮点击事件
switch (str) { */
case '通过': showModal = (str, key, value) => {
this.setState({ switch (str) {
returnText: '已通过该申请！' case '通过':
})
break
case '驳回':
this.setState({
returnText: '已驳回该申请！'
})
break
case '不通过':
this.setState({
returnText: '该申请未通过！'
})
break
case '提交':
this.setState({
returnText: '该申请已提交！'
})
}
this.setState({ this.setState({
user: str, returnText: '已通过该申请！',
visibleOk: true, });
key, break;
btnValue:value case '驳回':
})
}
/**
* 审核状态,返回对应样式html
*/
getUser = () => {
let { user } = this.state
switch (user) {
case '通过':
return (<span style={{color:'#31C93F'}}>{user}</span>)
case '驳回':
return (<span style={{color:'#FF9B00'}}>{user}</span>)
case '拒绝':
return (<span style={{color:'#FF5350'}}>{user}</span>)
case '不通过':
return (<span style={{color:'#FF5350'}}>{user}</span>)
default:
return (<span >{user}</span>)
}
}
/**
* 通过按钮模态框取消状态
*/
handleCancelOk = () => {
this.setState({ this.setState({
visibleOk : false returnText: '已驳回该申请！',
}) });
} break;
/** case '不通过':
* 根据不同值,返回对应样式 this.setState({
*/ returnText: '该申请未通过！',
getStyle = (key,value) => { });
if(key === "examine"){ break;
switch (value) { case '提交':
case 1: this.setState({
return [`${styles.btn_margin}`,`${styles.btn}`,`${styles.btn_reject}`].join(' ') returnText: '该申请已提交！',
case 2: });
return [`${styles.btn_margin}`,`${styles.btn}`,`${styles.btn_no}`].join(' ')
case 0:
return 'deafalut'
case '1':
return [`${styles.btn_margin}`,`${styles.btn}`,`${styles.btn_reject}`].join(' ')
case '2':
return [`${styles.btn_margin}`,`${styles.btn}`,`${styles.btn_no}`].join(' ')
case '0':
return 'deafalut'
}
} else {
return 'deafalut'
}
} }
/** this.setState({
* 用于确认用户输入 user: str,
*/ visibleOk: true,
postUser = () => { key,
let { key,btnValue,value } = this.state btnValue: value,
this.props.affairOk(key,btnValue,value) });
};
/**
* 审核状态,返回对应样式html
*/
getUser = () => {
const { user } = this.state;
switch (user) {
case '通过':
return <span style={{ color: '#31C93F' }}>{user}</span>;
case '驳回':
return <span style={{ color: '#FF9B00' }}>{user}</span>;
case '拒绝':
return <span style={{ color: '#FF5350' }}>{user}</span>;
case '不通过':
return <span style={{ color: '#FF5350' }}>{user}</span>;
default:
return <span>{user}</span>;
} }
/** };
* 文本域同步
*/ /**
onChange = ({ target: { value } }) => { * 通过按钮模态框取消状态
this.setState({ value }); */
}; handleCancelOk = () => {
render() { this.setState({
let { btnList,visibleOk,value,user,returnText } = this.state visibleOk: false,
let { });
affairOk, };
btns,
isSecond, /**
isSumbitLoading, * 根据不同值,返回对应样式
addition, // 附件按钮 只负责显示 */
} = this.props getStyle = (key, value) => {
return ( if (key === 'examine') {
<> switch (value) {
<div className={styles.btn_page}> case 1:
{ return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(' ');
btns.length>0?( case 2:
btns.map((item,index) => { return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ');
let className = this.getStyle(item.key,item.value) case 0:
return <Btn get='8' key={index} btnOne={()=>{this.showModal(item.name,item.key,item.value)}} text={item.name} style={className} /> return 'deafalut';
}) case '1':
):'' return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_reject}`].join(' ');
} case '2':
{ return [`${styles.btn_margin}`, `${styles.btn}`, `${styles.btn_no}`].join(' ');
addition&&!isSumbitLoading&&addition case '0':
} return 'deafalut';
</div> }
{/* <Btn get='2' btnOne={()=>{this.showModal('不同意')}} btnTwo={()=>{this.showModal('驳回')}} btnThree={()=>{this.showModal('通过')}}/> */} } else {
<MyModal return 'deafalut';
visible={ visibleOk }
title = {isSecond?'重新发起':'通过审批'}
width = {600}
handleCancel = { this.handleCancelOk }
>
<div className={styles.is_ok}>
<p className={styles.header}><span>{isSecond?'当前状态':'审批结果'}</span>{this.getUser()}</p>
<div className={styles.body}>
<span>{isSecond?'发起说明':'审批说明'}</span>
<span>
<TextArea
value={value}
onChange={this.onChange}
placeholder="请输入审批理由"
style={{width:380,height:120,color:'#7F8B95'}}
/>
</span>
</div>
<div>
<Btn get='4' isSumbitLoading={isSumbitLoading?isSumbitLoading:false} btnOne={this.handleCancelOk} btnTwo={ this.postUser }/>
</div>
</div>
</MyModal>
</>
)
} }
};
/**
* 用于确认用户输入
*/
postUser = () => {
const { key, btnValue, value, checked } = this.state;
this.props.affairOk(key, btnValue, value, checked);
};
/**
* 文本域同步
*/
onChange = ({ target: { value } }) => {
this.setState({ value });
};
/**
* 判断是否使用自己的签名
*/
onChange1 = e => {
this.setState({ checked: e.target.checked });
};
render() {
const { btnList, visibleOk, value, user, returnText } = this.state;
const {
affairOk,
btns,
isSecond,
isSumbitLoading,
addition, // 附件按钮 只负责显示
Sign, // 判断是否有签名
} = this.props;
return (
<>
<div className={styles.btn_page}>
{btns.length > 0
? btns.map((item, index) => {
const className = this.getStyle(item.key, item.value);
return (
<Btn
get="8"
key={index}
btnOne={() => {
this.showModal(item.name, item.key, item.value);
}}
text={item.name}
style={className}
/>
);
})
: ''}
{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 className={styles.is_ok}>
<p className={styles.header}>
<span>{isSecond ? '当前状态' : '审批结果'}</span>
{this.getUser()}
</p>
<div className={styles.body}>
<span>{isSecond ? '发起说明' : '审批说明'}</span>
<span>
<TextArea
value={value}
onChange={this.onChange}
placeholder="请输入审批理由"
style={{ width: 380, height: 120, color: '#7F8B95' }}
/>
</span>
</div>
{Sign ? (
<div className={styles.body}>
<span>使用签名</span>
<span>
<Checkbox
defaultChecked={user.isUseBackImage}
onChange={this.onChange1}
></Checkbox>
</span>
</div>
) : (
''
)}
<div style={{ marginBottom: 20 }}>
<Btn
get="4"
isSumbitLoading={isSumbitLoading || false}
btnOne={this.handleCancelOk}
btnTwo={this.postUser}
/>
</div>
</div>
</MyModal>
</>
);
}
} }
one_stop_public/AffairButton/AuditButton/userTable/styles.less
浏览文件 @ 687a07d8
/* 通过模态框状态 */ /* 通过模态框状态 */
.is_ok{ .is_ok {
height: 336px; min-height: 336px;
box-sizing: border-box; box-sizing: border-box;
padding: 60px 81px 0px 59px; padding: 60px 81px 0px 59px;
overflow: hidden; overflow: hidden;
.header{ .header {
margin-bottom: 23px; margin-bottom: 23px;
span{ span {
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
}
span:nth-child(1){
color: #666666;
text-align: right;
margin-right: 24px;
}
span:nth-child(2){
font-weight: bold;
}
} }
.body{ span:nth-child(1) {
display: flex; color: #666666;
margin-bottom: 60px; text-align: right;
span{ margin-right: 24px;
font-size: 14px;
line-height: 24px;
color: #666666;
}
span:nth-child(1){
text-align: right;
margin-right: 24px;
}
} }
span:nth-child(2) {
} font-weight: bold;
.btn_page{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
.btn{
min-width: 90px;
min-height: 32px;
border-radius: 2px;
}
.btn_margin{
margin-left: 16px;
} }
.btn_no{ }
color: #FF5350; .body {
border:1px solid #FF5350; display: flex;
margin-bottom: 60px;
span {
font-size: 14px;
line-height: 24px;
color: #666666;
} }
.btn_reject{ span:nth-child(1) {
color: #FF9B00; text-align: right;
border:1px solid #FF9B00; margin-right: 24px;
} }
} }
\ No newline at end of file }
.btn_page {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
.btn {
min-width: 90px;
min-height: 32px;
border-radius: 2px;
}
.btn_margin {
margin-left: 16px;
}
.btn_no {
color: #ff5350;
border: 1px solid #ff5350;
}
.btn_reject {
color: #ff9b00;
border: 1px solid #ff9b00;
}
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论