手把手教你封装一个ant design的审核框组件

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

这边先上代码

然后我们逐个解释

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的审核框组件相关推荐

手把手教你封装一个自己的数据库框架~
本教程将给大家深度剖析数据库框架底层实现的原理,然后采用泛型.反射.注解机制来教大家做一个自己的数据库框架. 前面学习了很多教程,我们转换了一下风格,开始从一个点切入,做更加深入的提升,这也是符合人的 ...
从零开始学_JavaScript_系列（21）——dojo(8)（手把手教你封装一个widget）
(73)封装一个widget 醒目:必须在web环境下使用,无论是python的web.py或者是通过http访问网站环境,都可以,但纯本地是不可行的. 首先,什么是widget? 简单来说,就是一个 ...
封装一个丝滑的聊天框组件
需求背景应公司业务要求,需要做个聊天机器人,要适应不同的业务场景,大概就跟淘宝客服类似,发送消息,机器人自动回复. 话不多说,直接开撸技术栈: react(hooks写法) + flex布局功能 ...
手把手教你做一个物联网视频监控项目（三）流媒体方案实现
往期文章手把手教你做一个物联网视频监控项目(一) 介绍手把手教你做一个物联网视频监控项目(二)MJPG-streamer方案实现文章目录前言一.软硬件准备二.流媒体方案的实现之FFmpeg ...
手把手教你写一个生成对抗网络
成对抗网络代码全解析, 详细代码解析(TensorFlow, numpy, matplotlib, scipy) 那么,什么是 GANs? 用 Ian Goodfellow 自己的话来说: " ...
python手机版做小游戏代码大全-Python大牛手把手教你做一个小游戏，萌新福利！...
原标题:Python大牛手把手教你做一个小游戏,萌新福利! 引言最近python语言大火,除了在科学计算领域python有用武之地之外,在游戏.后台等方面,python也大放异彩,本篇博文将按照正规 ...
python k线合成_手把手教你写一个Python版的K线合成函数
手把手教你写一个Python版的K线合成函数在编写.使用策略时,经常会使用一些不常用的K线周期数据.然而交易所.数据源又没有提供这些周期的数据.只能通过使用已有周期的数据进行合成.合成算法已经有一个 ...
第五十八期:从0到1 手把手教你建一个区块链
近期的区块链重回热点,如果你想深入了解区块链,那就来看一下本文,手把手教你构建一个自己的区块链. 作者:Captain编译近期的区块链重回热点,如果你想深入了解区块链,那就来看一下本文,手把手教你构 ...
手把手教你写一个spring IOC容器
本文分享自华为云社区<手把手教你写一个spring IOC容器>,原文作者:技术火炬手. spring框架的基础核心和起点毫无疑问就是IOC,IOC作为spring容器提供的核心技术,成功 ...

手把手教你封装一个ant design的审核框组件

手把手教你封装一个ant design的审核框组件相关推荐

最新文章

热门文章