/** * 徐立 * 2019年9月29日 * 三次封装用户通过,驳回,拒绝状态 * @param { jsx } addition 附件按钮 由外部添加 */ import React, { Component } from 'react' import Btn from '../pagesBtn'; import MyModal from '../Modal'; import styles from './styles.less'; import { Input,Row,Col,Modal } from 'antd'; const { TextArea } = Input; export default class userButton extends Component { constructor(){ super() this.state = { // 路由位置 visibleOk: false, // 通过模态框状态 value:'', // 文本域输入 user: '', // 用于保存用户点击了对应按钮 returnText: '', key: '',// 后端返回按钮规格 btnValue: '',// 后端返回按钮状态 } } /** * 通过按钮点击事件 */ showModal = (str,key,value) => { switch (str) { case '通过': this.setState({ returnText: '已通过该申请!' }) break case '驳回': this.setState({ returnText: '已驳回该申请!' }) break case '不通过': this.setState({ returnText: '该申请未通过!' }) break case '提交': this.setState({ returnText: '该申请已提交!' }) } this.setState({ user: str, visibleOk: true, key, btnValue:value }) } /** * 审核状态,返回对应样式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({ visibleOk : false }) } /** * 根据不同值,返回对应样式 */ getStyle = (key,value) => { if(key === "examine"){ switch (value) { 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' 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' } } /** * 用于确认用户输入 */ postUser = () => { let { key,btnValue,value } = this.state this.props.affairOk(key,btnValue,value) } /** * 文本域同步 */ onChange = ({ target: { value } }) => { this.setState({ value }); }; render() { let { btnList,visibleOk,value,user,returnText } = this.state let { affairOk, btns, isSecond, isSumbitLoading, addition, // 附件按钮 只负责显示 } = this.props return ( <> <div className={styles.btn_page}> { btns.length>0?( btns.map((item,index) => { let 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> <div> <Btn get='4' isSumbitLoading={isSumbitLoading?isSumbitLoading:false} btnOne={this.handleCancelOk} btnTwo={ this.postUser }/> </div> </div> </MyModal> </> ) } }