前端学习案例-手把手教你封装一个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>
            <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, // 标志 是否必填备注
            },
          ],
        };

实现总效果

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