- 优化订单列表

- 添加订单发货流程
This commit is contained in:
sin 2019-04-05 17:54:19 +08:00
parent 10807b0c6f
commit 2bcaaf2027
9 changed files with 303 additions and 71 deletions

View File

@ -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: {},
},

View File

@ -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,
};
},
},
};

View File

@ -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;

View File

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

View File

@ -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;
}

View File

@ -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>
);
}

View File

@ -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',

View File

@ -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;

View File

@ -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;
}
}