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

B 端物料组件库

---
title: TradeTable-Usage
order: 3
---

复杂表格，
SDK 可以基于 TradeTable 进行扩展通用业务的单元格，提供给业务使用

```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,
        appendGroupHeader: (record) => {
          return <div>123</div>;
        },
        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 complexTable = [
  {
    orderInfo: {
      // 业务字段
      orderId: '123',
    },
    header: {
      // 订单头
      title: [
        {
          label: '订单编号',
          value: '1000000008980093588',
        },
        {
          label: '下单时间',
          value: '2021/03/11 18:41:43',
        },
        {
          label: '店铺名称',
          value: 'xxx 商城',
        },
      ],

      isRemark: true, // 是否有备注
    },
    children: [
      {
        parent: 0, // dataSource的索引
        index: 0, // index 0 为合并单元格
        quantity: ['1'],
        afterSaleAction: {
          // 售后
          isStartAfterSale: true,
          checkAfterSale: false,
        },
        orderStatus: {
          // 订单状态
          statusText: '待发货',
          hasOrderDetailLink: true,
        },
        orderOperation: {
          // 订单操作
          hasCloseOrder: true,
        },
        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: '商品-36',
          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',
          },
          {
            title: '自提人：李斯',
            subTitle: '13844050990',
          },
        ],
        itemPrice: {
          lineationPrice: '¥3,298',
          currentPrice: '¥3,000',
        },
        amountPrice: {
          currentPrice: '¥3,000',
        },
      },
      {
        parent: 0,
        index: 0,
        quantity: ['1'],
        afterSaleAction: {
          // 售后
          isStartAfterSale: true,
          checkAfterSale: false,
        },
        orderStatus: {
          // 订单状态
          statusText: '待发货',
          hasOrderDetailLink: true,
        },
        operation: ['关闭订单', '订单详情'],
        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: '商品-37',
          description: '207963251174334465',
          subTitle: '规格：100ml | 口味：苹果味 | 产地：上海',
          isGiftItem: true,
          isCombineItem: false,
          subTitleLength: 25,
          showBalloon: true,
          balloonContent: '规格：100ml | 口味：苹果味 | 产地：上海',
        },
        deliveryInfo: [
          // 收货人信息
          {
            title: '团长：张三',
            subTitle: '18947597799',
            description: '浙江省杭州市余杭区五常街道文一西路889号23幢901',
            // other: 'openID: owxsdfsdfa',
          },
          {
            title: '自提人：李斯',
            subTitle: '13844050990',
          },
        ],
        itemPrice: {
          lineationPrice: '¥3,298',
          currentPrice: '¥3,000',
        },
        amountPrice: {
          currentPrice: '¥3,000',
        },
        orderOperation: {
          // 订单操作
          hasCloseOrder: true,
        },
      },
    ],
  },
  {
    orderInfo: {
      // 业务字段
      orderId: '123',
    },
    header: {
      // 订单头
      title: [
        {
          label: '订单编号',
          value: '1000000008980093588',
        },
        {
          label: '下单时间',
          value: '2021/03/11 18:41:43',
        },
        {
          label: '店铺名称',
          value: 'xxx 商城',
        },
      ],
      orderTag: {
        // type 'none'-无背景色 | 'warning'-警告-黄色 | 'middle'-中间态-蓝色 | 'success'-成功-绿色 | 'cancel'-取消-灰色 | 'error'-失败-红色
        tagText: '周期购',
      },
      isRemark: true, // 是否有备注
    },
    children: [
      {
        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,
        },
      },
      {
        parent: 1,
        index: 1,
        quantity: ['2'],
        afterSaleAction: {
          // 售后
          isStartAfterSale: true,
          checkAfterSale: false,
        },
        orderStatus: {
          // 订单状态
          statusText: '待发货',
          // type 'none'-无背景色 | 'warning'-警告-黄色 | 'middle'-中间态-蓝色 | 'success'-成功-绿色 | 'cancel'-取消-灰色 | 'error'-失败-红色
          type: 'error',
          tagText: '执行异常',
          description: '该用户曾',
          hasOrderDetailLink: true,
        },
        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: '商品-39',
          description: '207963251174334465',
          subTitle: '规格:100ml;',
          isGiftItem: false,
          isCombineItem: true,
          subTitleLength: 25,
          showBalloon: true,
          balloonContent: '规格：100ml | 口味：苹果味 | 产地：上海',
        },
        deliveryInfo: [
          // 收货人信息
          {
            title: '团长：张三',
            subTitle: '18947597799',
            description: '浙江省杭州市余杭区五常街道文一西路889号23幢901',
            other: 'openID: owxsdfsdfa',
          },
        ],
        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: complexTable,
    });
  }

  // 合并单元格
  cellProps = (rowIndex, colIndex, dataIndex, record) => {
    if (colIndex >= 4 && colIndex <= 7 && record.index === 0) {
      return {
        rowSpan: this.state.dataSource[record.parent].children.length,
      };
    }
  };

  render() {
    return (
      <div>
        <OrderManagementTable
          cellProps={this.cellProps}
          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);

/* deploy 工程 */
```