OrderFlow 流程展示业务组件

定义

流程展示业务组件

基本

基本用法

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 | [] |

流程节点数据结构

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 |