你們在作業務系統的時候,不少地方都是列表增刪改查,作這些功能佔據了你們很長時間,若是咱們有相似的業務,半個小時就能作出一套那是否是很爽呢。
這樣咱們就能夠有更多的時間學習一些新的東西。咱們這套框架對此作了下封裝,適合的小夥伴也能夠借鑑封裝到本身的框架當中去。核心思想用的React
高階組件解耦,接下來咱們看看怎麼用。react
導入咱們的業務組件git
import { BTable } from 'bcomponents';
寫好咱們的頁面模板。調用BTable
的高階組件BTable.tableEffectHoc
,傳入url和columns參數就能夠了,是否是很簡單github
@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;
建立list.js, 來配置和加強咱們的table,注意咱們須要使用Btable。api
import { BTable } from 'bcomponents'; class List extends React.Component { render() { return ( <React.Fragment> <BTable columns={columns} {...this.props} /> </React.Fragment> ); } } export default List;
寫咱們的頁面模板,完成建立和查詢的操做。咱們此次用了BTable.Search
和BTabLe.Create
來快速完成咱們的查詢和建立antd
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表單項就能夠了,是否是很簡單。 至此。咱們的建立和查詢就完成了
添加編輯功能。編輯和刪除的操做在列表上,因此咱們須要在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就能夠了。是否是很簡單
添加刪除功能學習
BTable.Del({ url: `/api/table/${data.id}`, getData, })
這是最簡單的了,傳一個url和getData就完成了。
線上演示地址:http://39.105.188.65:8080/system/channelthis
目前我正在開發一個頭條的開源項目。能夠用此地址查看,這個是用的真實的數據url
表格的增刪改查封裝已經完成, 代碼已放到github上,你們能夠自行查看umi-react。
若是以爲不錯,請start一下 我建了一個QQ羣,你們加進來,能夠一塊兒交流。羣號 787846148