前言

大家在做業務系統的時候，很多地方都是列表增刪改查，做這些功能佔據了大家很長時間，如果我們有類似的業務，半個小時就能做出一套那是不是很爽呢。
這樣我們就可以有更多的時間學習一些新的東西。我們這套框架對此做了下封裝，適合的小夥伴也可以借鑑封裝到自己的框架當中去。核心思想用的React
高階元件解耦，接下來我們看看怎麼用。

基礎用法

1. 匯入我們的業務元件
   import { BTable } from 'bcomponents';

2. 寫好我們的頁面模板。呼叫BTable的高階元件BTable.tableEffectHoc，傳入url和columns引數就可以了，是不是很簡單

   @BTable.tableEffectHoc({
     url: '/api/table/list', //url 引數
     columns: columns // table columns 引數
   })
   class BasicTable extends React.Component {
     render() {
       return (
         <div style={{marginBottom: '20px'}}>
           基礎 Table
         </div>
       );
     }
   }
   
   export default BasicTable;
    
   

3. 檢視演示
   

完整的一套增刪改查

1. 建立list.js, 來配置和增強我們的table,注意我們需要使用Btable。

   import { BTable } from 'bcomponents';
   
   class List extends React.Component {
   
     render() {
       return (
         <React.Fragment>
           <BTable
             columns={columns}
             {...this.props}
           />
         </React.Fragment>
       );
     }
   }
   
   export default List;
    
   

2. 寫我們的頁面模板，完成建立和查詢的操作。我們這次用了BTable.Search和BTabLe.Create來快速完成我們的查詢和建立

   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 (
         <React.Fragment>
           <Row justify='space-between' style={{ marginBottom: '20px' }}>
             <Col span={12}>
               <Search getData={getData} />
             </Col>
             <Col span={12} style={{textAlign: 'right'}}>
               <Create
                 url='/api/table'
                 getData={getData}
               >
                 {
                   ({getFieldDecorator}) => (
                     <React.Fragment>
                       <FormItem {...formItemLayout} label="名稱">
                         {getFieldDecorator('name', {
                           initialValue: '',
                           validateFirst: true,
                           rules: [
                             formValid.require(),
                             formValid.name(),
                           ],
                         })(
                           <Input placeholder="請輸入渠道" />
                         )}
                       </FormItem>
                     </React.Fragment>
                   )
                 }
               </Create>
             </Col>
           </Row>
         </React.Fragment>
       );
     }
   }
   
   export default BasicTable;
    
   

   這裡的BTable.Search很簡單，我們只需傳入getData屬性方法就可以完成查詢操作。
   建立其實也很簡單，配置BTable.Create的url和getData引數。然後只需在元件內寫我們的Form表單項就可以了，是不是很簡單。
   至此。我們的建立和查詢就完成了

3. 新增編輯功能。編輯和刪除的操作在列表上，所以我們需要在list.js當中去完成.新增BTable.Update模板

   <Update
     visible={visible}
     url={`/api/table/${updateData.id}`}
     onCancel={this.onUpdateCancel}
     getData={this.props.getData}
   >
     {
       ({getFieldDecorator}) => (
         <React.Fragment>
           <FormItem {...formItemLayout} label="名稱">
             {getFieldDecorator('name', {
               initialValue: updateData.name,
               validateFirst: true,
               rules: [
                 formValid.require(),
                 formValid.name(),
               ],
             })(
               <Input placeholder="請輸入渠道" />
             )}
           </FormItem>
         </React.Fragment>
       )
     }
   </Update>

   配置項也很簡單，配置url，visible和getData就可以了，接著完善我們的FormItem就可以了。是不是很簡單

4. 新增刪除功能

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

   這是最簡單的了，傳一個url和getData就完成了。

5. 檢視演示
   

關於

BTable文件地址

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

目前我正在開發一個頭條的開源專案。可以用此地址檢視，這個是用的真實的資料

瀋陽胃腸醫院哪家好

瀋陽沈大胃腸醫院

鄭州男科醫院哪家好

鄭州不孕不育醫院