• 表格-分页组件


    单页面分页参数处理方式

    单页面分页,适用于存在分页显示的页面,包括如何处理Form参数数据。考虑的页面性能,通常把一个页面根据功能的不同划分不同的子组件

    ├─hmdm
    │  └─Uom
    │   └─index.js
    |   └─FilterForm.js
    |   └─ListTable.js
    |   └─index.less
    

    在业务组件的入口文件(index.js)中,引入定义好的子组件

    // index.js
    
    render(){
        const filterProps = {};
        const listProps  ={};
        return (
            <React.Fragement>
                <Header/>
                <Content>
                    <div>
                        <FilterForm {...filterProps} />
                    </div>
                    <ListTable {...listProps} />
                </Content>
            </React.Fragement>
        )
    }
    

    将入口文件中的Form创建转移到子组件的FilterForm中,以此缩小页面render时的作用范围,提升页面性能

    // bad
    // index.js
    @Form.create({fieldNameProp: null})
    export default class MessageTemplate extends PureComponent {}
    
    // good
    // FilterForm.js
    @Form.create({ fieldNameProp: null })
    export default class FilterForm extends PureComponent {}
    
    

    index.js中进行查询操作时,可以获取Form实时的参数值,需要将FilterForm中的Props Form传递到index.js中

    // index.js
    export default class MessageTemplate extends PureComponent {
        // 将查询表单的值绑定到this上
        form;
    
        // 将FilterForm中的form属性存储到index.js的state中
        @Bind()
        handleBindRef(ref = {}) {
            this.form = (ref.props||{}).form;
        }
    
        render(){
            const filterProps = {
                onSearch: this.handleSearch,
                onRef: this.handleBindRef
            }
            return();
        }
    }
    
    // FilterForm.js
    @Form.create({ fieldNameProp: null })
    export default class FilterForm extends PureComponent {
        constructor(props) {
          super(props);
          props.onRef(this);
        }
    }
    
    

    页面查询的参数处理

    
    export default class MessageTemplate extends PureComponent {
        @Bind()
        handleSearch(fields = {}) {
          const { dispatch } = this.props;
          // 实时获取查询表单中查询参数
          const filterValues = isUndefined(this.form) ? {} : filterNullValueObject(this.form.getFieldsValue());
          dispatch({
            type: 'uom/fetchUomData',
            payload: {
              page: isEmpty(fields) ? {} : fields,
              ...filterValues,
            },
          });
        }
        render(){
            const filterProps = {
                onSearch: this.handleSearch,
                onRef: this.handleBindRef,
            };
            const listProps = {
                onSearch: this.handleSearch,
                // otherProps;
            }
            return ();
        }
    }
    
    export default class ListTable extends PureComponent {
        
        render(){
            const { onSearch, ...otherProps } = this.props;
            return (
                <Table
                    {...otherProps}
                    onChange={page => onSearch(page)}
                />
            )
        }
    }
    
    @Form.create({ fieldNameProp: null })
    export default class FilterForm extends PureComponent {
        @Bind()
        searchOption(){
            const { onSearch, form } = this.props;
            form.validator(err => {
                if(!err) {
                    onSearch(); // 不传任何参数,表单值在index中实时获取
                }
            })
        }
    }
    
    // 业务组件对应的model
    export default {
        namespace: 'uom',
        state: {
            list: [], // 列表数据
            pagination: {}, // 查询参数
        },
        effects: {
            *fecthUomData({ payload }, { call, put }) {
                const result = getResponse(yield call(searchData, payload));
                if(result) {
                    yield put({
                        type: 'updateState',
                        payload: {
                            list: result.content,
                            pagination: createPagination(result), // pagination会保存到model中
                        }
                    });
                }
            }
        },
        reducers: {
            updateState(state, {payload}) {
                return {
                    ...state,
                    ...payload,
                };
            }
        }
    }
    
    // 对应的service中的进行参数过滤处理
    // uomService.js
    export async function searchData(params){
      // 调用parseParamters进行参数过滤
      const param = parseParameters(params);
      return request(`${prefix}/uom`, {
        method: 'GET',
        query: param,
      });
    }
    
    

    页面操作(保存、更新)后,页面数据需要刷新,再次调用handleSearch()时,需要传入model中保存的pagination

    handleSaveData(){
        const { dispatch, uom: { pagination = {}} } = this.props;
        dispatch({
            type: '',
            payload:{}
        }).then(res => {
            if(res) {
                notificaiton.success();
                // 页面操作成功后,刷新数据时,传入pagination
                this.handleSearch(pagination);
            }
        });
    }
    

    跨页面分页参数处理方式

    跨页面分页参数,目前只有从明细页退回到列表页一种情形,处理方式主要在列表页的中做一些特殊处理

    ├─hmsg
    │  └─MessageTemplate
    |   └─List
    │     └─index.js
    |     └─FilterForm.js
    |     └─ListTable.js
    |     └─index.less
    |   └─Detail
    |     └─index.js
    

    在列表页的FilterForm组件上添加缓存组件CacheComponent,同时,在列表页的入口文件中,componentDidMount()上加入校验

    // List/FilterForm.js
    @Form.create({ fieldNameProp: null })
    @CacheComponent({ cacheKey: '/hmsg/message-template' })
    export default class FilterForm extends PureComponent {}
    
    // List/index.js
    export default class List extends Component {
      componentDidMount() {
        const {
          dispatch,
          messageTemplate: { pagination },
          location: { state: { _back } = {} },
        } = this.props;
        // 校验是否从详情页返回
        const page = _back === -1 ? pagination : {};
        this.handleSearch(page);
      }
    
      @Bind()
      handleSearch(fields = {}) {
    
      }
    
    
    

    列表页数据批量操作

    页面功能要是实现批量新增,批量修改时,采用行内编辑,行内编辑的使用方式可参考相关文档。对于行新增、行移除时,需要对model中的保存的pagination进行变更,进行简单的方法调用即可

    // 新增行, 调用 addItemToPagination
    import { addItemToPagination } from 'utils/utils';
    
    @Bind()
    handleAddUom() {
      const { dispatch, uom: {list = [], pagination = {} } } = this.props;
      dispatch({
        type: 'uom/updateState',
        payload: {
          // otherProps
          pagination: addItemToPagination(list.length, pagination),
        },
      });
    }
    
    // 移除行, 调用 delItemToPagination
    import { addItemToPagination } from 'utils/utils';
     
    @Bind()
    handleCleanLine(record) {
      const { dispatch, uom: { list = [], pagination = {} } } = this.props;
      dispatch({
        type: 'uom/updateState',
        payload: {
          // otherProps
          pagination: delItemToPagination(list.length, pagination),
        },
      });
    }