- 优化订单列表

- 添加订单发货流程

admin-web/config/proxy/proxy.dev.js

@@ -2,24 +2,25 @@
 
 export default {
   '/admin-api/': {
+    target: 'http://180.167.213.26:18083/',
     // target: 'http://180.167.213.26:18083/',
-    target: 'http://127.0.0.1:18083/',
     changeOrigin: true,
     pathRewrite: {},
   },
   '/product-api/': {
-    // target: 'http://180.167.213.26:18083/',
-    target: 'http://127.0.0.1:18081/',
+    target: 'http://180.167.213.26:18083/',
+    // target: 'http://127.0.0.1:18081/',
     changeOrigin: true,
     pathRewrite: {},
   },
   '/order-api/': {
+    // target: 'http://180.167.213.26:18084/',
     target: 'http://127.0.0.1:18084/',
     changeOrigin: true,
     pathRewrite: {},
   },
   '/promotion-api/': {
-    target: 'http://127.0.0.1:18085/',
+    target: 'http://180.167.213.26:18085/',
     changeOrigin: true,
     pathRewrite: {},
   },

admin-web/src/models/order/orderDelivery.js

@@ -0,0 +1,67 @@
+import { message } from 'antd';
+import { orderItems, getOrderRecipientInfo, orderDeliver } from '../../services/order';
+
+export default {
+  namespace: 'orderDelivery',
+
+  state: {
+    orderId: null,
+    visible: false,
+    list: [],
+    orderRecipient: {},
+    selectedRowKeys: [],
+  },
+
+  effects: {
+    *getOrderItems({ payload }, { call, put }) {
+      const response1 = yield call(orderItems, payload);
+      const response2 = yield call(getOrderRecipientInfo, payload);
+
+      yield put({
+        type: 'getOrderItemsSuccess',
+        payload: {
+          list: response1.data,
+          orderRecipient: response2.data,
+        },
+      });
+    },
+    *deliver({ payload }, { call, put }) {
+      const { code } = yield call(orderDeliver, payload);
+      if (code === 0) {
+        message.info('发货成功!');
+        yield put({
+          type: 'changeVisible',
+          payload: {
+            visible: false,
+          },
+        });
+      }
+    },
+  },
+
+  reducers: {
+    getOrderItemsSuccess(state, { payload }) {
+      const { list, orderRecipient } = payload;
+      return {
+        ...state,
+        list,
+        orderRecipient,
+      };
+    },
+    changeVisible(state, { payload }) {
+      const { visible, orderId } = payload;
+      return {
+        ...state,
+        visible,
+        orderId,
+      };
+    },
+    changeSelectedRowKeys(state, { payload }) {
+      const { selectedRowKeys } = payload;
+      return {
+        ...state,
+        selectedRowKeys,
+      };
+    },
+  },
+};

admin-web/src/pages/Order/OrderDelivery.js

@@ -1,5 +1,163 @@
-// import React, { PureComponent } from 'react';
-//
-// class OrderDelivery extends PureComponent {}
-//
-// export default OrderDelivery;
+import React from 'react';
+import { Table, Modal, Card, Form, Input, message } from 'antd';
+import DictionaryText from '@/components/Dictionary/DictionaryText';
+import DictionarySelect from '@/components/Dictionary/DictionarySelect';
+import dictionary from '@/utils/dictionary';
+import styles from './OrderDelivery.less';
+
+const OrderDelivery = Form.create()(props => {
+  const columns = [
+    {
+      title: '商品',
+      dataIndex: 'skuName',
+      render: (text, row) => {
+        return (
+          <div>
+            <img className={styles.goodImg} alt={row.skuName} src={row.skuImage} />
+            <span>{row.skuName}</span>
+          </div>
+        );
+      },
+    },
+    {
+      title: '数量',
+      dataIndex: 'quantity',
+      render: quantity => <span>{quantity}</span>,
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      sorter: true,
+      render: status => <DictionaryText dicKey={dictionary.ORDER_STATUS} dicValue={status} />,
+    },
+    {
+      title: '运输号',
+      dataIndex: 'orderLogisticsId',
+      width: 200,
+      render: orderLogisticsId => {
+        return <span>{orderLogisticsId || '-'}</span>;
+      },
+    },
+  ];
+
+  const handleCancel = () => {
+    const { dispatch } = props;
+    dispatch({
+      type: 'orderDelivery/changeVisible',
+      payload: {
+        visible: false,
+      },
+    });
+  };
+
+  const handleOk = e => {
+    e.preventDefault();
+    const { dispatch, form } = props;
+    const { selectedRowKeys, orderId } = props.orderDelivery;
+    form.validateFields((err, fields) => {
+      if (err) return;
+      console.log('fields', fields);
+
+      console.log('selectedRowKeys', selectedRowKeys);
+      if (selectedRowKeys.length <= 0) {
+        message.error('至少选择一个发货的商品！');
+      } else {
+        dispatch({
+          type: 'orderDelivery/deliver',
+          payload: {
+            ...fields,
+            orderId,
+            orderItemIds: selectedRowKeys,
+          },
+        });
+      }
+    });
+  };
+
+  const { loading, orderDelivery } = props;
+  const { getFieldDecorator } = props.form;
+  const { list, visible, orderRecipient } = orderDelivery;
+  const { name, mobile, address } = orderRecipient || {};
+
+  // rowSelection objects indicates the need for row selection
+  const rowSelection = {
+    onChange: (selectedRowKeys, selectedRows) => {
+      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+      props.dispatch({
+        type: 'orderDelivery/changeSelectedRowKeys',
+        payload: {
+          selectedRowKeys,
+        },
+      });
+    },
+    onSelect: (record, selected, selectedRows) => {
+      console.log(record, selected, selectedRows);
+    },
+    onSelectAll: (selected, selectedRows, changeRows) => {
+      console.log(selected, selectedRows, changeRows);
+    },
+  };
+
+  return (
+    <Modal
+      destroyOnClose
+      title="发货"
+      visible={visible}
+      onOk={handleOk}
+      okText="保存"
+      onCancel={handleCancel}
+      confirmLoading={loading}
+      width={800}
+    >
+      <Table
+        rowKey="id"
+        columns={columns}
+        dataSource={list}
+        loading={loading}
+        pagination={false}
+        rowSelection={rowSelection}
+        // onSelectRow={handleSelectRows}
+        // onChange={handleStandardTableChange}
+      />
+
+      <Card loading={loading}>
+        <div>
+          <h3>配送信息</h3>{' '}
+        </div>
+        <div>
+          收货人: {name} ({mobile})
+        </div>
+        <div>配件方式: 快递 TODO暂时只有一种</div>
+        <div>收件地址: {address}</div>
+      </Card>
+
+      <Card loading={loading}>
+        <div>
+          <h3>发货方式</h3>{' '}
+        </div>
+        <Form>
+          <Form.Item label="物流">
+            {getFieldDecorator('logistics', {
+              rules: [{ required: true, message: '必选!' }],
+            })(
+              <DictionarySelect
+                style={{ minWidth: '100%' }}
+                dicKey={dictionary.LOGISTICS_COMPANY}
+              />
+            )}
+          </Form.Item>
+          <Form.Item label="快递号">
+            {getFieldDecorator('logisticsNo', {
+              rules: [{ required: true, message: '必选!' }],
+            })(<Input placeholder="请输入快递号." />)}
+          </Form.Item>
+          <Form.Item>
+            *请仔细填写物流公司及快递单号，发货后24小时内仅支持做一次更正，逾期不可修改
+          </Form.Item>
+        </Form>
+      </Card>
+    </Modal>
+  );
+});
+
+export default OrderDelivery;

admin-web/src/pages/Order/OrderDelivery.less

@@ -0,0 +1,9 @@
+@import '~antd/lib/style/themes/default.less';
+@import '~@/utils/utils.less';
+
+.goodImg {
+  @size: 100px;
+
+  width: @size;
+  height: @size;
+}

admin-web/src/pages/Order/OrderDetails.less

@@ -1,49 +1,9 @@
 @import '~antd/lib/style/themes/default.less';
 @import '~@/utils/utils.less';
 
-.tableList {
-  .tableListOperator {
-    margin-bottom: 16px;
-    button {
-      margin-right: 8px;
-    }
-  }
-}
+.goodImg {
+  @size: 100;
 
-.tableListForm {
-  :global {
-    .ant-form-item {
-      display: flex;
-      margin-right: 0;
-      margin-bottom: 24px;
-      > .ant-form-item-label {
-        width: auto;
-        padding-right: 8px;
-        line-height: 32px;
-      }
-      .ant-form-item-control {
-        line-height: 32px;
-      }
-    }
-    .ant-form-item-control-wrapper {
-      flex: 1;
-    }
-  }
-  .submitButtons {
-    display: block;
-    margin-bottom: 24px;
-    white-space: nowrap;
-  }
-}
-
-@media screen and (max-width: @screen-lg) {
-  .tableListForm :global(.ant-form-item) {
-    margin-right: 24px;
-  }
-}
-
-@media screen and (max-width: @screen-md) {
-  .tableListForm :global(.ant-form-item) {
-    margin-right: 8px;
-  }
+  width: @size;
+  height: @size;
 }

admin-web/src/pages/Order/OrderList.js

@@ -6,6 +6,7 @@ import { Button, Card, Col, Divider, Form, Input, Row, Tabs, DatePicker, List }
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 import DictionaryText from '@/components/Dictionary/DictionaryText';
 import OrderUpdatePayAmount from './OrderUpdatePayAmount';
+import OrderDelivery from './OrderDelivery';
 import OrderRemark from './OrderRemark';
 import OrderCancel from './OrderCancel';
 import dictionary from '@/utils/dictionary';
@@ -18,8 +19,8 @@ const { TabPane } = Tabs;
 
 const OrderContent = props => {
   const { dispatch, item } = props;
-  const { createTime, status, payAmount } = item;
-  const { name, mobile } = item.orderRecipient;
+  const { createTime, status, payAmount, id } = item;
+  const { name, mobile } = item.orderRecipient || {};
 
   const handleUpdatePayAmount = updateOrderItem => {
     dispatch({
@@ -33,24 +34,29 @@ const OrderContent = props => {
     });
   };
 
-  // const handleCancelOrder = ({ orderId }) => {
-  //   dispatch({
-  //     type: 'orderList/changeOrderCancelVisible',
-  //     payload: {
-  //       orderCancelVisible: true,
-  //       orderId,
-  //     },
-  //   });
-  // };
-  //
-  // const handleRenderGoods = () => {};
+  const handleOrderDelivery = () => {
+    dispatch({
+      type: 'orderDelivery/changeVisible',
+      payload: {
+        visible: true,
+        orderId: id,
+      },
+    });
+
+    dispatch({
+      type: 'orderDelivery/getOrderItems',
+      payload: {
+        orderId: id,
+      },
+    });
+  };
 
   const renderStatusButtons = () => {
     let res = '';
     if (status === 1) {
       res = <Button>取消订单</Button>;
     } else if (status === 2) {
-      res = <Button>发货</Button>;
+      res = <Button onClick={() => handleOrderDelivery()}>发货</Button>;
     }
     return res;
   };
@@ -58,7 +64,7 @@ const OrderContent = props => {
   const renderGoods = orderItems => {
     return orderItems.map(({ skuName, skuImage, quantity, price }) => {
       return (
-        <div className={styles.orderGoods}>
+        <div key={skuName} className={styles.orderGoods}>
           <img alt={skuName} className={`${styles.image}`} src={skuImage} />
           <div className={styles.contentItem}>
             <div>
@@ -95,7 +101,7 @@ const OrderContent = props => {
         <div>
           <DictionaryText dicKey={dictionary.ORDER_STATUS} dicValue={status} />
         </div>
-        <div>{renderStatusButtons()}</div>
+        <div>{renderStatusButtons(props)}</div>
       </div>
       <div className={styles.contentItem}>
         <div className={styles.columnName}>(实付金额)</div>
@@ -243,10 +249,11 @@ const SearchForm = Form.create()(props => {
   );
 });
 
-@connect(({ orderList, loading }) => ({
+@connect(({ orderList, orderDelivery, loading }) => ({
   orderList,
   list: orderList.list,
   loading: loading.models.orderList,
+  orderDelivery,
 }))
 class BasicList extends PureComponent {
   componentDidMount() {
@@ -326,6 +333,8 @@ class BasicList extends PureComponent {
         <OrderUpdatePayAmount {...this.props} />
         <OrderRemark {...this.props} />
         <OrderCancel {...this.props} />
+
+        <OrderDelivery {...this.props} />
       </PageHeaderWrapper>
     );
   }

admin-web/src/services/order.js

@@ -8,6 +8,27 @@ export async function orderPage(params) {
   });
 }
 
+export async function orderItems(params) {
+  return request(`/order-api/admins/order/order_items?${stringify(params)}`, {
+    method: 'GET',
+  });
+}
+
+export async function getOrderRecipientInfo(params) {
+  return request(`/order-api/admins/order/order_recipient_info?${stringify(params)}`, {
+    method: 'GET',
+  });
+}
+
+export async function orderDeliver(params) {
+  return request(`/order-api/admins/order/order_deliver`, {
+    method: 'POST',
+    body: {
+      ...params,
+    },
+  });
+}
+
 export async function updateOrderItemPayAmount(params) {
   return request(`/order-api/admins/order/order_item/update_pay_amount?${stringify(params)}`, {
     method: 'PUT',

admin-web/src/utils/dictionary.js

@@ -4,6 +4,7 @@ const DictionaryConstants = {
   GENDER: 'gender',
   ORDER_STATUS: 'order_status',
   ORDER_CANCEL_REASONS: 'order_cancel_reasons',
+  LOGISTICS_COMPANY: 'logistics_company',
 };
 
 export default DictionaryConstants;

admin-web/src/utils/request.qs.js

@@ -11,7 +11,13 @@ function filterEmptyStr(params) {
     const res = {};
     for (const key in object) {
       const val = object[key];
-      if (val !== undefined && val !== 'undefined' && val !== null && val !== 'null') {
+      if (
+        new String(val).length > 0 &&
+        val !== undefined &&
+        val !== 'undefined' &&
+        val !== null &&
+        val !== 'null'
+      ) {
         res[key] = val;
       }
     }