@aliretail/react-materials-components/demo/TradeTable/example.md

B 端物料组件库

---
title: TradeTable-Simple
order: 2
---

简单表格

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { TradeTable } from '@aliretail/react-materials-components';
import { Button } from '@alifd/next';
import { StatusTag } from '../../src/StatusTag';

/* SDK start */
function compHOC(WrappedComponent) {
  return class Enhanced extends Component {
    static displayname = `HOC(${WrappedComponent.displayname})`;

    render(){
      let props = {
        ...this.props,
        extendCells: {
          reverseCell: (afterSaleAction) => {
            return (
              <>
                {afterSaleAction?.isStartAfterSale && (
                  <Button type="primary" text>
                    发起售后
                  </Button>
                )}
                {afterSaleAction?.checkAfterSale && (
                  <Button type="primary" text>
                    查看售后
                  </Button>
                )}
              </>
            );
          },
          orderState: (stateCell) => {
            return (
              <div className="order-status-cell">
                <span>{stateCell?.statusText}</span>
                {stateCell?.description && <span>{stateCell?.description}</span>}
                {stateCell?.type && <StatusTag type={stateCell?.type} text={stateCell?.tagText} />}
                {stateCell?.hasOrderDetailLink && (
                  <Button type="primary" text>
                    订单详情
                  </Button>
                )}
              </div>
            );
          },
          orderOperation: (orderOperation, e, record) => {
            return (
              orderOperation?.hasCloseOrder && (
                <Button type="primary" text>
                  关闭订单
                </Button>
              )
            );
          }
        }
      }

      return (<WrappedComponent {...props} />);
    }
    
  }
}

const OrderManagementTable = compHOC(TradeTable)
/* SDK end */

/* deploy 工程 */

const simpleTable = [
  {
    parent: 1, // dataSource的索引
    index: 1, // index 不为0 不合并单元格
    quantity: ['1'],
    afterSaleAction: {
      // 售后
      isStartAfterSale: true,
      checkAfterSale: false,
    },
    item: {
      imageUrl:
        'http://image.zacz.cn/TNY/cz-item/20200904/%E9%A3%9E%E9%B9%A4%E6%98%9F%E9%A3%9E%E5%B8%86%E4%B8%80%E6%AE%B5.png',
      title: '商品-38',
      description: '207963251174334465',
      subTitle: '规格:100ml;',
      isGiftItem: false,
      isCombineItem: false,
      subTitleLength: 25,
      showBalloon: true,
      balloonContent: '规格：100ml | 口味：苹果味 | 产地：上海',
    },
    deliveryInfo: [
      // 收货人信息
      {
        title: '团长：张三',
        subTitle: '18947597799',
        description: '浙江省杭州市余杭区五常街道文一西路889号23幢901',
        other: 'openID: owxsdfsdfa',
      },
    ],
    orderStatus: {
      // 订单状态
      statusText: '待发货',
      // type 'none'-无背景色 | 'warning'-警告-黄色 | 'middle'-中间态-蓝色 | 'success'-成功-绿色 | 'cancel'-取消-灰色 | 'error'-失败-红色
      type: 'error',
      tagText: '执行异常',
      description: '该用户',
      hasOrderDetailLink: true,
    },
    itemPrice: {
      lineationPrice: '¥3,298',
      currentPrice: '¥3,000',
    },
    amountPrice: {
      currentPrice: '¥3,000',
    },
    orderOperation: {
      // 订单操作
      hasCloseOrder: true,
    },
  }
]

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      dataSource: []
    }
  }
  componentDidMount(){
    
    this.setState({
      dataSource: simpleTable
    })
  }

  render() {
    return (
      <div>
        <OrderManagementTable
          dataSource={this.state.dataSource}
          className="order-manage-table"
          columns={[
            {
              title: '商品',
              dataIndex: 'item',
              type: 'imageText',
              align: 'left',
              width: 336,
              appendRender: (item) => {
                return <div>99999</div>;
              },
            },
            {
              title: '价格',
              dataIndex: 'itemPrice',
              type: 'price',
              align: 'right',
              width: 232,
            },
            {
              title: '数量',
              dataIndex: 'quantity',
              type: 'text',
              width: 90,
            },
            {
              title: '售后',
              dataIndex: 'afterSaleAction',
              type: 'reverseCell',
              width: 90,
            },
            {
              title: '收货信息',
              dataIndex: 'deliveryInfo',
              type: 'deliveryInfo',
              width: 178,
            },
            {
              title: '实收总金额',
              dataIndex: 'amountPrice',
              type: 'price',
              align: 'right',
              width: 100,
            },
            {
              title: '订单状态',
              dataIndex: 'orderStatus',
              type: 'orderState',
              width: 100,
            },
            {
              title: '操作',
              dataIndex: 'orderOperation',
              type: 'orderOperation',
              width: 90,
            },
          ]}
        />
      </div>
    );
  }
}

ReactDOM.render((
  <App />
), mountNode);

```