@aliretail/react-materials-components/demo/DataImport/status.md

B 端物料组件库

---
title: With JobId
order: 3
---

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

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Table
          dataSource={[
            { id: '1111', title: '订单1', status: '导入中' },
            { id: '2222', title: '订单2', status: '导入完成' },
          ]}
        >
          <Table.Column dataIndex="id" title="订单编号" />
          <Table.Column dataIndex="title" title="订单名称" />
          <Table.Column dataIndex="status" title="导入状态" />
          <Table.Column
            title="订单名称"
            cell={(_, index, record) => {
              if (record.status === '导入完成') {
                return '-';
              }

              return <DataImport jobId={record.id} isComplex appCode="omsdemo" />;
            }}
          />
        </Table>
      </div>
    );
  }
}

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