流程模块目前由2部分组成：components组件、typings声明
typings声明
typings下声明了流程相关的所有状态的枚举，包括：流程行为状态、流程任务状态、流程的节点状态、流程状态、流程行为样式、参与者的类型
workflow-enum
/**
* 流程行为状态
*/
export const workflowActionStatus: { [key: string]: string } = {
'0': '提交',
'1': '提交',
'2': '作废',
'3': '同意',
'4': '不同意',
'5': '加签',
'6': '协办',
'7': '转办',
'8': '驳回',
'9': '结束流程',
'10': '待阅',
'11': '已阅'
};
/**
* 流程任务状态
*/
export const workItemStatus: { [key: string]: string } = {
'1': '未启动',
'2': '进行中',
'3': '已完成',
'4': '被取消',
'5': '草稿'
};
/**
* 流程的节点状态
*/
export const workflowNode: { [key: string]: string } = {
'0': '已办节点',
'1': '进行中节点',
'2': '异常节点',
};
/**
* 流程状态
*/
export enum WorkflowState {
DRAFT = '草稿',
PROCESSING = '进行中',
COMPLETED = '已完成',
CANCELED = '已作废',
EXCEPTION = '异常'
}
//@workflowActionClassName: gray, green, blue, red;
/**
* 流程行为样式
*/
export enum WorkflowAction {
DRAFT = 'gray',
PROCESSING = 'green',
COMPLETED = 'blue',
CANCELED = 'red'
}
/**
* 参与者的类型
*/
export enum WorkflowParticipantType {
MORMAL = 0,
FORWARD = 1,
ASSIST = 2,
ADD_WORKITEM = 3,
CIRCULATE_ITEM = 4
}components组件
components组件由pc、mobile、shared渲染器构成；目前在流程信息、流程跟踪（包含流程基本信息、流程图、审批日志、操作日志等）中有使用。
flow组件列表-PC端
WorkflowInfo 流程信息
WorkflowTrack 流程跟踪
WorkflowTrackActions 流程跟踪顶部操作按钮
WorkflowChart 流程图展示
Approval 表单审批记录
flow组件列表-移动端
WorkflowInfo 流程信息
Approval 审批记录展示
WorkflowChart 流程图展示
如何使用
组件引入路径： import * as flow from "@cloudpivot/flow";
组件调用路径： flow.components.[端].[组件名]
例如：
flow.components.pc.WorkflowInfo, flow.components.mobile.WorkflowChart
###1. 引用示例
1.1 流程信息
<template> <!-- 移动端存在参数user、pc端不需要这个参数 --> <workflow-info v-if="workflowInstanceId" :id="workflowInstanceId" :itemId="formObj.workItemId" :user="creater" @flowTrack="flowTrack" ></workflow-info> </template>
import * as flow from "@cloudpivot/flow";
@Component({
name: "pc-form-detail",
components: {
WorkflowInfo: flow.components.pc.WorkflowInfo,
},
)}1.2 流程跟踪--pc
<template> <!-- 流程跟踪Header的按钮 --> <workflow-track-actions :headerAction="headerAction" :workflowInstanceId="workflowInstanceId" :workItemId="workItemId" @edit="onEdit" @logs="onLogs" ></workflow-track-actions> <!-- 流程跟踪内容主体 --> <workflow-track-main :loading="loading" :baseInfo="baseInfo" :chart="chart" :logs="logs" ></workflow-track-main> </template>
import * as flow from "@cloudpivot/flow";
import { workflowApi } from "@cloudpivot/api";
@Component({
name: "workflow-track",
components: {
WorkflowTrackMain: flow.components.pc.WorkflowTrack,
WorkflowTrackActions: flow.components.pc.WorkflowTrackActions
}
})1.3 流程跟踪--mobile
<template> <!-- 审批记录 --> <approvals :approvals="approvals" :creater="creater" :workflowInfo="workflowInfo" :participants="participants" v-show="!index" @preview="onPreview" @detail="onDetail" ></approvals> <!-- 流程图 --> <Chart :chart="chart" :show="!!index" v-show="index" >1 Container </Chart> </template>
import * as flow from "@cloudpivot/flow";
import { workflowApi } from "@cloudpivot/api";
@Component({
name: "workflow-track",
components: {
Approvals : flow.components.mobile.Approval,
Chart : flow.components.mobile.WorkflowChart
}
})###2. 组件传参prop
2.1 流程信息组件参数
// id： 流程实例ID workflowInstanceId：string // itemId：流程workItemId workItemId：string // user：创建人对象（仅移动端需要） user：any /** * flowTrack：点击流程跟踪回调事件 */ flowTrack：function
2.2.2 流程跟踪内容主体组件参数--pc
// loading： 流程跟踪页面加载时是否展示loading loading：Boolean // baseInfo：流程跟踪基础信息 baseInfo：any // chart：流程图数据 chart：any // logs：审批日志数据 logs：any
2.3.1 审批记录组件参数--mobile
// approvals： 审批记录的数据数组 approvals：Array // creater：创建人对象 creater：any // workflowInfo：流程信息对象 workflowInfo：any // participants： 当前处理人对象 participants：any /** * preview：图片预览回调事件 */ preview：function /** * detail：查看审批记录回调事件 */ detail：function
2.3.2 流程图组件参数--mobile
// show： 流程跟踪页面加载时滚动条定位到流程图位置 show：Boolean // chart：流程图数据 chart：any
-
有用（6）
-
没有用（0）
