【共享单车】—— React后台管理系统开发手记：城市管理和订单管理

【共享单车】—— 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
  }

1. 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": "开通成功"
  }
  

1. 【开通城市】按钮：监听onClick事件，调用this.handleOpenCity()显示弹框

   state = {
       list:[],
       isShowOpenCity:false //默认隐藏弹框
   }
   
   // 开通城市
   handleOpenCity = ()=>{
       this.setState({
               isShowOpenCity:true
       })
   }

2. 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中

   

3. 城市开通信息提交

   // 城市开通提交
   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 Re