我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣学习前端知识

这边先上代码

然后我们逐个解释

import React, { Component, Fragment } from 'react';
import { Modal, Row, Form, Col, Radio, Tag, Input, message } from 'antd';/*** 弹框 审核* @param {String}  requestUrl       请求 url {必填}* @param {Object}  requestParams    请求参数** @param {Array}   checkHandleList  单选数据（审核通过，驳回）* @param {Array}   checkTagList     备注快捷便签 list* @param {Boolean}  modalShow       弹窗显示**/
@Form.create()
class BaseCheck extends Component {constructor(props) {super(props);//控制弹出框的开启this.state = {loading: false,};}//控制父组件可以调用子组件的方法componentDidMount() {this.props.onRef && this.props.onRef(this);}// 点击确定 校验并请求handleOkCheck = () => {this.props.form.validateFieldsAndScroll(['checkRadio', 'checkRemark'], 
(error, values) => {if (error) {return;}const { checkHandleList } = this.props;const arr = checkHandleList.filter((item) => item.key === 
values.checkRadio);if (arr[0].isRequired && !values.checkRemark) {Modal.error({title: '提示',content: '请输入驳回备注',});return;}this.checkRequest(values);});};//处理接口请求checkRequest = async (values) => {this.setState({ loading: true });let { requestUrl, requestParams = {} } = this.props;try {const res = await requestUrl({...requestParams,approveAction: values.checkRadio,approveMemo: values.checkRemark,});if (res.returnCode == 0) {message.success('提交成功');//提交成功的回调this.props.onOk && this.props.onOk();} else {message.warning(res.returnMsg);}} catch (error) {} finally {this.setState({ loading: false });}};//取消的时候的回调handleCancelCheck = () => {this.props.onCancel && this.props.onCancel();};// 点击快捷备注标签tagClick = (item) => {this.props.form.setFieldsValue({checkRemark: item.value,});};// 初始化备注initRemarkFn = () => {this.props.form.setFieldsValue({checkRemark: '',});};render() {const {form: { getFieldDecorator },checkTagList = [],modalShow,checkHandleList = [],radioMsg,} = this.props;const style = {position: 'relative',top: '-20px',left: '120px',color: '#1890ff',};return (<Fragment><ModalmaskClosable={false}title="审核"visible={modalShow}width={550}onOk={this.handleOkCheck}onCancel={this.handleCancelCheck}><Form labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} 
layout={'inline'}><Row span={24}><Col span={24}><Form.Item label={'审核'} style={{ width: '100%' }}>{getFieldDecorator('checkRadio', {rules: [{ required: true, message: '请选择是否审核通过' }],})(<Radio.Group>{checkHandleList.map((item) => {return (<Radio value={item.key} key={item.key}>{item.value}</Radio>);})}{/*<Radio value={PRODUCTION_LIBRARY_CHECKED}
>审核通过</Radio>*/}{/*<Radio value={PRODUCTION_LIBRARY_CHECKNOT
}>驳回</Radio>*/}</Radio.Group>)}</Form.Item></Col>{radioMsg && <Col style={style}>{radioMsg}</Col>}</Row><Row span={24}><Col span={24}><Form.Item label={'备注'} style={{ width: '100%' }}>{getFieldDecorator('checkRemark')(<Input.TextArea />)}</Form.Item></Col></Row><Row><Col style={{ paddingLeft: '120px' }}>{checkTagList.map((item, index) => {return (<Tag color="#108ee9" key={index} onClick={() =>this.tagClick(item)}>{item.value}</Tag>);})}</Col></Row></Form></Modal></Fragment>);}
}export default BaseCheck;

解释1 这边loding控制接口请求的加载

 解释2 设置单选数据 驳回的时候添加备注

解释3 点击驳回时候的快捷备注

 解释4 如何使用

父组件

   <BaseCheck

          {...checkParams}

          onOk={this.handleOkCheck}

          onCancel={() => {

            this.setState({ checkShow: false });

          }}

          modalShow={checkShow}

        />

const checkParams = {requestUrl: withdrawalRecordReview,requestParams: {codeList: selectedRowKeys,},checkTagList,checkHandleList: [{key: BOOTH_TYPE_ACCEPT_ACCEPT,value: '审核通过',isRequired: false, // 标志 是否必填备注},{key: BOOTH_TYPE_REFUSE_REFUSE,value: '驳回',isRequired: true, // 标志 是否必填备注},],};

 

实现总效果

 则功能实现 有什么疑问欢迎一起探讨