摘要：前言大家在做業(yè)務(wù)系統(tǒng)的時(shí)候，很多地方都是列表增刪改查，做這些功能占據(jù)了大家很長(zhǎng)時(shí)間，如果我們有類(lèi)似的業(yè)務(wù)，半個(gè)小時(shí)就能做出一套那是不是很爽呢。我們這套框架對(duì)此做了下封裝，適合的小伙伴也可以借鑒封裝到自己的框架當(dāng)中去。

大家在做業(yè)務(wù)系統(tǒng)的時(shí)候，很多地方都是列表增刪改查，做這些功能占據(jù)了大家很長(zhǎng)時(shí)間，如果我們有類(lèi)似的業(yè)務(wù)，半個(gè)小時(shí)就能做出一套那是不是很爽呢。
這樣我們就可以有更多的時(shí)間學(xué)習(xí)一些新的東西。我們這套框架對(duì)此做了下封裝，適合的小伙伴也可以借鑒封裝到自己的框架當(dāng)中去。核心思想用的React
高階組件解耦，接下來(lái)我們看看怎么用。

導(dǎo)入我們的業(yè)務(wù)組件

import { BTable } from "bcomponents";

寫(xiě)好我們的頁(yè)面模板。調(diào)用BTable的高階組件BTable.tableEffectHoc，傳入url和columns參數(shù)就可以了，是不是很簡(jiǎn)單

@BTable.tableEffectHoc({
  url: "/api/table/list", //url 參數(shù)
  columns: columns // table columns 參數(shù)
})
class BasicTable extends React.Component {
  render() {
    return (
      

        基礎(chǔ) Table
      
    );
  }
}

export default BasicTable;

查看演示

創(chuàng)建list.js, 來(lái)配置和增強(qiáng)我們的table,注意我們需要使用Btable。

import { BTable } from "bcomponents";

class List extends React.Component {

  render() {
    return (
      
        
      
    );
  }
}

export default List;

寫(xiě)我們的頁(yè)面模板，完成創(chuàng)建和查詢(xún)的操作。我們這次用了BTable.Search和BTabLe.Create來(lái)快速完成我們的查詢(xún)和創(chuàng)建

import { BTable } from "bcomponents";
import { Row, Col, Input, Form } from "antd";
import ListTable from "./_components/list";

const Search = BTable.Search;
const Create = BTable.Create;
const FormItem = Form.Item;

@BTable.tableEffectHoc({
  url: "/api/table/list",
  BTable: ListTable,
})
class BasicTable extends React.Component {

  render() {
    const {getData} = this.props;
    return (
      
        
          
            
          
          
            
              {
                ({getFieldDecorator}) => (
                  
                    
                      {getFieldDecorator("name", {
                        initialValue: "",
                        validateFirst: true,
                        rules: [
                          formValid.require(),
                          formValid.name(),
                        ],
                      })(
                        
                      )}
                    
                  
                )
              }
            
          
        
      
    );
  }
}

export default BasicTable;

這里的`BTable.Search`很簡(jiǎn)單，我們只需傳入getData屬性方法就可以完成查詢(xún)操作。
創(chuàng)建其實(shí)也很簡(jiǎn)單，配置`BTable.Create`的url和getData參數(shù)。然后只需在組件內(nèi)寫(xiě)我們的Form表單項(xiàng)就可以了，是不是很簡(jiǎn)單。
至此。我們的創(chuàng)建和查詢(xún)就完成了

添加編輯功能。編輯和刪除的操作在列表上，所以我們需要在list.js當(dāng)中去完成.添加BTable.Update模板

  {
    ({getFieldDecorator}) => (
      
        
          {getFieldDecorator("name", {
            initialValue: updateData.name,
            validateFirst: true,
            rules: [
              formValid.require(),
              formValid.name(),
            ],
          })(
            
          )}
        
      
    )
  }

配置項(xiàng)也很簡(jiǎn)單，配置url，visible和getData就可以了，接著完善我們的FormItem就可以了。是不是很簡(jiǎn)單

添加刪除功能

BTable.Del({
  url: `/api/table/${data.id}`,
  getData,
})

這是最簡(jiǎn)單的了，傳一個(gè)url和getData就完成了。

查看演示

BTable文檔地址

線上演示地址：http://39.105.188.65:8080/system/channel

目前我正在開(kāi)發(fā)一個(gè)頭條的開(kāi)源項(xiàng)目?？梢杂么说刂凡榭矗@個(gè)是用的真實(shí)的數(shù)據(jù)

表格的增刪改查封裝已經(jīng)完成, 代碼已放到github上，大家可以自行查看umi-react。
如果覺(jué)得不錯(cuò)，請(qǐng)start一下
我建了一個(gè)QQ群，大家加進(jìn)來(lái)，可以一起交流。群號(hào) 787846148