antd-queen

introduce

这个项目主要是对antd组件的二次封装，开发它的原因是因为业务中有许多后台管理系统页面，而布局和数据展示几乎千篇一律。通过使用封装后的组件+布局快速开发，能够极大提高生产效率，其特点有以下几个方面：

• 通过一张配置表 + 组件的方式，即可生成一套完整数据 + 交互的表单（参考QnListPage）。
• 封装整合原有的的antd组件，让使用更加简洁，方便;保留原来组件内传入的参数名。
• 提高组件内数据流的兼容性和代码健壮性。
• 每个组件都有默认的字段，defaultProps即文档，一目了然，

Installation

$ npm install --save antd-queen

Usage

//下面两种都可以
import { QnListPage } from 'antd-queen';
//const { QnListPage } = require('antd-queen') ;

import React, { Component } from 'react';

class Demo extends Component {
   constructor(props) {
      super(props);
   }

  render(){

     const settings = {
      // 通用
      title: '我的任务',
      hasTab: false,

      // 表格相关
      current: taskPageNum,
      columns: this.getColumns(),
      dataSource: taskList,
      total: taskTotal,
      rowKey: item => item.orderId,
      handlePageChange: this.handlePageChange,
      defaultPageSize: this.defaultPageSize,
      pageSize: this.state.pageSize,
    };

     return (
      <QnListPage {...settings} />
    );
  }

  export default Demo;
}

License

MIT © Mo9 Front End