twoTable.jsx

/**
 * 徐立
 * 2019年9月30日
 * 三次封装用户通过,拒绝状态
 * affairOk 需要外部传入,进行请求相关
 */
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: '', //
        }
    }
    /**
     * 通过按钮点击事件
     */
    showModal = (str) => {
        switch (str) {
            case '通过':
                this.setState({
                    returnText: '已通过该申请！'
                })
                break
            case '驳回':
                this.setState({
                    returnText: '已驳回该申请！'
                })
                break
        }
        this.setState({
            user: str,
            visibleOk: true,
        })
    }
    /**
     * 审核状态,返回对应样式html
     */
    getUser = () => {
        let { user } = this.state
        switch (user) {
            case '通过':
                return (<span style={{color:'#31C93F'}}>{user}</span>)
            case '驳回':
                return (<span style={{color:'#FF9B00'}}>{user}</span>)
        }
    }
    /**
     * 通过按钮模态框取消状态
     */
    handleCancelOk = () => {
        this.setState({
            visibleOk : false
        })
    }
    /**
     * 文本域同步
     */
    onChange = ({ target: { value } }) => {
        this.setState({ value });
    };
    render() {
        let { btnList,visibleOk,value,user,returnText } = this.state
        let { affairOk } = this.props
        return (
            <>
                <Btn get='5' btnOne={()=>{this.showModal('驳回')}} btnTwo={()=>{this.showModal('通过')}} />
                <MyModal
                    visible={ visibleOk }
                    title = '通过审批'
                    width = {600}
                    handleCancel = { this.handleCancelOk }
                    >
                        <div className={styles.is_ok}>
                            <p className={styles.header}><span>审批结果</span>{this.getUser()}</p>
                            <div className={styles.body}>
                                <span>审批说明</span>
                                <span>
                                    <TextArea
                                        value={value}
                                        onChange={this.onChange}
                                        placeholder="请输入审批理由"
                                        style={{width:380,height:120,color:'#7F8B95'}}
                                        />
                                </span>
                            </div>
                            <div>
                                <Btn get='4' btnOne={this.handleCancelOk} btnTwo={ () => {affairOk(user,returnText,value)} }/>
                            </div>
                        </div>
                    </MyModal>
                </>
        )
    }
}