流程中心包含两块内容，列表与发起流程。其中，列表分为我的待办、我的待阅、我的已办、我的已阅、我的流程、流程查询，流程查询分为任务查询和流程实例查询两块。
流程中心区分移动端和PC端，区别差异于文末提供。
flow-center组件列表-PC端
MyUnFinishedWorkItem 我的待办
MyUnReadWorkItem 我的待阅
MyFinishedWorkItem 我的已办
MyReadWorkItem 我的已阅
MyWorkflow 我的流程
QueryInstance 流程实例查询
TaskSearch 任务查询
WorkflowCenterMenu 流程中心菜单树
StartWorkflow 发起流程
flow-center组件列表-移动端
MyUnFinishedWorkItem 我的待办
MyUnReadWorkItem 我的待阅
MyFinishedWorkItem 我的已办
MyReadWorkItem 我的已阅
InitialInstance 发起流程
MyInstanceItem 我的流程
引入flow-center包
import * as FlowCenter from '@cloudpivot/flow-center';
flow-center组件调用
FlowCenter.components.[端].[组件名]
如：
FlowCenter.components.pc.MyFinishedWorkItem FlowCenter.components.mobile.MyInstanceItem
组件使用具体细节
PC端
自定义表格的列
解释： 目前只能基于默认列改变表格列的数量
参数列表：
我的待办、我的待阅、我的已办、我的已阅：
/** * 自定义表格的列 */ @Prop() tableColumns!: any;
我的流程：
/** * 自定义表格的列 */ @Prop() tableProcessingColumns!: any; // 进行中 @Prop() tableCompletedColumns!: any; // 已完成 @Prop() tableCanceledColumns!: any; // 已作废
流程实例查询：
/** * 自定义表格的列 */ @Prop() tableAllColumns!: any; // 全部 @Prop() tableProcessingColumns!: any; // 进行中 @Prop() tableCompletedColumns!: any; // 已完成 @Prop() tableCanceledColumns!: any; // 已作废
任务查询：
/** * 自定义表格的列 */ @Prop() tableProcessingColumns!: any; // 处理中 @Prop() tableCompletedColumns!: any; // 已完成 @Prop() tableCanceledColumns!: any; // 被取消
表格默认列
我的待办：
defaultTableColumns:any = [
{
dataIndex: 'orderNumber',
width: 80,
slots: { title: 'indexTitle' },
scopedSlots: { customRender: 'orderNumber' }
},
{
dataIndex: 'instanceName',
width: 220,
slots: { title: 'instanceNameTitle' },
scopedSlots: { customRender: 'instanceName' }
},
{
dataIndex: 'activityName',
width: 130,
slots: { title: 'activityNameTitle' },
scopedSlots: { customRender: 'activityName' }
},
{
dataIndex: 'stayTime',
width: 220,
slots: { title: 'stayTimeTitle' },
scopedSlots: { customRender: 'stayTime' }
},
{
dataIndex: 'originatorName',
width: 130,
slots: { title: 'originatorNameTitle' },
scopedSlots: { customRender: 'originatorName' }
},
{
dataIndex: 'departmentName',
width: 220,
slots: { title: 'departmentNameTitle' },
scopedSlots: { customRender: 'departmentName' }
}
]我的待阅:
defaultTableColumns:any = [
{
dataIndex: 'orderNumber',
width: 120,
slots: { title: 'indexTitle' },
scopedSlots: { customRender: 'orderNumber' }
},
{
dataIndex: 'workflowName',
width: 130,
slots: { title: 'workflowNameTitle' }
},
{
dataIndex: 'sourceName',
width: 130,
slots: { title: 'sourceNameTitle' },
scopedSlots: { customRender: 'sourceName' }
},
{
dataIndex: 'startTime',
width: 180,
slots: { title: 'startTimeTitle' },
scopedSlots: { customRender: 'startTime' }
},
{
dataIndex: 'originatorName',
width: 130,
slots: { title: 'originatorNameTitle' },
scopedSlots: { customRender: 'originatorName' }
},
{
dataIndex: 'departmentName',
width: 200,
slots: { title: 'departmentNameTitle' },
scopedSlots: { customRender: 'departmentName' }
}
]我的已办：
defaultTableColumns:any = [
{
dataIndex: 'orderNumber',
width: 80,
slots: { title: 'indexTitle' }
},
{
dataIndex: 'instanceName',
width: 220,
slots: { title: 'instanceTitle' },
scopedSlots: { customRender: 'instanceName' }
},
{
dataIndex: 'activityName',
width: 130,
slots: { title: 'activityNameTitle' },
scopedSlots: { customRender: 'activityName' }
},
{
dataIndex: 'approvalTxt',
width: 130,
slots: { title: 'approvalTxtTitle' },
scopedSlots: { customRender: 'approvalTxt' }
},
{
dataIndex: 'finishTime',
width: 180,
slots: { title: 'finishTimeTitle' },
scopedSlots: { customRender: 'finishTime' }
},
{
dataIndex: 'originatorName',
width: 130,
slots: { title: 'originatorNameTitle' },
scopedSlots: { customRender: 'originatorName' }
},
{
dataIndex: 'workflowInstanceState',
width: 130,
slots: { title: 'workflowInstanceStateTitle' },
scopedSlots: { customRender: 'workflowInstanceState' }
},
]我的已阅：
defaultTableColumns:any = [
{
dataIndex: 'orderNumber',
width: 80,
align: 'center',
slots: { title: 'indexTitle' }
},
{
dataIndex: 'instanceName',
width: 220,
align: 'center',
slots: { title: 'instanceNameTitle' },
scopedSlots: { customRender: 'instanceName' }
},
{
dataIndex: 'workflowName',
width: 130,
align: 'center',
slots: { title: 'workflowNameTitle' },
scopedSlots: { customRender: 'workflowName' }
},
{
dataIndex: 'sourceName',
width: 130,
align: 'center',
slots: { title: 'sourceNameTitle' },
scopedSlots: { customRender: 'sourceName' }
},
{
dataIndex: 'receiveTime',
width: 180,
align: 'center',
slots: { title: 'receiveTimeTitle' },
scopedSlots: { customRender: 'receiveTime' }
},
{
dataIndex: 'originatorName',
width: 130,
align: 'center',
slots: { title: 'originatorNameTitle' },
scopedSlots: { customRender: 'originatorName' }
},
{
dataIndex: 'departmentName',
width: 200,
align: 'center',
slots: { title: 'departmentNameTitle' },
scopedSlots: { customRender: 'departmentName' }
}
]我的流程：
defaultProcessingColumns:any = [
{
title: '序号',
dataIndex: 'index',
width: 60,
align: 'center'
},
{
dataIndex: 'instanceName',
width: 296,
slots: { title: 'instanceNameTitle' },
scopedSlots: { customRender: 'instanceName' }
},
{
dataIndex: 'workflowName',
width: 130,
slots: { title: 'workflowNameTitle' },
},
{
dataIndex: 'participants',
width: 130,
slots: { title: 'participantNameTitle' },
scopedSlots: { customRender: 'participantName' }
},
{
width: 180,
dataIndex: 'stayTime',
slots: { title: 'stayTimeTitle' },
}
];
defaultCompletedColumns:any = [
{
title: '序号',
dataIndex: 'index',
width: 60,
align: 'center'
},
{
dataIndex: 'instanceName',
width: 296,
slots: { title: 'instanceNameTitle' },
scopedSlots: { customRender: 'instanceName' }
},
{
dataIndex: 'workflowName',
slots: { title: 'workflowNameTitle' },
width: 130
},
{
dataIndex: 'startTime',
slots: { title: 'startTimeTitle' },
width: 180
},
{
dataIndex: 'finishTime',
slots: { title: 'finishedTimeTitle' },
width: 180
},
{
dataIndex: 'costTime',
slots: { title: 'costTimeTitle' },
width: 180
}
];
defaultCanceledColumns:any = [
{
title: '序号',
dataIndex: 'index',
width: 60,
align: 'center'
},
{
dataIndex: 'instanceName',
width: 296,
slots: { title: 'instanceNameTitle' },
scopedSlots: { customRender: 'instanceName' }
},
{
dataIndex: 'workflowName',
slots: { title: 'workflowNameTitle' },
width: 130
},
{
dataIndex: 'startTime',
slots: { title: 'startTimeTitle' },
width: 180
},
{
dataIndex: 'finishTime',
slots: { title: 'cancellationTime' },
width: 180
}
];流程实例查询
defaultAllColumns:any = [
{
dataIndex: 'index',
width: 60,
align: 'center',
slots: { title: 'indexTitle' }
},
{
dataIndex: 'instanceName',
width: 220,
slots: { title: 'instanceNameTitle' },
scopedSlots: { customRender: 'instanceName' }
},
{
dataIndex: 'workflowName',
width: 130,
slots: { title: 'workflowNameTitle' },
},
{
dataIndex: 'startTime',
width: 180,
slots: { title: 'startTimeTitle' },
},
{
dataIndex: 'originatorName',
width: 130,
slots: { title: 'originatorNameTitle' },
scopedSlots: { customRender: 'originatorName' }
},
{
dataIndex: 'departmentName',
width: 130,
slots: { title: 'departmentNameTitle' },
scopedSlots: { customRender: 'originatorName' }
},
{
dataIndex: 'state',
width: 130,
slots: { title: 'stateTitle' },
}
];
defaultProcessingColumns:any = [
{
dataIndex: 'index',
width: 60,
align: 'center',
slots: { title: 'indexTitle' },
},
{
dataIndex: 'instanceName',
width: 220,
slots: { title: 'instanceNameTitle' },
scopedSlots: { customRender: 'instanceName' }
},
{
dataIndex: 'workflowName',
width: 130,
slots: { title: 'workflowNameTitle' },
},
{
dataIndex: 'participants',
width: 130,
slots: { title: 'participantNameTitle' },
scopedSlots: { customRender: 'participantName' }
},
{
dataIndex: 'stayTime',
width: 180,
slots: { title: 'stayTimeTitle' },
},
{
dataIndex: 'startTime',
width: 180,
slots: { title: 'startTimeTitle' },
},
{
dataIndex: 'originatorName',
slots: { title: 'originatorNameTitle' },
scopedSlots: { customRender: 'originatorName' },
width: 130
}
];
defaultCompletedColumns:any = [
{
dataIndex: 'index',
width: 60,
align: 'center',
slots: { title: 'indexTitle' },
},
{
dataIndex: 'instanceName',
width: 296,
slots: { title: 'instanceNameTitle' },
scopedSlots: { customRender: 'instanceName' }
},
{
dataIndex: 'workflowName',
width: 130,
slots: { title: 'workflowNameTitle' },
},
{
dataIndex: 'startTime',
width: 180,
slots: { title: 'startTimeTitle' }
},
{
dataIndex: 'finishTime',
width: 180,
slots: { title: 'finishedTimeTitle' }
},
{
dataIndex: 'costTime',
width: 180,
slots: { title: 'costTimeTitle' }
},
{
dataIndex: 'originatorName',
slots: { title: 'originatorNameTitle' },
scopedSlots: { customRender: 'originatorName' },
width: 130
}
];
defaultCanceledColumns:any = [
{
dataIndex: 'index',
width: 60,
align: 'center',
slots: { title: 'indexTitle' }
},
{
dataIndex: 'instanceName',
width: 220,
slots: { title: 'instanceNameTitle' },
scopedSlots: { customRender: 'instanceName' }
},
{
dataIndex: 'workflowName',
width: 130,
slots: { title: 'workflowNameTitle' },
},
{
dataIndex: 'startTime',
width: 180,
slots: { title: 'startTimeTitle' },
},
{
dataIndex: 'finishTime',
width: 180,
slots: { title: 'cancellationTime' },
},
{
dataIndex: 'originatorName',
width: 180,
slots: { title: 'originatorNameTitle' },
scopedSlots: { customRender: 'originatorName' }
},
{
dataIndex: 'departmentName',
scopedSlots: { customRender: 'departmentName' },
width: 180,
slots: { title: 'departmentNameTitle' }
}
];单应用
我的待办、我的待阅、我的已办、我的已阅是可以直接在钉钉打开的，这里称为单应用，这边需要传一些其他参数
/**
* 单应用集成属性,集成时不显示title
*/
@Prop({
default: true
}) showTitle!: boolean;
/**
* 单应用集成属性,集成时表格高度
*/
@Prop() scrollHeight!: number;
/**
* 单应用集成属性,单应用appCode
*/
@Prop() appCode!: string;
/**
* 单应用集成属性,集成时不显示发起流程按钮
*/
@Prop({
default: true
}) originate!: boolean;关于自定义事件
我的待办、我的待阅、我的已办、我的已阅这四个组件点击流程名称需要打开表单详情，这里做的是路由跳转，需要在使用的时候去监听这个事件，并跳转到项目中的路由，传播出来的事件名称均为"openForm"，如下：
<my-finished-work-item @openForm="openForm"/>
/**
* 查看表单详情
*/
openForm(obj:any) {
// 表单详情路由地址
const url = `/form/detail?workitemId=${obj.id}&workflowInstanceId=${obj.instanceId}&return=${location.pathname + location.search}`;
if (this.isDingTalk) {
this.$router.push({
path: url
});
} else {
window.open(url);
}
}其他组件
菜单树
菜单树时通过 component 的is属性进行切换的。
只需要在 项目中 components/apps/aside/aside.vue 引用即可。
<component :is="curMenu"/>
@Component({
name: 'Aside',
components: {
// todo
WorkflowCenterMenu: FlowCenter.components.pc.WorkflowCenterMenu,
// todo
}
})
/*** 分割线 ****/
curMenu:string = 'WorkflowCenterMenu'发起流程
PC端发起流程组件名为 StartWorkflow
引入直接使用即可， 如：
<start-workflow/>
移动端
store引用
因为待办待阅已办已阅使用了同一个store，故需要在 views/home/index.vue 文件中引用命名控件为circulate的store模块。
如：
// index.vue
const circulateModule = namespace('circulate');传入参数
使用组件时，需要传入appCode，appCode来自于顶级store
<MyReadWorkItem :appCode="appCode"/>
@State('appCode') appCode!: any;关于自定义事件
跟PC端逻辑一致，点击每一个item，需要跳转至项目中的路由。
传播出来的事件名称均为"openForm"
<MyFinishedWorkItem @openForm="openForm"/>
openForm(workitem:any) {
// 表单详情默认路由
this.$router.push({
name: 'form-detail',
query: {
workitemId: workitem.id,
workflowInstanceId: workitem.instanceId,
return: this.$route.fullPath
}
});
}其他组件
发起流程 InitialInstance
移动端发起流程组件为 InitialInstance，引入直接使用即可。
<initial-instance/>
我的流程 MyInstanceItem
这是单个item，需要传入一个我的所有流程list，同样监听一个自定义事件 openForm ，跳转项目中路由
如：
这是单个item，需要传入一个我的所有流程list，同样监听一个自定义事件 openForm ，跳转项目中路由
如：
<instances-item v-for="(circulate,index) in myInstances" :key="index" :workitem="circulate" @openForm="openForm(circulate)" />
openForm(workitem:any) {
this.$router.push({
name: 'form-detail',
query: {
workflowInstanceId: workitem.id,
return: this.$route.fullPath
}
});
}-
有用（5）
-
没有用（0）
