- 添加订单列表
sin
parent
bb4d9721ab
commit
93b235fac6
|
|
@ -6,9 +6,9 @@ export default {
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
pathRewrite: {},
|
pathRewrite: {},
|
||||||
},
|
},
|
||||||
'/server/api/': {
|
'/order-api/': {
|
||||||
target: 'https://preview.pro.ant.design/',
|
target: 'http://127.0.0.1:18084/',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
pathRewrite: { '^/server': '' },
|
pathRewrite: {},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ export default class DictionaryText extends PureComponent {
|
||||||
if (dicValues) {
|
if (dicValues) {
|
||||||
return dicValues[dicValue];
|
return dicValues[dicValue];
|
||||||
}
|
}
|
||||||
return null;
|
return dicValue;
|
||||||
}}
|
}}
|
||||||
</DictionaryContext.Consumer>
|
</DictionaryContext.Consumer>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -50,5 +50,6 @@ export default {
|
||||||
'menu.product.product-spu-add': '商品添加',
|
'menu.product.product-spu-add': '商品添加',
|
||||||
'menu.product.product-category-list': '商品分类',
|
'menu.product.product-category-list': '商品分类',
|
||||||
// 订单
|
// 订单
|
||||||
|
'menu.order': '订单管理',
|
||||||
'menu.order.order-list': '订单管理',
|
'menu.order.order-list': '订单管理',
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -18,8 +18,7 @@ export default {
|
||||||
const dicKey = item.enumValue;
|
const dicKey = item.enumValue;
|
||||||
const dicTreeItem = {};
|
const dicTreeItem = {};
|
||||||
item.values.map(item2 => {
|
item.values.map(item2 => {
|
||||||
dicTreeItem.text = item2.displayName;
|
dicTreeItem[item2.value] = item2.displayName;
|
||||||
dicTreeItem.value = item2.value;
|
|
||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
dicTreeMap[dicKey] = dicTreeItem;
|
dicTreeMap[dicKey] = dicTreeItem;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
import { message } from 'antd';
|
||||||
|
import { orderPage, updateOrderItem } from '../../services/order';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
namespace: 'orderList',
|
||||||
|
|
||||||
|
state: {
|
||||||
|
list: [],
|
||||||
|
},
|
||||||
|
|
||||||
|
effects: {
|
||||||
|
*queryPage({ payload }, { call, put }) {
|
||||||
|
const response = yield call(orderPage, payload);
|
||||||
|
message.info('查询成功!');
|
||||||
|
yield put({
|
||||||
|
type: 'queryPageSuccess',
|
||||||
|
payload: {
|
||||||
|
list: response.data,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
*updateOrderItem({ payload }, { call, put }) {
|
||||||
|
const { params } = payload;
|
||||||
|
const response = yield call(updateOrderItem, params);
|
||||||
|
message.info('查询成功!');
|
||||||
|
yield put({
|
||||||
|
type: 'queryPageSuccess',
|
||||||
|
payload: {
|
||||||
|
list: response.data,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
reducers: {
|
||||||
|
queryPageSuccess(state, { payload }) {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
...payload,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,240 @@
|
||||||
|
import React, { PureComponent } from 'react';
|
||||||
|
import moment from 'moment';
|
||||||
|
import { connect } from 'dva';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
Col,
|
||||||
|
Dropdown,
|
||||||
|
Form,
|
||||||
|
Icon,
|
||||||
|
Input,
|
||||||
|
List,
|
||||||
|
Menu,
|
||||||
|
Modal,
|
||||||
|
Row,
|
||||||
|
Select,
|
||||||
|
} from 'antd';
|
||||||
|
|
||||||
|
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
import DictionaryText from '@/components/Dictionary/DictionaryText';
|
||||||
|
import dictionary from '@/utils/dictionary';
|
||||||
|
|
||||||
|
import styles from './OrderList.less';
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const SelectOption = Select.Option;
|
||||||
|
|
||||||
|
const OrderList = props => {
|
||||||
|
const { list, loading } = props;
|
||||||
|
|
||||||
|
const paginationProps = {
|
||||||
|
showSizeChanger: true,
|
||||||
|
showQuickJumper: true,
|
||||||
|
pageSize: 5,
|
||||||
|
total: 50,
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteItem = id => {
|
||||||
|
const { dispatch } = props;
|
||||||
|
dispatch({
|
||||||
|
type: 'list/submit',
|
||||||
|
payload: { id },
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditor = currentItem => {
|
||||||
|
const { handleEditorClick } = props;
|
||||||
|
if (handleEditorClick) {
|
||||||
|
handleEditorClick(currentItem);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMoreMenu = (key, currentItem) => {
|
||||||
|
if (key === 'edit') {
|
||||||
|
handleEditor(currentItem);
|
||||||
|
} else if (key === 'delete') {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '删除任务',
|
||||||
|
content: '确定删除该任务吗？',
|
||||||
|
okText: '确认',
|
||||||
|
cancelText: '取消',
|
||||||
|
onOk: () => deleteItem(currentItem.id),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const ListContent = ({ data }) => (
|
||||||
|
<div className={styles.listContent}>
|
||||||
|
<div className={styles.listContentItem}>
|
||||||
|
<span>金额: {data.price / 100} 元</span>
|
||||||
|
<p>编号: {data.orderNo}</p>
|
||||||
|
</div>
|
||||||
|
<div className={styles.listContentItem}>
|
||||||
|
<span>
|
||||||
|
付款时间: {data.paymentTime ? moment(data.paymentTime).format('YYYY-MM-DD HH:mm') : ''}
|
||||||
|
</span>
|
||||||
|
<p>创建时间：{moment(data.createTime).format('YYYY-MM-DD HH:mm')}</p>
|
||||||
|
</div>
|
||||||
|
<div className={styles.listContentItem}>
|
||||||
|
<span>
|
||||||
|
订单状态: <DictionaryText dicKey={dictionary.ORDER_STATUS} dicValue={data.status} />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const MoreBtn = () => (
|
||||||
|
<Dropdown
|
||||||
|
overlay={
|
||||||
|
<Menu onClick={({ key }) => handleMoreMenu(key, props.current)}>
|
||||||
|
<Menu.Item key="edit">编辑</Menu.Item>
|
||||||
|
<Menu.Item key="delete">删除</Menu.Item>
|
||||||
|
</Menu>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<a>
|
||||||
|
更多 <Icon type="down" />
|
||||||
|
</a>
|
||||||
|
</Dropdown>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<List
|
||||||
|
size="large"
|
||||||
|
rowKey="id"
|
||||||
|
loading={loading}
|
||||||
|
pagination={paginationProps}
|
||||||
|
dataSource={list}
|
||||||
|
renderItem={item => (
|
||||||
|
<List.Item
|
||||||
|
actions={[
|
||||||
|
<a
|
||||||
|
onClick={e => {
|
||||||
|
e.preventDefault();
|
||||||
|
handleEditor(item);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</a>,
|
||||||
|
<MoreBtn current={item} />,
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<ListContent data={item} />
|
||||||
|
</List.Item>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// SearchForm
|
||||||
|
const SearchForm = props => {
|
||||||
|
const {
|
||||||
|
form: { getFieldDecorator },
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const handleFormReset = () => {};
|
||||||
|
|
||||||
|
const handleSearch = () => {};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form onSubmit={handleSearch} layout="inline">
|
||||||
|
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||||
|
<Col md={8} sm={24}>
|
||||||
|
<FormItem label="规则名称">
|
||||||
|
{getFieldDecorator('name')(<Input placeholder="请输入" />)}
|
||||||
|
</FormItem>
|
||||||
|
</Col>
|
||||||
|
<Col md={8} sm={24}>
|
||||||
|
<FormItem label="使用状态">
|
||||||
|
{getFieldDecorator('status')(
|
||||||
|
<Select placeholder="请选择" style={{ width: '100%' }}>
|
||||||
|
<SelectOption value="0">关闭</SelectOption>
|
||||||
|
<SelectOption value="1">运行中</SelectOption>
|
||||||
|
</Select>
|
||||||
|
)}
|
||||||
|
</FormItem>
|
||||||
|
</Col>
|
||||||
|
<Col md={8} sm={24}>
|
||||||
|
<span className={styles.submitButtons}>
|
||||||
|
<Button type="primary" htmlType="submit">
|
||||||
|
查询
|
||||||
|
</Button>
|
||||||
|
<Button style={{ marginLeft: 8 }} onClick={handleFormReset}>
|
||||||
|
重置
|
||||||
|
</Button>
|
||||||
|
</span>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
@connect(({ orderList, loading }) => ({
|
||||||
|
list: orderList.list,
|
||||||
|
orderList,
|
||||||
|
loading: loading.models.orderList,
|
||||||
|
}))
|
||||||
|
@Form.create()
|
||||||
|
class BasicList extends PureComponent {
|
||||||
|
state = {
|
||||||
|
current: {},
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const { dispatch } = this.props;
|
||||||
|
dispatch({
|
||||||
|
type: 'orderList/queryPage',
|
||||||
|
payload: {
|
||||||
|
pageNo: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
handleEditorClick = () => {
|
||||||
|
// this.setState({
|
||||||
|
// visible: true,
|
||||||
|
// current: item,
|
||||||
|
// });
|
||||||
|
console.info('edit');
|
||||||
|
};
|
||||||
|
|
||||||
|
handleSubmit = e => {
|
||||||
|
e.preventDefault();
|
||||||
|
const { dispatch, form } = this.props;
|
||||||
|
const { current } = this.state;
|
||||||
|
const id = current ? current.id : '';
|
||||||
|
|
||||||
|
form.validateFields((err, fieldsValue) => {
|
||||||
|
if (err) return;
|
||||||
|
dispatch({
|
||||||
|
type: 'list/submit',
|
||||||
|
payload: { id, ...fieldsValue },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<PageHeaderWrapper>
|
||||||
|
<div className={styles.standardList}>
|
||||||
|
<Card
|
||||||
|
className={styles.listCard}
|
||||||
|
bordered={false}
|
||||||
|
title="订单列表"
|
||||||
|
style={{ marginTop: 24 }}
|
||||||
|
bodyStyle={{ padding: '0 32px 40px 32px' }}
|
||||||
|
>
|
||||||
|
<div className={styles.tableListForm}>
|
||||||
|
<SearchForm {...this.props} />
|
||||||
|
</div>
|
||||||
|
<OrderList {...this.props} handleEditorClick={this.handleEditorClick} />
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</PageHeaderWrapper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BasicList;
|
||||||
|
|
@ -0,0 +1,237 @@
|
||||||
|
@import '~antd/lib/style/themes/default.less';
|
||||||
|
@import '~@/utils/utils.less';
|
||||||
|
|
||||||
|
.standardList {
|
||||||
|
:global {
|
||||||
|
.ant-card-head {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.ant-card-head-title {
|
||||||
|
padding: 24px 0;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
.ant-card-extra {
|
||||||
|
padding: 24px 0;
|
||||||
|
}
|
||||||
|
.ant-list-pagination {
|
||||||
|
margin-top: 24px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.ant-avatar-lg {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
line-height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.headerInfo {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
& > span {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
color: @text-color-secondary;
|
||||||
|
font-size: @font-size-base;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
& > p {
|
||||||
|
margin: 0;
|
||||||
|
color: @heading-color;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
& > em {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 1px;
|
||||||
|
height: 56px;
|
||||||
|
background-color: @border-color-split;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.listContent {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: row;
|
||||||
|
font-size: 0;
|
||||||
|
|
||||||
|
.listContentItem {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 40px;
|
||||||
|
color: @text-color-secondary;
|
||||||
|
font-size: @font-size-base;
|
||||||
|
vertical-align: middle;
|
||||||
|
> span {
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
> p {
|
||||||
|
margin-top: 4px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.extraContentSearch {
|
||||||
|
width: 272px;
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: @screen-xs) {
|
||||||
|
.standardList {
|
||||||
|
:global {
|
||||||
|
.ant-list-item-content {
|
||||||
|
display: block;
|
||||||
|
flex: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.ant-list-item-action {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.listContent {
|
||||||
|
margin-left: 0;
|
||||||
|
& > div {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.listCard {
|
||||||
|
:global {
|
||||||
|
.ant-card-head-title {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: @screen-sm) {
|
||||||
|
.standardList {
|
||||||
|
.extraContentSearch {
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.headerInfo {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
& > em {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: @screen-md) {
|
||||||
|
.standardList {
|
||||||
|
.listContent {
|
||||||
|
& > div {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
& > div:last-child {
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.listCard {
|
||||||
|
:global {
|
||||||
|
.ant-radio-group {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: @screen-lg) and (min-width: @screen-md) {
|
||||||
|
.standardList {
|
||||||
|
.listContent {
|
||||||
|
& > div {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
& > div:last-child {
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: @screen-xl) {
|
||||||
|
.standardList {
|
||||||
|
.listContent {
|
||||||
|
& > div {
|
||||||
|
margin-left: 24px;
|
||||||
|
}
|
||||||
|
& > div:last-child {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1400px) {
|
||||||
|
.standardList {
|
||||||
|
.listContent {
|
||||||
|
text-align: right;
|
||||||
|
& > div:last-child {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.standardListForm {
|
||||||
|
:global {
|
||||||
|
.ant-form-item {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
padding-top: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.formResult {
|
||||||
|
width: 100%;
|
||||||
|
[class^='title'] {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { stringify } from '@/utils/request.qs';
|
||||||
|
import request from '@/utils/request';
|
||||||
|
|
||||||
|
// order
|
||||||
|
export async function orderPage(params) {
|
||||||
|
return request(`/order-api/admins/order/page?${stringify(params)}`, {
|
||||||
|
method: 'GET',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function updateOrderItem(params) {
|
||||||
|
return request(`/order-api/admins/order_item/update?${stringify(params)}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
body: {
|
||||||
|
...params,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
// 字典定义
|
||||||
|
|
||||||
|
const DictionaryConstants = {
|
||||||
|
GENDER: 'gender',
|
||||||
|
ORDER_STATUS: 'order_status',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DictionaryConstants;
|
||||||
Loading…
Reference in New Issue