我是歌謠 放棄很容易 但是堅持一定很酷 微信公眾號關注前端小歌謠學習前端知識

這邊先上代碼

然后我們逐個解釋

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, // 標志 是否必填備注},],};

?

實現總效果

?則功能實現 有什么疑問歡迎一起探討

?

?

總結

以上是生活随笔為你收集整理的手把手教你封装一个ant design的审核框组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。