npm package: @fishx/order-flow
Description: ## 定义
Author: 金广龙
Latest version: 0.0.1-alpha.6

# OrderFlow 流程展示业务组件

## 定义

流程展示业务组件

## 基本

基本用法

```jsx
import OrderFlow from '@fishx/order-flow';

const mockData = [
  {
    tacheType: 'UserTask', // 人工
    activityInstanceNum: '1',
    isSubprocess: false,
    activityInstanceName: '订单受理',
    activityInstanceId: '001',
    createTime: '2022-01-11 15:12',
    timeCost: '5秒',
    state: '1', // 正在处理
    activityDefinitionId: 'A61194-20-54850-76-73718',
  },
  {
    tacheType: 'AutoTask', // 自动
    activityInstanceNum: '1',
    isSubprocess: false,
    activityInstanceName: '选址平台标准地址选址 选址平台标准地址选址',
    activityInstanceId: '002',
    createTime: '2022-01-11 15:12',
    timeCost: '5h',
    state: '2', // 按时完成
    activityDefinitionId: 'A61194-20-54850-76-73718',
    timeCostColor: 'rgba(23,23,23,0.4)',
  },
  {
    tacheType: 'UserTask',
    activityInstanceNum: '1',
    isSubprocess: false,
    activityInstanceName: '选址平台标准地址选址 ',
    activityInstanceId: '003',
    createTime: '2022-01-11 15:12',
    timeCost: '5h',
    state: '3', // 执行异常
    activityDefinitionId: 'A61194-20-54850-76-73718',
    timeCostColor: '#FF5656',
  },
  {
    tacheType: 'UserTask',
    activityInstanceNum: '1',
    isSubprocess: false,
    activityInstanceName: '选址平台标准地址选址 ',
    activityInstanceId: '004',
    createTime: '2022-01-11 15:12',
    timeCost: '5秒',
    state: '4', // 作废
    activityDefinitionId: 'A61194-20-54850-76-73718',
  },
  {
    tacheType: 'Auto1Task',
    activityInstanceNum: '1',
    isSubprocess: false,
    activityInstanceName: '订单受理',
    activityInstanceId: '005',
    createTime: '2022-01-11 15:12',
    timeCost: '5秒',
    state: '0', // 未开始
    activityDefinitionId: 'A61194-20-54850-76-73718',
    isShowTimeInfo: false,
  },
];

const Demo = () => {
  return (
    <div>
      <h1>流程业务组件</h1>
      <OrderFlow data={mockData} />
    </div>
  );
};

ReactDOM.render(<Demo />, _mount_);
```

## API

### OrderFlow

| 参数 | 说明   | 类型             | 默认值 |
| ---- | ------ | ---------------- | ------ |
| data | 数据源 | Array<IFlowNode> | []     |

### 流程节点数据结构

```ts
interface IOrderFlowNode {
  state: string;
  activityInstanceName: string;
  createTime: string;
  timeCost: string;
  tacheType: string;
  isShowLine?: boolean;
  isShowTimeInfo?: boolean;
  timeCostColor?: string;
}
```

| 参数                 | 说明                                                                           | 类型    | 默认值   |
| -------------------- | ------------------------------------------------------------------------------ | ------- | -------- |
| state                | 节点状态， "0": 未开始, "1": 正在处理, "2": 按时完成, "3": 执行异常, "4": 作废 | string  |          |
| activityInstanceName | 名称                                                                           | string  |          |
| createTime           | 创建时间                                                                       | string  |          |
| timeCost             | 用时                                                                           | string  |          |
| tacheType            | 人工: "UserTask", 自动: "AutoTask"                                             | string  |          |
| isShowLine           | 是否展示线                                                                     | boolean | true     |
| isShowTimeInfo       | 是否展示信息内容                                                               | boolean | true     |
| timeCostColor        | 用时文字颜色                                                                   | string  | \#171717 |