jcbpm-vue
v1.6.12
Published
jcbpm-vue
Downloads
152
Maintainers
jc-cc-developerReadme
JCBPM-VUE组件
概述
当前组件
提供了十二种api：
- 发起
- 办理
- 终止
- 加签
- 减签
- 指派处理人
- 委派
- 跳转
- 拿回
- 退回上一节点
- 退回历史节点
- 转办
流程图高亮节点 - 快速入门
使用方式
- 通过npm install jcbpm-vue完成下载后
import 'jcbpm-vue/dist/style.css'
import { ProcessHightlight } from 'jcbpm-vue' /*
* @params 非必传 processHightlightVisible 流程设计弹窗是否显示，默认展示
* @params 非必传 isRefreshProcess 流程设计高亮图是否刷新 boolean
* @params 非必传 showTitle 是否显示 流程设计高亮图 标题
* @params 非必传 customTitle 是否显示 自定义标题
* @params 非必传 processStyle 流程图自定义宽高样式
{
width: string // px、em、%
height: string // px、em、%
}
* @params 必传 hightlightParams 流程实例Id
{
[propname: string]: string|number
instanceId: string // 流程实例Id
}
* @params 必传 processHightlightConfig 配置项
{
AuthenticationToken：登录token函数，
BpmRequestPrefix：服务接口地址，
ApplicationId?: 应用Id 非必填
AuthorizationAppType?: token类型 非必填
}
*/
<ProcessHightlight
:process-hightlight-visible="boolean"
:hightlight-params="hightlightParams"
:process-hightlight-config="processHightlightConfig"
/>流程设计面板组件 - 快速入门
使用方式
- 通过npm install jcbpm-vue完成下载后
import 'jcbpm-vue/dist/style.css'
import { ProcessDesign } from 'jcbpm-vue' /*
* @params 必传 processDesignVisible 流程设计弹窗是否显示
* @params 必传 processDesignId 流程Id
* @params 必传 processDesignKey 流程标识
* @params 非必传 customTabOptions 设置经办者
* @params 非必传 customFormTabOptions 设置表单配置
* @params 必传 processDesignConfig 配置项
{
AuthenticationToken：登录token，
ManageRequestPrefix：管理接口地址，
ApplicationId?: 应用Id 非必填
AuthorizationAppType?: token类型 非必填
}
* @methods confirmModalClose 关闭事件，返回true
*/
// 设置经办者 - customTabOptions为数组对象，其中字段：
| 属性 | 说明 | 类型 | 是否必填| 默认值 |
| -------- | -------- | -------- | -------- | -------- |
| title | 自定义tab名称 | string | 是 | - |
| type | 自定义tab类型，关键字 | string | 是 | user：用户，dept：部门，role：角色，relations：关系，posts：岗位，或者其他自定义string类型的值 |
| left | 在页面左侧显示数据 | object | 否 | - |
| right | 在页面右侧显示数据 | object | 否 | - |
// left与right皆为对象，字段相同：
| 属性 | 说明 | 类型 | 是否必填| 默认值 |
| -------- | -------- | -------- | -------- | -------- |
| viewType | 渲染类型 | string | 是 | page：分页列表，tree：树形结构 |
| params | 当viewType设置为page，此参数是列表的搜索条件 | object | 否 | - |
| pagination | 当viewType设置为page，此参数设置是否显示分页 | boolean | 否 | - |
| columns | 当viewType设置为page，此参数可自定义列表columns | array(参数同[email protected]) | 否 | - |
| selectMode | 当viewType设置为page，此参数可设置列表项多选还是单选 | string | 否 | checkbox：多选框，radio：单选框 |
| checkable | 当viewType设置为tree，此参数可设置树形数据是否可多选 | boolean | 否 | - |
| data | 数据 | asyncfunction | 是 | - |
// (left|right).params字段：
| 属性 | 说明 | 类型 | 是否必填| 默认值 |
| -------- | -------- | -------- | -------- | -------- |
| value | 参数字段key | string | 是 | - |
| label | 参数字段名称 | string | 是 | - |
| isTreeParam | 当viewType设置为page，此参数为true时，树选中数据给value赋值，入参 | boolean | 否 | - |
// 示例：
const customTabOptions = ref([
// page分页类型
{
title: '你的关系',
type: 'relations',
right: {
params:[
{
value: 'name',
label: '名称',
},
],
viewType: 'page',
pagination: true,
selectMode: 'radio',
// columns内参数结构完全遵照ant-design@^2.2.8版本
columns: [
{
title: getI18n('system', 'SYSTEM_Process_RelationsName'),
dataIndex: 'name',
align: 'center',
},
],
data: async() => {
let param: GetJobPositionsListParamsModel = {
per_page: 10000,
current_page: 1,
}
const res: any = await getJobPositionsListApi(param)
// page类型 数据结构id、name为默认必传属性，其他参数如果想显示，请在columns中设置
let _data = res.data.data.map( v => {
return {
id: v.id,
name: v.name,
}
})
const _resData = {
data: _data, // 数据
current: res.data.meta.pagination.currentPage, // 分页参数
size: res.data.meta.pagination.perPage, // 分页参数
total: res.data.meta.pagination.total, // 分页参数
}
return _resData
},
},
},
// tree树形数据
{
title: '你的用户',
type: 'user',
left: {
viewType: 'tree',
checkable: false,
data: async(data: any) => {
let param: GetDepartmentsListParamsModel = {
per_page: -1,
}
if( !validatenull(data) ){
param = Object.assign({}, data)
}
const res: RequestResult = await getDepartmentsListApi(param)
/**
*
* 业务逻辑...
*
*/
// tree类型 数据结构title、key为默认必传属性
return {
data: JSON.parse(
JSON.stringify(res.data.data)
.replace(/name/g, 'title')
.replace(/id/g, 'key')
) // 数据
}
}
},
right: {
params:[
{
value: 'name',
label: '名称',
isTreeParam: false,
},
{
value: 'department_id',
label: '部门Id',
isTreeParam: true, // 树形数据选中时，点击page列表查询按钮，为此department_id参数赋值
},
],
viewType: 'page',
pagination: true,
columns: [
// 序号
{
title: getI18n('common', 'Common_Columns_Index'),
dataIndex: 'index',
align: 'center',
slots: { customRender: 'index' },
width: 80,
},
// 用户姓名
{
title: getI18n('system', 'SYSTEM_User_UsersName'),
dataIndex: 'name',
align: 'center',
},
// 部门名称
{
title: getI18n('system', 'SYSTEM_User_DepartmentName'),
dataIndex: 'departments',
align: 'center',
},
],
data: async(data: any) => {
let param: GetUsersListByApplicationIdParamsModel = {
per_page: 10,
page: 1,
}
if( !validatenull(data) ){
param = Object.assign({}, data)
}
const res: any = await getUsersListByApplicationIdApi(param)
const _resData = {
data: res.data.data, // 数据
current: res.data.meta.pagination.currentPage, // 分页参数
size: res.data.meta.pagination.perPage, // 分页参数
total: res.data.meta.pagination.total, // 分页参数
}
return _resData
},
},
},
])
// 表单设置 - customFormTabOptions为数组对象，其中字段：
| 属性 | 说明 | 类型 | 是否必填| 默认值 |
| -------- | -------- | -------- | -------- | -------- |
| title | 自定义tab名称 | string | 是 | - |
| type | 自定义tab类型，关键字 | string | 是 | 自定义string类型的值 |
| params | 当viewType设置为page，此参数是列表的搜索条件 | object | 否 | - |
| pagination | 当viewType设置为page，此参数设置是否显示分页 | boolean | 否 | - |
| columns | 当viewType设置为page，此参数可自定义列表columns | array(参数同[email protected]) | 否 | - |
| data | 数据 | asyncfunction | 是 | - |
| draggable | 是否拖拽 | boolean | 否 | false |
| formWebsiteUrl | 是否需要再表单tab页中添加第三方表单地址 | string | 否 | - |
// 示例：
const customFormTabOptions = ref([
{
//
title: '自定义表单',
//
type: 'jcform',
draggable: true,
// 列表数据
data: async (data: any) => {
let param: GetJCFormsListApiModel = {
size: 10,
current: 1,
}
if( !validatenull(data) ){
param = Object.assign({}, data)
}
const res = await getJCFormsListApi(param)
return res
},
// 列表搜索参数
params: [{
value: 'name',
label: '表单名称',
}],
// 分页
pagination: true,
// 列表
columns: [
// 序号
{
title: getI18n('common', 'Common_Columns_Index'),
dataIndex: 'index',
slots: { customRender: 'index' },
align: 'center',
width: '8%',
},
...
// 标签 => 若需要配置可输入的input框，暂只支持tag关键字
{
title: getI18n('system', 'SYSTEM_Form_Tag'),
dataIndex: 'tag',
slots: { customRender: 'tag' },
align: 'center',
width: '20%',
}
],
// 第三方表单地址， 新窗口打开
formWebsiteUrl: 'https://www.npmjs.com/settings/jc-cc-developer/packages',
},
])
<ProcessDesign
:process-design-visible="boolean"
:process-design-id="流程Id"
:process-design-key="流程标识"
:process-design-config="processDesignConfig"
:customTabOptions="customTabOptions"
:customFormTabOptions="customFormTabOptions"
@confirm-modal-close="关闭事件"
/>
流程图查看组 - 快速入门
使用方式
- 通过npm install jcbpm-vue完成下载后
import 'jcbpm-vue/dist/style.css'
import { ProcessViewer } from 'jcbpm-vue'
/*
* @params 非必传 processViewerVisible 流程图查看弹窗是否显示，默认展示
* @params 非必传 isShowNodeInfo 流程图查看 点击节点时，是否展示节点配置信息， 默认不展示
* @params 非必传 processStyle 流程图自定义宽高样式
{
width: string // px、em、%
height: string // px、em、%
}
* @params 必传 flowId 流程标识
* @params 必传 processViewerConfig 配置项
{
AuthenticationToken：登录token函数，
BpmRequestPrefix：管理接口地址，
ApplicationId?: 应用Id 非必填
AuthorizationAppType?: token类型 非必填
isShowNodeInfo?: 是否展示节点配置信息 非必填
}
*/ <ProcessViewer
:process-Viewer-visible="boolean"
:flow-id="flowId"
:process-viewer-config="processViewerConfig"
/>流程流转操作记录查看组件 - 快速入门
使用方式
- 通过npm install jcbpm-vue完成下载后
import 'jcbpm-vue/dist/style.css'
import { ProcessWanderRecords } from 'jcbpm-vue'
/*
* @params 非必传 processWanderRecordsVisible 流程流转记录弹窗是否显示，默认展示
* @params 非必传 isRefreshList 流程流转记录是否刷新 boolean
* @params 非必传 showTitle 是否显示 流程设计高亮图 标题
* @params 非必传 customTitle 是否显示 自定义标题
* @params 必传 businessKey 业务Id
* @params 必传 processWanderRecordsConfig 配置项
{
AuthenticationToken：登录token函数，
BpmRequestPrefix：服务接口地址，
ApplicationId?: 应用Id 非必填
AuthorizationAppType?: token类型 非必填
}
*/ <ProcessWanderRecords
:process-wander-records-visible="boolean"
:business-key="businessKey"
:process-viewer-config="processWanderRecordsConfig"
/> 流程流转操作时间线查看组件 - 快速入门
使用方式
- 通过npm install jcbpm-vue完成下载后
import 'jcbpm-vue/dist/style.css'
import { ProcessWanderTimeline } from 'jcbpm-vue'
/*
* @params 非必传 processWanderTimelineVisible 流程流转记录弹窗是否显示，默认展示
* @params 非必传 isRefreshList 流程流转记录是否刷新 boolean
* @params 非必传 showTitle 是否显示 流程设计高亮图 标题
* @params 非必传 customTitle 是否显示 自定义标题
* @params 必传 timelineParams 流程Id
{
[propname: string]: string|number
businessKey: string // 流程Id
}
* @params 必传 processWanderTimelineConfig 配置项
{
AuthenticationToken：登录token函数，
BpmRequestPrefix：服务接口地址，
ApplicationId?: 应用Id 非必填
AuthorizationAppType?: token类型 非必填
}
*/ <ProcessWanderTimeline
:process-wander-timeline-visible="boolean"
:timeline-params="timelineParams"
:process-viewer-config="processWanderTimelineConfig"
/>