这边先上代码 然后我们逐个解释 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> <Modal maskClosable={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, // 标志 是否必填备注 }, ], };实现总效果 则功能实现 有什么疑问欢迎一起探讨
发表评论