dva+antd+react项目，在antd pro的脚手架的基础上实现订单的增删改查

效果图：

该实例是在antd pro 的项目环境下修改实现：https://pro.ant.design/docs/getting-started-cn

添加订单页面：

 

 

订单列表页面：

antd pro这个脚手架是使用分层架构，来层层实现数据传递，pages存放页面，从页面获取数据传递到models层，然后再models中调用services的异步请求接口数据的方法。

订单管理的代码有点多，分如下几个页面：

先说说添加订单的页面实现：

pages:

OrderManager就是pages中的一个页面文件夹，modal里面是存放点击编辑弹出来的组件（在OrderTable中调用），models中的order.js就是订单管理的model层了（里面写的effects异步请求方法在OrderList和PengingList中通过dispatch调用），AddOrEditOrder.js是添加页面（在配置路由中调用），不要被名字迷惑了。OrderFilter.js是查询组件（在OrderList和PengingList中调用），OrderList.js是未处理的订单列表(在OrderTable中调用)，PendingList.js是已处理的订单列表(在OrderTable中调用)，OrderTable.js是Table的column（在OrderList和PengingList中调用），OrderTab.js是切换未处理订单和已处理订单的的组件（在配置路由中调用）。如看不懂描述请见谅，移步看代码。

代码（不是项目全部代码，仅供参考，项目不打算在GitHub上公开，请参考如下代码，如有问题希望指出）：

OrderTab.js：

import { Tabs, Row, Col } from 'antd';
import React, { PureComponent } from 'react';
import OrderList from './OrderList';
import PendingList from './PendingList';
import PageHeaderWrapper from '../../components/PageHeaderWrapper';

export default class OrderTab extends PureComponent {
    render() {
        const headerAction = null;
        return (
          <PageHeaderWrapper title='' action={headerAction}>
            <Tabs defaultActiveKey="default" size="large">
              <Tabs.TabPane tab="未处理订单" key="default" style={
  { marginTop: '1em' }}>
                <OrderList />
              </Tabs.TabPane>
              <Tabs.TabPane tab="已处理订单" key="second">
                <PendingList />
              </Tabs.TabPane>
            </Tabs>
          </PageHeaderWrapper>
         
        );
    }
}

 OrderTable.js：

import React, { Fragment } from 'react';
import _ from 'lodash';
import { Icon, Popconfirm } from 'antd';
import moment from 'moment';
import EditModal from './modals/EditOrder'

export const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
export const DATE_FORMAT = 'YYYY-MM-DD';

function getDateTimeString(msTimeOrDate) {
  if (msTimeOrDate === null) return null;
  if (msTimeOrDate && typeof msTimeOrDate === 'object') {
    if ('format' in msTimeOrDate && typeof msTimeOrDate.format === 'function')
      return msTimeOrDate.format(DATE_TIME_FORMAT);

    if (msTimeOrDate instanceof Date) return moment(msTimeOrDate).format(DATE_TIME_FORMAT);
  }
  // @ts-ignore
  return moment(new Date(msTimeOrDate)).format(DATE_TIME_FORMAT);
}


function newColumn(title, dataIndex, render = undefined ) {
    return { title, dataIndex, render, key: dataIndex };
}

export default function getOrderColumns(props,eventHandler) {
     const { onMarkOrder,onEditOrder,clearError,onEditSubmit} = eventHandler;
    const isDeal = {
        false: "已处理",
        true: "未处理",
    }
    return [
        // newColumn('订单编号', 'uuid'),
        newColumn('客户名称', 'username'),
        newColumn('电话', 'phone'),
        newColumn('鞋子类型','types'),
        newColumn('取鞋时间','take_time'),
        newColumn('送鞋时间', 'send_time'),
        newColumn('洗鞋费用', 'money'),
        newColumn('数量','sum'),
        // newColumn('地址','address'),
        // newColumn('备注','textarea'),
        newColumn('下单时间', 'time', it => {
          const m = moment(it);
          return (
            <span title={getDateTimeString(m)}>
              {m.fromNow()}
            </span>
          );
        }),
        newColumn('订单状态','status', it => (<span style={
  { color: '#ff0000'}}>{it}</span>)),
        {
            align: 'right',
            title: '操作',
            key: 'op',
            render: it => {
                return(
                  <Fragment>
                    {
                      it.status === '订单中' ? (
                        // 父组件
                        <EditModal 
                          onShowAsync={clearError}
                          onOk={onEditSubmit}
                        >
                          <a 
                            style={
  { marginLeft: 50 }} 
                            onClick={onEditOrder.bind(this, _.get(it,'uuid',''))} >
                            <Icon type="edit" />&nbsp;&nbsp;编辑&nbsp;&nbsp;&nbsp;
                          </a>
                        </EditModal>
                      ): null
                    }
                    {
                      it.status === "订单中" ? (
                        <a 
                          style={
  { color: "d9d9d9", marginRight: 10 }}
                          onClick={onMarkOrder.bind(this, _.get(it, 'uuid', ''))} >
                          <Icon type="check-circle" />&nbsp;&nbsp;&nbsp;标记已处理
                        </a>
                      ) : null
                    }
                    <Popconfirm
                      title={<span>确定删除该订单？<br /></span>}
                      okType="danger"
                      onConfirm={eventHandler.onDeleteOrder.bind(null, it)}
                      okText="确认删除"
                      cancelText="取消"
                    >
                      <a style={
  { color: '#FC1E39', marginLeft: 20 }}>
                        <Icon type="delete" />&nbsp;删除
                      </a>
                    </Popconfirm>
                  </Fragment>
                )
            }
        }


    ];
}

OrderList.js: 

import React ,{ PureComponent,Fragment} from 'react';
import _ from 'lodash';
import { connect } from 'dva';
import moment from 'moment';
import { Form, Table, Card ,Input, Row, Col, Button,Badge,message} from 'antd';
import getOrderColumns from './OrderTable';
import { easyRouteTo } from '../../utils/easyDispatch';

function newRequiredRule(msg) {
  return { required: true, message: msg };
}

@connect(({ order, loading }) => ({
    order,
    loading: loading.models.order,
}))
@Form.create()
class OrderList extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
           error: '',
           formValues: {},
        }
    }


    componentDidMount() {
      this.query();
    }

    onDeleteOrder(orderList) {
      if (!orderList) return;
      this.clearError();
      console.warn('page uuid',orderList.uuid);
      const { dispatch } = this.props;
      dispatch({
        type: 'order/fetchDeleteOeder',
        payload: {uuid: orderList.uuid },
      });
      this.query();
    }

    clearError() { this.setState({ error: '' }); }

    query() {
      this.clearError();
      const { dispatch } = this.props;
        dispatch({
            type: 'order/fetchOederList',
        });
    }

    onMarkOrder(uuid) {
      const { dispatch } = this.props;
      console.warn('page uuid',uuid)
      dispatch({
        type: 'order/fetchonMarkOrder',
        payload: { uuid }
      });
    }

    handleSearch =e => {
      e.preventDefault();
      const { dispatch, form } = this.props;
       form.validateFields((err, fieldsValue) => {
         if (err) return;
         this.setState({
           formValues: { ...fieldsValue },
         });
         dispatch({
           type: 'order/fetchqueryByNameOrPhone',
           payload: {...