基于Umi搭建的个人Dva脚手架（五） - 可配置的搜索、弹窗组件封装

1、基本概述

   在上一篇博客：基于Umi搭建的个人Dva脚手架（四） - 可配置的表单组件封装中，已经详细介绍了通过配置生成表单组件的方法，在开发中我们不必过分关心view层的编码，可以减少重复代码的编写，提高开发效率。列表搜索和操作类弹窗（新增、修改等）等都会应用到表单元素，因此在已有的可配置的表单组件GenerateForm的基础上进行二次封装，分别封装了可配置的搜索组件ListFilter和可配置弹窗组件GenerateModal；下边就分别对ListFilter和GenerateModal进行说明，

---

2、ListFilter的实现

  2.1 、原型图

  列表搜索的原型大致如下，如有原型布局与下图不一致，可自行调整样式文件。考虑到列表搜索时，基本上占据了屏幕的内容区，因次默认一排排列3个元素，可自行通过表单配置中的span属性去更改；

  2.2 、具体实现

  具体的代码实现如下。引入GenerateForm组件，用来控制表单元素的生成。

    import React, {Component} from 'react'
    import {Button} from 'antd';
    import GenerateForm from '../GenerateForm'
    import styles from './index.less'
    
    
    export default class ListFilter extends React.Component {
        /*搜索*/
        onSearch = () => {
            this.listFilter.verify((error, values) => {
                if (error) {
                    return
                }
                this.props.onSearch && this.props.onSearch(values);
            })
        }
        /*重置*/
        onReset = () => {
            this.getForm.resetFields();
            /*对外暴露reset方法*/
            this.props.onReset && this.props.onReset()
        }
        /*对外暴露Form的实例*/
        getForm = () => {
            return this.listFilter.getForm();
        }
    
        render() {
            const {
                filters,
                hasSearchBtn = true,
                hasResetBtn = true,
                searchBtnText = '查询', /* 搜索按钮文案*/
                resetBtnText = '清除' /* 清除按钮文案*/
            } = this.props;
    
            /*搜索列表如果没有设置, 默认为一行3个*/
            filters.forEach(item => {
                if (!item.span) {
                    item.span = 8;
                }
            })
    
            return (
                <div>
                    <div className={styles.listFilterWrap}>
                        <GenerateForm formSet={filters} wrappedComponentRef={el => (this.listFilter = el)}/>
                        <div className={styles.btnGroup}>
                            {hasSearchBtn && <Button type="primary" onClick={this.onSearch}>{searchBtnText}</Button>}
                            {hasResetBtn && <Button type="default" onClick={this.onReset}>{resetBtnText}</Button>}
                        </div>
                    </div>
                </div>
            )
        }
    }

  具体的分析如下：

  (1)、props属性：一共接受七个属性，分为5个属性和2个方法：

   – filters：表单元素的配置，传递给GenerateForm组件，用于生成表单；

   – hasSearchBtn、hasResetBtn：用于控制是否生成搜索、清楚按钮，默认都显示；

   – searchBtnText、resetBtnText：用于控制搜索、清楚按钮文案，默认都显示为“查询”、“清楚”；

   – onSearch、onReset：分别用来控制查询、清空按钮的事件处理；

  (2)、render方法：通过GenerateForm组件生成表单元素，表单元素的配置体现在filters属性中，由于GenerateForm被Form.create()作用，因为如需调用GenerateForm内部的方法和属性，则只能通过wrappedComponentRef属性（类似于ref）；

  (3)、组件方法:一共提供了3个组件方法：

   – onSearch ：首先对表单元素校验，然后将按钮事件传递给props中的onSearch处理；

   – onReset ：首先清空表单元素，然后将按钮事件传递给props中的onReset处理；

   – getForm ：对外暴露表单的元素的form对象，在实际业务中，可能会需要调用form的一些方法，例如表单密码确认联动校验等。可以通过该方法获取到方法见ant design的api文档：https://ant-design.gitee.io/components/form-cn/#Form.create(options)

---

3、GenerateModal组件的实现

  3.1 、原型图

   弹窗的原型大致如下，如有原型布局与下图不一致，可自行调整样式文件。由于弹窗宽度有限，因此默认一排排列2个元素，可自行通过表单配置中的span属性去更改；

  3.2 、具体实现

  具体的代码实现如下。引入GenerateForm组件，用来控制表单元素的生成，Modal组件用来生成弹窗。

import React from 'react'
import {Modal, Button} from 'antd';
import GenerateForm from '../GenerateForm'
import styles from './index.less'

export default class GenerateModal extends React.Component {
    /*确定*/
    handelOk = () => {
        this.generateModal.verify((error, values) => {
            if (error) {
                return
            }
            this.props.onOk && this.props.onOk(values);
        })
    }
    /*取消*/
    handelCancel = () => {
        this.props.onCancel && this.props.onCancel();
    }
    /*对外暴露Form的实例*/
    getForm = () => {
        return this.generateModal.getForm();
    }

    render() {
        const {modalForm, visible, key, title, width = 700, hasOkBtn = true, okText = '确定', hasCancelBtn = true, cancelText = '取消'} = this.props;
        const modalOpts = {
            visible,
            key,
            title,
            width,
            maskClosable: false,
            onCancel: this.handelCancel,
            footer: <div>
                {hasCancelBtn && <Button onClick={this.handelCancel}>{cancelText}</Button>}
                {hasOkBtn && <Button onClick={this.handelOk} type="primary">{okText}</Button>}
            </div>
        };

        /*modal弹窗如果没有设置，默认一行2个*/
        modalForm.forEach(item => {
            if (!item.span) {
                item.span = 12;
            }
        })

        return (
            <Modal {...modalOpts} className={styles.generateModal}>
                <GenerateForm formSet={modalForm} wrappedComponentRef={el => (this.generateModal = el)}/>
            </ Modal>
        )
    }
}

  具体的分析如下：

  (1)、props属性：一共接受11个属性，分为9个属性和2个方法：

   – modalForm：表单元素的配置，传递给GenerateForm组件，用于生成表单；

   – visible：用于控制Modal组件显示与隐藏，对应Modal组件的visible属性；

   – key：用于控制Modal组件属性key，通常设置为随机数Math.random()；

   – title：用于控制Modal组件标题，对应Modal组件的titie属性；

   – width：用于控制Modal组件的宽度，对应Modal组件的titie属性，这里默认为700，通常项目中大部分弹窗的宽度是一直，可根据时间情况更改此参数；

   – hasOkBtn、hasCancelBtn：用于控制弹窗是生成确定、取消按钮，默认都显示；

   – okText、cancelText：用于控制按钮文案，默认都显示为“确定”、“取消”；

   – onOk、onCancel：分别用来控制确定、取消按钮的事件处理；

  (2)、render方法：通过GenerateForm组件生成表单元素，表单元素的配置体现在modalForm属性中，由于GenerateForm被Form.create()作用，因为如需调用GenerateForm内部的方法和属性，则只能通过wrappedComponentRef属性（类似于ref）；

  (3)、组件方法:一共提供了3个组件方法：

   – handelOk ：首先对表单元素校验，然后将按钮事件传递给props中的onOk处理；

   – handelCancel ：将按钮事件传递给props中的onCancel处理；

   – getForm ：对外暴露表单的元素的form对象，作用同ListFilter。

具体的实例可以参考代码：https://github.com/zhengchangshun/myUmi/tree/master/src/components/business 。

---

上一篇：基于Umi搭建的个人Dva脚手架（四） - 可配置的表单组件封装

---