2BCmsBrowser/src/routes/Order/Edit/SubOrderProfile.js

import React, { Component } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import queryString from 'query-string';
import { Card, Form, Modal, Steps, Button, Table, Input, Icon } from 'antd';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import FooterToolbar from '../../../components/FooterToolbar';
import { Codes, productType } from '../../../utils/config';
import { provCodeToName } from '../../../utils/city';

@connect(state => ({ orderDetail: state.orderDetail }))
@Form.create()
export default class SubOrderProfile extends Component {
  /**
   * 返回订单列表
   */
  handlePageCancel = () => {
    const { orderDetail, dispatch } = this.props;
    const { filters } = orderDetail;
    dispatch(routerRedux.push({
      pathname: '/trade/order',
      search: queryString.stringify(filters),
    }));
  }

  /**
   * 显示发货弹框
   */
  showSendModal = () => {
    this.props.dispatch({
      type: 'orderDetail/showDeliveryModal',
    });
  }

  /**
   * 隐藏发货弹框
   */
  hideSendModal = () => {
    this.props.dispatch({
      type: 'orderDetail/hideDeliveryModal',
    });
    this.props.form.resetFields();
  }

  /**
   * 点击确认发货
   */
  confirmSend = () => {
    const { dispatch, form, orderDetail } = this.props;
    const { validateFields, getFieldsValue } = form;
    const { currentItem, filters } = orderDetail;
    const { id } = currentItem;
    validateFields((errors) => {
      if (!errors) {
        const { trackNo } = getFieldsValue();
        dispatch({
          type: 'orderDetail/orderSend',
          payload: { id, trackNo },
          callback: () => dispatch(routerRedux.push({
            pathname: `/trade/order/sub/profile/${id}`,
            search: queryString.stringify(filters),
          })),
        });
      }
    });
  }

  /**
   * 点击确认收货
   */
  confirmReceipt = () => {
    Modal.confirm({
      title: '是否确认收货?',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        const { dispatch, orderDetail } = this.props;
        const { currentItem, filters } = orderDetail;
        const { id } = currentItem;
        dispatch({
          type: 'orderDetail/orderReceive',
          payload: { id },
          callback: () => dispatch(routerRedux.push({
            pathname: `/trade/order/sub/profile/${id}`,
            search: queryString.stringify(filters),
          })),
        });
      },
    });
  }

  /**
   * 根据订单状态来生成操作按钮
   */
  renderFooter = (status) => {
    switch (status) {
      // 待发货订单
      case Codes.CODE_FORSEND:
        return (
          <FooterToolbar>
            <Button onClick={this.handlePageCancel}>返回订单列表</Button>
            <Button onClick={this.showSendModal} type="primary">立即发货</Button>
          </FooterToolbar>
        );
      // 待收货订单
      case Codes.CODE_SENT:
        return (
          <FooterToolbar>
            <Button onClick={this.handlePageCancel}>返回订单列表</Button>
            <Button onClick={this.confirmReceipt} type="primary">确认收货</Button>
          </FooterToolbar>
        );
      // 已完成订单
      case Codes.CODE_COMPLETE:
        return (
          <FooterToolbar>
            <Button onClick={this.handlePageCancel}>返回订单列表</Button>
          </FooterToolbar>
        );
      // 已取消订单
      case Codes.CODE_CANCEL:
        return (
          <FooterToolbar>
            <Button onClick={this.handlePageCancel}>返回订单列表</Button>
          </FooterToolbar>
        );
      default:
        return (
          <FooterToolbar>
            <Button onClick={this.handlePageCancel}>返回订单列表</Button>
          </FooterToolbar>
        );
    }
  }

  render() {
    const { orderDetail, form } = this.props;
    const { getFieldDecorator } = form;
    const { currentItem, deliveryModalShow } = orderDetail;
    const {
      userCode,
      provinceCode,
      cityName,
      zoneName,
      classroomName,
      orderStatus,
      merchantName,
      // originPrice,
      // finalPrice,
      // adjustPrice,
      name,
      type,
      mobile,
      address,
      note,
      trackNo,
      goods,
    } = currentItem;

    // simply table columns
    const simplyTableColumns = [{
      title: 'field',
      dataIndex: 'field',
      key: 1,
      width: '20%',
    }, {
      title: 'value',
      dataIndex: 'value',
      key: 2,
      width: '80%',
    }];
    // 收货人信息 - table data
    const consumerInfoTableData = [{
      field: '购买终端编号',
      value: userCode,
      key: 1,
    }, {
      field: '购买终端名称',
      value: `${classroomName}`,
      key: 2,
    }, {
      field: '终端所属校区',
      value: `${provCodeToName(provinceCode)}-${cityName}-${zoneName}`,
      key: 3,
    }, {
      field: '终端所属渠道',
      value: merchantName,
      key: 4,
    }, {
      field: '收货人姓名',
      value: name,
      key: 5,
    }, {
      field: '收货人电话',
      value: mobile,
      key: 6,
    }, {
      field: '收货地址',
      value: address,
      key: 7,
    }];
    // 物流信息 - table datas
    const deliveryTableData = [{
      field: '物流单号',
      value: trackNo,
      key: 1,
    }];
    // 商品清单
    const goodsTableColumns = [{
      title: '商品编号',
      dataIndex: 'code',
      key: 1,
      width: '25%',
    }, {
      title: '商品名称',
      dataIndex: 'name',
      key: 2,
      width: '25%',
    }, {
      title: '商品类型',
      dataIndex: 'type',
      render: text => productType[text],
      key: 3,
      width: '15%',
    }, {
      title: '商品价格',
      key: 4,
      render: (_, record) => {
        const { chargeUnit, merchantPrice }  = record;
        return `¥${merchantPrice}/${chargeUnit}`;
      },
      width: '25%',
    }, {
      title: '商品数量',
      dataIndex: 'quantity',
      key: 5,
      width: '10%',
    }];
    // 结算信息 - table data
    /*
    const strs = [];
    (goods || []).forEach(item => strs.push(`${item.merchantPrice}(元) * ${item.quantity}`));
    const accountTableDatas = [{
      field: '商品总价',
      value: `${strs.join(' + ')} = ${originPrice}(元)`,
      key: 1,
    }, {
      field: '支付金额',
      value:
  <span>
    {`总价：${originPrice}(元) - 商品优惠：${adjustPrice}(元) = 订单总金额：`}
    <strong style={{ color: 'red' }}>{`${finalPrice}(元)`}</strong>
  </span>,
      key: 2,
    }];
    */

    const entityStepMap = {
      [Codes.CODE_UNPAID]: 0,
      [Codes.CODE_PAID]: 1,
      [Codes.CODE_FORSEND]: 1,
      [Codes.CODE_SENT]: 2,
      [Codes.CODE_RECEIVED]: 3,
      [Codes.CODE_CANCEL]: 4,
      [Codes.CODE_COMPLETE]: 4,
    };
    const virtualStepMap = {
      [Codes.CODE_UNPAID]: 0,
      [Codes.CODE_PAID]: 1,
      [Codes.CODE_FORSEND]: 1,
      [Codes.CODE_SENT]: 1,
      [Codes.CODE_RECEIVED]: 1,
      [Codes.CODE_CANCEL]: 4,
      [Codes.CODE_COMPLETE]: 4,
    };

    const formItemLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 15 },
    };

    return (
      <PageHeaderLayout title="子订单详情">
        {type === Codes.CODE_ENTITY ?
          (
            <Card title="订单状态" bordered={false} style={{ marginBottom: 20 }}>
              <Steps current={entityStepMap[orderStatus]}>
                <Steps.Step title="提交订单" icon={<Icon type="schedule" />} />
                <Steps.Step title="付款成功" icon={<Icon type="red-envelope" />} />
                <Steps.Step title="商品出库" icon={<Icon type="inbox" />} />
                <Steps.Step title="等待收货" icon={<Icon type="rocket" />} />
                <Steps.Step title="完成" icon={<Icon type="check" />} />
              </Steps>
            </Card>
)
        :
          (
            <Card title="订单状态" bordered={false} style={{ marginBottom: 20 }}>
              <Steps current={virtualStepMap[orderStatus]}>
                <Steps.Step title="提交订单" icon={<Icon type="schedule" />} />
                <Steps.Step title="付款成功" icon={<Icon type="red-envelope" />} />
                <Steps.Step title="完成" icon={<Icon type="check" />} />
              </Steps>
            </Card>
)
        }
        <Card title="商品清单" bordered={false} style={{ marginBottom: 20 }}>
          <Table
            size="small"
            rowKey={record => record.id}
            columns={goodsTableColumns}
            dataSource={goods || []}
            bordered
            pagination={false}
          />
        </Card>
        <Card title="收货人信息" bordered={false} style={{ marginBottom: 20 }}>
          <Table
            size="small"
            columns={simplyTableColumns}
            dataSource={consumerInfoTableData}
            bordered
            pagination={false}
            showHeader={false}
          />
        </Card>
        {orderStatus === Codes.CODE_SENT ?
          (
            <Card title="物流信息" bordered={false} style={{ marginBottom: 20 }}>
              <Table
                size="small"
                columns={simplyTableColumns}
                dataSource={deliveryTableData}
                bordered
                pagination={false}
                showHeader={false}
              />
            </Card>
        ) : null}
        <Card title="订单备注" bordered={false} style={{ marginBottom: 20 }}>
          {note || '无'}
        </Card>
        {/* <Card title="结算信息" bordered={false}>
          <Table
            size="small"
            columns={simplyTableColumns}
            dataSource={accountTableDatas}
            bordered
            pagination={false}
            showHeader={false}
          />
        </Card> */}
        <Modal
          title="发货信息"
          visible={deliveryModalShow}
          onOk={this.confirmSend}
          onCancel={this.hideSendModal}
        >
          <Form layout="horizontal">
            <Form.Item label="物流单号：" hasFeedback {...formItemLayout}>
              {getFieldDecorator('trackNo', {
                rules: [{ required: true, type: 'string', message: '请填写正确的物流单号!' }],
              })(<Input placeholder="请填写物流单号" />)}
            </Form.Item>
          </Form>
        </Modal>
        {this.renderFooter(orderStatus)}
      </PageHeaderLayout>
    );
  }
}