这边先上代码
然后我们逐个解释
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, // 标志 是否必填备注
},
],
};实现总效果
则功能实现 有什么疑问欢迎一起探讨
前端学习案例-手把手教你封装一个ant design的审核框组件
原创
©著作权归作者所有:来自51CTO博客作者前端歌谣的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
前端部署指南:手把手教你部署 Vue 项目
为大家详细介绍如何从零开始部署一个 Vue 项目,让每个人都能轻松上手。
Nginx nginx 服务器 -
前端学习案例-ant design带你封装一个上传图片组件
react
学习 ico ide 上传 -
手把手教你从零配置一个vue组件库
非常详细的教程。
git css json -
手把手教你做一个网页
摘要:搞嵌入式的要学习一点前端吗?那么前端是什么?是网页是网站吗?是也不全是。前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax
javascript html html5 css bootstrap -
java电商项目规格书
摘要:由于近期做的电商业务项目需要客户去提交订单并且去支付,所以单独需要与支付宝开发者文档中心对接,故开发了支付以及回调支付宝接口。用于用户支付。 1.1支付宝开发中心  
java电商项目规格书 java 电商 spring boot 支付宝支付