@fishx/order-flow v0.0.1-alpha.6

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

流程节点数据结构

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