Skip to content

Y
yudao-cloud
提交 3cbe0ba3 authored 作者: sin's avatar sin
浏览文件
操作

- 修改订单展示

- 增加实付金额修改功能
上级 509d3798
隐藏空白字符变更
内嵌 并排
正在显示 包含 281 行增加 和 94 行删除
admin-web/src/models/order/orderList.js
浏览文件 @ 3cbe0ba3
import { message } from 'antd';
import { orderPage, updateOrderItem } from '../../services/order';
import { orderPage, updateOrderItem, updateOrderItemPayAmount } from '../../services/order';
export default {
namespace: 'orderList',
......@@ -13,11 +13,26 @@ export default {
},
dataSource: [],
},
payAmountVisible: false,
payAmount: 0,
orderId: 0,
orderItemId: 0,
searchParams: {},
},
effects: {
*queryPage({ payload }, { call, put }) {
const response = yield call(orderPage, payload);
yield put({
type: 'changeSearchParams',
payload: {
searchParams: {
...payload,
},
},
});
message.info('查询成功!', response);
const { total, orders } = response.data;
yield put({
......@@ -45,6 +60,23 @@ export default {
},
});
},
*updatePayAmount({ payload }, { call, put }) {
const { searchParams, params } = payload;
yield call(updateOrderItemPayAmount, params);
yield put({
type: 'changePayAmountVisible',
payload: {
payAmountVisible: false,
},
});
yield put({
type: 'queryPage',
payload: {
...searchParams,
},
});
},
},
reducers: {
......@@ -55,5 +87,17 @@ export default {
list,
};
},
changePayAmountVisible(state, { payload }) {
return {
...state,
...payload,
};
},
changeSearchParams(state, { payload }) {
return {
...state,
...payload,
};
},
},
};
admin-web/src/pages/Order/OrderList.js
浏览文件 @ 3cbe0ba3
import React, { Fragment, PureComponent } from 'react';
import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { Button, Card, Col, Divider, Form, Input, Row, Table, DatePicker } from 'antd';
import { Button, Card, Col, Divider, Form, Input, Row, Tabs, DatePicker, List } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DictionaryText from '@/components/Dictionary/DictionaryText';
import DictionarySelect from '@/components/Dictionary/DictionarySelect';
import OrderUpdatePayAmount from './OrderUpdatePayAmount';
import dictionary from '@/utils/dictionary';
import styles from './OrderList.less';
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const { TabPane } = Tabs;
const OrderList = props => {
const { list, dispatch, loading, handleModalVisible } = props;
const OrderContent = orderItem => {
const { dispatch, skuName, skuImage, quantity, price, payAmount, createTime, status } = orderItem;
// 翻页
const onPageChange = page => {
const { searchParams } = props;
const handleUpdatePayAmount = updateOrderItem => {
dispatch({
type: 'adminList/query',
type: 'orderList/changePayAmountVisible',
payload: {
pageNo: page.current,
pageSize: page.pageSize,
...searchParams,
payAmountVisible: true,
payAmount: updateOrderItem.payAmount,
orderId: updateOrderItem.orderId,
orderItemId: updateOrderItem.id,
},
});
};
const columns = [
{
title: '订单id',
dataIndex: 'id',
},
{
title: '用户',
dataIndex: 'userId',
},
{
title: '订单号',
dataIndex: 'orderNo',
},
{
title: '金额',
dataIndex: 'price',
render(val) {
return <span>{val} 元</span>;
},
},
{
title: '状态',
dataIndex: 'status',
render(val) {
return <DictionaryText dicKey={dictionary.ORDER_STATUS} dicValue={val} />;
},
},
{
title: '付款时间',
dataIndex: 'paymentTime',
render: val => (!val ? '' : <span>{moment(val).format('YYYY-MM-DD HH:mm')}</span>),
},
{
title: '发货时间',
dataIndex: 'deliveryTime',
render: val => (!val ? '' : <span>{moment(val).format('YYYY-MM-DD HH:mm')}</span>),
},
{
title: '收货时间',
dataIndex: 'receiverTime',
render: val => (!val ? '' : <span>{moment(val).format('YYYY-MM-DD HH:mm')}</span>),
},
{
title: '成交时间',
dataIndex: 'closingTime',
render: val => (!val ? '' : <span>{moment(val).format('YYYY-MM-DD HH:mm')}</span>),
},
{
title: '创建时间',
dataIndex: 'createTime',
render: val => (!val ? '' : <span>{moment(val).format('YYYY-MM-DD HH:mm')}</span>),
},
{
title: '操作',
width: 100,
render: (text, record) => {
return (
<Fragment>
<a onClick={() => handleModalVisible(true, 'update', record)}>编辑</a>
<Divider type="vertical" />
</Fragment>
);
},
},
];
return (
<div className={styles.order}>
<img alt={skuName} className={`${styles.image}`} src={skuImage} />
<div className={styles.contentItem}>
<div className={styles.columnName}>(名称)</div>
<div>
<a>{skuName}</a>
</div>
<div>秋季精选</div>
</div>
<div className={styles.contentItem}>
<div className={styles.columnName}>(金额/物件)</div>
<div>{quantity}件</div>
<div>
{price / 100} 元/{quantity * (price / 100)} 元
</div>
</div>
<div className={styles.contentItem}>
<div className={styles.columnName}>(购买人)</div>
<div>范先生</div>
<div>13302926050</div>
</div>
<div className={styles.contentItem}>
<div className={styles.columnName}>(下单时间)</div>
<div>{moment(createTime).format('YYYY-MM-DD HH:mm')}</div>
<div>&nbsp;</div>
</div>
<div className={styles.contentItem}>
<div className={styles.columnName}>(订单状态)</div>
<div>
<DictionaryText dicKey={dictionary.ORDER_STATUS} dicValue={status} />
</div>
<div>{[0, 1, 2].indexOf(status) ? <Button>取消订单</Button> : ''}</div>
</div>
<div className={styles.contentItem}>
<div className={styles.columnName}>(实付金额)</div>
<div>{payAmount / 100}元</div>
<div>
<a onClick={() => handleUpdatePayAmount(orderItem)}>修改价格</a>
</div>
</div>
</div>
);
};
const OrderList = props => {
const { list, dispatch, loading } = props;
const { pagination, dataSource } = list;
const tableScroll = {
x: 1400,
const paginationProps = {
...pagination,
};
return (
<Table
<List
size="large"
rowKey="id"
columns={columns}
dataSource={list.dataSource}
loading={loading}
pagination={list.pagination}
onChange={onPageChange}
scroll={tableScroll}
pagination={paginationProps}
dataSource={dataSource}
renderItem={item => (
<List.Item>
<div className={styles.orderGroup}>
<div className={styles.header}>
<div>
<span>订单号: {item.orderNo}</span>
<Divider type="vertical" />
<span>支付金额: {item.payAmount / 100} 元</span>
</div>
<div>
<a>查看详情</a>
<Divider type="vertical" />
<a>备注</a>
</div>
</div>
{item.orderItems.map(orderItem => {
return <OrderContent key={orderItem.id} dispatch={dispatch} {...orderItem} />;
})}
</div>
</List.Item>
)}
/>
);
};
// SearchForm
const SearchForm = props => {
const SearchForm = Form.create()(props => {
const {
form: { getFieldDecorator },
form,
......@@ -176,11 +180,6 @@ const SearchForm = props => {
{getFieldDecorator('orderNo')(<Input placeholder="请输入订单号" />)}
</FormItem>
</Col>
<Col md={8} sm={24}>
<FormItem label="状态">
{getFieldDecorator('status', {})(<DictionarySelect dicKey={dictionary.ORDER_STATUS} />)}
</FormItem>
</Col>
</Row>
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
......@@ -203,14 +202,13 @@ const SearchForm = props => {
</Row>
</Form>
);
};
});
@connect(({ orderList, loading }) => ({
orderList,
list: orderList.list,
loading: loading.models.orderList,
}))
@Form.create()
class BasicList extends PureComponent {
componentDidMount() {
const {
......@@ -225,6 +223,9 @@ class BasicList extends PureComponent {
queryList = params => {
const { dispatch } = this.props;
// 保存每次操作 searchParams
this.searchParams = params;
// dispatch
dispatch({
type: 'orderList/queryPage',
payload: {
......@@ -249,6 +250,15 @@ class BasicList extends PureComponent {
});
};
handleTabsChange = key => {
const params = {
...this.searchParams,
status: key,
};
this.queryList(params);
};
render() {
return (
<PageHeaderWrapper>
......@@ -263,9 +273,20 @@ class BasicList extends PureComponent {
<div className={styles.tableListForm}>
<SearchForm {...this.props} handleSearch={this.handleSearch} />
</div>
<Tabs defaultActiveKey={null} onChange={this.handleTabsChange}>
<TabPane tab="全部" key={null} />
<TabPane tab="待付款" key={0} />
<TabPane tab="待发货" key={1} />
<TabPane tab="已发货" key={2} />
<TabPane tab="已完成" key={3} />
<TabPane tab="已关闭" key={4} />
</Tabs>
<OrderList {...this.props} handleEditorClick={this.handleEditorClick} />
</Card>
</div>
<OrderUpdatePayAmount {...this.props} />
</PageHeaderWrapper>
);
}
......
admin-web/src/pages/Order/OrderList.less
浏览文件 @ 3cbe0ba3
......@@ -235,3 +235,58 @@
margin-right: 8px;
}
}
// 订单content
.orderGroup {
@padding-slid: 10px;
display: flex;
flex: 1;
flex-direction: column;
justify-content: flex-start;
.header {
display: flex;
flex: 1;
justify-content: space-between;
padding-right: @padding-slid;
padding-left: @padding-slid;
font-weight: bold;
font-size: 15px;
line-height: 35px;
background-color: #c0bfb9;
}
.order {
display: flex;
flex: 1;
flex-direction: row;
padding-right: @padding-slid;
padding-left: @padding-slid;
line-height: 100px;
border: 1px solid #c0bfb9;
.contentItem {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
> div {
line-height: 30px;
}
.columnName {
font-weight: bold;
font-size: 12px;
}
}
.image {
width: 100px;
height: 100px;
}
}
}
admin-web/src/pages/Order/OrderUpdatePayAmount.js 0 → 100644
浏览文件 @ 3cbe0ba3
import React from 'react';
import { Form, Input, Modal } from 'antd';
const FormItem = Form.Item;
// 订单 - 更新支付金额
const OrderUpdatePayAmount = Form.create()(props => {
const { dispatch, loading } = props;
const { orderId, orderItemId, payAmount, payAmountVisible, searchParams } = props.orderList;
const { getFieldDecorator, getFieldsValue } = props.form;
const handleOk = e => {
e.preventDefault();
const fieldsValue = getFieldsValue();
dispatch({
type: 'orderList/updatePayAmount',
payload: {
params: {
payAmount: fieldsValue.payAmount * 100,
orderId,
orderItemId,
},
searchParams,
},
});
};
const handleCancel = () => {
dispatch({
type: 'orderList/changePayAmountVisible',
payload: {
payAmountVisible: false,
},
});
};
return (
<Modal
destroyOnClose
title="修改实付金额"
visible={payAmountVisible}
onOk={handleOk}
okText="保存"
onCancel={handleCancel}
confirmLoading={loading}
>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="用户名">
{getFieldDecorator('payAmount', {
rules: [
{ required: true, message: '请输入需要修改的金额！' },
{ max: 10000, min: 0, message: '金额值 0 - 100000 元' },
],
initialValue: payAmount / 100,
})(<Input placeholder="请输入修改的金额" />)}
</FormItem>
</Modal>
);
});
export default OrderUpdatePayAmount;
admin-web/src/services/order.js
浏览文件 @ 3cbe0ba3
......@@ -8,6 +8,12 @@ export async function orderPage(params) {
});
}
export async function updateOrderItemPayAmount(params) {
return request(`/order-api/admins/order/order_item/update_pay_amount?${stringify(params)}`, {
method: 'PUT',
});
}
export async function updateOrderItem(params) {
return request(`/order-api/admins/order_item/update?${stringify(params)}`, {
method: 'PUT',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论