From 93b235fac651faa88c4c2756fb376603757f0f0b Mon Sep 17 00:00:00 2001 From: sin <2943460818@qq.com> Date: Sun, 24 Mar 2019 16:55:52 +0800 Subject: [PATCH] =?UTF-8?q?-=20=E6=B7=BB=E5=8A=A0=E8=AE=A2=E5=8D=95?= =?UTF-8?q?=E5=88=97=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin-web/config/proxy/proxy.dev.js | 6 +- .../components/Dictionary/DictionaryText.js | 2 +- admin-web/src/locales/zh-CN/menu.js | 1 + .../src/models/admin/dictionaryContext.js | 3 +- admin-web/src/models/order/orderList.js | 43 ++++ admin-web/src/pages/Order/OrderList.jsx | 240 ++++++++++++++++++ admin-web/src/pages/Order/OrderList.less | 237 +++++++++++++++++ admin-web/src/services/order.js | 18 ++ admin-web/src/utils/dictionary.js | 8 + 9 files changed, 552 insertions(+), 6 deletions(-) create mode 100644 admin-web/src/models/order/orderList.js create mode 100644 admin-web/src/pages/Order/OrderList.jsx create mode 100644 admin-web/src/pages/Order/OrderList.less create mode 100644 admin-web/src/services/order.js create mode 100644 admin-web/src/utils/dictionary.js diff --git a/admin-web/config/proxy/proxy.dev.js b/admin-web/config/proxy/proxy.dev.js index f9f2bbdda..fd07c075a 100644 --- a/admin-web/config/proxy/proxy.dev.js +++ b/admin-web/config/proxy/proxy.dev.js @@ -6,9 +6,9 @@ export default { changeOrigin: true, pathRewrite: {}, }, - '/server/api/': { - target: 'https://preview.pro.ant.design/', + '/order-api/': { + target: 'http://127.0.0.1:18084/', changeOrigin: true, - pathRewrite: { '^/server': '' }, + pathRewrite: {}, }, }; diff --git a/admin-web/src/components/Dictionary/DictionaryText.js b/admin-web/src/components/Dictionary/DictionaryText.js index d94e54847..c5de6250e 100644 --- a/admin-web/src/components/Dictionary/DictionaryText.js +++ b/admin-web/src/components/Dictionary/DictionaryText.js @@ -14,7 +14,7 @@ export default class DictionaryText extends PureComponent { if (dicValues) { return dicValues[dicValue]; } - return null; + return dicValue; }} ); diff --git a/admin-web/src/locales/zh-CN/menu.js b/admin-web/src/locales/zh-CN/menu.js index 1e2d70747..37dee7786 100644 --- a/admin-web/src/locales/zh-CN/menu.js +++ b/admin-web/src/locales/zh-CN/menu.js @@ -50,5 +50,6 @@ export default { 'menu.product.product-spu-add': '商品添加', 'menu.product.product-category-list': '商品分类', // 订单 + 'menu.order': '订单管理', 'menu.order.order-list': '订单管理', }; diff --git a/admin-web/src/models/admin/dictionaryContext.js b/admin-web/src/models/admin/dictionaryContext.js index 7c643bee3..0052560fe 100644 --- a/admin-web/src/models/admin/dictionaryContext.js +++ b/admin-web/src/models/admin/dictionaryContext.js @@ -18,8 +18,7 @@ export default { const dicKey = item.enumValue; const dicTreeItem = {}; item.values.map(item2 => { - dicTreeItem.text = item2.displayName; - dicTreeItem.value = item2.value; + dicTreeItem[item2.value] = item2.displayName; return true; }); dicTreeMap[dicKey] = dicTreeItem; diff --git a/admin-web/src/models/order/orderList.js b/admin-web/src/models/order/orderList.js new file mode 100644 index 000000000..890c07d53 --- /dev/null +++ b/admin-web/src/models/order/orderList.js @@ -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, + }; + }, + }, +}; diff --git a/admin-web/src/pages/Order/OrderList.jsx b/admin-web/src/pages/Order/OrderList.jsx new file mode 100644 index 000000000..fa8e8af1f --- /dev/null +++ b/admin-web/src/pages/Order/OrderList.jsx @@ -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 }) => ( +
+
+ 金额: {data.price / 100} 元 +

编号: {data.orderNo}

+
+
+ + 付款时间: {data.paymentTime ? moment(data.paymentTime).format('YYYY-MM-DD HH:mm') : ''} + +

创建时间：{moment(data.createTime).format('YYYY-MM-DD HH:mm')}

+
+
+ + 订单状态: + +
+
+ ); + + const MoreBtn = () => ( + handleMoreMenu(key, props.current)}> + 编辑 + 删除 + + } + > + + 更多 + + + ); + + return ( + ( + { + e.preventDefault(); + handleEditor(item); + }} + > + 编辑 + , + , + ]} + > + + + )} + /> + ); +}; + +// SearchForm +const SearchForm = props => { + const { + form: { getFieldDecorator }, + } = props; + + const handleFormReset = () => {}; + + const handleSearch = () => {}; + + return ( +
+ + + + {getFieldDecorator('name')()} + + + + + {getFieldDecorator('status')( + + )} + + + + + + + + + +
+ ); +}; + +@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 ( + +
+ +
+ +
+ + +
+ + ); + } +} + +export default BasicList; diff --git a/admin-web/src/pages/Order/OrderList.less b/admin-web/src/pages/Order/OrderList.less new file mode 100644 index 000000000..416c0935a --- /dev/null +++ b/admin-web/src/pages/Order/OrderList.less @@ -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; + } +} diff --git a/admin-web/src/services/order.js b/admin-web/src/services/order.js new file mode 100644 index 000000000..12d30d265 --- /dev/null +++ b/admin-web/src/services/order.js @@ -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, + }, + }); +} diff --git a/admin-web/src/utils/dictionary.js b/admin-web/src/utils/dictionary.js new file mode 100644 index 000000000..0748a5bc5 --- /dev/null +++ b/admin-web/src/utils/dictionary.js @@ -0,0 +1,8 @@ +// 字典定义 + +const DictionaryConstants = { + GENDER: 'gender', + ORDER_STATUS: 'order_status', +}; + +export default DictionaryConstants;