【共享单车】—— React后台管理系统开发手记:城市管理和订单管理
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star。
一、城市管理
- pages->city->index.js:对应路由/admin/city
- 顶部子组件一:选择表单
class FilterForm extends React.Component{ render(){ const { getFieldDecorator } = this.props.form; return ( <Form layout="inline"> <FormItem label="城市"> { getFieldDecorator('city_id')( <Select style={ {width:100}} placeholder="全部" > <Option value="">全部</Option> <Option value="1">北京市</Option> <Option value="2">天津市</Option> <Option value="3">深圳市</Option> </Select> ) } </FormItem> <FormItem label="用车模式"> { getFieldDecorator('mode')( <Select style={ { width: 120 }} placeholder="全部" > <Option value="">全部</Option> <Option value="1">指定停车点模式</Option> <Option value="2">禁停区模式</Option> </Select> ) } </FormItem> <FormItem label="营运模式"> { getFieldDecorator('op_mode')( <Select style={ { width: 80 }} placeholder="全部" > <Option value="">全部</Option> <Option value="1">自营</Option> <Option value="2">加盟</Option> </Select> ) } </FormItem> <FormItem label="加盟商授权状态"> { getFieldDecorator('auth_status')( <Select style={ { width: 100 }} placeholder="全部" > <Option value="">全部</Option> <Option value="1">已授权</Option> <Option value="2">未授权</Option> </Select> ) } </FormItem> <FormItem> <Button type="primary" style={ {margin:'0 20px'}}>查询</Button> <Button>重置</Button> </FormItem> </Form> ); } } FilterForm = Form.create({})(FilterForm);
-
弹框子组件二:开通城市表单
class OpenCityForm extends React.Component{ render(){ const formItemLayout = { labelCol:{ //label标签占据列数 span:5 }, wrapperCol:{ //Form表单占据列数 span:19 } } const { getFieldDecorator } =this.props.form; return ( <Form layout="horizontal"> <FormItem label="选择城市" {...formItemLayout}> { getFieldDecorator('city_id',{ initialValue:'1' })( <Select style={ { width: 100 }}> <Option value="">全部</Option> <Option value="1">北京市</Option> <Option value="2">天津市</Option> </Select> ) } </FormItem> <FormItem label="营运模式" {...formItemLayout}> { getFieldDecorator('op_mode', { initialValue: '1' })( <Select style={ { width: 100 }}> <Option value="1">自营</Option> <Option value="2">加盟</Option> </Select> ) } </FormItem> <FormItem label="用车模式" {...formItemLayout}> { getFieldDecorator('use_mode', { initialValue: '1' })( <Select style={ { width: 100 }}> <Option value="1">指定停车点</Option> <Option value="2">禁停区</Option> </Select> ) } </FormItem> </Form> ); } } OpenCityForm = Form.create({})(OpenCityForm);
-
Easy Mock城市管理的数据接口:/open_city
{ "code": 0, "msg": "", "list": { "item_list|10": [{ "id|+1": 1, "name": "@city", "mode|1-2": 1, "op_mode|1-2": 1, "franchisee_id": 77, "franchisee_name": "松果自营", "city_admins|1-2": [{ "user_name": "@cname", "user_id|+1": 10001 }], "open_time": "@datetime", "sys_user_name": "@cname", "update_time": 1546580667000 }] }, page: 1, page_size: 10, total: 20 }
- componentDidMount()中:调用this.requestList(),默认请求接口数据
componentDidMount(){ this.requestList(); } // 默认请求我们的接口数据 requestList = ()=>{ let _this = this; axios.ajax({ url: '/open_city', data:{ params:{ page:this.params.page } } }).then((res)=>{ let list = res.list.item_list.map((item, index) => { item.key = index; return item; }); this.setState({ list:list, pagination:Utils.pagination(res,(current)=>{ _this.params.page = current; _this.requestList(); }) }) }) }
-
Easy Mock城市开通的数据接口:/city/open
{ "code": 0, "list": "开通成功" }
-
【开通城市】按钮:监听onClick事件,调用this.handleOpenCity()显示弹框
state = { list:[], isShowOpenCity:false //默认隐藏弹框 } // 开通城市 handleOpenCity = ()=>{ this.setState({ isShowOpenCity:true }) }
-
Modal关键属性visible控制弹框的显示隐藏,关键事件onOk调用this.handleSubmit()提交表单信息
<Modal title="开通城市" visible={this.state.isShowOpenCity} onCancel={()=>{ this.setState({ isShowOpenCity:false }) }} onOk={this.handleSubmit} > <OpenCityForm wrappedComponentRef={(inst)=>{this.cityForm = inst;}}/> </Modal>
wrappedComponentRef属性:拿到表单中的信息对象inst,通过this.cityForm存到state中
-
城市开通信息提交
// 城市开通提交 handleSubmit = ()=>{ let cityInfo = this.cityForm.props.form.getFieldsValue(); console.log(cityInfo); axios.ajax({ url:'/city/open', data:{ params:cityInfo } }).then((res)=>{ if(res.code === 0){ message.success('开通成功'); this.setState({ isShowOpenCity:false }) this.requestList(); } }) }
- 实例代码
import React from 'react'; import { Card, Button, Table, Form, Select, Modal, message } from 'antd'; import axios from './../../axios/index'; import Utils from './../../utils/utils'; const FormItem = Form.Item; const Option = Select.Option; export default class City extends React.Component{