---
title: 审批流组件
order: 1
docGenIncludes:
  - src/components/YwApprovalProcess/index.tsx
---





```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { YwApprovalProcess } from '@ywfe/yw-design';
const processItems = [
  {
    headIconUrl: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    extraIcon: 'SUCCESS',
    statusName: '审核通过',
    description: '行业或运营主管·延诚宇',
    component: 'Remark',
    time: '07-08 15:23',
    componentProps: {
      dataSource: [
        {
          label: '招商对接人',
          value: '初心',
        },
        {
          label: '备注',
          value: '该商家为逆向邀约商家，请商家服务部在资质审核的时候走特殊审批。',
        },
      ],
    },
  },
  {
    headIconUrl: '',
    extraIcon: 'WAITING',
    statusName: '审核中',
    avatarType: 'org',
    time: '07-08 15:23',
    description: '组织架构名称·16人或签',
    component: 'UserList',
    componentProps: {
      dataSource: [
        {
          headIconUrl: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          userName: '刁康',
        },
        {
          headIconUrl: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          userName: '宝婷',
        },
        {
          headIconUrl: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          userName: '匡康民',
        },
        {
          headIconUrl: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          userName: '穆静',
          leaveJob: true,
        },
      ],
    },
  },
  {
    headIconUrl: '',
    extraIcon: 'REJECT',
    userName: '商家',
    time: '07-08 15:23',
    statusName: '提交入驻申请',
    description: '商家',
  },
];

class App extends Component {
  render() {
    return (
        <YwApprovalProcess processItems={processItems}/>
    );
  }
}

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