增加订单管理模块

src/common/menu.js

@@ -91,6 +91,7 @@ const menuData = () => {
       }, {
         name: '订单列表',
         icon: <RBIcon type="order" />,
+        path: 'order',
       }],
     }, {
       name: '厂商管理',

src/common/router.js

@@ -292,6 +292,12 @@ export const getRouterData = (app) => {
     '/trade/shopcart/detail/:id': {
       component: dynamicWrapper(app, ['trade'], () => import('../routes/Trade/ShopCart/ShopCartDetail')),
     },
+    '/trade/order': {
+      component: dynamicWrapper(app, [], () => import('../routes/Trade/Order')),
+    },
+    '/trade/order/list': {
+      component: dynamicWrapper(app, ['trade'], () => import('../routes/Trade/Order/OrderList')),
+    },
     // 统计概览相关路由注册
     '/dashboard/analysis': {
       component: dynamicWrapper(app, ['chart'], () => import('../routes/Dashboard/Analysis')),

src/models/trade.js

@@ -36,6 +36,21 @@ export default {
         });
       }
     },
+    *fetchOrderList({ payload }, { call, put }) {
+      const response = yield call(queryOrderList, payload);
+      if (response.success) {
+        message.success('加载订单列表成功');
+        yield put({
+          type: 'querySuccess',
+          payload: {
+            list: response.data.list || [],
+            pageSize: response.data.pageSize,
+            totalSize: response.data.totalSize,
+            pageNo: response.data.pageNo,
+          },
+        });
+      }
+    },
     *createOrderItem({ payload }, { call }) {
       const response = yield call(createOrderItem, payload);
       if (response.success) {

src/routes/Trade/Order/OrderList.js

@@ -0,0 +1,207 @@
+import React, { Component } from 'react';
+import moment from 'moment';
+import { connect } from 'dva';
+import { routerRedux } from 'dva/router';
+import { Card, Button, Popover, message } from 'antd';
+import { StandardTableList } from '../../../components/RBList/index';
+import { addRowKey, renderOrderStatus, renderOrderSplitStatus, provinceCodeToName } from '../../../utils/utils';
+
+const Message = message;
+@connect(({ loading, trade }) => ({
+  trade,
+  loading: loading.models.trade,
+}))
+export default class OrderListPage extends Component {
+  constructor(props) {
+    super(props);
+    const { state } = props.location;
+    this.state = {
+      UIParams: (state || {}).UIParams, // 组件的状态参数
+      Queryers: (state || {}).Queryers, // 查询的条件参数
+    };
+  }
+  componentDidMount() {
+    this.props.dispatch({
+      type: 'trade/fetchOrderList',
+      payload: { ...this.state.Queryers },
+    });
+  }
+  handleCreateOperation = () => {
+  }
+  handleFilterOperation = (params, states) => {
+    this.props.dispatch({
+      type: 'trade/fetchOrderList',
+      payload: params,
+    });
+    this.setState({
+      UIParams: states,
+      Queryers: params,
+    });
+  }
+  handleBatchOperation = () => {
+    Message.info('暂不支持批量操作!');
+  }
+
+  render() {
+    const { loading, trade } = this.props;
+    const { list, totalSize, pageSize, pageNo } = trade;
+
+    const renderOperation = () => {
+      return (
+        <div>
+          <Button
+            size="small"
+            type="primary"
+          >详情
+          </Button>
+        </div>
+      );
+    };
+    const batchActions = [{
+      key: 'delete',
+      name: '批量清空',
+    }, {
+    }];
+    const basicSearch = {
+      keys: [{
+        name: '订单编号',
+        field: 'code',
+      }, {
+        name: '终端编号',
+        field: 'userCode',
+      }],
+    };
+    const pagination = {
+      pageNo,
+      pageSize,
+      totalSize,
+    };
+    const columns = [{
+      title: '订单编号',
+      key: 1,
+      dataIndex: 'serialNo',
+      width: '13%',
+    }, {
+      title: '用户信息',
+      key: 2,
+      width: '27%',
+      render: (_, record) => {
+        const { userCode, provinceCode, cityName, zoneName, merchantName } = record;
+        return (
+          <div>
+            <p>
+              <span>终端编号:&nbsp;</span>
+              {userCode}
+            </p>
+            <p>
+              <span>所属校区:&nbsp;</span>
+              {`${provinceCodeToName(provinceCode)}${cityName}${zoneName}`}
+            </p>
+            <p>
+              <span>所属渠道:&nbsp;</span>
+              {merchantName}
+            </p>
+          </div>
+        );
+      },
+    }, {
+      title: '价格信息',
+      key: 3,
+      width: '15%',
+      render: (_, record) => {
+        const { originPrice, adjustPrice, finalPrice } = record;
+        return (
+          <div>
+            <p>
+              <span>初始价格:&nbsp;</span>
+              {originPrice}
+            </p>
+            <p>
+              <span>优惠价格:&nbsp;</span>
+              {adjustPrice}
+            </p>
+            <p>
+              <span>实际售价:&nbsp;</span>
+              {finalPrice}
+            </p>
+          </div>
+        );
+      },
+    }, {
+      title: '收货信息',
+      key: 4,
+      width: '8%',
+      render: (_, record) => {
+        const { name, mobile, address } = record;
+        return (
+          <Popover
+            placement="top"
+            content={
+              <div>
+                <p>
+                  <span>收货人:&nbsp;</span>
+                  {name}
+                </p>
+                <p>
+                <span>手机号码:&nbsp;</span>
+                {mobile}
+                </p>
+                <p>
+                <span>收货地址:&nbsp;</span>
+                {address}
+                </p>
+              </div>
+            }
+          >
+            {name}
+          </Popover>
+        );
+      },
+    }, {
+      title: '拆单状态',
+      key: 5,
+      dataIndex: 'splitStatus',
+      render: text => renderOrderSplitStatus(text),
+      width: '8%',
+    }, {
+      title: '订单状态',
+      key: 6,
+      dataIndex: 'orderStatus',
+      render: text => renderOrderStatus(text),
+      width: '8%',
+    }, {
+      title: '下单时间',
+      key: 7,
+      dataIndex: 'gmtCreated',
+      render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
+      width: '16%',
+    }, {
+      title: '操作',
+      key: 8,
+      dataIndex: 'operation',
+      render: (_, record) => renderOperation(record),
+      width: '5%',
+    }];
+    return (
+      <Card>
+        <StandardTableList
+          columns={columns}
+          loading={loading}
+          showStatusSelect={false}
+          dataSource={addRowKey(list)}
+          header={{
+            basicSearch,
+            onFilterClick: this.handleFilterOperation,
+            onCreateClick: this.handleCreateOperation,
+          }}
+          footer={{
+            pagination,
+            batchActions,
+            onBatchClick: this.handleBatchOperation,
+          }}
+          keepUIState={{ ...this.state.UIParams }}
+        />
+      </Card>
+    );
+  }
+}

src/utils/config.js

@@ -16,6 +16,10 @@ const ORDER_FORSEND = 'FORSEND';
 const ORDER_SENT = 'SENT';
 const ORDER_RECEIVED = 'RECEIVED';
 const ORDER_REFUND = 'REFUND';
+const ORDER_COMPLETE = 'COMPLETE';
+const ORDER_SPLITED = 'YES';
+const ORDER_UNSPLIT = 'UN';
+const ORDER_NOSPLIT = 'NO';
 
 const DOMAIN_CP = 1010;
 const DOMAIN_LJ = 2010;
@@ -100,6 +104,10 @@ export {
   ORDER_SENT,
   ORDER_REFUND,
   ORDER_RECEIVED,
+  ORDER_COMPLETE,
+  ORDER_NOSPLIT,
+  ORDER_SPLITED,
+  ORDER_UNSPLIT,
   PAGE_SIZE,
   DOMAIN_CP,
   DOMAIN_LJ,

src/utils/utils.js

@@ -3,6 +3,17 @@ import moment from 'moment';
 import { Badge, Avatar } from 'antd';
 import {
   ossHost,
+  ORDER_UNPAID,
+  ORDER_RECEIVED,
+  ORDER_REFUND,
+  ORDER_SENT,
+  ORDER_FORSEND,
+  ORDER_CANCEL,
+  ORDER_PAYOK,
+  ORDER_COMPLETE,
+  ORDER_UNSPLIT,
+  ORDER_SPLITED,
+  ORDER_NOSPLIT,
   STATUS_NORMAL,
   STATUS_DELETE,
   PRODUCT_COURSE,
@@ -368,3 +379,39 @@ export function checkProductType(typeStr) {
       return '';
   }
 }
+
+export function renderOrderStatus(status) {
+  switch (status) {
+    case ORDER_UNPAID:
+      return <Badge status="default" text="未支付" />;
+    case ORDER_CANCEL:
+      return <Badge status="error" text="已作废" />;
+    case ORDER_PAYOK:
+      return <Badge status="processing" text="已支付" />;
+    case ORDER_FORSEND:
+      return <Badge status="processing" text="待发货" />;
+    case ORDER_SENT:
+      return <Badge status="processing" text="已发货" />;
+    case ORDER_RECEIVED:
+      return <Badge status="processing" text="已收货" />;
+    case ORDER_COMPLETE:
+      return <Badge status="success" text="已完成" />;
+    case ORDER_REFUND:
+      return <Badge status="warning" text="已退款" />;
+    default:
+      return '未定义';
+  }
+}
+
+export function renderOrderSplitStatus(status) {
+  switch (status) {
+    case ORDER_NOSPLIT:
+      return '未拆单';
+    case ORDER_UNSPLIT:
+      return '无需拆单';
+    case ORDER_SPLITED:
+      return '已拆单';
+    default:
+      return '';
+  }
+}