|
@@ -0,0 +1,207 @@
|
|
|
+import React, { Component } from 'react';
|
|
|
+import moment from 'moment';
|
|
|
+import { connect } from 'dva';
|
|
|
+import { routerRedux } from 'dva/router';
|
|
|
+import { Card, Button, Popover, message } from 'antd';
|
|
|
+import { StandardTableList } from '../../../components/RBList/index';
|
|
|
+import { addRowKey, renderOrderStatus, renderOrderSplitStatus, provinceCodeToName } from '../../../utils/utils';
|
|
|
+
|
|
|
+const Message = message;
|
|
|
+@connect(({ loading, trade }) => ({
|
|
|
+ trade,
|
|
|
+ loading: loading.models.trade,
|
|
|
+}))
|
|
|
+export default class OrderListPage extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ const { state } = props.location;
|
|
|
+ this.state = {
|
|
|
+ UIParams: (state || {}).UIParams, // 组件的状态参数
|
|
|
+ Queryers: (state || {}).Queryers, // 查询的条件参数
|
|
|
+ };
|
|
|
+ }
|
|
|
+ componentDidMount() {
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'trade/fetchOrderList',
|
|
|
+ payload: { ...this.state.Queryers },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ handleCreateOperation = () => {
|
|
|
+ }
|
|
|
+ handleFilterOperation = (params, states) => {
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'trade/fetchOrderList',
|
|
|
+ payload: params,
|
|
|
+ });
|
|
|
+ this.setState({
|
|
|
+ UIParams: states,
|
|
|
+ Queryers: params,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ handleBatchOperation = () => {
|
|
|
+ Message.info('暂不支持批量操作!');
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const { loading, trade } = this.props;
|
|
|
+ const { list, totalSize, pageSize, pageNo } = trade;
|
|
|
+
|
|
|
+ const renderOperation = () => {
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <Button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ >详情
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ };
|
|
|
+ const batchActions = [{
|
|
|
+ key: 'delete',
|
|
|
+ name: '批量清空',
|
|
|
+ }, {
|
|
|
+ }];
|
|
|
+ const basicSearch = {
|
|
|
+ keys: [{
|
|
|
+ name: '订单编号',
|
|
|
+ field: 'code',
|
|
|
+ }, {
|
|
|
+ name: '终端编号',
|
|
|
+ field: 'userCode',
|
|
|
+ }],
|
|
|
+ };
|
|
|
+ const pagination = {
|
|
|
+ pageNo,
|
|
|
+ pageSize,
|
|
|
+ totalSize,
|
|
|
+ };
|
|
|
+ const columns = [{
|
|
|
+ title: '订单编号',
|
|
|
+ key: 1,
|
|
|
+ dataIndex: 'serialNo',
|
|
|
+ width: '13%',
|
|
|
+ }, {
|
|
|
+ title: '用户信息',
|
|
|
+ key: 2,
|
|
|
+ width: '27%',
|
|
|
+ render: (_, record) => {
|
|
|
+ const { userCode, provinceCode, cityName, zoneName, merchantName } = record;
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ <span>终端编号: </span>
|
|
|
+ {userCode}
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>所属校区: </span>
|
|
|
+ {`${provinceCodeToName(provinceCode)}${cityName}${zoneName}`}
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>所属渠道: </span>
|
|
|
+ {merchantName}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ title: '价格信息',
|
|
|
+ key: 3,
|
|
|
+ width: '15%',
|
|
|
+ render: (_, record) => {
|
|
|
+ const { originPrice, adjustPrice, finalPrice } = record;
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ <span>初始价格: </span>
|
|
|
+ {originPrice}
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>优惠价格: </span>
|
|
|
+ {adjustPrice}
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>实际售价: </span>
|
|
|
+ {finalPrice}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ title: '收货信息',
|
|
|
+ key: 4,
|
|
|
+ width: '8%',
|
|
|
+ render: (_, record) => {
|
|
|
+ const { name, mobile, address } = record;
|
|
|
+ return (
|
|
|
+ <Popover
|
|
|
+ placement="top"
|
|
|
+ content={
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ <span>收货人: </span>
|
|
|
+ {name}
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>手机号码: </span>
|
|
|
+ {mobile}
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ <span>收货地址: </span>
|
|
|
+ {address}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ >
|
|
|
+ {name}
|
|
|
+ </Popover>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ title: '拆单状态',
|
|
|
+ key: 5,
|
|
|
+ dataIndex: 'splitStatus',
|
|
|
+ render: text => renderOrderSplitStatus(text),
|
|
|
+ width: '8%',
|
|
|
+ }, {
|
|
|
+ title: '订单状态',
|
|
|
+ key: 6,
|
|
|
+ dataIndex: 'orderStatus',
|
|
|
+ render: text => renderOrderStatus(text),
|
|
|
+ width: '8%',
|
|
|
+ }, {
|
|
|
+ title: '下单时间',
|
|
|
+ key: 7,
|
|
|
+ dataIndex: 'gmtCreated',
|
|
|
+ render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ width: '16%',
|
|
|
+ }, {
|
|
|
+ title: '操作',
|
|
|
+ key: 8,
|
|
|
+ dataIndex: 'operation',
|
|
|
+ render: (_, record) => renderOperation(record),
|
|
|
+ width: '5%',
|
|
|
+ }];
|
|
|
+ return (
|
|
|
+ <Card>
|
|
|
+ <StandardTableList
|
|
|
+ columns={columns}
|
|
|
+ loading={loading}
|
|
|
+ showStatusSelect={false}
|
|
|
+ dataSource={addRowKey(list)}
|
|
|
+ header={{
|
|
|
+ basicSearch,
|
|
|
+ onFilterClick: this.handleFilterOperation,
|
|
|
+ onCreateClick: this.handleCreateOperation,
|
|
|
+ }}
|
|
|
+ footer={{
|
|
|
+ pagination,
|
|
|
+ batchActions,
|
|
|
+ onBatchClick: this.handleBatchOperation,
|
|
|
+ }}
|
|
|
+ keepUIState={{ ...this.state.UIParams }}
|
|
|
+ />
|
|
|
+ </Card>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|