From e2a19a1d9df32b49225e4f4d6dfff1b2b8639762 Mon Sep 17 00:00:00 2001 From: sin <2943460818@qq.com> Date: Thu, 28 Mar 2019 00:43:50 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20orderList=20=E8=AE=A2?= =?UTF-8?q?=E5=8D=95=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- admin-web/src/models/order/orderList.js | 24 +- admin-web/src/pages/Order/OrderList.js | 306 +++++++++++++---------- admin-web/src/pages/Order/WechatIMG1.png | Bin 0 -> 461060 bytes 3 files changed, 192 insertions(+), 138 deletions(-) create mode 100644 admin-web/src/pages/Order/WechatIMG1.png diff --git a/admin-web/src/models/order/orderList.js b/admin-web/src/models/order/orderList.js index 890c07d53..e337c1493 100644 --- a/admin-web/src/models/order/orderList.js +++ b/admin-web/src/models/order/orderList.js @@ -5,17 +5,32 @@ export default { namespace: 'orderList', state: { - list: [], + list: { + pagination: { + current: 0, + pageSize: 10, + total: 0, + }, + dataSource: [], + }, }, effects: { *queryPage({ payload }, { call, put }) { const response = yield call(orderPage, payload); - message.info('查询成功!'); + message.info('查询成功!', response); + const { total, orders } = response.data; yield put({ type: 'queryPageSuccess', payload: { - list: response.data, + list: { + dataSource: orders, + pagination: { + total, + current: payload.pageNo, + pageSize: payload.pageSize, + }, + }, }, }); }, @@ -34,9 +49,10 @@ export default { reducers: { queryPageSuccess(state, { payload }) { + const { list } = payload; return { ...state, - ...payload, + list, }; }, }, diff --git a/admin-web/src/pages/Order/OrderList.js b/admin-web/src/pages/Order/OrderList.js index ff9b0abde..eb3b790a2 100644 --- a/admin-web/src/pages/Order/OrderList.js +++ b/admin-web/src/pages/Order/OrderList.js @@ -1,128 +1,113 @@ -import React, { PureComponent } from 'react'; +import React, { Fragment, 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 { Button, Card, Col, Divider, Form, Input, Row, Table, DatePicker } from 'antd'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; import DictionaryText from '@/components/Dictionary/DictionaryText'; +import DictionarySelect from '@/components/Dictionary/DictionarySelect'; import dictionary from '@/utils/dictionary'; import styles from './OrderList.less'; +const { RangePicker } = DatePicker; const FormItem = Form.Item; -const SelectOption = Select.Option; const OrderList = props => { - const { list, loading } = props; + const { list, dispatch, loading, handleModalVisible } = props; - const paginationProps = { - showSizeChanger: true, - showQuickJumper: true, - pageSize: 5, - total: 50, - }; - - const deleteItem = id => { - const { dispatch } = props; + // 翻页 + const onPageChange = page => { + const { searchParams } = props; dispatch({ - type: 'list/submit', - payload: { id }, + type: 'adminList/query', + payload: { + pageNo: page.current, + pageSize: page.pageSize, + ...searchParams, + }, }); }; - const handleEditor = currentItem => { - const { handleEditorClick } = props; - if (handleEditorClick) { - handleEditorClick(currentItem); - } + const columns = [ + { + title: '订单id', + dataIndex: 'id', + }, + { + title: '用户', + dataIndex: 'userId', + }, + { + title: '订单号', + dataIndex: 'orderNo', + }, + { + title: '金额', + dataIndex: 'price', + render(val) { + return {val} 元; + }, + }, + { + title: '状态', + dataIndex: 'status', + render(val) { + return ; + }, + }, + { + title: '付款时间', + dataIndex: 'paymentTime', + render: val => (!val ? '' : {moment(val).format('YYYY-MM-DD HH:mm')}), + }, + { + title: '发货时间', + dataIndex: 'deliveryTime', + render: val => (!val ? '' : {moment(val).format('YYYY-MM-DD HH:mm')}), + }, + { + title: '收货时间', + dataIndex: 'receiverTime', + render: val => (!val ? '' : {moment(val).format('YYYY-MM-DD HH:mm')}), + }, + { + title: '成交时间', + dataIndex: 'closingTime', + render: val => (!val ? '' : {moment(val).format('YYYY-MM-DD HH:mm')}), + }, + { + title: '创建时间', + dataIndex: 'createTime', + render: val => (!val ? '' : {moment(val).format('YYYY-MM-DD HH:mm')}), + }, + { + title: '操作', + width: 100, + render: (text, record) => { + return ( + + handleModalVisible(true, 'update', record)}>编辑 + + + ); + }, + }, + ]; + + const tableScroll = { + x: 1400, }; - 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); - }} - > - 编辑 - , - , - ]} - > - - - )} + pagination={list.pagination} + onChange={onPageChange} + scroll={tableScroll} /> ); }; @@ -131,30 +116,80 @@ const OrderList = props => { const SearchForm = props => { const { form: { getFieldDecorator }, + form, + handleSearch, } = props; const handleFormReset = () => {}; - const handleSearch = () => {}; + const onSubmit = e => { + e.preventDefault(); + form.validateFields((err, fields) => { + const buildTime = (fieldValue, key) => { + const res = {}; + if (fieldValue) { + const keySuffix = key.substring(0, 1).toUpperCase() + key.substring(1); + // res[`start${keySuffix}`] = fieldValue[0].valueOf(); + res[`start${keySuffix}`] = fieldValue[0].format('YYYY-MM-DD HH:mm:ss'); + // res[`end${keySuffix}`] = fieldValue[1].valueOf(); + res[`end${keySuffix}`] = fieldValue[1].format('YYYY-MM-DD HH:mm:ss'); + } + return res; + }; + + const timeFields = ['createTime', 'closingTime']; + const buildSearchParams = fields2 => { + let res = {}; + Object.keys(fields).map(objectKey => { + const fieldValue = fields2[objectKey]; + if (timeFields.indexOf(objectKey) !== -1) { + // 处理时间 + res = { + ...res, + ...buildTime(fieldValue, objectKey), + }; + } else if (fieldValue !== undefined) { + res[objectKey] = fieldValue; + } + return true; + }); + return res; + }; + + const searchParams = buildSearchParams(fields); + if (handleSearch) { + handleSearch(searchParams); + } + }); + }; return ( -
+ - - {getFieldDecorator('name')()} + + {getFieldDecorator('id')()} - - {getFieldDecorator('status')( - - )} + + {getFieldDecorator('orderNo')()} + + + {getFieldDecorator('status', {})()} + + + + + + + {getFieldDecorator('createTime')()} + + + {getFieldDecorator('closingTime')()} +