Preface

When we are doing business systems, many places are list additions, deletions and modifications. It takes us a long time to do these functions. If we have similar business, it would be great if we could make a set in half an hour.
So we can have more time to learn something new. Our framework has been encapsulated below, and suitable partners can also draw lessons from encapsulation into their own framework. React for Core Ideas
High-order component decoupling, let's see how to use it.

Basic usage

1. Import our business components

   import { BTable } from 'bcomponents';

2. Write our page template. Call BTable.tableEffectHoc, the higher-order component of BTable, and pass in the url and columns parameters. Is that simple?

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

3. View demonstration
   

A complete set of additions, deletions and modifications

1. Create list.js to configure and enhance our table. Note that we need to use 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. Write our page template, complete the creation and query operation. This time we used BTable.Search and BTabLe.Create to quickly complete our queries and 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="Name">
                         {getFieldDecorator('name', {
                           initialValue: '',
                           validateFirst: true,
                           rules: [
                             formValid.require(),
                             formValid.name(),
                           ],
                         })(
                           <Input placeholder="Please enter channels" />
                         )}
                       </FormItem>
                     </React.Fragment>
                   )
                 }
               </Create>
             </Col>
           </Row>
         </React.Fragment>
       );
     }
   }
   
   export default BasicTable;

   The `BTable.Search'here is very simple. We can complete the query simply by passing in the getData attribute method.
   Creating is actually very simple, configuring the url and getData parameters of `BTable.Create'. Then we just need to write our Form form item in the component. Is it simple?
   So far. Our creation and query are complete

3. Add editing function. Editing and deleting are on the list, so we need to do it in list.js. Add the BTable.Update template

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

   Configuration items are also simple. Configure url, visible and getData, and then refine our FormItem. Is it simple?

4. Add Delete Function

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

   This is the easiest thing to do. Passing a url and getData is done.

5. View demonstration
   

about

BTable Document Address

Online demo address: http://39.105.188.65:8080/system/channel

I am currently developing a headline open source project. You can view it at this address. This is real data.

Concluding remarks

The addition, deletion, modification and encapsulation of the form have been completed, and the code has been put on github. You can check it by yourself. umi-react.
If it feels good, please start Once
I have built a QQ group, you join in, you can communicate together. Group number 787846148