mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

Merge branch 'projects/mesxc-test' into projects/mesxc-dy

Browse Source
This commit is contained in:
helloDy
2024-03-29 14:38:26 +08:00
parent caf614ca35 b8f9d3626f
commit 34aeb029b5
353 changed files with 2395 additions and 33367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/bpm/activity.js
View File

@@ -1,9 +0,0 @@
import request from '@/utils/request'
export function getActivityList(query) {
return request({
url: '/bpm/activity/list',
method: 'get',
params: query
})
}

24
src/api/bpm/definition.js
View File

@@ -1,24 +0,0 @@
import request from '@/utils/request'
export function getProcessDefinitionPage(query) {
return request({
url: '/bpm/process-definition/page',
method: 'get',
params: query
})
}
export function getProcessDefinitionList(query) {
return request({
url: '/bpm/process-definition/list',
method: 'get',
params: query
})
}
export function getProcessDefinitionBpmnXML(id) {
return request({
url: '/bpm/process-definition/get-bpmn-xml?id=' + id,
method: 'get'
})
}

52
src/api/bpm/form.js
View File

@@ -1,52 +0,0 @@
import request from '@/utils/request'
// 创建工作流的表单定义
export function createForm(data) {
return request({
url: '/bpm/form/create',
method: 'post',
data: data
})
}
// 更新工作流的表单定义
export function updateForm(data) {
return request({
url: '/bpm/form/update',
method: 'put',
data: data
})
}
// 删除工作流的表单定义
export function deleteForm(id) {
return request({
url: '/bpm/form/delete?id=' + id,
method: 'delete'
})
}
// 获得工作流的表单定义
export function getForm(id) {
return request({
url: '/bpm/form/get?id=' + id,
method: 'get'
})
}
// 获得工作流的表单定义分页
export function getFormPage(query) {
return request({
url: '/bpm/form/page',
method: 'get',
params: query
})
}
// 获得动态表单的精简列表
export function getSimpleForms() {
return request({
url: '/bpm/form/list-all-simple',
method: 'get'
})
}

27
src/api/bpm/leave.js
View File

@@ -1,27 +0,0 @@
import request from '@/utils/request'
// 创建请假申请
export function createLeave(data) {
return request({
url: '/bpm/oa/leave/create',
method: 'post',
data: data
})
}
// 获得请假申请
export function getLeave(id) {
return request({
url: '/bpm/oa/leave/get?id=' + id,
method: 'get'
})
}
// 获得请假申请分页
export function getLeavePage(query) {
return request({
url: '/bpm/oa/leave/page',
method: 'get',
params: query
})
}

58
src/api/bpm/model.js
View File

@@ -1,58 +0,0 @@
import request from '@/utils/request'
export function getModelPage(query) {
return request({
url: '/bpm/model/page',
method: 'get',
params: query
})
}
export function getModel(id) {
return request({
url: '/bpm/model/get?id=' + id,
method: 'get'
})
}
export function updateModel(data) {
return request({
url: '/bpm/model/update',
method: 'PUT',
data: data
})
}
// 任务状态修改
export function updateModelState(id, state) {
return request({
url: '/bpm/model/update-state',
method: 'put',
data: {
id,
state
}
})
}
export function createModel(data) {
return request({
url: '/bpm/model/create',
method: 'POST',
data: data
})
}
export function deleteModel(id) {
return request({
url: '/bpm/model/delete?id=' + id,
method: 'DELETE'
})
}
export function deployModel(id) {
return request({
url: '/bpm/model/deploy?id=' + id,
method: 'POST'
})
}

35
src/api/bpm/processInstance.js
View File

@@ -1,35 +0,0 @@
import request from '@/utils/request'
export function getMyProcessInstancePage(query) {
return request({
url: '/bpm/process-instance/my-page',
method: 'get',
params: query
})
}
export function createProcessInstance(data) {
return request({
url: '/bpm/process-instance/create',
method: 'POST',
data: data
})
}
export function cancelProcessInstance(id, reason) {
return request({
url: '/bpm/process-instance/cancel',
method: 'DELETE',
data: {
id,
reason
}
})
}
export function getProcessInstance(id) {
return request({
url: '/bpm/process-instance/get?id=' + id,
method: 'get',
})
}

63
src/api/bpm/task.js
View File

@@ -1,63 +0,0 @@
import request from '@/utils/request'
export function getTodoTaskPage(query) {
return request({
url: '/bpm/task/todo-page',
method: 'get',
params: query
})
}
export function getDoneTaskPage(query) {
return request({
url: '/bpm/task/done-page',
method: 'get',
params: query
})
}
export function completeTask(data) {
return request({
url: '/bpm/task/complete',
method: 'PUT',
data: data
})
}
export function approveTask(data) {
return request({
url: '/bpm/task/approve',
method: 'PUT',
data: data
})
}
export function rejectTask(data) {
return request({
url: '/bpm/task/reject',
method: 'PUT',
data: data
})
}
export function backTask(data) {
return request({
url: '/bpm/task/back',
method: 'PUT',
data: data
})
}
export function updateTaskAssignee(data) {
return request({
url: '/bpm/task/update-assignee',
method: 'PUT',
data: data
})
}
export function getTaskListByProcessInstanceId(processInstanceId) {
return request({
url: '/bpm/task/list-by-process-instance-id?processInstanceId=' + processInstanceId,
method: 'get',
})
}

25
src/api/bpm/taskAssignRule.js
View File

@@ -1,25 +0,0 @@
import request from '@/utils/request'
export function getTaskAssignRuleList(query) {
return request({
url: '/bpm/task-assign-rule/list',
method: 'get',
params: query
})
}
export function createTaskAssignRule(data) {
return request({
url: '/bpm/task-assign-rule/create',
method: 'post',
data: data
})
}
export function updateTaskAssignRule(data) {
return request({
url: '/bpm/task-assign-rule/update',
method: 'put',
data: data
})
}

52
src/api/bpm/userGroup.js
View File

@@ -1,52 +0,0 @@
import request from '@/utils/request'
// 创建用户组
export function createUserGroup(data) {
return request({
url: '/bpm/user-group/create',
method: 'post',
data: data
})
}
// 更新用户组
export function updateUserGroup(data) {
return request({
url: '/bpm/user-group/update',
method: 'put',
data: data
})
}
// 删除用户组
export function deleteUserGroup(id) {
return request({
url: '/bpm/user-group/delete?id=' + id,
method: 'delete'
})
}
// 获得用户组
export function getUserGroup(id) {
return request({
url: '/bpm/user-group/get?id=' + id,
method: 'get'
})
}
// 获得用户组分页
export function getUserGroupPage(query) {
return request({
url: '/bpm/user-group/page',
method: 'get',
params: query
})
}
// 获取用户组精简信息列表
export function listSimpleUserGroups() {
return request({
url: '/bpm/user-group/list-all-simple',
method: 'get'
})
}

54
src/api/mall/market/banner.js
View File

@@ -1,54 +0,0 @@
import request from '@/utils/request'
// 创建Banner
export function createBanner(data) {
return request({
url: '/market/banner/create',
method: 'post',
data: data
})
}
// 更新Banner
export function updateBanner(data) {
return request({
url: '/market/banner/update',
method: 'put',
data: data
})
}
// 删除Banner
export function deleteBanner(id) {
return request({
url: '/market/banner/delete?id=' + id,
method: 'delete'
})
}
// 获得Banner
export function getBanner(id) {
return request({
url: '/market/banner/get?id=' + id,
method: 'get'
})
}
// 获得Banner分页
export function getBannerPage(query) {
return request({
url: '/market/banner/page',
method: 'get',
params: query
})
}
// 导出Banner Excel
export function exportBannerExcel(query) {
return request({
url: '/market/banner/export-excel',
method: 'get',
params: query,
responseType: 'blob'
})
}

63
src/api/mall/product/brand.js
View File

@@ -1,63 +0,0 @@
import request from '@/utils/request'
// 创建品牌
export function createBrand(data) {
return request({
url: '/product/brand/create',
method: 'post',
data: data
})
}
// 更新品牌
export function updateBrand(data) {
return request({
url: '/product/brand/update',
method: 'put',
data: data
})
}
// 删除品牌
export function deleteBrand(id) {
return request({
url: '/product/brand/delete?id=' + id,
method: 'delete'
})
}
// 获得品牌
export function getBrand(id) {
return request({
url: '/product/brand/get?id=' + id,
method: 'get'
})
}
// 获得品牌list
export function getBrandList() {
return request({
url: '/product/brand/list',
method: 'get'
})
}
// 获得品牌分页
export function getBrandPage(query) {
return request({
url: '/product/brand/page',
method: 'get',
params: query
})
}
// 导出品牌 Excel
export function exportBrandExcel(query) {
return request({
url: '/product/brand/export-excel',
method: 'get',
params: query,
responseType: 'blob'
})
}

44
src/api/mall/product/category.js
View File

@@ -1,44 +0,0 @@
import request from '@/utils/request'
// 创建商品分类
export function createProductCategory(data) {
return request({
url: '/product/category/create',
method: 'post',
data: data
})
}
// 更新商品分类
export function updateProductCategory(data) {
return request({
url: '/product/category/update',
method: 'put',
data: data
})
}
// 删除商品分类
export function deleteProductCategory(id) {
return request({
url: '/product/category/delete?id=' + id,
method: 'delete'
})
}
// 获得商品分类
export function getProductCategory(id) {
return request({
url: '/product/category/get?id=' + id,
method: 'get'
})
}
// 获得商品分类列表
export function getProductCategoryList(query) {
return request({
url: '/product/category/list',
method: 'get',
params: query
})
}

113
src/api/mall/product/property.js
View File

@@ -1,113 +0,0 @@
import request from '@/utils/request'
// ------------------------ 属性项 -------------------
// 创建属性项
export function createProperty(data) {
return request({
url: '/product/property/create',
method: 'post',
data: data
})
}
// 更新属性项
export function updateProperty(data) {
return request({
url: '/product/property/update',
method: 'put',
data: data
})
}
// 删除属性项
export function deleteProperty(id) {
return request({
url: '/product/property/delete?id=' + id,
method: 'delete'
})
}
// 获得属性项
export function getProperty(id) {
return request({
url: '/product/property/get?id=' + id,
method: 'get'
})
}
// 获得属性项分页
export function getPropertyPage(query) {
return request({
url: '/product/property/page',
method: 'get',
params: query
})
}
// 获得属性项列表
export function getPropertyList(query) {
return request({
url: '/product/property/list',
method: 'get',
params: query
})
}
// 获得属性项列表
export function getPropertyListAndValue(query) {
return request({
url: '/product/property/get-value-list',
method: 'get',
params: query
})
}
// ------------------------ 属性值 -------------------
// 获得属性值分页
export function getPropertyValuePage(query) {
return request({
url: '/product/property/value/page',
method: 'get',
params: query
})
}
// 获得属性值
export function getPropertyValue(id) {
return request({
url: '/product/property/value/get?id=' + id,
method: 'get'
})
}
// 创建属性值
export function createPropertyValue(data) {
return request({
url: '/product/property/value/create',
method: 'post',
data: data
})
}
// 更新属性值
export function updatePropertyValue(data) {
return request({
url: '/product/property/value/update',
method: 'put',
data: data
})
}
// 删除属性值
export function deletePropertyValue(id) {
return request({
url: '/product/property/value/delete?id=' + id,
method: 'delete'
})
}
export class exportPropertyExcel {
}

9
src/api/mall/product/sku.js
View File

@@ -1,9 +0,0 @@
import request from '@/utils/request'
// 获得商品 SKU 选项的列表
export function getSkuOptionList() {
return request({
url: '/product/sku/get-option-list',
method: 'get',
})
}

52
src/api/mall/product/spu.js
View File

@@ -1,52 +0,0 @@
import request from '@/utils/request'
// 创建商品 SPU
export function createSpu(data) {
return request({
url: '/product/spu/create',
method: 'post',
data: data
})
}
// 更新商品 SPU
export function updateSpu(data) {
return request({
url: '/product/spu/update',
method: 'put',
data: data
})
}
// 删除商品 SPU
export function deleteSpu(id) {
return request({
url: '/product/spu/delete?id=' + id,
method: 'delete'
})
}
// 获得商品 SPU 详情
export function getSpuDetail(id) {
return request({
url: '/product/spu/get-detail?id=' + id,
method: 'get'
})
}
// 获得商品 SPU 分页
export function getSpuPage(query) {
return request({
url: '/product/spu/page',
method: 'get',
params: query
})
}
// 获得商品 SPU 精简列表
export function getSpuSimpleList() {
return request({
url: '/product/spu/get-simple-list',
method: 'get',
})
}

18
src/api/mall/promotion/coupon.js
View File

@@ -1,18 +0,0 @@
import request from '@/utils/request'
// 删除优惠劵
export function deleteCoupon(id) {
return request({
url: '/promotion/coupon/delete?id=' + id,
method: 'delete'
})
}
// 获得优惠劵分页
export function getCouponPage(query) {
return request({
url: '/promotion/coupon/page',
method: 'get',
params: query
})
}

67
src/api/mall/promotion/couponTemplate.js
View File

@@ -1,67 +0,0 @@
import request from '@/utils/request'
// 创建优惠劵模板
export function createCouponTemplate(data) {
return request({
url: '/promotion/coupon-template/create',
method: 'post',
data: data
})
}
// 更新优惠劵模板
export function updateCouponTemplate(data) {
return request({
url: '/promotion/coupon-template/update',
method: 'put',
data: data
})
}
// 更新优惠劵模板的状态
export function updateCouponTemplateStatus(id, status) {
const data = {
id,
status
}
return request({
url: '/promotion/coupon-template/update-status',
method: 'put',
data: data
})
}
// 删除优惠劵模板
export function deleteCouponTemplate(id) {
return request({
url: '/promotion/coupon-template/delete?id=' + id,
method: 'delete'
})
}
// 获得优惠劵模板
export function getCouponTemplate(id) {
return request({
url: '/promotion/coupon-template/get?id=' + id,
method: 'get'
})
}
// 获得优惠劵模板分页
export function getCouponTemplatePage(query) {
return request({
url: '/promotion/coupon-template/page',
method: 'get',
params: query
})
}
// 导出优惠劵模板 Excel
export function exportCouponTemplateExcel(query) {
return request({
url: '/promotion/coupon-template/export-excel',
method: 'get',
params: query,
responseType: 'blob'
})
}

52
src/api/mall/promotion/discountActivity.js
View File

@@ -1,52 +0,0 @@
import request from '@/utils/request'
// 创建限时折扣活动
export function createDiscountActivity(data) {
return request({
url: '/promotion/discount-activity/create',
method: 'post',
data: data
})
}
// 更新限时折扣活动
export function updateDiscountActivity(data) {
return request({
url: '/promotion/discount-activity/update',
method: 'put',
data: data
})
}
// 关闭限时折扣活动
export function closeDiscountActivity(id) {
return request({
url: '/promotion/discount-activity/close?id=' + id,
method: 'put'
})
}
// 删除限时折扣活动
export function deleteDiscountActivity(id) {
return request({
url: '/promotion/discount-activity/delete?id=' + id,
method: 'delete'
})
}
// 获得限时折扣活动
export function getDiscountActivity(id) {
return request({
url: '/promotion/discount-activity/get?id=' + id,
method: 'get'
})
}
// 获得限时折扣活动分页
export function getDiscountActivityPage(query) {
return request({
url: '/promotion/discount-activity/page',
method: 'get',
params: query
})
}

52
src/api/mall/promotion/rewardActivity.js
View File

@@ -1,52 +0,0 @@
import request from '@/utils/request'
// 创建满减送活动
export function createRewardActivity(data) {
return request({
url: '/promotion/reward-activity/create',
method: 'post',
data: data
})
}
// 更新满减送活动
export function updateRewardActivity(data) {
return request({
url: '/promotion/reward-activity/update',
method: 'put',
data: data
})
}
// 关闭满减送活动
export function closeRewardActivity(id) {
return request({
url: '/promotion/reward-activity/close?id=' + id,
method: 'put'
})
}
// 删除满减送活动
export function deleteRewardActivity(id) {
return request({
url: '/promotion/reward-activity/delete?id=' + id,
method: 'delete'
})
}
// 获得满减送活动
export function getRewardActivity(id) {
return request({
url: '/promotion/reward-activity/get?id=' + id,
method: 'get'
})
}
// 获得满减送活动分页
export function getRewardActivityPage(query) {
return request({
url: '/promotion/reward-activity/page',
method: 'get',
params: query
})
}

52
src/api/mall/promotion/seckillActivity.js
View File

@@ -1,52 +0,0 @@
import request from '@/utils/request'
// 创建秒杀活动
export function createSeckillActivity(data) {
return request({
url: '/promotion/seckill-activity/create',
method: 'post',
data: data
})
}
// 更新秒杀活动
export function updateSeckillActivity(data) {
return request({
url: '/promotion/seckill-activity/update',
method: 'put',
data: data
})
}
// 关闭限时折扣活动
export function closeSeckillActivity(id) {
return request({
url: '/promotion/seckill-activity/close?id=' + id,
method: 'put'
})
}
// 删除秒杀活动
export function deleteSeckillActivity(id) {
return request({
url: '/promotion/seckill-activity/delete?id=' + id,
method: 'delete'
})
}
// 获得秒杀活动
export function getSeckillActivity(id) {
return request({
url: '/promotion/seckill-activity/get?id=' + id,
method: 'get'
})
}
// 获得秒杀活动分页
export function getSeckillActivityPage(query) {
return request({
url: '/promotion/seckill-activity/page',
method: 'get',
params: query
})
}

62
src/api/mall/promotion/seckillTime.js
View File

@@ -1,62 +0,0 @@
import request from '@/utils/request'
// 创建秒杀时段
export function createSeckillTime(data) {
return request({
url: '/promotion/seckill-time/create',
method: 'post',
data: data
})
}
// 更新秒杀时段
export function updateSeckillTime(data) {
return request({
url: '/promotion/seckill-time/update',
method: 'put',
data: data
})
}
// 删除秒杀时段
export function deleteSeckillTime(id) {
return request({
url: '/promotion/seckill-time/delete?id=' + id,
method: 'delete'
})
}
// 获得秒杀时段
export function getSeckillTime(id) {
return request({
url: '/promotion/seckill-time/get?id=' + id,
method: 'get'
})
}
// 获得秒杀时段分页
export function getSeckillTimePage(query) {
return request({
url: '/promotion/seckill-time/page',
method: 'get',
params: query
})
}
// 获取所有的秒杀时段
export function getSeckillTimeList() {
return request({
url: '/promotion/seckill-time/list',
method: 'get'
})
}
// 导出秒杀时段 Excel
export function exportSeckillTimeExcel(query) {
return request({
url: '/promotion/seckill-time/export-excel',
method: 'get',
params: query,
responseType: 'blob'
})
}

18
src/api/mall/trade/afterSale.js
View File

@@ -1,18 +0,0 @@
import request from '@/utils/request'
// 获得交易售后
export function getAfterSale(id) {
return request({
url: '/trade/after-sale/get?id=' + id,
method: 'get'
})
}
// 获得交易售后分页
export function getAfterSalePage(query) {
return request({
url: '/trade/after-sale/page',
method: 'get',
params: query
})
}

18
src/api/mall/trade/order.js
View File

@@ -1,18 +0,0 @@
import request from '@/utils/request'
// 获得交易订单分页
export function getOrderPage(query) {
return request({
url: '/trade/order/page',
method: 'get',
params: query
})
}
// 获得交易订单详情
export function getOrderDetail(id) {
return request({
url: '/trade/order/get-detail?id=' + id,
method: 'get',
})
}

68
src/api/mp/account.js
View File

@@ -1,68 +0,0 @@
import request from '@/utils/request'
// 创建公众号账号
export function createAccount(data) {
return request({
url: '/mp/account/create',
method: 'post',
data: data
})
}
// 更新公众号账号
export function updateAccount(data) {
return request({
url: '/mp/account/update',
method: 'put',
data: data
})
}
// 删除公众号账号
export function deleteAccount(id) {
return request({
url: '/mp/account/delete?id=' + id,
method: 'delete'
})
}
// 获得公众号账号
export function getAccount(id) {
return request({
url: '/mp/account/get?id=' + id,
method: 'get'
})
}
// 获得公众号账号分页
export function getAccountPage(query) {
return request({
url: '/mp/account/page',
method: 'get',
params: query
})
}
// 获取公众号账号精简信息列表
export function getSimpleAccounts() {
return request({
url: '/mp/account/list-all-simple',
method: 'get',
})
}
// 生成公众号二维码
export function generateAccountQrCode(id) {
return request({
url: '/mp/account/generate-qr-code?id=' + id,
method: 'put'
})
}
// 清空公众号 API 配额
export function clearAccountQuota(id) {
return request({
url: '/mp/account/clear-quota?id=' + id,
method: 'put'
})
}

44
src/api/mp/autoReply.js
View File

@@ -1,44 +0,0 @@
import request from '@/utils/request'
// 创建公众号的自动回复
export function createAutoReply(data) {
return request({
url: '/mp/auto-reply/create',
method: 'post',
data: data
})
}
// 更新公众号的自动回复
export function updateAutoReply(data) {
return request({
url: '/mp/auto-reply/update',
method: 'put',
data: data
})
}
// 删除公众号的自动回复
export function deleteAutoReply(id) {
return request({
url: '/mp/auto-reply/delete?id=' + id,
method: 'delete'
})
}
// 获得公众号的自动回复
export function getAutoReply(id) {
return request({
url: '/mp/auto-reply/get?id=' + id,
method: 'get'
})
}
// 获得公众号的自动回复分页
export function getAutoReplyPage(query) {
return request({
url: '/mp/auto-reply/page',
method: 'get',
params: query
})
}

38
src/api/mp/draft.js
View File

@@ -1,38 +0,0 @@
import request from '@/utils/request'
// 获得公众号草稿分页
export function getDraftPage(query) {
return request({
url: '/mp/draft/page',
method: 'get',
params: query
})
}
// 创建公众号草稿
export function createDraft(accountId, articles) {
return request({
url: '/mp/draft/create?accountId=' + accountId,
method: 'post',
data: {
articles
}
})
}
// 更新公众号草稿
export function updateDraft(accountId, mediaId, articles) {
return request({
url: '/mp/draft/update?accountId=' + accountId + '&mediaId=' + mediaId,
method: 'put',
data: articles
})
}
// 删除公众号草稿
export function deleteDraft(accountId, mediaId) {
return request({
url: '/mp/draft/delete?accountId=' + accountId + '&mediaId=' + mediaId,
method: 'delete',
})
}

26
src/api/mp/freePublish.js
View File

@@ -1,26 +0,0 @@
import request from '@/utils/request'
// 获得公众号素材分页
export function getFreePublishPage(query) {
return request({
url: '/mp/free-publish/page',
method: 'get',
params: query
})
}
// 删除公众号素材
export function deleteFreePublish(accountId, articleId) {
return request({
url: '/mp/free-publish/delete?accountId=' + accountId + '&articleId=' + articleId,
method: 'delete'
})
}
// 发布公众号素材
export function submitFreePublish(accountId, mediaId) {
return request({
url: '/mp/free-publish/submit?accountId=' + accountId + '&mediaId=' + mediaId,
method: 'post'
})
}

18
src/api/mp/material.js
View File

@@ -1,18 +0,0 @@
import request from '@/utils/request'
// 获得公众号素材分页
export function getMaterialPage(query) {
return request({
url: '/mp/material/page',
method: 'get',
params: query
})
}
// 删除公众号永久素材
export function deletePermanentMaterial(id) {
return request({
url: '/mp/material/delete-permanent?id=' + id,
method: 'delete'
})
}

29
src/api/mp/menu.js
View File

@@ -1,29 +0,0 @@
import request from '@/utils/request'
// 获得公众号菜单列表
export function getMenuList(accountId) {
return request({
url: '/mp/menu/list?accountId=' + accountId,
method: 'get',
})
}
// 保存公众号菜单
export function saveMenu(accountId, menus) {
return request({
url: '/mp/menu/save',
method: 'post',
data: {
accountId,
menus
}
})
}
// 删除公众号菜单
export function deleteMenu(accountId) {
return request({
url: '/mp/menu/delete?accountId=' + accountId,
method: 'delete',
})
}

19
src/api/mp/message.js
View File

@@ -1,19 +0,0 @@
import request from '@/utils/request'
// 获得公众号消息分页
export function getMessagePage(query) {
return request({
url: '/mp/message/page',
method: 'get',
params: query
})
}
// 给粉丝发送消息
export function sendMessage(data) {
return request({
url: '/mp/message/send',
method: 'post',
data: data
})
}

35
src/api/mp/mpuser.js
View File

@@ -1,35 +0,0 @@
import request from '@/utils/request'
// 更新公众号粉丝
export function updateUser(data) {
return request({
url: '/mp/user/update',
method: 'put',
data: data
})
}
// 获得公众号粉丝
export function getUser(id) {
return request({
url: '/mp/user/get?id=' + id,
method: 'get'
})
}
// 获得公众号粉丝分页
export function getUserPage(query) {
return request({
url: '/mp/user/page',
method: 'get',
params: query
})
}
// 同步公众号粉丝
export function syncUser(accountId) {
return request({
url: '/mp/user/sync?accountId=' + accountId,
method: 'post'
})
}

37
src/api/mp/statistics.js
View File

@@ -1,37 +0,0 @@
import request from '@/utils/request'
// 获取消息发送概况数据
export function getUpstreamMessage(query) {
return request({
url: '/mp/statistics/upstream-message',
method: 'get',
params: query
})
}
// 用户增减数据
export function getUserSummary(query) {
return request({
url: '/mp/statistics/user-summary',
method: 'get',
params: query
})
}
// 获得用户累计数据
export function getUserCumulate(query) {
return request({
url: '/mp/statistics/user-cumulate',
method: 'get',
params: query
})
}
// 获得接口分析数据
export function getInterfaceSummary(query) {
return request({
url: '/mp/statistics/interface-summary',
method: 'get',
params: query
})
}

60
src/api/mp/tag.js
View File

@@ -1,60 +0,0 @@
import request from '@/utils/request'
// 创建公众号标签
export function createTag(data) {
return request({
url: '/mp/tag/create',
method: 'post',
data: data
})
}
// 更新公众号标签
export function updateTag(data) {
return request({
url: '/mp/tag/update',
method: 'put',
data: data
})
}
// 删除公众号标签
export function deleteTag(id) {
return request({
url: '/mp/tag/delete?id=' + id,
method: 'delete'
})
}
// 获得公众号标签
export function getTag(id) {
return request({
url: '/mp/tag/get?id=' + id,
method: 'get'
})
}
// 获得公众号标签分页
export function getTagPage(query) {
return request({
url: '/mp/tag/page',
method: 'get',
params: query
})
}
// 获取公众号标签精简信息列表
export function getSimpleTags() {
return request({
url: '/mp/tag/list-all-simple',
method: 'get',
})
}
// 同步公众号标签
export function syncTag(accountId) {
return request({
url: '/mp/tag/sync?accountId=' + accountId,
method: 'post'
})
}

78
src/api/pay/app.js
View File

@@ -1,78 +0,0 @@
import request from '@/utils/request'
// 创建支付应用信息
export function createApp(data) {
return request({
url: '/pay/app/create',
method: 'post',
data: data
})
}
// 更新支付应用信息
export function updateApp(data) {
return request({
url: '/pay/app/update',
method: 'put',
data: data
})
}
// 支付应用信息状态修改
export function changeAppStatus(id, status) {
const data = {
id,
status
}
return request({
url: '/pay/app/update-status',
method: 'put',
data: data
})
}
// 删除支付应用信息
export function deleteApp(id) {
return request({
url: '/pay/app/delete?id=' + id,
method: 'delete'
})
}
// 获得支付应用信息
export function getApp(id) {
return request({
url: '/pay/app/get?id=' + id,
method: 'get'
})
}
// 获得支付应用信息分页
export function getAppPage(query) {
return request({
url: '/pay/app/page',
method: 'get',
params: query
})
}
// 导出支付应用信息 Excel
export function exportAppExcel(query) {
return request({
url: '/pay/app/export-excel',
method: 'get',
params: query,
responseType: 'blob'
})
}
// 根据商ID称搜索应用列表
export function getAppListByMerchantId(merchantId) {
return request({
url: '/pay/app/list-merchant-id',
params:{
merchantId:merchantId
},
method: 'get'
})
}

71
src/api/pay/channel.js
View File

@@ -1,71 +0,0 @@
import request from '@/utils/request'
// 创建支付渠道
export function createChannel(data) {
return request({
url: '/pay/channel/create',
method: 'post',
data: data
})
}
// 更新支付渠道
export function updateChannel(data) {
return request({
url: '/pay/channel/update',
method: 'put',
data: data
})
}
// 删除支付渠道
export function deleteChannel(id) {
return request({
url: '/pay/channel/delete?id=' + id,
method: 'delete'
})
}
// 获得支付渠道
// export function getChannel(id) {
// return request({
// url: '/pay/channel/get?id=' + id,
// method: 'get'
// })
// }
// 获得支付渠道分页
export function getChannelPage(query) {
return request({
url: '/pay/channel/page',
method: 'get',
params: query
})
}
// 导出支付渠道Excel
export function exportChannelExcel(query) {
return request({
url: '/pay/channel/export-excel',
method: 'get',
params: query,
responseType: 'blob'
})
}
// 获得支付渠道
export function getChannel(merchantId,appId,code) {
return request({
url: '/pay/channel/get-channel',
params:{
merchantId:merchantId,
appId:appId,
code:code
},
method: 'get'
})
}

35
src/api/pay/demo.js
View File

@@ -1,35 +0,0 @@
import request from '@/utils/request'
// 创建示例订单
export function createDemoOrder(data) {
return request({
url: '/pay/demo-order/create',
method: 'post',
data: data
})
}
// 获得示例订单
export function getDemoOrder(id) {
return request({
url: '/pay/demo-order/get?id=' + id,
method: 'get'
})
}
// 获得示例订单分页
export function getDemoOrderPage(query) {
return request({
url: '/pay/demo-order/page',
method: 'get',
params: query
})
}
// 退款示例订单
export function refundDemoOrder(id) {
return request({
url: '/pay/demo-order/refund?id=' + id,
method: 'put'
})
}

77
src/api/pay/merchant.js
View File

@@ -1,77 +0,0 @@
import request from '@/utils/request'
// 创建支付商户信息
export function createMerchant(data) {
return request({
url: '/pay/merchant/create',
method: 'post',
data: data
})
}
// 更新支付商户信息
export function updateMerchant(data) {
return request({
url: '/pay/merchant/update',
method: 'put',
data: data
})
}
// 支付商户状态修改
export function changeMerchantStatus(id, status) {
const data = {
id,
status
}
return request({
url: '/pay/merchant/update-status',
method: 'put',
data: data
})
}
// 删除支付商户信息
export function deleteMerchant(id) {
return request({
url: '/pay/merchant/delete?id=' + id,
method: 'delete'
})
}
// 获得支付商户信息
export function getMerchant(id) {
return request({
url: '/pay/merchant/get?id=' + id,
method: 'get'
})
}
// 根据商户名称搜索商户列表
export function getMerchantListByName(name) {
return request({
url: '/pay/merchant/list-by-name',
params:{
name:name
},
method: 'get'
})
}
// 获得支付商户信息分页
export function getMerchantPage(query) {
return request({
url: '/pay/merchant/page',
method: 'get',
params: query
})
}
// 导出支付商户信息 Excel
export function exportMerchantExcel(query) {
return request({
url: '/pay/merchant/export-excel',
method: 'get',
params: query,
responseType: 'blob'
})
}

53
src/api/pay/order.js
View File

@@ -1,53 +0,0 @@
import request from '@/utils/request'
// 删除支付订单
export function deleteOrder(id) {
return request({
url: '/pay/order/delete?id=' + id,
method: 'delete'
})
}
// 获得支付订单
export function getOrder(id) {
return request({
url: '/pay/order/get?id=' + id,
method: 'get'
})
}
// 获得支付订单的明细
export function getOrderDetail(id) {
return request({
url: '/pay/order/get-detail?id=' + id,
method: 'get'
})
}
// 提交支付订单
export function submitOrder(data) {
return request({
url: '/pay/order/submit',
method: 'post',
data: data
})
}
// 获得支付订单分页
export function getOrderPage(query) {
return request({
url: '/pay/order/page',
method: 'get',
params: query
})
}
// 导出支付订单 Excel
export function exportOrderExcel(query) {
return request({
url: '/pay/order/export-excel',
method: 'get',
params: query,
responseType: 'blob'
})
}

54
src/api/pay/refund.js
View File

@@ -1,54 +0,0 @@
import request from '@/utils/request'
// 创建退款订单
export function createRefund(data) {
return request({
url: '/pay/refund/create',
method: 'post',
data: data
})
}
// 更新退款订单
export function updateRefund(data) {
return request({
url: '/pay/refund/update',
method: 'put',
data: data
})
}
// 删除退款订单
export function deleteRefund(id) {
return request({
url: '/pay/refund/delete?id=' + id,
method: 'delete'
})
}
// 获得退款订单
export function getRefund(id) {
return request({
url: '/pay/refund/get?id=' + id,
method: 'get'
})
}
// 获得退款订单分页
export function getRefundPage(query) {
return request({
url: '/pay/refund/page',
method: 'get',
params: query
})
}
// 导出退款订单 Excel
export function exportRefundExcel(query) {
return request({
url: '/pay/refund/export-excel',
method: 'get',
params: query,
responseType: 'blob'
})
}

6
src/assets/icons/svg/fullScreenView.svg
View File

@@ -1,12 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="32px" height="32px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 54</title>
<g id="驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="运营总览_生产线监控驾驶舱" transform="translate(-1866.000000, -36.000000)">
<g id="编组-54" transform="translate(1866.000000, 36.000000)">
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="21" height="21"></rect>
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="32" height="32"></rect>
<path d="M18.4001211,1 L18.574731,1.00571398 C18.8641421,1.02474925 19.1451559,1.09128771 19.4122178,1.20447947 C19.7221027,1.33395436 19.9991094,1.52058631 20.2392616,1.76073844 C20.4776764,1.99915325 20.6652172,2.27804627 20.7953442,2.58736464 C20.9313506,2.90825642 21,3.24882158 21,3.59987893 L21,3.59987893 L21,18.4001211 L20.994286,18.574731 C20.9752507,18.8641421 20.9087123,19.1451559 20.7955205,19.4122178 C20.6660456,19.7221027 20.4794137,19.9991094 20.2392616,20.2392616 C20.0008468,20.4776764 19.7219537,20.6652172 19.4126354,20.7953442 C19.0917436,20.9313506 18.7511784,21 18.4001211,21 L18.4001211,21 L3.59987893,21 L3.42526905,20.994286 C3.13585794,20.9752507 2.85484405,20.9087123 2.58778224,20.7955205 C2.2778973,20.6660456 2.00089057,20.4794137 1.76073844,20.2392616 C1.52232363,20.0008468 1.33478285,19.7219537 1.20465581,19.4126354 C1.06864936,19.0917436 1,18.7511784 1,18.4001211 L1,18.4001211 L1,3.59987893 L1.00571398,3.42526905 C1.02474925,3.13585794 1.09128771,2.85484405 1.20447947,2.58778224 C1.33395436,2.2778973 1.52058631,2.00089057 1.76073844,1.76073844 C1.99915325,1.52232363 2.27804627,1.33478285 2.58736464,1.20465581 C2.90825642,1.06864936 3.24882158,1 3.59987893,1 L3.59987893,1 L18.4001211,1 Z M18.4001211,2.29539952 L3.59987893,2.29539952 L3.49797651,2.2993263 C2.82542992,2.35136056 2.29539952,2.9140495 2.29539952,3.59987893 L2.29539952,3.59987893 L2.29539952,18.4001211 L2.2993263,18.5020235 C2.35136056,19.1745701 2.9140495,19.7046005 3.59987893,19.7046005 L3.59987893,19.7046005 L18.4001211,19.7046005 L18.5020235,19.7006737 C19.1745701,19.6486394 19.7046005,19.0859505 19.7046005,18.4001211 L19.7046005,18.4001211 L19.7046005,3.59987893 L19.7006737,3.49797651 C19.6486394,2.82542992 19.0859505,2.29539952 18.4001211,2.29539952 L18.4001211,2.29539952 Z M4.56580299,11.8731508 L4.63987359,11.8789244 C4.95620444,11.9219442 5.20096852,12.1943435 5.20096852,12.5208838 L5.20096852,12.5208838 L5.20096852,15.8606113 L8.39814764,12.6634321 L8.45892035,12.6098356 C8.71226443,12.4133149 9.08161636,12.4311804 9.3138681,12.6634321 C9.56547415,12.9150382 9.56547415,13.3275466 9.3138681,13.5791526 L9.3138681,13.5791526 L6.09149511,16.7990315 L9.4155569,16.7990315 L9.49368756,16.8035151 C9.82695229,16.8420028 10.0864105,17.123441 10.081435,17.4601165 C10.0742517,17.8119637 9.78624591,18.094431 9.43371671,18.094431 L9.43371671,18.094431 L4.5691586,18.094431 L4.49163938,18.0899766 C4.16113157,18.051728 3.90556901,17.7718105 3.90556901,17.4308414 L3.90556901,17.4308414 L3.90556901,12.5367736 L3.91007171,12.4587841 C3.94871707,12.1260764 4.23118526,11.8665247 4.56580299,11.8731508 L4.56580299,11.8731508 Z M17.4353814,3.90556901 L17.512257,3.91000958 C17.8400885,3.94813523 18.094431,4.22707005 18.094431,4.56461864 L18.094431,4.56461864 L18.094431,9.46095642 L18.0899283,9.53894589 C18.0512829,9.87165361 17.7688147,10.1312053 17.434197,10.1245792 C17.0828999,10.1173731 16.7990315,9.82850504 16.7990315,9.47684625 L16.7990315,9.47684625 L16.7990315,6.13938874 L13.6018524,9.33656786 L13.5410796,9.39016441 C13.2877356,9.58668512 12.9183836,9.5688196 12.6861319,9.33656786 C12.4345258,9.08496181 12.4345258,8.67245345 12.6861319,8.4208474 L12.6861319,8.4208474 L15.9060108,5.20096852 L12.5821731,5.20096852 L12.5040246,5.19648608 C12.170734,5.1580095 11.9119308,4.876675 11.9185506,4.54071802 C11.9257483,4.18803625 12.2137541,3.90556901 12.5662833,3.90556901 L12.5662833,3.90556901 L17.4353814,3.90556901 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
</g>
</g>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

2
src/assets/icons/svg/unFullScreenView.svg
View File

@@ -7,4 +7,4 @@
<path d="M18.4001211,1 L18.574731,1.00571398 C18.8641421,1.02474925 19.1451559,1.09128771 19.4122178,1.20447947 C19.7221027,1.33395436 19.9991094,1.52058631 20.2392616,1.76073844 C20.4776764,1.99915325 20.6652172,2.27804627 20.7953442,2.58736464 C20.9313506,2.90825642 21,3.24882158 21,3.59987893 L21,3.59987893 L21,18.4001211 L20.994286,18.574731 C20.9752507,18.8641421 20.9087123,19.1451559 20.7955205,19.4122178 C20.6660456,19.7221027 20.4794137,19.9991094 20.2392616,20.2392616 C20.0008468,20.4776764 19.7219537,20.6652172 19.4126354,20.7953442 C19.0917436,20.9313506 18.7511784,21 18.4001211,21 L18.4001211,21 L3.59987893,21 L3.42526905,20.994286 C3.13585794,20.9752507 2.85484405,20.9087123 2.58778224,20.7955205 C2.2778973,20.6660456 2.00089057,20.4794137 1.76073844,20.2392616 C1.52232363,20.0008468 1.33478285,19.7219537 1.20465581,19.4126354 C1.06864936,19.0917436 1,18.7511784 1,18.4001211 L1,18.4001211 L1,3.59987893 L1.00571398,3.42526905 C1.02474925,3.13585794 1.09128771,2.85484405 1.20447947,2.58778224 C1.33395436,2.2778973 1.52058631,2.00089057 1.76073844,1.76073844 C1.99915325,1.52232363 2.27804627,1.33478285 2.58736464,1.20465581 C2.90825642,1.06864936 3.24882158,1 3.59987893,1 L3.59987893,1 L18.4001211,1 Z M18.4001211,2.29539952 L3.59987893,2.29539952 L3.49797651,2.2993263 C2.82542992,2.35136056 2.29539952,2.9140495 2.29539952,3.59987893 L2.29539952,3.59987893 L2.29539952,18.4001211 L2.2993263,18.5020235 C2.35136056,19.1745701 2.9140495,19.7046005 3.59987893,19.7046005 L3.59987893,19.7046005 L18.4001211,19.7046005 L18.5020235,19.7006737 C19.1745701,19.6486394 19.7046005,19.0859505 19.7046005,18.4001211 L19.7046005,18.4001211 L19.7046005,3.59987893 L19.7006737,3.49797651 C19.6486394,2.82542992 19.0859505,2.29539952 18.4001211,2.29539952 L18.4001211,2.29539952 Z M9.43538136,11.905569 L9.512257,11.9100096 C9.84008849,11.9481352 10.094431,12.2270701 10.094431,12.5646186 L10.094431,12.5646186 L10.094431,17.4609564 L10.0899283,17.5389459 C10.0512829,17.8716536 9.76881474,18.1312053 9.43419701,18.1245792 C9.08289988,18.1173731 8.79903148,17.828505 8.79903148,17.4768462 L8.79903148,17.4768462 L8.79903148,14.1393887 L5.60185236,17.3365679 L5.54107965,17.3901644 C5.28773557,17.5866851 4.91838364,17.5688196 4.6861319,17.3365679 C4.43452585,17.0849618 4.43452585,16.6724534 4.6861319,16.4208474 L4.6861319,16.4208474 L7.90601077,13.2009685 L4.58217312,13.2009685 L4.50402457,13.1964861 C4.17073404,13.1580095 3.9119308,12.876675 3.91855064,12.540718 C3.92574827,12.1880363 4.21375409,11.905569 4.56628329,11.905569 L4.56628329,11.905569 L9.43538136,11.905569 Z M12.565803,3.8731508 L12.6398736,3.87892442 C12.9562044,3.92194416 13.2009685,4.19434347 13.2009685,4.52088378 L13.2009685,4.52088378 L13.2009685,7.86061126 L16.3981476,4.66343214 L16.4589204,4.60983559 C16.7122644,4.41331488 17.0816164,4.4311804 17.3138681,4.66343214 C17.5654742,4.91503819 17.5654742,5.32754655 17.3138681,5.5791526 L17.3138681,5.5791526 L14.0914951,8.79903148 L17.4155569,8.79903148 L17.4936876,8.80351509 C17.8269523,8.84200281 18.0864105,9.12344101 18.081435,9.46011654 C18.0742517,9.81196375 17.7862459,10.094431 17.4337167,10.094431 L17.4337167,10.094431 L12.5691586,10.094431 L12.4916394,10.0899766 C12.1611316,10.051728 11.905569,9.77181051 11.905569,9.4308414 L11.905569,9.4308414 L11.905569,4.53677361 L11.9100717,4.45878413 C11.9487171,4.12607641 12.2311853,3.86652471 12.565803,3.8731508 L12.565803,3.8731508 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
</g>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
src/assets/img/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
src/assets/img/OperationalOverview/AGV.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

BIN
src/assets/img/OperationalOverview/title.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 140 KiB

BIN
src/assets/img/large.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/img/short.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 16 KiB

101
src/assets/styles/index.scss
View File

@@ -19,13 +19,15 @@ body {
// font-weight: 700;
// }
.searchBarBox .el-form-item--medium .el-form-item__label {
line-height: 40px;
line-height: 40px;
}
.searchBarBox .el-form-item--medium .el-form-item__content {
line-height: 40px;
line-height: 40px;
}
.searchBarBox .el-range-editor--small.el-input__inner {
height: 34px;
height: 34px;
}
html {
@@ -153,13 +155,11 @@ aside {
text-align: right;
padding-right: 20px;
transition: 600ms ease position;
background: linear-gradient(
90deg,
rgba(32, 182, 249, 1) 0%,
rgba(32, 182, 249, 1) 0%,
rgba(33, 120, 241, 1) 100%,
rgba(33, 120, 241, 1) 100%
);
background: linear-gradient(90deg,
rgba(32, 182, 249, 1) 0%,
rgba(32, 182, 249, 1) 0%,
rgba(33, 120, 241, 1) 100%,
rgba(33, 120, 241, 1) 100%);
.subtitle {
font-size: 20px;
@@ -204,10 +204,85 @@ aside {
z-index: 1000 !important;
}
// 滚动条
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: transparent;
}
::-webkit-scrollbar-track-piece {
background-color: rgba(144, 147, 153, 0);
}
::-webkit-scrollbar-corner {
background-color: rgba(144, 147, 153, 0);
}
::-webkit-scrollbar-track {
width: 6px;
background: rgba(144, 147, 153, 0);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
::-webkit-scrollbar-thumb {
background-color: #EDEDED;
background-clip: padding-box;
min-height: 28px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
transition: background-color .3s;
cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
background-color: #D9D9D9;
}
// 抽屉head区域---start
.el-drawer__header {
padding-bottom: 20px;
padding-left: 30px;
margin-bottom: 23px;
font-size: 20px;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
border-bottom: 1px solid rgba(233, 233, 233, 1);
}
.el-drawer__header> :first-child::before {
content: '';
display: inline-block;
width: 4px;
height: 24px;
background-color: #0b58ff;
margin-right: 8px;
vertical-align: middle;
}
// 抽屉head区域---end
// 弹出框，上下分布，去掉label的padding-bottom
.el-form--label-top .el-form-item__label {
padding: 0;
}
// 大屏滚动表格
.dv-scroll-board .rows .ceil,
.dv-scroll-board .header .header-item {
border-right: 1px solid rgba(13, 23, 40, 1);
}
.dv-scroll-board .rows .ceil:last-child,
.dv-scroll-board .header .header-item:last-child {
border-right: none;
}
.no-data-bg {
height: 240px;
background: url(../images/no-data-bg.png) 50% 100% / contain
no-repeat;
background: url(../images/no-data-bg.png) 50% 100% / contain no-repeat;
position: relative;
&::after {
@@ -220,4 +295,4 @@ aside {
font-size: 18px;
letter-spacing: 1px;
}
}
}

4
src/assets/styles/login.scss
View File

@@ -134,8 +134,8 @@ $base1px: 0.15vh; // 1px / 1080px;
text-align: center;
clear: both;
position: relative;
top: calc(-32 * $base1px);
height: calc(128 * $base1px);
top: calc(-32 * #{$base1px});
height: calc(128 * #{$base1px});
.title {
margin: 0;

12
src/components/Breadcrumb/index.vue
View File

@@ -1,8 +1,9 @@
<template>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
<span v-if="item.redirect==='noRedirect'||index===levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
<span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">{{ item.meta.title
}}</span>
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
</el-breadcrumb-item>
</transition-group>
@@ -35,7 +36,7 @@ export default {
const first = matched[0]
if (!this.isDashboard(first)) {
matched = [{ path: '/', meta: { title: '首页' }}].concat(matched)
matched = [{ path: '/', meta: { title: '首页' } }].concat(matched)
}
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
@@ -64,7 +65,7 @@ export default {
.app-breadcrumb.el-breadcrumb {
display: inline-block;
font-size: 14px;
line-height: 56px;
line-height: 48px;
margin-left: 8px;
.no-redirect {
@@ -73,7 +74,8 @@ export default {
}
}
.app-breadcrumb .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
.app-breadcrumb .el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
color: rgba(0, 0, 0, 0.45);
}
</style>

33
src/components/DocAlert/index.vue
View File

@@ -1,33 +0,0 @@
<template>
<el-alert v-if="enable()" type="success" show-icon>
<template slot="title">
<div @click="goToUrl">{{ '【' + title + '】文档地址：' + url }}</div>
</template>
</el-alert>
</template>
<script>
import {getDocEnable} from "@/utils/ruoyi";
export default {
name: "DocAlert",
props: {
title: String,
url: String,
},
methods: {
enable: function () {
return getDocEnable();
},
goToUrl: function() {
window.open(this.url);
}
}
};
</script>
<style scoped>
.el-alert--success.is-light {
margin-bottom: 10px;
cursor: pointer;
}
</style>

141
src/components/PanThumb/index.vue
View File

@@ -1,141 +0,0 @@
<template>
<div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
<div class="pan-info">
<div class="pan-info-roles-container">
<slot />
</div>
</div>
<!-- eslint-disable-next-line -->
<div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div>
</div>
</template>
<script>
export default {
name: 'PanThumb',
props: {
image: {
type: String,
required: true
},
zIndex: {
type: Number,
default: 1
},
width: {
type: String,
default: '150px'
},
height: {
type: String,
default: '150px'
}
}
}
</script>
<style scoped>
.pan-item {
width: 200px;
height: 200px;
border-radius: 50%;
display: inline-block;
position: relative;
cursor: default;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.pan-info-roles-container {
padding: 20px;
text-align: center;
}
.pan-thumb {
width: 100%;
height: 100%;
background-position: center center;
background-size: cover;
border-radius: 50%;
overflow: hidden;
position: absolute;
transform-origin: 95% 40%;
transition: all 0.3s ease-in-out;
}
/* .pan-thumb:after {
content: '';
width: 8px;
height: 8px;
position: absolute;
border-radius: 50%;
top: 40%;
left: 95%;
margin: -4px 0 0 -4px;
background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
} */
.pan-info {
position: absolute;
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
}
.pan-info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 18px;
margin: 0 60px;
padding: 22px 0 0 0;
height: 85px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.pan-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.pan-info p a {
display: block;
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
color: #fff;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 24px;
margin: 7px auto 0;
font-family: 'Open Sans', Arial, sans-serif;
opacity: 0;
transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
transform: translateX(60px) rotate(90deg);
}
.pan-info p a:hover {
background: rgba(255, 255, 255, 0.5);
}
.pan-item:hover .pan-thumb {
transform: rotate(-110deg);
}
.pan-item:hover .pan-info p a {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
</style>

21
src/components/RADME.md
View File

@@ -1,21 +0,0 @@
## form-generator
github 地址：https://github.com/JakHuang/form-generator
* generator
* parser
* render
* tinymce
## bpmn-process-designer
github 地址：https://github.com/miyuesc/bpmn-process-designer
* bpmnProcessDesigner
TODO 目前存在的问题，如果选择 activiti 类型时，因为不支持内置表单的设计，所以会报 Error: unknown type activiti:FormData 错误。具体可见 https://github.com/miyuesc/bpmn-process-designer/issues/16 。
另外几个流程设计器的选型：
* https://gitee.com/jimlow/vue-bpmn 相比差一些，已经停止维护，不算推荐。
* https://github.com/GoldSubmarine/workflow-bpmn-modeler 仅支持 flowable 流程引擎。如果只考虑 flowable 的话，也是非常不错的选择。

21
src/components/RuoYi/Doc/index.vue
View File

@@ -1,21 +0,0 @@
<template>
<div>
<svg-icon icon-class="question" @click="goto"/>
</div>
</template>
<script>
export default {
name: 'YudaoDoc',
data() {
return {
url: 'https://doc.iocoder.cn/'
}
},
methods: {
goto() {
window.open(this.url)
}
}
}
</script>

21
src/components/RuoYi/Git/index.vue
View File

@@ -1,21 +0,0 @@
<template>
<div>
<svg-icon icon-class="github" @click="goto"/>
</div>
</template>
<script>
export default {
name: 'YudaoGit',
data() {
return {
url: 'https://github.com/YunaiV/ruoyi-vue-pro'
}
},
methods: {
goto() {
window.open(this.url)
}
}
}
</script>

211
src/components/VideoUpload/index.vue
View File

@@ -1,211 +0,0 @@
<template>
<div class="editPage__video">
<el-upload
class="uploader"
list-type="picture-card"
:action="uploadUrl"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:headers="headers"
:on-error="handleError"
:show-file-list="false"
>
<div v-if="uploadFlag" @mouseenter="mouseover" @mouseleave="mouseout">
<i class="el-icon-success success-icon"></i>
<div :class="{'hide': activeHover, 'success': !activeHover}">
<span class="item-actions">
<span
class="item-preview"
@click.stop="handlePreview()"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
class="item-delete"
@click.stop="handleRemove()"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</div>
<i v-else-if="uploadFlag === null" class="el-icon-plus uploader-icon"></i>
<i v-else-if="!uploadFlag" class="el-icon-circle-close uploader-icon" style="color: red"></i>
</el-upload>
<!-- 上传提示 -->
<div class="el-upload__tip" slot="tip" v-if="showTip">
请上传
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
的文件
</div>
<el-dialog :visible.sync="dialogVisible" append-to-body width="800" title="预览">
<video width="100%" v-if="videoUrl" controls="controls" :key="menuKey">
<source :src="videoUrl" type="video/mp4" />
</video>
</el-dialog>
</div>
</template>
<script>
import { getAccessToken } from "@/utils/auth";
export default {
props: {
value: [String, Object],
// 大小限制(MB)
fileSize: {
type: Number,
default: 300,
},
// 文件类型, 例如"video/mp4"
fileType: {
type: [String, Array],
default: () =>["video/mp4"],
},
// 是否显示提示
isShowTip: {
type: Boolean,
default: true
}
},
data() {
return {
uploadFlag: null,
activeHover: true,
dialogVisible: false,
videoUrl: null,
// 视频上传
uploadUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
// 应付多个组件的情况 记录当前组件的key值
menuKey: 1, // 用来强制刷新,
}
},
watch: {
value: {
handler(val) {
if (val) {
this.videoUrl = val;
this.uploadFlag = true;
}
},
deep: true,
immediate: true
}
},
computed: {
// 是否显示提示
showTip() {
return this.isShowTip && (this.fileType || this.fileSize);
},
},
methods: {
// 上传成功的函数
handleSuccess(res) {
++this.menuKey;
if(res.code === 0){
this.uploadFlag = true;
this.videoUrl = res.data;
this.$emit("input", this.videoUrl);
}else{
this.uploadFlag = false;
this.$message.error("错误！"+ res.msg);
}
},
handleError(){
this.uploadFlag = false;
},
beforeUpload(file) {
const isMp4 = this.fileType.includes(file.type);
const isLt300MB = file.size / 1024 / 1024 < 300;
if (!isMp4) {
this.$message.error("视频只能是"+ this.fileType.join("/") +"格式!");
}
if (!isLt300MB) {
this.$message.error("上传视频大小不能超过 300MB!");
}
return isMp4 && isLt300MB;
},
// 预览
handlePreview() {
this.dialogVisible = true;
},
// 删除视频
handleRemove() {
this.videoUrl = null;
this.uploadFlag = null;
this.$emit("input", null);
},
mouseover(){
this.activeHover = false;
},
mouseout(){
this.activeHover = true;
}
}
}
</script>
<style lang="scss">
.editPage__video {
.hide{
visibility:hidden;
}
.success{
position: relative;
width: 78px;
height: 78px;
line-height: 78px;
background-color: rgba(0,0,0,.5);
transition: opacity .3s;
cursor: default;
.item-preview .el-icon-zoom-in{
width: 30px;
font-size: 20px;
color: #f2f2f2;
cursor: pointer;
}
.item-delete .el-icon-delete{
width: 30px;
font-size: 20px;
color: #f2f2f2;
cursor: pointer;
}
}
.uploader-icon {
font-size: 28px;
color: #8c939d;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
position: absolute;
left: 0;
}
.success-icon {
font-size: 28px;
color: green;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
position: absolute;
left: 0;
}
.el-upload{
width: 80px;
height: 80px;
}
}
</style>

476
src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
View File

@@ -1,476 +0,0 @@
<template>
<div class="my-process-designer">
<div class="my-process-designer__header">
<slot name="control-header"></slot>
<template v-if="!$slots['control-header']">
<el-button-group key="file-control">
<el-button :size="headerButtonSize" icon="el-icon-folder-opened" @click="$refs.refFile.click()">打开文件</el-button>
<el-tooltip effect="light">
<div slot="content">
<el-button :size="headerButtonSize" type="text" @click="downloadProcessAsXml()">下载为XML文件</el-button>
<br />
<el-button :size="headerButtonSize" type="text" @click="downloadProcessAsSvg()">下载为SVG文件</el-button>
<br />
<el-button :size="headerButtonSize" type="text" @click="downloadProcessAsBpmn()">下载为BPMN文件</el-button>
</div>
<el-button :size="headerButtonSize" icon="el-icon-download">下载文件</el-button>
</el-tooltip>
<el-tooltip effect="light">
<div slot="content">
<el-button :size="headerButtonSize" type="text" @click="previewProcessXML">预览XML</el-button>
<br />
<el-button :size="headerButtonSize" type="text" @click="previewProcessJson">预览JSON</el-button>
</div>
<el-button :size="headerButtonSize" icon="el-icon-view">预览</el-button>
</el-tooltip>
<el-tooltip v-if="simulation" effect="light" :content="this.simulationStatus ? '退出模拟' : '开启模拟'">
<el-button :size="headerButtonSize" icon="el-icon-cpu" @click="processSimulation">
模拟
</el-button>
</el-tooltip>
</el-button-group>
<el-button-group key="align-control">
<el-tooltip effect="light" content="向左对齐">
<el-button :size="headerButtonSize" class="align align-left" icon="el-icon-s-data" @click="elementsAlign('left')" />
</el-tooltip>
<el-tooltip effect="light" content="向右对齐">
<el-button :size="headerButtonSize" class="align align-right" icon="el-icon-s-data" @click="elementsAlign('right')" />
</el-tooltip>
<el-tooltip effect="light" content="向上对齐">
<el-button :size="headerButtonSize" class="align align-top" icon="el-icon-s-data" @click="elementsAlign('top')" />
</el-tooltip>
<el-tooltip effect="light" content="向下对齐">
<el-button :size="headerButtonSize" class="align align-bottom" icon="el-icon-s-data" @click="elementsAlign('bottom')" />
</el-tooltip>
<el-tooltip effect="light" content="水平居中">
<el-button :size="headerButtonSize" class="align align-center" icon="el-icon-s-data" @click="elementsAlign('center')" />
</el-tooltip>
<el-tooltip effect="light" content="垂直居中">
<el-button :size="headerButtonSize" class="align align-middle" icon="el-icon-s-data" @click="elementsAlign('middle')" />
</el-tooltip>
</el-button-group>
<el-button-group key="scale-control">
<el-tooltip effect="light" content="缩小视图">
<el-button :size="headerButtonSize" :disabled="defaultZoom < 0.2" icon="el-icon-zoom-out" @click="processZoomOut()" />
</el-tooltip>
<el-button :size="headerButtonSize">{{ Math.floor(this.defaultZoom * 10 * 10) + "%" }}</el-button>
<el-tooltip effect="light" content="放大视图">
<el-button :size="headerButtonSize" :disabled="defaultZoom > 4" icon="el-icon-zoom-in" @click="processZoomIn()" />
</el-tooltip>
<el-tooltip effect="light" content="重置视图并居中">
<el-button :size="headerButtonSize" icon="el-icon-c-scale-to-original" @click="processReZoom()" />
</el-tooltip>
</el-button-group>
<el-button-group key="stack-control">
<el-tooltip effect="light" content="撤销">
<el-button :size="headerButtonSize" :disabled="!revocable" icon="el-icon-refresh-left" @click="processUndo()" />
</el-tooltip>
<el-tooltip effect="light" content="恢复">
<el-button :size="headerButtonSize" :disabled="!recoverable" icon="el-icon-refresh-right" @click="processRedo()" />
</el-tooltip>
<el-tooltip effect="light" content="重新绘制">
<el-button :size="headerButtonSize" icon="el-icon-refresh" @click="processRestart" />
</el-tooltip>
</el-button-group>
<el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-plus" @click="processSave" :disabled = "simulationStatus">保存模型</el-button>
</template>
<!-- 用于打开本地文件-->
<input type="file" id="files" ref="refFile" style="display: none" accept=".xml, .bpmn" @change="importLocalFile" />
</div>
<div class="my-process-designer__container">
<div class="my-process-designer__canvas" ref="bpmn-canvas"></div>
</div>
<el-dialog title="预览" width="80%" :visible.sync="previewModelVisible" append-to-body destroy-on-close>
<pre><code class="hljs" v-html="highlightedCode(previewType, previewResult)"></code></pre>
</el-dialog>
</div>
</template>
<script>
import BpmnModeler from "bpmn-js/lib/Modeler";
import DefaultEmptyXML from "./plugins/defaultEmpty";
// 翻译方法
import customTranslate from "./plugins/translate/customTranslate";
import translationsCN from "./plugins/translate/zh";
// 模拟流转流程
import tokenSimulation from "bpmn-js-token-simulation";
// 标签解析构建器
// import bpmnPropertiesProvider from "bpmn-js-properties-panel/lib/provider/bpmn";
// 标签解析 Moddle
import camundaModdleDescriptor from "./plugins/descriptor/camundaDescriptor.json";
import activitiModdleDescriptor from "./plugins/descriptor/activitiDescriptor.json";
import flowableModdleDescriptor from "./plugins/descriptor/flowableDescriptor.json";
// 标签解析 Extension
import camundaModdleExtension from "./plugins/extension-moddle/camunda";
import activitiModdleExtension from "./plugins/extension-moddle/activiti";
import flowableModdleExtension from "./plugins/extension-moddle/flowable";
// 引入json转换与高亮
import convert from "xml-js";
// 代码高亮插件
import hljs from "highlight.js/lib/highlight";
import "highlight.js/styles/github-gist.css";
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("json", require("highlight.js/lib/languages/json"));
export default {
name: "MyProcessDesigner",
componentName: "MyProcessDesigner",
props: {
value: String, // xml 字符串
valueWatch: true, // xml 字符串的 watch 状态
processId: String, // 流程 key 标识
processName: String, // 流程 name 名字
formId: Number, // 流程 form 表单编号
translations: Object, // 自定义的翻译文件
additionalModel: [Object, Array], // 自定义model
moddleExtension: Object, // 自定义moddle
onlyCustomizeAddi: {
type: Boolean,
default: false
},
onlyCustomizeModdle: {
type: Boolean,
default: false
},
simulation: {
type: Boolean,
default: true
},
keyboard: {
type: Boolean,
default: true
},
prefix: {
type: String,
default: "camunda"
},
events: {
type: Array,
default: () => ["element.click"]
},
headerButtonSize: {
type: String,
default: "small",
validator: value => ["default", "medium", "small", "mini"].indexOf(value) !== -1
},
headerButtonType: {
type: String,
default: "primary",
validator: value => ["default", "primary", "success", "warning", "danger", "info"].indexOf(value) !== -1
}
},
data() {
return {
defaultZoom: 1,
previewModelVisible: false,
simulationStatus: false,
previewResult: "",
previewType: "xml",
recoverable: false,
revocable: false
};
},
computed: {
additionalModules() {
const Modules = [];
// 仅保留用户自定义扩展模块
if (this.onlyCustomizeAddi) {
if (Object.prototype.toString.call(this.additionalModel) === "[object Array]") {
return this.additionalModel || [];
}
return [this.additionalModel];
}
// 插入用户自定义扩展模块
if (Object.prototype.toString.call(this.additionalModel) === "[object Array]") {
Modules.push(...this.additionalModel);
} else {
this.additionalModel && Modules.push(this.additionalModel);
}
// 翻译模块
const TranslateModule = {
translate: ["value", customTranslate(this.translations || translationsCN)]
};
Modules.push(TranslateModule);
// 模拟流转模块
if (this.simulation) {
Modules.push(tokenSimulation);
}
// 根据需要的流程类型设置扩展元素构建模块
// if (this.prefix === "bpmn") {
// Modules.push(bpmnModdleExtension);
// }
if (this.prefix === "camunda") {
Modules.push(camundaModdleExtension);
}
if (this.prefix === "flowable") {
Modules.push(flowableModdleExtension);
}
if (this.prefix === "activiti") {
Modules.push(activitiModdleExtension);
}
return Modules;
},
moddleExtensions() {
const Extensions = {};
// 仅使用用户自定义模块
if (this.onlyCustomizeModdle) {
return this.moddleExtension || null;
}
// 插入用户自定义模块
if (this.moddleExtension) {
for (let key in this.moddleExtension) {
Extensions[key] = this.moddleExtension[key];
}
}
// 根据需要的 "流程类型" 设置 对应的解析文件
if (this.prefix === "activiti") {
Extensions.activiti = activitiModdleDescriptor;
}
if (this.prefix === "flowable") {
Extensions.flowable = flowableModdleDescriptor;
}
if (this.prefix === "camunda") {
Extensions.camunda = camundaModdleDescriptor;
}
return Extensions;
}
},
mounted() {
this.initBpmnModeler();
this.createNewDiagram(this.value);
this.$once("hook:beforeDestroy", () => {
if (this.bpmnModeler) this.bpmnModeler.destroy();
this.$emit("destroy", this.bpmnModeler);
this.bpmnModeler = null;
});
},
methods: {
initBpmnModeler() {
if (this.bpmnModeler) return;
this.bpmnModeler = new BpmnModeler({
container: this.$refs["bpmn-canvas"],
keyboard: this.keyboard ? { bindTo: document } : null,
additionalModules: this.additionalModules,
moddleExtensions: this.moddleExtensions
});
this.$emit("init-finished", this.bpmnModeler);
this.initModelListeners();
},
initModelListeners() {
const EventBus = this.bpmnModeler.get("eventBus");
const that = this;
// 注册需要的监听事件, 将. 替换为 - , 避免解析异常
this.events.forEach(event => {
EventBus.on(event, function(eventObj) {
let eventName = event.replace(/\./g, "-");
let element = eventObj ? eventObj.element : null;
that.$emit(eventName, element, eventObj);
});
});
// 监听图形改变返回xml
EventBus.on("commandStack.changed", async event => {
try {
this.recoverable = this.bpmnModeler.get("commandStack").canRedo();
this.revocable = this.bpmnModeler.get("commandStack").canUndo();
let { xml } = await this.bpmnModeler.saveXML({ format: true });
this.$emit("commandStack-changed", event);
this.$emit("input", xml);
this.$emit("change", xml);
} catch (e) {
console.error(`[Process Designer Warn]: ${e.message || e}`);
}
});
// 监听视图缩放变化
this.bpmnModeler.on("canvas.viewbox.changed", ({ viewbox }) => {
this.$emit("canvas-viewbox-changed", { viewbox });
const { scale } = viewbox;
this.defaultZoom = Math.floor(scale * 100) / 100;
});
},
/* 创建新的流程图 */
async createNewDiagram(xml) {
// 将字符串转换成图显示出来
let newId = this.processId || `Process_${new Date().getTime()}`;
let newName = this.processName || `业务流程_${new Date().getTime()}`;
let xmlString = xml || DefaultEmptyXML(newId, newName, this.prefix);
try {
// console.log(this.bpmnModeler.importXML);
let { warnings } = await this.bpmnModeler.importXML(xmlString);
if (warnings && warnings.length) {
warnings.forEach(warn => console.warn(warn));
}
} catch (e) {
console.error(`[Process Designer Warn]: ${e?.message || e}`);
}
},
// 下载流程图到本地
async downloadProcess(type, name) {
try {
const _this = this;
// 按需要类型创建文件并下载
if (type === "xml" || type === "bpmn") {
const { err, xml } = await this.bpmnModeler.saveXML();
// 读取异常时抛出异常
if (err) {
console.error(`[Process Designer Warn ]: ${err.message || err}`);
}
let { href, filename } = _this.setEncoded(type.toUpperCase(), name, xml);
downloadFunc(href, filename);
} else {
const { err, svg } = await this.bpmnModeler.saveSVG();
// 读取异常时抛出异常
if (err) {
return console.error(err);
}
let { href, filename } = _this.setEncoded("SVG", name, svg);
downloadFunc(href, filename);
}
} catch (e) {
console.error(`[Process Designer Warn ]: ${e.message || e}`);
}
// 文件下载方法
function downloadFunc(href, filename) {
if (href && filename) {
let a = document.createElement("a");
a.download = filename; //指定下载的文件名
a.href = href; // URL对象
a.click(); // 模拟点击
URL.revokeObjectURL(a.href); // 释放URL 对象
}
}
},
// 根据所需类型进行转码并返回下载地址
setEncoded(type, filename = "diagram", data) {
const encodedData = encodeURIComponent(data);
return {
filename: `${filename}.${type}`,
href: `data:application/${type === "svg" ? "text/xml" : "bpmn20-xml"};charset=UTF-8,${encodedData}`,
data: data
};
},
// 加载本地文件
importLocalFile() {
const that = this;
const file = this.$refs.refFile.files[0];
const reader = new FileReader();
reader.readAsText(file);
reader.onload = function() {
let xmlStr = this.result;
that.createNewDiagram(xmlStr);
};
},
/* ------------------------------------------------ refs methods ------------------------------------------------------ */
downloadProcessAsXml() {
this.downloadProcess("xml");
},
downloadProcessAsBpmn() {
this.downloadProcess("bpmn");
},
downloadProcessAsSvg() {
this.downloadProcess("svg");
},
processSimulation() {
this.simulationStatus = !this.simulationStatus;
this.simulation && this.bpmnModeler.get("toggleMode").toggleMode();
},
processRedo() {
this.bpmnModeler.get("commandStack").redo();
},
processUndo() {
this.bpmnModeler.get("commandStack").undo();
},
processZoomIn(zoomStep = 0.1) {
let newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100;
if (newZoom > 4) {
throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
}
this.defaultZoom = newZoom;
this.bpmnModeler.get("canvas").zoom(this.defaultZoom);
},
processZoomOut(zoomStep = 0.1) {
let newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100;
if (newZoom < 0.2) {
throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
}
this.defaultZoom = newZoom;
this.bpmnModeler.get("canvas").zoom(this.defaultZoom);
},
processZoomTo(newZoom = 1) {
if (newZoom < 0.2) {
throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
}
if (newZoom > 4) {
throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
}
this.defaultZoom = newZoom;
this.bpmnModeler.get("canvas").zoom(newZoom);
},
processReZoom() {
this.defaultZoom = 1;
this.bpmnModeler.get("canvas").zoom("fit-viewport", "auto");
},
processRestart() {
this.recoverable = false;
this.revocable = false;
this.createNewDiagram(null);
},
elementsAlign(align) {
const Align = this.bpmnModeler.get("alignElements");
const Selection = this.bpmnModeler.get("selection");
const SelectedElements = Selection.get();
if (!SelectedElements || SelectedElements.length <= 1) {
this.$message.warning("请按住 Ctrl 键选择多个元素对齐");
return;
}
this.$confirm("自动对齐可能造成图形变形，是否继续？", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => Align.trigger(SelectedElements, align));
},
/*----------------------------- 方法结束 ---------------------------------*/
previewProcessXML() {
this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
this.previewResult = xml;
this.previewType = "xml";
this.previewModelVisible = true;
});
},
previewProcessJson() {
this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
this.previewResult = convert.xml2json(xml, { spaces: 2 });
this.previewType = "json";
this.previewModelVisible = true;
});
},
/* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
async processSave() {
const { err, xml } = await this.bpmnModeler.saveXML();
// 读取异常时抛出异常
if (err) {
this.$modal.msgError('保存模型失败，请重试！')
return
}
// 触发 save 事件
this.$emit('save', xml)
},
/** 高亮显示 */
highlightedCode(previewType, previewResult) {
const result = hljs.highlight(previewType, previewResult || "", true);
return result.value || '&nbsp;';
},
}
};
</script>

487
src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
View File

@@ -1,487 +0,0 @@
<template>
<div class="my-process-designer">
<div class="my-process-designer__container">
<div class="my-process-designer__canvas" ref="bpmn-canvas"></div>
</div>
</div>
</template>
<script>
import BpmnViewer from "bpmn-js/lib/Viewer";
import DefaultEmptyXML from "./plugins/defaultEmpty";
export default {
name: "MyProcessViewer",
componentName: "MyProcessViewer",
props: {
value: { // BPMN XML 字符串
type: String,
},
prefix: { // 使用哪个引擎
type: String,
default: "camunda",
},
activityData: { // 活动的数据。传递时，可高亮流程
type: Array,
default: () => [],
},
processInstanceData: { // 流程实例的数据。传递时，可展示流程发起人等信息
type: Object,
},
taskData: { // 任务实例的数据。传递时，可展示 UserTask 审核相关的信息
type: Array,
default: () => [],
}
},
data() {
return {
xml: '',
activityList: [],
processInstance: undefined,
taskList: [],
};
},
mounted() {
this.xml = this.value;
this.activityList = this.activityData;
// 初始化
this.initBpmnModeler();
this.createNewDiagram(this.xml);
this.$once("hook:beforeDestroy", () => {
if (this.bpmnModeler) this.bpmnModeler.destroy();
this.$emit("destroy", this.bpmnModeler);
this.bpmnModeler = null;
});
// 初始模型的监听器
this.initModelListeners();
},
watch: {
value: function (newValue) { // 在 xmlString 发生变化时，重新创建，从而绘制流程图
this.xml = newValue;
this.createNewDiagram(this.xml);
},
activityData: function (newActivityData) {
this.activityList = newActivityData;
this.createNewDiagram(this.xml);
},
processInstanceData: function (newProcessInstanceData) {
this.processInstance = newProcessInstanceData;
this.createNewDiagram(this.xml);
},
taskData: function (newTaskListData) {
this.taskList = newTaskListData;
this.createNewDiagram(this.xml);
}
},
methods: {
initBpmnModeler() {
if (this.bpmnModeler) return;
this.bpmnModeler = new BpmnViewer({
container: this.$refs["bpmn-canvas"],
bpmnRenderer: {
}
})
},
/* 创建新的流程图 */
async createNewDiagram(xml) {
// 将字符串转换成图显示出来
let newId = `Process_${new Date().getTime()}`;
let newName = `业务流程_${new Date().getTime()}`;
let xmlString = xml || DefaultEmptyXML(newId, newName, this.prefix);
try {
// console.log(this.bpmnModeler.importXML);
let { warnings } = await this.bpmnModeler.importXML(xmlString);
if (warnings && warnings.length) {
warnings.forEach(warn => console.warn(warn));
}
// 高亮流程图
await this.highlightDiagram();
const canvas = this.bpmnModeler.get('canvas');
canvas.zoom("fit-viewport", "auto");
} catch (e) {
console.error(e);
// console.error(`[Process Designer Warn]: ${e?.message || e}`);
}
},
/* 高亮流程图 */
// TODO 芋艿：如果多个 endActivity 的话，目前的逻辑可能有一定的问题。https://www.jdon.com/workflow/multi-events.html
async highlightDiagram() {
const activityList = this.activityList;
if (activityList.length === 0) {
return;
}
// 参考自 https://gitee.com/tony2y/RuoYi-flowable/blob/master/ruoyi-ui/src/components/Process/index.vue#L222 实现
// 再次基础上，增加不同审批结果的颜色等等
let canvas = this.bpmnModeler.get('canvas');
let todoActivity = activityList.find(m => !m.endTime) // 找到待办的任务
let endActivity = activityList[activityList.length - 1] // 获得最后一个任务
// debugger
// console.log(this.bpmnModeler.getDefinitions().rootElements[0].flowElements);
this.bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach(n => {
let activity = activityList.find(m => m.key === n.id) // 找到对应的活动
if (!activity) {
return;
}
if (n.$type === 'bpmn:UserTask') { // 用户任务
// 处理用户任务的高亮
const task = this.taskList.find(m => m.id === activity.taskId); // 找到活动对应的 taskId
if (!task) {
return;
}
// 高亮任务
canvas.addMarker(n.id, this.getResultCss(task.result));
// 如果非通过，就不走后面的线条了
if (task.result !== 2) {
return;
}
// 处理 outgoing 出线
const outgoing = this.getActivityOutgoing(activity);
outgoing?.forEach(nn => {
// debugger
let targetActivity = activityList.find(m => m.key === nn.targetRef.id)
// 如果目标活动存在，则根据该活动是否结束，进行【bpmn:SequenceFlow】连线的高亮设置
if (targetActivity) {
canvas.addMarker(nn.id, targetActivity.endTime ? 'highlight' : 'highlight-todo');
} else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') { // TODO 芋艿：这个流程，暂时没走到过
canvas.addMarker(nn.id, activity.endTime ? 'highlight' : 'highlight-todo');
canvas.addMarker(nn.targetRef.id, activity.endTime ? 'highlight' : 'highlight-todo');
} else if (nn.targetRef.$type === 'bpmn:EndEvent') { // TODO 芋艿：这个流程，暂时没走到过
if (!todoActivity && endActivity.key === n.id) {
canvas.addMarker(nn.id, 'highlight');
canvas.addMarker(nn.targetRef.id, 'highlight');
}
if (!activity.endTime) {
canvas.addMarker(nn.id, 'highlight-todo');
canvas.addMarker(nn.targetRef.id, 'highlight-todo');
}
}
});
} else if (n.$type === 'bpmn:ExclusiveGateway') { // 排它网关
// 设置【bpmn:ExclusiveGateway】排它网关的高亮
canvas.addMarker(n.id, this.getActivityHighlightCss(activity));
// 查找需要高亮的连线
let matchNN = undefined;
let matchActivity = undefined;
n.outgoing?.forEach(nn => {
let targetActivity = activityList.find(m => m.key === nn.targetRef.id);
if (!targetActivity) {
return;
}
// 特殊判断 endEvent 类型的原因，ExclusiveGateway 可能后续连有 2 个路径：
// 1. 一个是 UserTask => EndEvent
// 2. 一个是 EndEvent
// 在选择路径 1 时，其实 EndEvent 可能也存在，导致 1 和 2 都高亮，显然是不正确的。
// 所以，在 matchActivity 为 EndEvent 时，需要进行覆盖~~
if (!matchActivity || matchActivity.type === 'endEvent') {
matchNN = nn;
matchActivity = targetActivity;
}
})
if (matchNN && matchActivity) {
canvas.addMarker(matchNN.id, this.getActivityHighlightCss(matchActivity));
}
} else if (n.$type === 'bpmn:ParallelGateway') { // 并行网关
// 设置【bpmn:ParallelGateway】并行网关的高亮
canvas.addMarker(n.id, this.getActivityHighlightCss(activity));
n.outgoing?.forEach(nn => {
// 获得连线是否有指向目标。如果有，则进行高亮
const targetActivity = activityList.find(m => m.key === nn.targetRef.id)
if (targetActivity) {
canvas.addMarker(nn.id, this.getActivityHighlightCss(targetActivity)); // 高亮【bpmn:SequenceFlow】连线
// 高亮【...】目标。其中 ... 可以是 bpm:UserTask、也可以是其它的。当然，如果是 bpm:UserTask 的话，其实不做高亮也没问题，因为上面有逻辑做了这块。
canvas.addMarker(nn.targetRef.id, this.getActivityHighlightCss(targetActivity));
}
})
} else if (n.$type === 'bpmn:StartEvent') { // 开始节点
n.outgoing?.forEach(nn => { // outgoing 例如说【bpmn:SequenceFlow】连线
// 获得连线是否有指向目标。如果有，则进行高亮
let targetActivity = activityList.find(m => m.key === nn.targetRef.id);
if (targetActivity) {
canvas.addMarker(nn.id, 'highlight'); // 高亮【bpmn:SequenceFlow】连线
canvas.addMarker(n.id, 'highlight'); // 高亮【bpmn:StartEvent】开始节点（自己）
}
});
} else if (n.$type === 'bpmn:EndEvent') { // 结束节点
if (!this.processInstance || this.processInstance.result === 1) {
return;
}
canvas.addMarker(n.id, this.getResultCss(this.processInstance.result));
} else if (n.$type === 'bpmn:ServiceTask'){ //服务任务
if(activity.startTime>0 && activity.endTime===0){//进入执行，标识进行色
canvas.addMarker(n.id, this.getResultCss(1));
}
if(activity.endTime>0){// 执行完成，节点标识完成色, 所有outgoing标识完成色。
canvas.addMarker(n.id, this.getResultCss(2));
const outgoing = this.getActivityOutgoing(activity)
outgoing?.forEach(out=>{
canvas.addMarker(out.id,this.getResultCss(2))
})
}
}
})
},
getActivityHighlightCss(activity) {
return activity.endTime ? 'highlight' : 'highlight-todo';
},
getResultCss(result) {
if (result === 1) { // 审批中
return 'highlight-todo';
} else if (result === 2) { // 已通过
return 'highlight';
} else if (result === 3) { // 不通过
return 'highlight-reject';
} else if (result === 4) { // 已取消
return 'highlight-cancel';
}
return '';
},
getActivityOutgoing(activity) {
// 如果有 outgoing，则直接使用它
if (activity.outgoing && activity.outgoing.length > 0) {
return activity.outgoing;
}
// 如果没有，则遍历获得起点为它的【bpmn:SequenceFlow】节点们。原因是：bpmn-js 的 UserTask 拿不到 outgoing
const flowElements = this.bpmnModeler.getDefinitions().rootElements[0].flowElements;
const outgoing = [];
flowElements.forEach(item => {
if (item.$type !== 'bpmn:SequenceFlow') {
return;
}
if (item.sourceRef.id === activity.key) {
outgoing.push(item);
}
});
return outgoing;
},
initModelListeners() {
const EventBus = this.bpmnModeler.get("eventBus");
const that = this;
// 注册需要的监听事件
EventBus.on('element.hover', function(eventObj) {
let element = eventObj ? eventObj.element : null;
that.elementHover(element);
});
EventBus.on('element.out', function(eventObj) {
let element = eventObj ? eventObj.element : null;
that.elementOut(element);
});
},
// 流程图的元素被 hover
elementHover(element) {
this.element = element;
!this.elementOverlayIds && (this.elementOverlayIds = {});
!this.overlays && (this.overlays = this.bpmnModeler.get("overlays"));
// 展示信息
const activity = this.activityList.find(m => m.key === element.id);
if (!activity) {
return;
}
if (!this.elementOverlayIds[element.id] && element.type !== "bpmn:Process") {
let html = `<div class="element-overlays">
<p>Elemet id: ${element.id}</p>
<p>Elemet type: ${element.type}</p>
</div>`; // 默认值
if (element.type === 'bpmn:StartEvent' && this.processInstance) {
html = `<p>发起人：${this.processInstance.startUser.nickname}</p>
<p>部门：${this.processInstance.startUser.deptName}</p>
<p>创建时间：${this.parseTime(this.processInstance.createTime)}`;
} else if (element.type === 'bpmn:UserTask') {
// debugger
let task = this.taskList.find(m => m.id === activity.taskId); // 找到活动对应的 taskId
if (!task) {
return;
}
html = `<p>审批人：${task.assigneeUser.nickname}</p>
<p>部门：${task.assigneeUser.deptName}</p>
<p>结果：${this.getDictDataLabel(this.DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT, task.result)}</p>
<p>创建时间：${this.parseTime(task.createTime)}</p>`;
if (task.endTime) {
html += `<p>结束时间：${this.parseTime(task.endTime)}</p>`
}
if (task.reason) {
html += `<p>审批建议：${task.reason}</p>`
}
} else if (element.type === 'bpmn:ServiceTask' && this.processInstance) {
if(activity.startTime>0){
html = `<p>创建时间：${this.parseTime(activity.startTime)}</p>`;
}
if(activity.endTime>0){
html += `<p>结束时间：${this.parseTime(activity.endTime)}</p>`
}
console.log(html)
} else if (element.type === 'bpmn:EndEvent' && this.processInstance) {
html = `<p>结果：${this.getDictDataLabel(this.DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT, this.processInstance.result)}</p>`;
if (this.processInstance.endTime) {
html += `<p>结束时间：${this.parseTime(this.processInstance.endTime)}</p>`
}
}
this.elementOverlayIds[element.id] = this.overlays.add(element, {
position: { left: 0, bottom: 0 },
html: `<div class="element-overlays">${html}</div>`
});
}
},
// 流程图的元素被 out
elementOut(element) {
this.overlays.remove({ element });
this.elementOverlayIds[element.id] = null;
},
}
};
</script>
<style>
/** 处理中 */
.highlight-todo.djs-connection > .djs-visual > path {
stroke: #1890ff !important;
stroke-dasharray: 4px !important;
fill-opacity: 0.2 !important;
}
.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
fill: #1890ff !important;
stroke: #1890ff !important;
stroke-dasharray: 4px !important;
fill-opacity: 0.2 !important;
}
:deep(.highlight-todo.djs-connection > .djs-visual > path) {
stroke: #1890ff !important;
stroke-dasharray: 4px !important;
fill-opacity: 0.2 !important;
marker-end: url(#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr);
}
:deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) {
fill: #1890ff !important;
stroke: #1890ff !important;
stroke-dasharray: 4px !important;
fill-opacity: 0.2 !important;
}
/** 通过 */
.highlight.djs-shape .djs-visual > :nth-child(1) {
fill: green !important;
stroke: green !important;
fill-opacity: 0.2 !important;
}
.highlight.djs-shape .djs-visual > :nth-child(2) {
fill: green !important;
}
.highlight.djs-shape .djs-visual > path {
fill: green !important;
fill-opacity: 0.2 !important;
stroke: green !important;
}
.highlight.djs-connection > .djs-visual > path {
stroke: green !important;
}
.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
fill: green !important; /* color elements as green */
}
:deep(.highlight.djs-shape .djs-visual > :nth-child(1)) {
fill: green !important;
stroke: green !important;
fill-opacity: 0.2 !important;
}
:deep(.highlight.djs-shape .djs-visual > :nth-child(2)) {
fill: green !important;
}
:deep(.highlight.djs-shape .djs-visual > path) {
fill: green !important;
fill-opacity: 0.2 !important;
stroke: green !important;
}
:deep(.highlight.djs-connection > .djs-visual > path) {
stroke: green !important;
}
/** 不通过 */
.highlight-reject.djs-shape .djs-visual > :nth-child(1) {
fill: red !important;
stroke: red !important;
fill-opacity: 0.2 !important;
}
.highlight-reject.djs-shape .djs-visual > :nth-child(2) {
fill: red !important;
}
.highlight-reject.djs-shape .djs-visual > path {
fill: red !important;
fill-opacity: 0.2 !important;
stroke: red !important;
}
.highlight-reject.djs-connection > .djs-visual > path {
stroke: red !important;
}
.highlight-reject:not(.djs-connection) .djs-visual > :nth-child(1) {
fill: red !important; /* color elements as green */
}
:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(1)) {
fill: red !important;
stroke: red !important;
fill-opacity: 0.2 !important;
}
:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(2)) {
fill: red !important;
}
:deep(.highlight-reject.djs-shape .djs-visual > path) {
fill: red !important;
fill-opacity: 0.2 !important;
stroke: red !important;
}
:deep(.highlight-reject.djs-connection > .djs-visual > path) {
stroke: red !important;
}
/** 已取消 */
.highlight-cancel.djs-shape .djs-visual > :nth-child(1) {
fill: grey !important;
stroke: grey !important;
fill-opacity: 0.2 !important;
}
.highlight-cancel.djs-shape .djs-visual > :nth-child(2) {
fill: grey !important;
}
.highlight-cancel.djs-shape .djs-visual > path {
fill: grey !important;
fill-opacity: 0.2 !important;
stroke: grey !important;
}
.highlight-cancel.djs-connection > .djs-visual > path {
stroke: grey !important;
}
.highlight-cancel:not(.djs-connection) .djs-visual > :nth-child(1) {
fill: grey !important; /* color elements as green */
}
:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(1)) {
fill: grey !important;
stroke: grey !important;
fill-opacity: 0.2 !important;
}
:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(2)) {
fill: grey !important;
}
:deep(.highlight-cancel.djs-shape .djs-visual > path) {
fill: grey !important;
fill-opacity: 0.2 !important;
stroke: grey !important;
}
:deep(.highlight-cancel.djs-connection > .djs-visual > path) {
stroke: grey !important;
}
.element-overlays {
box-sizing: border-box;
padding: 8px;
background: rgba(0, 0, 0, 0.6);
border-radius: 4px;
color: #fafafa;
width: 200px;
}
</style>

8
src/components/bpmnProcessDesigner/package/designer/index.js
View File

@@ -1,8 +0,0 @@
import MyProcessDesigner from "./ProcessDesigner.vue";
MyProcessDesigner.install = function(Vue) {
Vue.component(MyProcessDesigner.name, MyProcessDesigner);
};
// 流程图的设计器，可编辑
export default MyProcessDesigner;

8
src/components/bpmnProcessDesigner/package/designer/index2.js
View File

@@ -1,8 +0,0 @@
import MyProcessViewer from "./ProcessViewer.vue";
MyProcessViewer.install = function(Vue) {
Vue.component(MyProcessViewer.name, MyProcessViewer);
};
// 流程图的查看器，不可编辑
export default MyProcessViewer;

390
src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/contentPadProvider.js
View File

@@ -1,390 +0,0 @@
import { assign, forEach, isArray } from "min-dash";
import { is } from "bpmn-js/lib/util/ModelUtil";
import { isExpanded, isEventSubProcess } from "bpmn-js/lib/util/DiUtil";
import { isAny } from "bpmn-js/lib/features/modeling/util/ModelingUtil";
import { getChildLanes } from "bpmn-js/lib/features/modeling/util/LaneUtil";
import { hasPrimaryModifier } from "diagram-js/lib/util/Mouse";
/**
* A provider for BPMN 2.0 elements context pad
*/
export default function ContextPadProvider(
config,
injector,
eventBus,
contextPad,
modeling,
elementFactory,
connect,
create,
popupMenu,
canvas,
rules,
translate,
elementRegistry
) {
config = config || {};
contextPad.registerProvider(this);
this._contextPad = contextPad;
this._modeling = modeling;
this._elementFactory = elementFactory;
this._connect = connect;
this._create = create;
this._popupMenu = popupMenu;
this._canvas = canvas;
this._rules = rules;
this._translate = translate;
if (config.autoPlace !== false) {
this._autoPlace = injector.get("autoPlace", false);
}
eventBus.on("create.end", 250, function(event) {
const context = event.context,
shape = context.shape
if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {
return;
}
const entries = contextPad.getEntries(shape)
if (entries.replace) {
entries.replace.action.click(event, shape);
}
});
}
ContextPadProvider.$inject = [
"config.contextPad",
"injector",
"eventBus",
"contextPad",
"modeling",
"elementFactory",
"connect",
"create",
"popupMenu",
"canvas",
"rules",
"translate",
"elementRegistry"
];
ContextPadProvider.prototype.getContextPadEntries = function(element) {
const contextPad = this._contextPad,
modeling = this._modeling,
elementFactory = this._elementFactory,
connect = this._connect,
create = this._create,
popupMenu = this._popupMenu,
canvas = this._canvas,
rules = this._rules,
autoPlace = this._autoPlace,
translate = this._translate
const actions = {}
if (element.type === "label") {
return actions;
}
const businessObject = element.businessObject
function startConnect(event, element) {
connect.start(event, element);
}
function removeElement() {
modeling.removeElements([element]);
}
function getReplaceMenuPosition(element) {
const Y_OFFSET = 5
const diagramContainer = canvas.getContainer(),
pad = contextPad.getPad(element).html
const diagramRect = diagramContainer.getBoundingClientRect(),
padRect = pad.getBoundingClientRect()
const top = padRect.top - diagramRect.top
const left = padRect.left - diagramRect.left
const pos = {
x: left,
y: top + padRect.height + Y_OFFSET
}
return pos;
}
/**
* Create an append action
*
* @param {string} type
* @param {string} className
* @param {string} [title]
* @param {Object} [options]
*
* @return {Object} descriptor
*/
function appendAction(type, className, title, options) {
if (typeof title !== "string") {
options = title;
title = translate("Append {type}", { type: type.replace(/^bpmn:/, "") });
}
function appendStart(event, element) {
const shape = elementFactory.createShape(assign({ type: type }, options))
create.start(event, shape, {
source: element
});
}
const append = autoPlace
? function(event, element) {
const shape = elementFactory.createShape(assign({ type: type }, options))
autoPlace.append(element, shape)
}
: appendStart
return {
group: "model",
className: className,
title: title,
action: {
dragstart: appendStart,
click: append
}
};
}
function splitLaneHandler(count) {
return function(event, element) {
// actual split
modeling.splitLane(element, count);
// refresh context pad after split to
// get rid of split icons
contextPad.open(element, true);
};
}
if (isAny(businessObject, ["bpmn:Lane", "bpmn:Participant"]) && isExpanded(businessObject)) {
const childLanes = getChildLanes(element)
assign(actions, {
"lane-insert-above": {
group: "lane-insert-above",
className: "bpmn-icon-lane-insert-above",
title: translate("Add Lane above"),
action: {
click: function(event, element) {
modeling.addLane(element, "top");
}
}
}
});
if (childLanes.length < 2) {
if (element.height >= 120) {
assign(actions, {
"lane-divide-two": {
group: "lane-divide",
className: "bpmn-icon-lane-divide-two",
title: translate("Divide into two Lanes"),
action: {
click: splitLaneHandler(2)
}
}
});
}
if (element.height >= 180) {
assign(actions, {
"lane-divide-three": {
group: "lane-divide",
className: "bpmn-icon-lane-divide-three",
title: translate("Divide into three Lanes"),
action: {
click: splitLaneHandler(3)
}
}
});
}
}
assign(actions, {
"lane-insert-below": {
group: "lane-insert-below",
className: "bpmn-icon-lane-insert-below",
title: translate("Add Lane below"),
action: {
click: function(event, element) {
modeling.addLane(element, "bottom");
}
}
}
});
}
if (is(businessObject, "bpmn:FlowNode")) {
if (is(businessObject, "bpmn:EventBasedGateway")) {
assign(actions, {
"append.receive-task": appendAction("bpmn:ReceiveTask", "bpmn-icon-receive-task", translate("Append ReceiveTask")),
"append.message-intermediate-event": appendAction(
"bpmn:IntermediateCatchEvent",
"bpmn-icon-intermediate-event-catch-message",
translate("Append MessageIntermediateCatchEvent"),
{ eventDefinitionType: "bpmn:MessageEventDefinition" }
),
"append.timer-intermediate-event": appendAction(
"bpmn:IntermediateCatchEvent",
"bpmn-icon-intermediate-event-catch-timer",
translate("Append TimerIntermediateCatchEvent"),
{ eventDefinitionType: "bpmn:TimerEventDefinition" }
),
"append.condition-intermediate-event": appendAction(
"bpmn:IntermediateCatchEvent",
"bpmn-icon-intermediate-event-catch-condition",
translate("Append ConditionIntermediateCatchEvent"),
{ eventDefinitionType: "bpmn:ConditionalEventDefinition" }
),
"append.signal-intermediate-event": appendAction(
"bpmn:IntermediateCatchEvent",
"bpmn-icon-intermediate-event-catch-signal",
translate("Append SignalIntermediateCatchEvent"),
{ eventDefinitionType: "bpmn:SignalEventDefinition" }
)
});
} else if (isEventType(businessObject, "bpmn:BoundaryEvent", "bpmn:CompensateEventDefinition")) {
assign(actions, {
"append.compensation-activity": appendAction("bpmn:Task", "bpmn-icon-task", translate("Append compensation activity"), {
isForCompensation: true
})
});
} else if (
!is(businessObject, "bpmn:EndEvent") &&
!businessObject.isForCompensation &&
!isEventType(businessObject, "bpmn:IntermediateThrowEvent", "bpmn:LinkEventDefinition") &&
!isEventSubProcess(businessObject)
) {
assign(actions, {
"append.end-event": appendAction("bpmn:EndEvent", "bpmn-icon-end-event-none", translate("Append EndEvent")),
"append.gateway": appendAction("bpmn:ExclusiveGateway", "bpmn-icon-gateway-none", translate("Append Gateway")),
"append.append-task": appendAction("bpmn:UserTask", "bpmn-icon-user-task", translate("Append Task")),
"append.intermediate-event": appendAction(
"bpmn:IntermediateThrowEvent",
"bpmn-icon-intermediate-event-none",
translate("Append Intermediate/Boundary Event")
)
});
}
}
if (!popupMenu.isEmpty(element, "bpmn-replace")) {
// Replace menu entry
assign(actions, {
replace: {
group: "edit",
className: "bpmn-icon-screw-wrench",
title: translate("Change type"),
action: {
click: function(event, element) {
const position = assign(getReplaceMenuPosition(element), {
cursor: { x: event.x, y: event.y }
})
popupMenu.open(element, "bpmn-replace", position);
}
}
}
});
}
if (isAny(businessObject, ["bpmn:FlowNode", "bpmn:InteractionNode", "bpmn:DataObjectReference", "bpmn:DataStoreReference"])) {
assign(actions, {
"append.text-annotation": appendAction("bpmn:TextAnnotation", "bpmn-icon-text-annotation"),
connect: {
group: "connect",
className: "bpmn-icon-connection-multi",
title: translate("Connect using " + (businessObject.isForCompensation ? "" : "Sequence/MessageFlow or ") + "Association"),
action: {
click: startConnect,
dragstart: startConnect
}
}
});
}
if (isAny(businessObject, ["bpmn:DataObjectReference", "bpmn:DataStoreReference"])) {
assign(actions, {
connect: {
group: "connect",
className: "bpmn-icon-connection-multi",
title: translate("Connect using DataInputAssociation"),
action: {
click: startConnect,
dragstart: startConnect
}
}
});
}
if (is(businessObject, "bpmn:Group")) {
assign(actions, {
"append.text-annotation": appendAction("bpmn:TextAnnotation", "bpmn-icon-text-annotation")
});
}
// delete element entry, only show if allowed by rules
let deleteAllowed = rules.allowed('elements.delete', { elements: [element] })
if (isArray(deleteAllowed)) {
// was the element returned as a deletion candidate?
deleteAllowed = deleteAllowed[0] === element;
}
if (deleteAllowed) {
assign(actions, {
delete: {
group: "edit",
className: "bpmn-icon-trash",
title: translate("Remove"),
action: {
click: removeElement
}
}
});
}
return actions;
};
// helpers /////////
function isEventType(eventBo, type, definition) {
const isType = eventBo.$instanceOf(type)
let isDefinition = false
const definitions = eventBo.eventDefinitions || []
forEach(definitions, function(def) {
if (def.$type === definition) {
isDefinition = true;
}
});
return isType && isDefinition;
}

6
src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/index.js
View File

@@ -1,6 +0,0 @@
import CustomContextPadProvider from "./contentPadProvider";
export default {
__init__: ["contextPadProvider"],
contextPadProvider: ["type", CustomContextPadProvider]
};

24
src/components/bpmnProcessDesigner/package/designer/plugins/defaultEmpty.js
View File

@@ -1,24 +0,0 @@
export default (key, name, type) => {
if (!type) type = "camunda";
const TYPE_TARGET = {
activiti: "http://activiti.org/bpmn",
camunda: "http://bpmn.io/schema/bpmn",
flowable: "http://flowable.org/bpmn"
};
return `<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
id="diagram_${key}"
targetNamespace="${TYPE_TARGET[type]}">
<bpmn2:process id="${key}" name="${name}" isExecutable="true">
</bpmn2:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${key}">
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn2:definitions>`;
};

1071
src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/activitiDescriptor.json
View File

File diff suppressed because it is too large Load Diff

1087
src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/camundaDescriptor.json
View File

File diff suppressed because it is too large Load Diff

1210
src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json
View File

File diff suppressed because it is too large Load Diff

74
src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
View File

@@ -1,74 +0,0 @@
"use strict";
const some = require('min-dash').some
const ALLOWED_TYPES = {
FailedJobRetryTimeCycle: ['bpmn:StartEvent', 'bpmn:BoundaryEvent', 'bpmn:IntermediateCatchEvent', 'bpmn:Activity'],
Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent']
}
function is(element, type) {
return element && typeof element.$instanceOf === "function" && element.$instanceOf(type);
}
function exists(element) {
return element && element.length;
}
function includesType(collection, type) {
return (
exists(collection) &&
some(collection, function(element) {
return is(element, type);
})
);
}
function anyType(element, types) {
return some(types, function(type) {
return is(element, type);
});
}
function isAllowed(propName, propDescriptor, newElement) {
const name = propDescriptor.name,
types = ALLOWED_TYPES[name.replace(/activiti:/, '')]
return name === propName && anyType(newElement, types);
}
function ActivitiModdleExtension(eventBus) {
eventBus.on(
"property.clone",
function(context) {
const newElement = context.newElement,
propDescriptor = context.propertyDescriptor
this.canCloneProperty(newElement, propDescriptor);
},
this
);
}
ActivitiModdleExtension.$inject = ["eventBus"];
ActivitiModdleExtension.prototype.canCloneProperty = function(newElement, propDescriptor) {
if (isAllowed("activiti:FailedJobRetryTimeCycle", propDescriptor, newElement)) {
return (
includesType(newElement.eventDefinitions, "bpmn:TimerEventDefinition") ||
includesType(newElement.eventDefinitions, "bpmn:SignalEventDefinition") ||
is(newElement.loopCharacteristics, "bpmn:MultiInstanceLoopCharacteristics")
);
}
if (isAllowed("activiti:Connector", propDescriptor, newElement)) {
return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition");
}
if (isAllowed("activiti:Field", propDescriptor, newElement)) {
return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition");
}
};
module.exports = ActivitiModdleExtension;

9
src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/index.js
View File

@@ -1,9 +0,0 @@
/*
* @author igdianov
* address https://github.com/igdianov/activiti-bpmn-moddle
* */
module.exports = {
__init__: ["ActivitiModdleExtension"],
ActivitiModdleExtension: ["type", require("./activitiExtension")]
};

146
src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/extension.js
View File

@@ -1,146 +0,0 @@
"use strict";
const isFunction = require('min-dash').isFunction,
isObject = require('min-dash').isObject,
some = require('min-dash').some
const WILDCARD = '*'
function CamundaModdleExtension(eventBus) {
const self = this
eventBus.on("moddleCopy.canCopyProperty", function(context) {
const property = context.property,
parent = context.parent
return self.canCopyProperty(property, parent);
});
}
CamundaModdleExtension.$inject = ["eventBus"];
/**
* Check wether to disallow copying property.
*/
CamundaModdleExtension.prototype.canCopyProperty = function(property, parent) {
// (1) check wether property is allowed in parent
if (isObject(property) && !isAllowedInParent(property, parent)) {
return false;
}
// (2) check more complex scenarios
if (is(property, "camunda:InputOutput") && !this.canHostInputOutput(parent)) {
return false;
}
if (isAny(property, ["camunda:Connector", "camunda:Field"]) && !this.canHostConnector(parent)) {
return false;
}
if (is(property, "camunda:In") && !this.canHostIn(parent)) {
return false;
}
};
CamundaModdleExtension.prototype.canHostInputOutput = function(parent) {
// allowed in camunda:Connector
const connector = getParent(parent, 'camunda:Connector')
if (connector) {
return true;
}
// special rules inside bpmn:FlowNode
const flowNode = getParent(parent, 'bpmn:FlowNode')
if (!flowNode) {
return false;
}
if (isAny(flowNode, ["bpmn:StartEvent", "bpmn:Gateway", "bpmn:BoundaryEvent"])) {
return false;
}
return !(is(flowNode, "bpmn:SubProcess") && flowNode.get("triggeredByEvent"));
};
CamundaModdleExtension.prototype.canHostConnector = function(parent) {
const serviceTaskLike = getParent(parent, 'camunda:ServiceTaskLike')
if (is(serviceTaskLike, "bpmn:MessageEventDefinition")) {
// only allow on throw and end events
return getParent(parent, "bpmn:IntermediateThrowEvent") || getParent(parent, "bpmn:EndEvent");
}
return true;
};
CamundaModdleExtension.prototype.canHostIn = function(parent) {
const callActivity = getParent(parent, 'bpmn:CallActivity')
if (callActivity) {
return true;
}
const signalEventDefinition = getParent(parent, 'bpmn:SignalEventDefinition')
if (signalEventDefinition) {
// only allow on throw and end events
return getParent(parent, "bpmn:IntermediateThrowEvent") || getParent(parent, "bpmn:EndEvent");
}
return true;
};
module.exports = CamundaModdleExtension;
// helpers //////////
function is(element, type) {
return element && isFunction(element.$instanceOf) && element.$instanceOf(type);
}
function isAny(element, types) {
return some(types, function(t) {
return is(element, t);
});
}
function getParent(element, type) {
if (!type) {
return element.$parent;
}
if (is(element, type)) {
return element;
}
if (!element.$parent) {
return;
}
return getParent(element.$parent, type);
}
function isAllowedInParent(property, parent) {
// (1) find property descriptor
const descriptor = property.$type && property.$model.getTypeDescriptor(property.$type)
const allowedIn = descriptor && descriptor.meta && descriptor.meta.allowedIn
if (!allowedIn || isWildcard(allowedIn)) {
return true;
}
// (2) check wether property has parent of allowed type
return some(allowedIn, function(type) {
return getParent(parent, type);
});
}
function isWildcard(allowedIn) {
return allowedIn.indexOf(WILDCARD) !== -1;
}

6
src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/index.js
View File

@@ -1,6 +0,0 @@
"use strict";
module.exports = {
__init__: ["camundaModdleExtension"],
camundaModdleExtension: ["type", require("./extension")]
};

74
src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
View File

@@ -1,74 +0,0 @@
"use strict";
const some = require('min-dash').some
const ALLOWED_TYPES = {
FailedJobRetryTimeCycle: ['bpmn:StartEvent', 'bpmn:BoundaryEvent', 'bpmn:IntermediateCatchEvent', 'bpmn:Activity'],
Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent']
}
function is(element, type) {
return element && typeof element.$instanceOf === "function" && element.$instanceOf(type);
}
function exists(element) {
return element && element.length;
}
function includesType(collection, type) {
return (
exists(collection) &&
some(collection, function(element) {
return is(element, type);
})
);
}
function anyType(element, types) {
return some(types, function(type) {
return is(element, type);
});
}
function isAllowed(propName, propDescriptor, newElement) {
const name = propDescriptor.name,
types = ALLOWED_TYPES[name.replace(/flowable:/, '')]
return name === propName && anyType(newElement, types);
}
function FlowableModdleExtension(eventBus) {
eventBus.on(
"property.clone",
function(context) {
const newElement = context.newElement,
propDescriptor = context.propertyDescriptor
this.canCloneProperty(newElement, propDescriptor);
},
this
);
}
FlowableModdleExtension.$inject = ["eventBus"];
FlowableModdleExtension.prototype.canCloneProperty = function(newElement, propDescriptor) {
if (isAllowed("flowable:FailedJobRetryTimeCycle", propDescriptor, newElement)) {
return (
includesType(newElement.eventDefinitions, "bpmn:TimerEventDefinition") ||
includesType(newElement.eventDefinitions, "bpmn:SignalEventDefinition") ||
is(newElement.loopCharacteristics, "bpmn:MultiInstanceLoopCharacteristics")
);
}
if (isAllowed("flowable:Connector", propDescriptor, newElement)) {
return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition");
}
if (isAllowed("flowable:Field", propDescriptor, newElement)) {
return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition");
}
};
module.exports = FlowableModdleExtension;

9
src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/index.js
View File

@@ -1,9 +0,0 @@
/*
* @author igdianov
* address https://github.com/igdianov/activiti-bpmn-moddle
* */
module.exports = {
__init__: ["FlowableModdleExtension"],
FlowableModdleExtension: ["type", require("./flowableExtension")]
};

156
src/components/bpmnProcessDesigner/package/designer/plugins/palette/CustomPalette.js
View File

@@ -1,156 +0,0 @@
import PaletteProvider from "bpmn-js/lib/features/palette/PaletteProvider";
import { assign } from "min-dash";
export default function CustomPalette(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {
PaletteProvider.call(this, palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate, 2000);
}
const F = function() {}; // 核心，利用空对象作为中介；
F.prototype = PaletteProvider.prototype; // 核心，将父类的原型赋值给空对象F；
// 利用中介函数重写原型链方法
F.prototype.getPaletteEntries = function() {
const actions = {},
create = this._create,
elementFactory = this._elementFactory,
spaceTool = this._spaceTool,
lassoTool = this._lassoTool,
handTool = this._handTool,
globalConnect = this._globalConnect,
translate = this._translate
function createAction(type, group, className, title, options) {
function createListener(event) {
const shape = elementFactory.createShape(assign({ type: type }, options))
if (options) {
shape.businessObject.di.isExpanded = options.isExpanded;
}
create.start(event, shape);
}
const shortType = type.replace(/^bpmn:/, '')
return {
group: group,
className: className,
title: title || translate("Create {type}", { type: shortType }),
action: {
dragstart: createListener,
click: createListener
}
};
}
function createSubprocess(event) {
const subProcess = elementFactory.createShape({
type: 'bpmn:SubProcess',
x: 0,
y: 0,
isExpanded: true
})
const startEvent = elementFactory.createShape({
type: 'bpmn:StartEvent',
x: 40,
y: 82,
parent: subProcess
})
create.start(event, [subProcess, startEvent], {
hints: {
autoSelect: [startEvent]
}
});
}
function createParticipant(event) {
create.start(event, elementFactory.createParticipantShape());
}
assign(actions, {
"hand-tool": {
group: "tools",
className: "bpmn-icon-hand-tool",
title: translate("Activate the hand tool"),
action: {
click: function(event) {
handTool.activateHand(event);
}
}
},
"lasso-tool": {
group: "tools",
className: "bpmn-icon-lasso-tool",
title: translate("Activate the lasso tool"),
action: {
click: function(event) {
lassoTool.activateSelection(event);
}
}
},
"space-tool": {
group: "tools",
className: "bpmn-icon-space-tool",
title: translate("Activate the create/remove space tool"),
action: {
click: function(event) {
spaceTool.activateSelection(event);
}
}
},
"global-connect-tool": {
group: "tools",
className: "bpmn-icon-connection-multi",
title: translate("Activate the global connect tool"),
action: {
click: function(event) {
globalConnect.toggle(event);
}
}
},
"tool-separator": {
group: "tools",
separator: true
},
"create.start-event": createAction("bpmn:StartEvent", "event", "bpmn-icon-start-event-none", translate("Create StartEvent")),
"create.intermediate-event": createAction(
"bpmn:IntermediateThrowEvent",
"event",
"bpmn-icon-intermediate-event-none",
translate("Create Intermediate/Boundary Event")
),
"create.end-event": createAction("bpmn:EndEvent", "event", "bpmn-icon-end-event-none", translate("Create EndEvent")),
"create.exclusive-gateway": createAction("bpmn:ExclusiveGateway", "gateway", "bpmn-icon-gateway-none", translate("Create Gateway")),
"create.user-task": createAction("bpmn:UserTask", "activity", "bpmn-icon-user-task", translate("Create User Task")),
"create.data-object": createAction("bpmn:DataObjectReference", "data-object", "bpmn-icon-data-object", translate("Create DataObjectReference")),
"create.data-store": createAction("bpmn:DataStoreReference", "data-store", "bpmn-icon-data-store", translate("Create DataStoreReference")),
"create.subprocess-expanded": {
group: "activity",
className: "bpmn-icon-subprocess-expanded",
title: translate("Create expanded SubProcess"),
action: {
dragstart: createSubprocess,
click: createSubprocess
}
},
"create.participant-expanded": {
group: "collaboration",
className: "bpmn-icon-participant",
title: translate("Create Pool/Participant"),
action: {
dragstart: createParticipant,
click: createParticipant
}
},
"create.group": createAction("bpmn:Group", "artifact", "bpmn-icon-group", translate("Create Group"))
});
return actions;
};
CustomPalette.$inject = ["palette", "create", "elementFactory", "spaceTool", "lassoTool", "handTool", "globalConnect", "translate"];
CustomPalette.prototype = new F(); // 核心，将 F的实例赋值给子类；
CustomPalette.prototype.constructor = CustomPalette; // 修复子类CustomPalette的构造器指向，防止原型链的混乱；

22
src/components/bpmnProcessDesigner/package/designer/plugins/palette/index.js
View File

@@ -1,22 +0,0 @@
// import PaletteModule from "diagram-js/lib/features/palette";
// import CreateModule from "diagram-js/lib/features/create";
// import SpaceToolModule from "diagram-js/lib/features/space-tool";
// import LassoToolModule from "diagram-js/lib/features/lasso-tool";
// import HandToolModule from "diagram-js/lib/features/hand-tool";
// import GlobalConnectModule from "diagram-js/lib/features/global-connect";
// import translate from "diagram-js/lib/i18n/translate";
//
// import PaletteProvider from "./paletteProvider";
//
// export default {
// __depends__: [PaletteModule, CreateModule, SpaceToolModule, LassoToolModule, HandToolModule, GlobalConnectModule, translate],
// __init__: ["paletteProvider"],
// paletteProvider: ["type", PaletteProvider]
// };
import CustomPalette from "./CustomPalette";
export default {
__init__: ["paletteProvider"],
paletteProvider: ["type", CustomPalette]
};

160
src/components/bpmnProcessDesigner/package/designer/plugins/palette/paletteProvider.js
View File

@@ -1,160 +0,0 @@
import { assign } from "min-dash";
/**
* A palette provider for BPMN 2.0 elements.
*/
export default function PaletteProvider(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {
this._palette = palette;
this._create = create;
this._elementFactory = elementFactory;
this._spaceTool = spaceTool;
this._lassoTool = lassoTool;
this._handTool = handTool;
this._globalConnect = globalConnect;
this._translate = translate;
palette.registerProvider(this);
}
PaletteProvider.$inject = ["palette", "create", "elementFactory", "spaceTool", "lassoTool", "handTool", "globalConnect", "translate"];
PaletteProvider.prototype.getPaletteEntries = function() {
const actions = {},
create = this._create,
elementFactory = this._elementFactory,
spaceTool = this._spaceTool,
lassoTool = this._lassoTool,
handTool = this._handTool,
globalConnect = this._globalConnect,
translate = this._translate
function createAction(type, group, className, title, options) {
function createListener(event) {
const shape = elementFactory.createShape(assign({ type: type }, options))
if (options) {
shape.businessObject.di.isExpanded = options.isExpanded;
}
create.start(event, shape);
}
const shortType = type.replace(/^bpmn:/, '')
return {
group: group,
className: className,
title: title || translate("Create {type}", { type: shortType }),
action: {
dragstart: createListener,
click: createListener
}
};
}
function createSubprocess(event) {
const subProcess = elementFactory.createShape({
type: 'bpmn:SubProcess',
x: 0,
y: 0,
isExpanded: true
})
const startEvent = elementFactory.createShape({
type: 'bpmn:StartEvent',
x: 40,
y: 82,
parent: subProcess
})
create.start(event, [subProcess, startEvent], {
hints: {
autoSelect: [startEvent]
}
});
}
function createParticipant(event) {
create.start(event, elementFactory.createParticipantShape());
}
assign(actions, {
"hand-tool": {
group: "tools",
className: "bpmn-icon-hand-tool",
title: translate("Activate the hand tool"),
action: {
click: function(event) {
handTool.activateHand(event);
}
}
},
"lasso-tool": {
group: "tools",
className: "bpmn-icon-lasso-tool",
title: translate("Activate the lasso tool"),
action: {
click: function(event) {
lassoTool.activateSelection(event);
}
}
},
"space-tool": {
group: "tools",
className: "bpmn-icon-space-tool",
title: translate("Activate the create/remove space tool"),
action: {
click: function(event) {
spaceTool.activateSelection(event);
}
}
},
"global-connect-tool": {
group: "tools",
className: "bpmn-icon-connection-multi",
title: translate("Activate the global connect tool"),
action: {
click: function(event) {
globalConnect.toggle(event);
}
}
},
"tool-separator": {
group: "tools",
separator: true
},
"create.start-event": createAction("bpmn:StartEvent", "event", "bpmn-icon-start-event-none", translate("Create StartEvent")),
"create.intermediate-event": createAction(
"bpmn:IntermediateThrowEvent",
"event",
"bpmn-icon-intermediate-event-none",
translate("Create Intermediate/Boundary Event")
),
"create.end-event": createAction("bpmn:EndEvent", "event", "bpmn-icon-end-event-none", translate("Create EndEvent")),
"create.exclusive-gateway": createAction("bpmn:ExclusiveGateway", "gateway", "bpmn-icon-gateway-none", translate("Create Gateway")),
"create.user-task": createAction("bpmn:UserTask", "activity", "bpmn-icon-user-task", translate("Create User Task")),
"create.data-object": createAction("bpmn:DataObjectReference", "data-object", "bpmn-icon-data-object", translate("Create DataObjectReference")),
"create.data-store": createAction("bpmn:DataStoreReference", "data-store", "bpmn-icon-data-store", translate("Create DataStoreReference")),
"create.subprocess-expanded": {
group: "activity",
className: "bpmn-icon-subprocess-expanded",
title: translate("Create expanded SubProcess"),
action: {
dragstart: createSubprocess,
click: createSubprocess
}
},
"create.participant-expanded": {
group: "collaboration",
className: "bpmn-icon-participant",
title: translate("Create Pool/Participant"),
action: {
dragstart: createParticipant,
click: createParticipant
}
},
"create.group": createAction("bpmn:Group", "artifact", "bpmn-icon-group", translate("Create Group"))
});
return actions;
};

41
src/components/bpmnProcessDesigner/package/designer/plugins/translate/customTranslate.js
View File

@@ -1,41 +0,0 @@
// import translations from "./zh";
//
// export default function customTranslate(template, replacements) {
// replacements = replacements || {};
//
// // Translate
// template = translations[template] || template;
//
// // Replace
// return template.replace(/{([^}]+)}/g, function(_, key) {
// let str = replacements[key];
// if (
// translations[replacements[key]] !== null &&
// translations[replacements[key]] !== "undefined"
// ) {
// // eslint-disable-next-line no-mixed-spaces-and-tabs
// str = translations[replacements[key]];
// // eslint-disable-next-line no-mixed-spaces-and-tabs
// }
// return str || "{" + key + "}";
// });
// }
export default function customTranslate(translations) {
return function(template, replacements) {
replacements = replacements || {};
// Translate
template = translations[template] || template;
// Replace
return template.replace(/{([^}]+)}/g, function(_, key) {
let str = replacements[key];
if (translations[replacements[key]] !== null && translations[replacements[key]] !== undefined) {
// eslint-disable-next-line no-mixed-spaces-and-tabs
str = translations[replacements[key]];
// eslint-disable-next-line no-mixed-spaces-and-tabs
}
return str || "{" + key + "}";
});
};
}

238
src/components/bpmnProcessDesigner/package/designer/plugins/translate/zh.js
View File

@@ -1,238 +0,0 @@
/**
* This is a sample file that should be replaced with the actual translation.
*
* Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
* translations and labels to translate.
*/
export default {
// 添加部分
"Append EndEvent": "追加结束事件",
"Append Gateway": "追加网关",
"Append Task": "追加任务",
"Append Intermediate/Boundary Event": "追加中间抛出事件/边界事件",
"Activate the global connect tool": "激活全局连接工具",
"Append {type}": "添加 {type}",
"Add Lane above": "在上面添加道",
"Divide into two Lanes": "分割成两个道",
"Divide into three Lanes": "分割成三个道",
"Add Lane below": "在下面添加道",
"Append compensation activity": "追加补偿活动",
"Change type": "修改类型",
"Connect using Association": "使用关联连接",
"Connect using Sequence/MessageFlow or Association": "使用顺序/消息流或者关联连接",
"Connect using DataInputAssociation": "使用数据输入关联连接",
Remove: "移除",
"Activate the hand tool": "激活抓手工具",
"Activate the lasso tool": "激活套索工具",
"Activate the create/remove space tool": "激活创建/删除空间工具",
"Create expanded SubProcess": "创建扩展子过程",
"Create IntermediateThrowEvent/BoundaryEvent": "创建中间抛出事件/边界事件",
"Create Pool/Participant": "创建池/参与者",
"Parallel Multi Instance": "并行多重事件",
"Sequential Multi Instance": "时序多重事件",
DataObjectReference: "数据对象参考",
DataStoreReference: "数据存储参考",
Loop: "循环",
"Ad-hoc": "即席",
"Create {type}": "创建 {type}",
Task: "任务",
"Send Task": "发送任务",
"Receive Task": "接收任务",
"User Task": "用户任务",
"Manual Task": "手工任务",
"Business Rule Task": "业务规则任务",
"Service Task": "服务任务",
"Script Task": "脚本任务",
"Call Activity": "调用活动",
"Sub Process (collapsed)": "子流程（折叠的）",
"Sub Process (expanded)": "子流程（展开的）",
"Start Event": "开始事件",
StartEvent: "开始事件",
"Intermediate Throw Event": "中间事件",
"End Event": "结束事件",
EndEvent: "结束事件",
"Create StartEvent": "创建开始事件",
"Create EndEvent": "创建结束事件",
"Create Task": "创建任务",
"Create User Task": "创建用户任务",
"Create Gateway": "创建网关",
"Create DataObjectReference": "创建数据对象",
"Create DataStoreReference": "创建数据存储",
"Create Group": "创建分组",
"Create Intermediate/Boundary Event": "创建中间/边界事件",
"Message Start Event": "消息开始事件",
"Timer Start Event": "定时开始事件",
"Conditional Start Event": "条件开始事件",
"Signal Start Event": "信号开始事件",
"Error Start Event": "错误开始事件",
"Escalation Start Event": "升级开始事件",
"Compensation Start Event": "补偿开始事件",
"Message Start Event (non-interrupting)": "消息开始事件（非中断）",
"Timer Start Event (non-interrupting)": "定时开始事件（非中断）",
"Conditional Start Event (non-interrupting)": "条件开始事件（非中断）",
"Signal Start Event (non-interrupting)": "信号开始事件（非中断）",
"Escalation Start Event (non-interrupting)": "升级开始事件（非中断）",
"Message Intermediate Catch Event": "消息中间捕获事件",
"Message Intermediate Throw Event": "消息中间抛出事件",
"Timer Intermediate Catch Event": "定时中间捕获事件",
"Escalation Intermediate Throw Event": "升级中间抛出事件",
"Conditional Intermediate Catch Event": "条件中间捕获事件",
"Link Intermediate Catch Event": "链接中间捕获事件",
"Link Intermediate Throw Event": "链接中间抛出事件",
"Compensation Intermediate Throw Event": "补偿中间抛出事件",
"Signal Intermediate Catch Event": "信号中间捕获事件",
"Signal Intermediate Throw Event": "信号中间抛出事件",
"Message End Event": "消息结束事件",
"Escalation End Event": "定时结束事件",
"Error End Event": "错误结束事件",
"Cancel End Event": "取消结束事件",
"Compensation End Event": "补偿结束事件",
"Signal End Event": "信号结束事件",
"Terminate End Event": "终止结束事件",
"Message Boundary Event": "消息边界事件",
"Message Boundary Event (non-interrupting)": "消息边界事件（非中断）",
"Timer Boundary Event": "定时边界事件",
"Timer Boundary Event (non-interrupting)": "定时边界事件（非中断）",
"Escalation Boundary Event": "升级边界事件",
"Escalation Boundary Event (non-interrupting)": "升级边界事件（非中断）",
"Conditional Boundary Event": "条件边界事件",
"Conditional Boundary Event (non-interrupting)": "条件边界事件（非中断）",
"Error Boundary Event": "错误边界事件",
"Cancel Boundary Event": "取消边界事件",
"Signal Boundary Event": "信号边界事件",
"Signal Boundary Event (non-interrupting)": "信号边界事件（非中断）",
"Compensation Boundary Event": "补偿边界事件",
"Exclusive Gateway": "互斥网关",
"Parallel Gateway": "并行网关",
"Inclusive Gateway": "相容网关",
"Complex Gateway": "复杂网关",
"Event based Gateway": "事件网关",
Transaction: "转运",
"Sub Process": "子流程",
"Event Sub Process": "事件子流程",
"Collapsed Pool": "折叠池",
"Expanded Pool": "展开池",
// Errors
"no parent for {element} in {parent}": "在{parent}里，{element}没有父类",
"no shape type specified": "没有指定的形状类型",
"flow elements must be children of pools/participants": "流元素必须是池/参与者的子类",
"out of bounds release": "out of bounds release",
"more than {count} child lanes": "子道大于{count} ",
"element required": "元素不能为空",
"diagram not part of bpmn:Definitions": "流程图不符合bpmn规范",
"no diagram to display": "没有可展示的流程图",
"no process or collaboration to display": "没有可展示的流程/协作",
"element {element} referenced by {referenced}#{property} not yet drawn": "由{referenced}#{property}引用的{element}元素仍未绘制",
"already rendered {element}": "{element} 已被渲染",
"failed to import {element}": "导入{element}失败",
//属性面板的参数
Id: "编号",
Name: "名称",
General: "常规",
Details: "详情",
"Message Name": "消息名称",
Message: "消息",
Initiator: "创建者",
"Asynchronous Continuations": "持续异步",
"Asynchronous Before": "异步前",
"Asynchronous After": "异步后",
"Job Configuration": "工作配置",
Exclusive: "排除",
"Job Priority": "工作优先级",
"Retry Time Cycle": "重试时间周期",
Documentation: "文档",
"Element Documentation": "元素文档",
"History Configuration": "历史配置",
"History Time To Live": "历史的生存时间",
Forms: "表单",
"Form Key": "表单key",
"Form Fields": "表单字段",
"Business Key": "业务key",
"Form Field": "表单字段",
ID: "编号",
Type: "类型",
Label: "名称",
"Default Value": "默认值",
"Default Flow": "默认流转路径",
"Conditional Flow": "条件流转路径",
"Sequence Flow": "普通流转路径",
Validation: "校验",
"Add Constraint": "添加约束",
Config: "配置",
Properties: "属性",
"Add Property": "添加属性",
Value: "值",
Listeners: "监听器",
"Execution Listener": "执行监听",
"Event Type": "事件类型",
"Listener Type": "监听器类型",
"Java Class": "Java类",
Expression: "表达式",
"Must provide a value": "必须提供一个值",
"Delegate Expression": "代理表达式",
Script: "脚本",
"Script Format": "脚本格式",
"Script Type": "脚本类型",
"Inline Script": "内联脚本",
"External Script": "外部脚本",
Resource: "资源",
"Field Injection": "字段注入",
Extensions: "扩展",
"Input/Output": "输入/输出",
"Input Parameters": "输入参数",
"Output Parameters": "输出参数",
Parameters: "参数",
"Output Parameter": "输出参数",
"Timer Definition Type": "定时器定义类型",
"Timer Definition": "定时器定义",
Date: "日期",
Duration: "持续",
Cycle: "循环",
Signal: "信号",
"Signal Name": "信号名称",
Escalation: "升级",
Error: "错误",
"Link Name": "链接名称",
Condition: "条件名称",
"Variable Name": "变量名称",
"Variable Event": "变量事件",
"Specify more than one variable change event as a comma separated list.": "多个变量事件以逗号隔开",
"Wait for Completion": "等待完成",
"Activity Ref": "活动参考",
"Version Tag": "版本标签",
Executable: "可执行文件",
"External Task Configuration": "扩展任务配置",
"Task Priority": "任务优先级",
External: "外部",
Connector: "连接器",
"Must configure Connector": "必须配置连接器",
"Connector Id": "连接器编号",
Implementation: "实现方式",
"Field Injections": "字段注入",
Fields: "字段",
"Result Variable": "结果变量",
Topic: "主题",
"Configure Connector": "配置连接器",
"Input Parameter": "输入参数",
Assignee: "代理人",
"Candidate Users": "候选用户",
"Candidate Groups": "候选组",
"Due Date": "到期时间",
"Follow Up Date": "跟踪日期",
Priority: "优先级",
"The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)":
"跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00",
"The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)":
"跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00",
Variables: "变量",
"Candidate Starter Configuration": "候选人起动器配置",
"Candidate Starter Groups": "候选人起动器组",
"This maps to the process definition key.": "这映射到流程定义键。",
"Candidate Starter Users": "候选人起动器的用户",
"Specify more than one user as a comma separated list.": "指定多个用户作为逗号分隔的列表。",
"Tasklist Configuration": "Tasklist配置",
Startable: "启动",
"Specify more than one group as a comma separated list.": "指定多个组作为逗号分隔的列表。"
};

21
src/components/bpmnProcessDesigner/package/index.js
View File

@@ -1,21 +0,0 @@
import MyProcessDesigner from "./designer";
import MyProcessPenal from "./penal";
import MyProcessViewer from './designer/index2';
const components = [MyProcessDesigner, MyProcessPenal, MyProcessViewer];
const install = function(Vue) {
components.forEach(component => {
Vue.component(component.name, component);
});
};
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue);
}
export default {
version: "0.0.1",
install,
...components
};

48
src/components/bpmnProcessDesigner/package/palette/ProcessPalette.vue
View File

@@ -1,48 +0,0 @@
<template>
<div class="my-process-palette">
<div class="test-button" @click="addTask" @mousedown="addTask">测试任务</div>
<div class="test-container" id="palette-container">1</div>
</div>
</template>
<script>
import { assign } from "min-dash";
export default {
name: "MyProcessPalette",
data() {
return {};
},
mounted() {},
methods: {
addTask(event, options = {}) {
const ElementFactory = window.bpmnInstances.elementFactory;
const create = window.bpmnInstances.modeler.get("create");
console.log(ElementFactory, create);
const shape = ElementFactory.createShape(assign({ type: "bpmn:UserTask" }, options));
if (options) {
shape.businessObject.di.isExpanded = options.isExpanded;
}
create.start(event, shape);
}
}
};
</script>
<style scoped lang="scss">
.my-process-palette {
box-sizing: border-box;
padding: 80px 20px 20px 20px;
.test-button {
box-sizing: border-box;
padding: 8px 16px;
border-radius: 4px;
border: 1px solid rgba(24, 144, 255, 0.8);
cursor: pointer;
}
}
</style>

197
src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
View File

@@ -1,197 +0,0 @@
<template>
<div class="process-panel__container" :style="{ width: `${this.width}px` }">
<el-collapse v-model="activeTab">
<el-collapse-item name="base">
<div slot="title" class="panel-tab__title"><i class="el-icon-info"></i>常规</div>
<element-base-info :id-edit-disabled="idEditDisabled" :business-object="elementBusinessObject" :type="elementType"
:model="model" />
</el-collapse-item>
<el-collapse-item name="condition" v-if="elementType === 'Process'" key="message">
<div slot="title" class="panel-tab__title"><i class="el-icon-s-comment"></i>消息与信号</div>
<signal-and-massage />
</el-collapse-item>
<el-collapse-item name="condition" v-if="conditionFormVisible" key="condition">
<div slot="title" class="panel-tab__title"><i class="el-icon-s-promotion"></i>流转条件</div>
<flow-condition :business-object="elementBusinessObject" :type="elementType" />
</el-collapse-item>
<el-collapse-item name="condition" v-if="formVisible" key="form">
<div slot="title" class="panel-tab__title"><i class="el-icon-s-order"></i>表单</div>
<!-- <element-form :id="elementId" :type="elementType" />-->
友情提示：使用 <router-link target="_blank" :to="{path:'/bpm/manager/form'}"><el-link type="danger">流程表单</el-link> </router-link>
替代，提供更好的表单设计功能
</el-collapse-item>
<el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
<div slot="title" class="panel-tab__title"><i class="el-icon-s-claim"></i>任务</div>
<element-task :id="elementId" :type="elementType" />
</el-collapse-item>
<el-collapse-item name="multiInstance" v-if="elementType.indexOf('Task') !== -1" key="multiInstance">
<div slot="title" class="panel-tab__title"><i class="el-icon-s-help"></i>多实例</div>
<element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
</el-collapse-item>
<el-collapse-item name="listeners" key="listeners">
<div slot="title" class="panel-tab__title"><i class="el-icon-message-solid"></i>执行监听器</div>
<element-listeners :id="elementId" :type="elementType" />
</el-collapse-item>
<el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'" key="taskListeners">
<div slot="title" class="panel-tab__title"><i class="el-icon-message-solid"></i>任务监听器</div>
<user-task-listeners :id="elementId" :type="elementType" />
</el-collapse-item>
<el-collapse-item name="extensions" key="extensions">
<div slot="title" class="panel-tab__title"><i class="el-icon-circle-plus"></i>扩展属性</div>
<element-properties :id="elementId" :type="elementType" />
</el-collapse-item>
<el-collapse-item name="other" key="other">
<div slot="title" class="panel-tab__title"><i class="el-icon-s-promotion"></i>其他</div>
<element-other-config :id="elementId" />
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import ElementBaseInfo from "./base/ElementBaseInfo";
import ElementOtherConfig from "./other/ElementOtherConfig";
import ElementTask from "./task/ElementTask";
import ElementMultiInstance from "./multi-instance/ElementMultiInstance";
import FlowCondition from "./flow-condition/FlowCondition";
import SignalAndMassage from "./signal-message/SignalAndMessage";
import ElementListeners from "./listeners/ElementListeners";
import ElementProperties from "./properties/ElementProperties";
import ElementForm from "./form/ElementForm";
import UserTaskListeners from "./listeners/UserTaskListeners";
/**
* 侧边栏
* @Author MiyueFE
* @Home https://github.com/miyuesc
* @Date 2021年3月31日18:57:51
*/
export default {
name: "MyPropertiesPanel",
components: {
UserTaskListeners,
ElementForm,
ElementProperties,
ElementListeners,
SignalAndMassage,
FlowCondition,
ElementMultiInstance,
ElementTask,
ElementOtherConfig,
ElementBaseInfo
},
componentName: "MyPropertiesPanel",
props: {
bpmnModeler: Object,
prefix: {
type: String,
default: "camunda"
},
width: {
type: Number,
default: 480
},
idEditDisabled: {
type: Boolean,
default: false
},
model: Object, // 流程模型的数据
},
provide() {
return {
prefix: this.prefix,
width: this.width
};
},
data() {
return {
activeTab: "base",
elementId: "",
elementType: "",
elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
conditionFormVisible: false, // 流转条件设置
formVisible: false // 表单配置
};
},
watch: {
elementId: {
handler() {
this.activeTab = "base";
}
}
},
created() {
this.initModels();
},
methods: {
initModels() {
// 初始化 modeler 以及其他 moddle
if (!this.bpmnModeler) {
// 避免加载时 流程图 并未加载完成
this.timer = setTimeout(() => this.initModels(), 10);
return;
}
if (this.timer) clearTimeout(this.timer);
window.bpmnInstances = {
modeler: this.bpmnModeler,
modeling: this.bpmnModeler.get("modeling"),
moddle: this.bpmnModeler.get("moddle"),
eventBus: this.bpmnModeler.get("eventBus"),
bpmnFactory: this.bpmnModeler.get("bpmnFactory"),
elementFactory: this.bpmnModeler.get("elementFactory"),
elementRegistry: this.bpmnModeler.get("elementRegistry"),
replace: this.bpmnModeler.get("replace"),
selection: this.bpmnModeler.get("selection")
};
this.getActiveElement();
},
getActiveElement() {
// 初始第一个选中元素 bpmn:Process
this.initFormOnChanged(null);
this.bpmnModeler.on("import.done", e => {
this.initFormOnChanged(null);
});
// 监听选择事件，修改当前激活的元素以及表单
this.bpmnModeler.on("selection.changed", ({ newSelection }) => {
this.initFormOnChanged(newSelection[0] || null);
});
this.bpmnModeler.on("element.changed", ({ element }) => {
// 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
if (element && element.id === this.elementId) {
this.initFormOnChanged(element);
}
});
},
// 初始化数据
initFormOnChanged(element) {
let activatedElement = element;
if (!activatedElement) {
activatedElement =
window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Process") ??
window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Collaboration");
}
if (!activatedElement) return;
console.log(`
----------
select element changed:
id: ${activatedElement.id}
type: ${activatedElement.businessObject.$type}
----------
`);
console.log("businessObject: ", activatedElement.businessObject);
window.bpmnInstances.bpmnElement = activatedElement;
this.bpmnElement = activatedElement;
this.elementId = activatedElement.id;
this.elementType = activatedElement.type.split(":")[1] || "";
this.elementBusinessObject = JSON.parse(JSON.stringify(activatedElement.businessObject));
this.conditionFormVisible = !!(
this.elementType === "SequenceFlow" &&
activatedElement.source &&
activatedElement.source.type.indexOf("StartEvent") === -1
);
this.formVisible = this.elementType === "UserTask" || this.elementType === "StartEvent";
},
beforeDestroy() {
window.bpmnInstances = null;
}
}
};
</script>

147
src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
View File

@@ -1,147 +0,0 @@
<template>
<div class="panel-tab__content">
<el-form
size="mini"
label-width="90px"
:model="model"
:rules="rules"
@submit.native.prevent
>
<div v-if="elementBaseInfo.$type === 'bpmn:Process'">
<!-- 如果是 Process 信息的时候，使用自定义表单 -->
<el-link
href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B"
type="danger"
target="_blank"
>如何实现实现会签、或签？</el-link
>
<el-form-item label="流程标识" prop="key">
<el-input
v-model="model.key"
placeholder="请输入流标标识"
:disabled="model.id !== undefined && model.id.length > 0"
@change="handleKeyUpdate"
/>
</el-form-item>
<el-form-item label="流程名称" prop="name">
<el-input
v-model="model.name"
placeholder="请输入流程名称"
clearable
@change="handleNameUpdate"
/>
</el-form-item>
</div>
<div v-else>
<el-form-item label="ID">
<el-input
v-model="elementBaseInfo.id"
clearable
@change="updateBaseInfo('id')"
/>
</el-form-item>
<el-form-item label="名称">
<el-input
v-model="elementBaseInfo.name"
clearable
@change="updateBaseInfo('name')"
/>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
export default {
name: "ElementBaseInfo",
props: {
businessObject: Object,
model: Object, // 流程模型的数据
},
data () {
return {
elementBaseInfo: {},
// 流程表单的下拉框的数据
forms: [],
// 流程模型的校验
rules: {
key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
},
}
},
watch: {
businessObject: {
immediate: false,
handler: function (val) {
if (val) {
this.$nextTick(() => this.resetBaseInfo())
}
}
},
// 'model.key': {
// immediate: false,
// handler: function (val) {
// this.handleKeyUpdate(val)
// }
// }
},
created () {
// 针对上传的 bpmn 流程图时，需要延迟 1 秒的时间，保证 key 和 name 的更新
setTimeout(() => {
this.handleKeyUpdate(this.model.key)
this.handleNameUpdate(this.model.name)
}, 1000)
},
methods: {
resetBaseInfo () {
this.bpmnElement = window?.bpmnInstances?.bpmnElement
this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject))
},
handleKeyUpdate (value) {
// 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
if (!value) {
return
}
if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) {
console.log('key 不满足 XML NCName 规则，所以不进行赋值')
return
}
console.log('key 满足 XML NCName 规则，所以进行赋值')
// 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
this.elementBaseInfo['id'] = value
this.updateBaseInfo('id')
},
handleNameUpdate (value) {
if (!value) {
return
}
this.elementBaseInfo['name'] = value
this.updateBaseInfo('name')
},
handleDescriptionUpdate (value) {
// TODO 芋艿：documentation 暂时无法修改，后续在看看
// this.elementBaseInfo['documentation'] = value;
// this.updateBaseInfo('documentation');
},
updateBaseInfo (key) {
// 触发 elementBaseInfo 对应的字段
const attrObj = Object.create(null)
attrObj[key] = this.elementBaseInfo[key]
if (key === "id") {
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
id: this.elementBaseInfo[key],
di: { id: `${this.elementBaseInfo[key]}_di` }
})
} else {
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj)
}
}
},
beforeDestroy () {
this.bpmnElement = null
}
};
</script>

142
src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
View File

@@ -1,142 +0,0 @@
<template>
<div class="panel-tab__content">
<el-form :model="flowConditionForm" label-width="90px" size="mini" @submit.native.prevent>
<el-form-item label="流转类型">
<el-select v-model="flowConditionForm.type" @change="updateFlowType">
<el-option label="普通流转路径" value="normal" />
<el-option label="默认流转路径" value="default" />
<el-option label="条件流转路径" value="condition" />
</el-select>
</el-form-item>
<el-form-item label="条件格式" v-if="flowConditionForm.type === 'condition'" key="condition">
<el-select v-model="flowConditionForm.conditionType">
<el-option label="表达式" value="expression" />
<el-option label="脚本" value="script" />
</el-select>
</el-form-item>
<el-form-item label="表达式" v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'expression'" key="express">
<el-input v-model="flowConditionForm.body" style="width:192px;" clearable @change="updateFlowCondition" />
</el-form-item>
<template v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'script'">
<el-form-item label="脚本语言" key="language">
<el-input v-model="flowConditionForm.language" clearable @change="updateFlowCondition" />
</el-form-item>
<el-form-item label="脚本类型" key="scriptType">
<el-select v-model="flowConditionForm.scriptType">
<el-option label="内联脚本" value="inlineScript" />
<el-option label="外部脚本" value="externalScript" />
</el-select>
</el-form-item>
<el-form-item label="脚本" v-if="flowConditionForm.scriptType === 'inlineScript'" key="body">
<el-input v-model="flowConditionForm.body" type="textarea" clearable @change="updateFlowCondition" />
</el-form-item>
<el-form-item label="资源地址" v-if="flowConditionForm.scriptType === 'externalScript'" key="resource">
<el-input v-model="flowConditionForm.resource" clearable @change="updateFlowCondition" />
</el-form-item>
</template>
</el-form>
</div>
</template>
<script>
export default {
name: "FlowCondition",
props: {
businessObject: Object,
type: String
},
data() {
return {
flowConditionForm: {}
};
},
watch: {
businessObject: {
immediate: true,
handler() {
this.$nextTick(() => this.resetFlowCondition());
}
}
},
methods: {
resetFlowCondition() {
this.bpmnElement = window.bpmnInstances.bpmnElement;
this.bpmnElementSource = this.bpmnElement.source;
this.bpmnElementSourceRef = this.bpmnElement.businessObject.sourceRef;
if (this.bpmnElementSourceRef && this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
// 默认
this.flowConditionForm = { type: "default" };
} else if (!this.bpmnElement.businessObject.conditionExpression) {
// 普通
this.flowConditionForm = { type: "normal" };
} else {
// 带条件
const conditionExpression = this.bpmnElement.businessObject.conditionExpression;
this.flowConditionForm = { ...conditionExpression, type: "condition" };
// resource 可直接标识 是否是外部资源脚本
if (this.flowConditionForm.resource) {
this.$set(this.flowConditionForm, "conditionType", "script");
this.$set(this.flowConditionForm, "scriptType", "externalScript");
return;
}
if (conditionExpression.language) {
this.$set(this.flowConditionForm, "conditionType", "script");
this.$set(this.flowConditionForm, "scriptType", "inlineScript");
return;
}
this.$set(this.flowConditionForm, "conditionType", "expression");
}
},
updateFlowType(flowType) {
// 正常条件类
if (flowType === "condition") {
this.flowConditionRef = window.bpmnInstances.moddle.create("bpmn:FormalExpression");
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
conditionExpression: this.flowConditionRef
});
return;
}
// 默认路径
if (flowType === "default") {
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
conditionExpression: null
});
window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
default: this.bpmnElement
});
return;
}
// 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
if (this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
default: null
});
}
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
conditionExpression: null
});
},
updateFlowCondition() {
let { conditionType, scriptType, body, resource, language } = this.flowConditionForm;
let condition;
if (conditionType === "expression") {
condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body });
} else {
if (scriptType === "inlineScript") {
condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body, language });
this.$set(this.flowConditionForm, "resource", "");
} else {
this.$set(this.flowConditionForm, "body", "");
condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { resource, language });
}
}
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { conditionExpression: condition });
}
},
beforeDestroy() {
this.bpmnElement = null;
this.bpmnElementSource = null;
this.bpmnElementSourceRef = null;
}
};
</script>

361
src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
View File

@@ -1,361 +0,0 @@
<template>
<div class="panel-tab__content">
<el-form size="mini" label-width="80px" @submit.native.prevent>
<el-form-item label="表单标识">
<el-input v-model="formKey" clearable @change="updateElementFormKey" />
</el-form-item>
<el-form-item label="业务标识">
<el-select v-model="businessKey" @change="updateElementBusinessKey">
<el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />
<el-option label="无" value="" />
</el-select>
</el-form-item>
</el-form>
<!--字段列表-->
<div class="element-property list-property">
<el-divider><i class="el-icon-coin"></i> 表单字段</el-divider>
<el-table :data="fieldList" size="mini" max-height="240" border fit>
<el-table-column label="序号" type="index" width="50px" />
<el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />
<el-table-column label="字段类型" prop="type" min-width="80px" :formatter="row => fieldType[row.type] || row.type" show-overflow-tooltip />
<el-table-column label="默认值" prop="defaultValue" min-width="80px" show-overflow-tooltip />
<el-table-column label="操作" width="90px">
<template v-slot="{ row, $index }">
<el-button size="mini" type="text" @click="openFieldForm(row, $index)">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeField(row, $index)">移除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="element-drawer__button">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openFieldForm(null, -1)">添加字段</el-button>
</div>
<!--字段配置侧边栏-->
<el-drawer :visible.sync="fieldModelVisible" title="字段配置" :size="`${width}px`" append-to-body destroy-on-close>
<el-form :model="formFieldForm" label-width="90px" size="mini" @submit.native.prevent>
<el-form-item label="字段ID">
<el-input v-model="formFieldForm.id" clearable />
</el-form-item>
<el-form-item label="类型">
<el-select v-model="formFieldForm.typeType" placeholder="请选择字段类型" clearable @change="changeFieldTypeType">
<el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />
</el-select>
</el-form-item>
<el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">
<el-input v-model="formFieldForm.type" clearable />
</el-form-item>
<el-form-item label="名称">
<el-input v-model="formFieldForm.label" clearable />
</el-form-item>
<el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">
<el-input v-model="formFieldForm.datePattern" clearable />
</el-form-item>
<el-form-item label="默认值">
<el-input v-model="formFieldForm.defaultValue" clearable />
</el-form-item>
</el-form>
<!-- 枚举值设置 -->
<template v-if="formFieldForm.type === 'enum'">
<el-divider key="enum-divider" />
<p class="listener-filed__title" key="enum-title">
<span><i class="el-icon-menu"></i>枚举值列表：</span>
<el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'enum')">添加枚举值</el-button>
</p>
<el-table :data="fieldEnumList" size="mini" key="enum-table" max-height="240" border fit>
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />
<el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />
<el-table-column label="操作" width="90px">
<template v-slot="{ row, $index }">
<el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'enum')">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'enum')">移除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<!-- 校验规则 -->
<el-divider key="validation-divider" />
<p class="listener-filed__title" key="validation-title">
<span><i class="el-icon-menu"></i>约束条件列表：</span>
<el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'constraint')">添加约束</el-button>
</p>
<el-table :data="fieldConstraintsList" size="mini" key="validation-table" max-height="240" border fit>
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />
<el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />
<el-table-column label="操作" width="90px">
<template v-slot="{ row, $index }">
<el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'constraint')">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'constraint')">移除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 表单属性 -->
<el-divider key="property-divider" />
<p class="listener-filed__title" key="property-title">
<span><i class="el-icon-menu"></i>字段属性列表：</span>
<el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'property')">添加属性</el-button>
</p>
<el-table :data="fieldPropertiesList" size="mini" key="property-table" max-height="240" border fit>
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />
<el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
<el-table-column label="操作" width="90px">
<template v-slot="{ row, $index }">
<el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'property')">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'property')">移除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 底部按钮 -->
<div class="element-drawer__button">
<el-button size="mini">取 消</el-button>
<el-button size="mini" type="primary" @click="saveField">保 存</el-button>
</div>
</el-drawer>
<el-dialog :visible.sync="fieldOptionModelVisible" :title="optionModelTitle" width="600px" append-to-body destroy-on-close>
<el-form :model="fieldOptionForm" size="mini" label-width="96px" @submit.native.prevent>
<el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">
<el-input v-model="fieldOptionForm.id" clearable />
</el-form-item>
<el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">
<el-input v-model="fieldOptionForm.name" clearable />
</el-form-item>
<el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">
<el-input v-model="fieldOptionForm.config" clearable />
</el-form-item>
<el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">
<el-input v-model="fieldOptionForm.value" clearable />
</el-form-item>
</el-form>
<template slot="footer">
<el-button size="mini" @click="fieldOptionModelVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="saveFieldOption">确 定</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
export default {
name: "ElementForm",
props: {
id: String,
type: String
},
inject: {
prefix: "prefix",
width: "width"
},
data() {
return {
formKey: "",
businessKey: "",
optionModelTitle: "",
fieldList: [],
formFieldForm: {},
fieldType: {
long: "长整型",
string: "字符串",
boolean: "布尔类",
date: "日期类",
enum: "枚举类",
custom: "自定义类型"
},
formFieldIndex: -1, // 编辑中的字段， -1 为新增
formFieldOptionIndex: -1, // 编辑中的字段配置项， -1 为新增
fieldModelVisible: false,
fieldOptionModelVisible: false,
fieldOptionForm: {}, // 当前激活的字段配置项数据
fieldOptionType: "", // 当前激活的字段配置项弹窗 类型
fieldEnumList: [], // 枚举值列表
fieldConstraintsList: [], // 约束条件列表
fieldPropertiesList: [] // 绑定属性列表
};
},
watch: {
id: {
immediate: true,
handler(val) {
val && val.length && this.$nextTick(() => this.resetFormList());
}
}
},
methods: {
resetFormList() {
this.bpmnELement = window.bpmnInstances.bpmnElement;
this.formKey = this.bpmnELement.businessObject.formKey;
// 获取元素扩展属性 或者 创建扩展属性
this.elExtensionElements =
this.bpmnELement.businessObject.get("extensionElements") || window.bpmnInstances.moddle.create("bpmn:ExtensionElements", { values: [] });
// 获取元素表单配置 或者 创建新的表单配置
this.formData =
this.elExtensionElements.values.filter(ex => ex.$type === `${this.prefix}:FormData`)?.[0] ||
window.bpmnInstances.moddle.create(`${this.prefix}:FormData`, { fields: [] });
// 业务标识 businessKey， 绑定在 formData 中
this.businessKey = this.formData.businessKey;
// 保留剩余扩展元素，便于后面更新该元素对应属性
this.otherExtensions = this.elExtensionElements.values.filter(ex => ex.$type !== `${this.prefix}:FormData`);
// 复制原始值，填充表格
this.fieldList = JSON.parse(JSON.stringify(this.formData.fields || []));
// 更新元素扩展属性，避免后续报错
this.updateElementExtensions();
},
updateElementFormKey() {
window.bpmnInstances.modeling.updateProperties(this.bpmnELement, { formKey: this.formKey });
},
updateElementBusinessKey() {
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnELement, this.formData, { businessKey: this.businessKey });
},
// 根据类型调整字段type
changeFieldTypeType(type) {
this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
},
// 打开字段详情侧边栏
openFieldForm(field, index) {
this.formFieldIndex = index;
if (index !== -1) {
const FieldObject = this.formData.fields[index];
this.formFieldForm = JSON.parse(JSON.stringify(field));
// 设置自定义类型
this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
// 初始化枚举值列表
field.type === "enum" && (this.fieldEnumList = JSON.parse(JSON.stringify(FieldObject?.values || [])));
// 初始化约束条件列表
this.fieldConstraintsList = JSON.parse(JSON.stringify(FieldObject?.validation?.constraints || []));
// 初始化自定义属性列表
this.fieldPropertiesList = JSON.parse(JSON.stringify(FieldObject?.properties?.values || []));
} else {
this.formFieldForm = {};
// 初始化枚举值列表
this.fieldEnumList = [];
// 初始化约束条件列表
this.fieldConstraintsList = [];
// 初始化自定义属性列表
this.fieldPropertiesList = [];
}
this.fieldModelVisible = true;
},
// 打开字段 某个 配置项 弹窗
openFieldOptionForm(option, index, type) {
this.fieldOptionModelVisible = true;
this.fieldOptionType = type;
this.formFieldOptionIndex = index;
if (type === "property") {
this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
return (this.optionModelTitle = "属性配置");
}
if (type === "enum") {
this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
return (this.optionModelTitle = "枚举值配置");
}
this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
return (this.optionModelTitle = "约束条件配置");
},
// 保存字段 某个 配置项
saveFieldOption() {
if (this.formFieldOptionIndex === -1) {
if (this.fieldOptionType === "property") {
this.fieldPropertiesList.push(this.fieldOptionForm);
}
if (this.fieldOptionType === "constraint") {
this.fieldConstraintsList.push(this.fieldOptionForm);
}
if (this.fieldOptionType === "enum") {
this.fieldEnumList.push(this.fieldOptionForm);
}
} else {
this.fieldOptionType === "property" && this.fieldPropertiesList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
this.fieldOptionType === "constraint" && this.fieldConstraintsList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
this.fieldOptionType === "enum" && this.fieldEnumList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
}
this.fieldOptionModelVisible = false;
this.fieldOptionForm = {};
},
// 保存字段配置
saveField() {
const { id, type, label, defaultValue, datePattern } = this.formFieldForm;
const Field = window.bpmnInstances.moddle.create(`${this.prefix}:FormField`, { id, type, label });
defaultValue && (Field.defaultValue = defaultValue);
datePattern && (Field.datePattern = datePattern);
// 构建属性
if (this.fieldPropertiesList && this.fieldPropertiesList.length) {
const fieldPropertyList = this.fieldPropertiesList.map(fp => {
return window.bpmnInstances.moddle.create(`${this.prefix}:Property`, { id: fp.id, value: fp.value });
});
Field.properties = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, { values: fieldPropertyList });
}
// 构建校验规则
if (this.fieldConstraintsList && this.fieldConstraintsList.length) {
const fieldConstraintList = this.fieldConstraintsList.map(fc => {
return window.bpmnInstances.moddle.create(`${this.prefix}:Constraint`, { name: fc.name, config: fc.config });
});
Field.validation = window.bpmnInstances.moddle.create(`${this.prefix}:Validation`, { constraints: fieldConstraintList });
}
// 构建枚举值
if (this.fieldEnumList && this.fieldEnumList.length) {
Field.values = this.fieldEnumList.map(fe => {
return window.bpmnInstances.moddle.create(`${this.prefix}:Value`, { name: fe.name, id: fe.id });
});
}
// 更新数组 与 表单配置实例
if (this.formFieldIndex === -1) {
this.fieldList.push(this.formFieldForm);
this.formData.fields.push(Field);
} else {
this.fieldList.splice(this.formFieldIndex, 1, this.formFieldForm);
this.formData.fields.splice(this.formFieldIndex, 1, Field);
}
this.updateElementExtensions();
this.fieldModelVisible = false;
},
// 移除某个 字段的 配置项
removeFieldOptionItem(option, index, type) {
if (type === "property") {
this.fieldPropertiesList.splice(index, 1);
return;
}
if (type === "enum") {
this.fieldEnumList.splice(index, 1);
return;
}
this.fieldConstraintsList.splice(index, 1);
},
// 移除 字段
removeField(field, index) {
this.fieldList.splice(index, 1);
this.formData.fields.splice(index, 1);
this.updateElementExtensions();
},
updateElementExtensions() {
// 更新回扩展元素
const newElExtensionElements = window.bpmnInstances.moddle.create(`bpmn:ExtensionElements`, {
values: this.otherExtensions.concat(this.formData)
});
// 更新到元素上
window.bpmnInstances.modeling.updateProperties(this.bpmnELement, {
extensionElements: newElExtensionElements
});
}
}
};
</script>

7
src/components/bpmnProcessDesigner/package/penal/index.js
View File

@@ -1,7 +0,0 @@
import MyPropertiesPanel from "./PropertiesPanel.vue";
MyPropertiesPanel.install = function(Vue) {
Vue.component(MyPropertiesPanel.name, MyPropertiesPanel);
};
export default MyPropertiesPanel;

296
src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
View File

@@ -1,296 +0,0 @@
<template>
<div class="panel-tab__content">
<el-table :data="elementListenersList" size="mini" border>
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="事件类型" min-width="100px" prop="event" />
<el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
<el-table-column label="操作" width="90px">
<template v-slot="{ row, $index }">
<el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
</div>
<!-- 监听器 编辑/创建 部分 -->
<el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="`${width}px`" append-to-body destroy-on-close>
<el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-select v-model="listenerForm.event">
<el-option label="start" value="start" />
<el-option label="end" value="end" />
</el-select>
</el-form-item>
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-select v-model="listenerForm.listenerType">
<el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'classListener'"
label="Java类"
prop="class"
key="listener-class"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.class" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'expressionListener'"
label="表达式"
prop="expression"
key="listener-expression"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.expression" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
label="代理表达式"
prop="delegateExpression"
key="listener-delegate"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.delegateExpression" clearable />
</el-form-item>
<template v-if="listenerForm.listenerType === 'scriptListener'">
<el-form-item
label="脚本格式"
prop="scriptFormat"
key="listener-script-format"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
>
<el-input v-model="listenerForm.scriptFormat" clearable />
</el-form-item>
<el-form-item
label="脚本类型"
prop="scriptType"
key="listener-script-type"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
>
<el-select v-model="listenerForm.scriptType">
<el-option label="内联脚本" value="inlineScript" />
<el-option label="外部脚本" value="externalScript" />
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'inlineScript'"
label="脚本内容"
prop="value"
key="listener-script"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
>
<el-input v-model="listenerForm.value" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'externalScript'"
label="资源地址"
prop="resource"
key="listener-resource"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
>
<el-input v-model="listenerForm.resource" clearable />
</el-form-item>
</template>
</el-form>
<el-divider />
<p class="listener-filed__title">
<span><i class="el-icon-menu"></i>注入字段：</span>
<el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
</p>
<el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="字段名称" min-width="100px" prop="name" />
<el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
<el-table-column label="操作" width="100px">
<template v-slot="{ row, $index }">
<el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
</div>
</el-drawer>
<!-- 注入西段 编辑/创建 部分 -->
<el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
<el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-input v-model="listenerFieldForm.name" clearable />
</el-form-item>
<el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-select v-model="listenerFieldForm.fieldType">
<el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
</el-select>
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'string'"
label="字段值："
prop="string"
key="field-string"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.string" clearable />
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'expression'"
label="表达式："
prop="expression"
key="field-expression"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.expression" clearable />
</el-form-item>
</el-form>
<template slot="footer">
<el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import { createListenerObject, updateElementExtensions } from "../../utils";
import { initListenerType, initListenerForm, listenerType, fieldType } from "./utilSelf";
export default {
name: "ElementListeners",
props: {
id: String,
type: String
},
inject: {
prefix: "prefix",
width: "width"
},
data() {
return {
elementListenersList: [], // 监听器列表
listenerForm: {}, // 监听器详情表单
listenerFormModelVisible: false, // 监听器 编辑 侧边栏显示状态
fieldsListOfListener: [],
listenerFieldForm: {}, // 监听器 注入字段 详情表单
listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
editingListenerIndex: -1, // 监听器所在下标，-1 为新增
editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增
listenerTypeObject: listenerType,
fieldTypeObject: fieldType
};
},
watch: {
id: {
immediate: true,
handler(val) {
val && val.length && this.$nextTick(() => this.resetListenersList());
}
}
},
methods: {
resetListenersList() {
this.bpmnElement = window.bpmnInstances.bpmnElement;
this.otherExtensionList = [];
this.bpmnElementListeners =
this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `${this.prefix}:ExecutionListener`) ?? [];
this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener));
},
// 打开 监听器详情 侧边栏
openListenerForm(listener, index) {
if (listener) {
this.listenerForm = initListenerForm(listener);
this.editingListenerIndex = index;
} else {
this.listenerForm = {};
this.editingListenerIndex = -1; // 标记为新增
}
if (listener && listener.fields) {
this.fieldsListOfListener = listener.fields.map(field => ({ ...field, fieldType: field.string ? "string" : "expression" }));
} else {
this.fieldsListOfListener = [];
this.$set(this.listenerForm, "fields", []);
}
// 打开侧边栏并清楚验证状态
this.listenerFormModelVisible = true;
this.$nextTick(() => {
if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate();
});
},
// 打开监听器字段编辑弹窗
openListenerFieldForm(field, index) {
this.listenerFieldForm = field ? JSON.parse(JSON.stringify(field)) : {};
this.editingListenerFieldIndex = field ? index : -1;
this.listenerFieldFormModelVisible = true;
this.$nextTick(() => {
if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate();
});
},
// 保存监听器注入字段
async saveListenerFiled() {
let validateStatus = await this.$refs["listenerFieldFormRef"].validate();
if (!validateStatus) return; // 验证不通过直接返回
if (this.editingListenerFieldIndex === -1) {
this.fieldsListOfListener.push(this.listenerFieldForm);
this.listenerForm.fields.push(this.listenerFieldForm);
} else {
this.fieldsListOfListener.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
this.listenerForm.fields.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
}
this.listenerFieldFormModelVisible = false;
this.$nextTick(() => (this.listenerFieldForm = {}));
},
// 移除监听器字段
removeListenerField(field, index) {
this.$confirm("确认移除该字段吗？", "提示", {
confirmButtonText: "确 认",
cancelButtonText: "取 消"
})
.then(() => {
this.fieldsListOfListener.splice(index, 1);
this.listenerForm.fields.splice(index, 1);
})
.catch(() => console.info("操作取消"));
},
// 移除监听器
removeListener(listener, index) {
this.$confirm("确认移除该监听器吗？", "提示", {
confirmButtonText: "确 认",
cancelButtonText: "取 消"
})
.then(() => {
this.bpmnElementListeners.splice(index, 1);
this.elementListenersList.splice(index, 1);
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
})
.catch(() => console.info("操作取消"));
},
// 保存监听器配置
async saveListenerConfig() {
let validateStatus = await this.$refs["listenerFormRef"].validate();
if (!validateStatus) return; // 验证不通过直接返回
const listenerObject = createListenerObject(this.listenerForm, false, this.prefix);
if (this.editingListenerIndex === -1) {
this.bpmnElementListeners.push(listenerObject);
this.elementListenersList.push(this.listenerForm);
} else {
this.bpmnElementListeners.splice(this.editingListenerIndex, 1, listenerObject);
this.elementListenersList.splice(this.editingListenerIndex, 1, this.listenerForm);
}
// 保存其他配置
this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:ExecutionListener`) ?? [];
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
// 4. 隐藏侧边栏
this.listenerFormModelVisible = false;
this.listenerForm = {};
}
}
};
</script>

319
src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
View File

@@ -1,319 +0,0 @@
<template>
<div class="panel-tab__content">
<el-table :data="elementListenersList" size="mini" border>
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="事件类型" min-width="80px" show-overflow-tooltip :formatter="row => listenerEventTypeObject[row.event]" />
<el-table-column label="事件id" min-width="80px" prop="id" show-overflow-tooltip />
<el-table-column label="监听器类型" min-width="80px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
<el-table-column label="操作" width="90px">
<template v-slot="{ row, $index }">
<el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
</div>
<!-- 监听器 编辑/创建 部分 -->
<el-drawer :visible.sync="listenerFormModelVisible" title="任务监听器" :size="`${width}px`" append-to-body destroy-on-close>
<el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-select v-model="listenerForm.event">
<el-option v-for="i in Object.keys(listenerEventTypeObject)" :key="i" :label="listenerEventTypeObject[i]" :value="i" />
</el-select>
</el-form-item>
<el-form-item label="监听器ID" prop="id" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-input v-model="listenerForm.id" clearable />
</el-form-item>
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-select v-model="listenerForm.listenerType">
<el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'classListener'"
label="Java类"
prop="class"
key="listener-class"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.class" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'expressionListener'"
label="表达式"
prop="expression"
key="listener-expression"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.expression" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
label="代理表达式"
prop="delegateExpression"
key="listener-delegate"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.delegateExpression" clearable />
</el-form-item>
<template v-if="listenerForm.listenerType === 'scriptListener'">
<el-form-item
label="脚本格式"
prop="scriptFormat"
key="listener-script-format"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
>
<el-input v-model="listenerForm.scriptFormat" clearable />
</el-form-item>
<el-form-item
label="脚本类型"
prop="scriptType"
key="listener-script-type"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
>
<el-select v-model="listenerForm.scriptType">
<el-option label="内联脚本" value="inlineScript" />
<el-option label="外部脚本" value="externalScript" />
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'inlineScript'"
label="脚本内容"
prop="value"
key="listener-script"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
>
<el-input v-model="listenerForm.value" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'externalScript'"
label="资源地址"
prop="resource"
key="listener-resource"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
>
<el-input v-model="listenerForm.resource" clearable />
</el-form-item>
</template>
<template v-if="listenerForm.event === 'timeout'">
<el-form-item label="定时器类型" prop="eventDefinitionType" key="eventDefinitionType">
<el-select v-model="listenerForm.eventDefinitionType">
<el-option label="日期" value="date" />
<el-option label="持续时长" value="duration" />
<el-option label="循环" value="cycle" />
<el-option label="无" value="null" />
</el-select>
</el-form-item>
<el-form-item
v-if="!!listenerForm.eventDefinitionType && listenerForm.eventDefinitionType !== 'null'"
label="定时器"
prop="eventTimeDefinitions"
key="eventTimeDefinitions"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写定时器配置' }"
>
<el-input v-model="listenerForm.eventTimeDefinitions" clearable />
</el-form-item>
</template>
</el-form>
<el-divider />
<p class="listener-filed__title">
<span><i class="el-icon-menu"></i>注入字段：</span>
<el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
</p>
<el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="字段名称" min-width="100px" prop="name" />
<el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
<el-table-column label="操作" width="100px">
<template v-slot="{ row, $index }">
<el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
</div>
</el-drawer>
<!-- 注入西段 编辑/创建 部分 -->
<el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
<el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-input v-model="listenerFieldForm.name" clearable />
</el-form-item>
<el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-select v-model="listenerFieldForm.fieldType">
<el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
</el-select>
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'string'"
label="字段值："
prop="string"
key="field-string"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.string" clearable />
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'expression'"
label="表达式："
prop="expression"
key="field-expression"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.expression" clearable />
</el-form-item>
</el-form>
<template slot="footer">
<el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import { createListenerObject, updateElementExtensions } from "../../utils";
import { initListenerForm, initListenerType, eventType, listenerType, fieldType } from "./utilSelf";
export default {
name: "UserTaskListeners",
props: {
id: String,
type: String
},
inject: {
prefix: "prefix",
width: "width"
},
data() {
return {
elementListenersList: [],
listenerEventTypeObject: eventType,
listenerTypeObject: listenerType,
listenerFormModelVisible: false,
listenerForm: {},
fieldTypeObject: fieldType,
fieldsListOfListener: [],
listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
editingListenerIndex: -1, // 监听器所在下标，-1 为新增
editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增
listenerFieldForm: {} // 监听器 注入字段 详情表单
};
},
watch: {
id: {
immediate: true,
handler(val) {
val && val.length && this.$nextTick(() => this.resetListenersList());
}
}
},
methods: {
resetListenersList() {
this.bpmnElement = window.bpmnInstances.bpmnElement;
this.otherExtensionList = [];
this.bpmnElementListeners = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `${this.prefix}:TaskListener`) ?? [];
this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener));
},
openListenerForm(listener, index) {
if (listener) {
this.listenerForm = initListenerForm(listener);
this.editingListenerIndex = index;
} else {
this.listenerForm = {};
this.editingListenerIndex = -1; // 标记为新增
}
if (listener && listener.fields) {
this.fieldsListOfListener = listener.fields.map(field => ({ ...field, fieldType: field.string ? "string" : "expression" }));
} else {
this.fieldsListOfListener = [];
this.$set(this.listenerForm, "fields", []);
}
// 打开侧边栏并清楚验证状态
this.listenerFormModelVisible = true;
this.$nextTick(() => {
if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate();
});
},
// 移除监听器
removeListener(listener, index) {
this.$confirm("确认移除该监听器吗？", "提示", {
confirmButtonText: "确 认",
cancelButtonText: "取 消"
})
.then(() => {
this.bpmnElementListeners.splice(index, 1);
this.elementListenersList.splice(index, 1);
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
})
.catch(() => console.info("操作取消"));
},
// 保存监听器
async saveListenerConfig() {
let validateStatus = await this.$refs["listenerFormRef"].validate();
if (!validateStatus) return; // 验证不通过直接返回
const listenerObject = createListenerObject(this.listenerForm, true, this.prefix);
if (this.editingListenerIndex === -1) {
this.bpmnElementListeners.push(listenerObject);
this.elementListenersList.push(this.listenerForm);
} else {
this.bpmnElementListeners.splice(this.editingListenerIndex, 1, listenerObject);
this.elementListenersList.splice(this.editingListenerIndex, 1, this.listenerForm);
}
// 保存其他配置
this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:TaskListener`) ?? [];
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
// 4. 隐藏侧边栏
this.listenerFormModelVisible = false;
this.listenerForm = {};
},
// 打开监听器字段编辑弹窗
openListenerFieldForm(field, index) {
this.listenerFieldForm = field ? JSON.parse(JSON.stringify(field)) : {};
this.editingListenerFieldIndex = field ? index : -1;
this.listenerFieldFormModelVisible = true;
this.$nextTick(() => {
if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate();
});
},
// 保存监听器注入字段
async saveListenerFiled() {
let validateStatus = await this.$refs["listenerFieldFormRef"].validate();
if (!validateStatus) return; // 验证不通过直接返回
if (this.editingListenerFieldIndex === -1) {
this.fieldsListOfListener.push(this.listenerFieldForm);
this.listenerForm.fields.push(this.listenerFieldForm);
} else {
this.fieldsListOfListener.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
this.listenerForm.fields.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
}
this.listenerFieldFormModelVisible = false;
this.$nextTick(() => (this.listenerFieldForm = {}));
},
// 移除监听器字段
removeListenerField(field, index) {
this.$confirm("确认移除该字段吗？", "提示", {
confirmButtonText: "确 认",
cancelButtonText: "取 消"
})
.then(() => {
this.fieldsListOfListener.splice(index, 1);
this.listenerForm.fields.splice(index, 1);
})
.catch(() => console.info("操作取消"));
}
}
};
</script>

178
src/components/bpmnProcessDesigner/package/penal/listeners/template.js
View File

@@ -1,178 +0,0 @@
export const template = isTaskListener => {
return `
<div class="panel-tab__content">
<el-table :data="elementListenersList" size="mini" border>
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="事件类型" min-width="100px" prop="event" />
<el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
<el-table-column label="操作" width="90px">
<template v-slot="{ row, $index }">
<el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
</div>
<!-- 监听器 编辑/创建 部分 -->
<el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="width + 'px'" append-to-body destroy-on-close>
<el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-select v-model="listenerForm.event">
<el-option label="start" value="start" />
<el-option label="end" value="end" />
</el-select>
</el-form-item>
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-select v-model="listenerForm.listenerType">
<el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'classListener'"
label="Java类"
prop="class"
key="listener-class"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.class" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'expressionListener'"
label="表达式"
prop="expression"
key="listener-expression"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.expression" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.listenerType === 'delegateExpressionListener'"
label="代理表达式"
prop="delegateExpression"
key="listener-delegate"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.delegateExpression" clearable />
</el-form-item>
<template v-if="listenerForm.listenerType === 'scriptListener'">
<el-form-item
label="脚本格式"
prop="scriptFormat"
key="listener-script-format"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
>
<el-input v-model="listenerForm.scriptFormat" clearable />
</el-form-item>
<el-form-item
label="脚本类型"
prop="scriptType"
key="listener-script-type"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
>
<el-select v-model="listenerForm.scriptType">
<el-option label="内联脚本" value="inlineScript" />
<el-option label="外部脚本" value="externalScript" />
</el-select>
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'inlineScript'"
label="脚本内容"
prop="value"
key="listener-script"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
>
<el-input v-model="listenerForm.value" clearable />
</el-form-item>
<el-form-item
v-if="listenerForm.scriptType === 'externalScript'"
label="资源地址"
prop="resource"
key="listener-resource"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
>
<el-input v-model="listenerForm.resource" clearable />
</el-form-item>
</template>
${
isTaskListener
? "<el-form-item label='定时器类型' prop='eventDefinitionType' key='eventDefinitionType'>" +
"<el-select v-model='listenerForm.eventDefinitionType'>" +
"<el-option label='日期' value='date' />" +
"<el-option label='持续时长' value='duration' />" +
"<el-option label='循环' value='cycle' />" +
"<el-option label='无' value='' />" +
"</el-select>" +
"</el-form-item>" +
"<el-form-item v-if='!!listenerForm.eventDefinitionType' label='定时器' prop='eventDefinitions' key='eventDefinitions'>" +
"<el-input v-model='listenerForm.eventDefinitions' clearable />" +
"</el-form-item>"
: ""
}
</el-form>
<el-divider />
<p class="listener-filed__title">
<span><i class="el-icon-menu"></i>注入字段：</span>
<el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
</p>
<el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="字段名称" min-width="100px" prop="name" />
<el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
<el-table-column label="操作" width="100px">
<template v-slot="{ row, $index }">
<el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
</div>
</el-drawer>
<!-- 注入西段 编辑/创建 部分 -->
<el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
<el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-input v-model="listenerFieldForm.name" clearable />
</el-form-item>
<el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-select v-model="listenerFieldForm.fieldType">
<el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
</el-select>
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'string'"
label="字段值："
prop="string"
key="field-string"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.string" clearable />
</el-form-item>
<el-form-item
v-if="listenerFieldForm.fieldType === 'expression'"
label="表达式："
prop="expression"
key="field-expression"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.expression" clearable />
</el-form-item>
</el-form>
<template slot="footer">
<el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
</template>
</el-dialog>
</div>
`;
};

62
src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.js
View File

@@ -1,62 +0,0 @@
// 初始化表单数据
export function initListenerForm(listener) {
let self = {
...listener
};
if (listener.script) {
self = {
...listener,
...listener.script,
scriptType: listener.script.resource ? "externalScript" : "inlineScript"
};
}
if (listener.event === "timeout" && listener.eventDefinitions) {
if (listener.eventDefinitions.length) {
let k = "";
for (let key in listener.eventDefinitions[0]) {
console.log(listener.eventDefinitions, key);
if (key.indexOf("time") !== -1) {
k = key;
self.eventDefinitionType = key.replace("time", "").toLowerCase();
}
}
console.log(k);
self.eventTimeDefinitions = listener.eventDefinitions[0][k].body;
}
}
return self;
}
export function initListenerType(listener) {
let listenerType;
if (listener.class) listenerType = "classListener";
if (listener.expression) listenerType = "expressionListener";
if (listener.delegateExpression) listenerType = "delegateExpressionListener";
if (listener.script) listenerType = "scriptListener";
return {
...JSON.parse(JSON.stringify(listener)),
...(listener.script ?? {}),
listenerType: listenerType
};
}
export const listenerType = {
classListener: "Java 类",
expressionListener: "表达式",
delegateExpressionListener: "代理表达式",
scriptListener: "脚本"
};
export const eventType = {
create: "创建",
assignment: "指派",
complete: "完成",
delete: "删除",
update: "更新",
timeout: "超时"
};
export const fieldType = {
string: "字符串",
expression: "表达式"
};

192
src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
View File

@@ -1,192 +0,0 @@
<template>
<div class="panel-tab__content">
<el-form size="mini" label-width="90px" @submit.native.prevent>
<el-form-item label="回路特性">
<el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType">
<!--bpmn:MultiInstanceLoopCharacteristics-->
<el-option label="并行多重事件" value="ParallelMultiInstance" />
<el-option label="时序多重事件" value="SequentialMultiInstance" />
<!--bpmn:StandardLoopCharacteristics-->
<el-option label="循环事件" value="StandardLoop" />
<el-option label="无" value="Null" />
</el-select>
</el-form-item>
<template v-if="loopCharacteristics === 'ParallelMultiInstance' || loopCharacteristics === 'SequentialMultiInstance'">
<el-form-item label="循环基数" key="loopCardinality">
<el-input v-model="loopInstanceForm.loopCardinality" clearable @change="updateLoopCardinality" />
</el-form-item>
<el-form-item label="集合" key="collection" v-show="false">
<el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
</el-form-item>
<el-form-item label="元素变量" key="elementVariable">
<el-input v-model="loopInstanceForm.elementVariable" clearable @change="updateLoopBase" />
</el-form-item>
<el-form-item label="完成条件" key="completionCondition">
<el-input v-model="loopInstanceForm.completionCondition" clearable @change="updateLoopCondition" />
</el-form-item>
<el-form-item label="异步状态" key="async">
<el-checkbox v-model="loopInstanceForm.asyncBefore" label="异步前" @change="updateLoopAsync('asyncBefore')" />
<el-checkbox v-model="loopInstanceForm.asyncAfter" label="异步后" @change="updateLoopAsync('asyncAfter')" />
<el-checkbox
v-model="loopInstanceForm.exclusive"
v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
label="排除"
@change="updateLoopAsync('exclusive')"
/>
</el-form-item>
<el-form-item label="重试周期" prop="timeCycle" v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore" key="timeCycle">
<el-input v-model="loopInstanceForm.timeCycle" clearable @change="updateLoopTimeCycle" />
</el-form-item>
</template>
</el-form>
</div>
</template>
<script>
export default {
name: "ElementMultiInstance",
props: {
businessObject: Object,
type: String
},
inject: {
prefix: "prefix"
},
data() {
return {
loopCharacteristics: "",
//默认配置，用来覆盖原始不存在的选项，避免报错
defaultLoopInstanceForm: {
completionCondition: "",
loopCardinality: "",
extensionElements: [],
asyncAfter: false,
asyncBefore: false,
exclusive: false
},
loopInstanceForm: {}
};
},
watch: {
businessObject: {
immediate: true,
handler(val) {
this.bpmnElement = window.bpmnInstances.bpmnElement;
this.getElementLoop(val);
}
}
},
methods: {
getElementLoop(businessObject) {
if (!businessObject.loopCharacteristics) {
this.loopCharacteristics = "Null";
this.loopInstanceForm = {};
return;
}
if (businessObject.loopCharacteristics.$type === "bpmn:StandardLoopCharacteristics") {
this.loopCharacteristics = "StandardLoop";
this.loopInstanceForm = {};
return;
}
if (businessObject.loopCharacteristics.isSequential) {
this.loopCharacteristics = "SequentialMultiInstance";
} else {
this.loopCharacteristics = "ParallelMultiInstance";
}
// 合并配置
this.loopInstanceForm = {
...this.defaultLoopInstanceForm,
...businessObject.loopCharacteristics,
completionCondition: businessObject.loopCharacteristics?.completionCondition?.body ?? "",
loopCardinality: businessObject.loopCharacteristics?.loopCardinality?.body ?? ""
};
// 保留当前元素 businessObject 上的 loopCharacteristics 实例
this.multiLoopInstance = window.bpmnInstances.bpmnElement.businessObject.loopCharacteristics;
// 更新表单
if (
businessObject.loopCharacteristics.extensionElements &&
businessObject.loopCharacteristics.extensionElements.values &&
businessObject.loopCharacteristics.extensionElements.values.length
) {
this.$set(this.loopInstanceForm, "timeCycle", businessObject.loopCharacteristics.extensionElements.values[0].body);
}
},
changeLoopCharacteristicsType(type) {
// this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
// 取消多实例配置
if (type === "Null") {
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { loopCharacteristics: null });
return;
}
// 配置循环
if (type === "StandardLoop") {
const loopCharacteristicsObject = window.bpmnInstances.moddle.create("bpmn:StandardLoopCharacteristics");
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
loopCharacteristics: loopCharacteristicsObject
});
this.multiLoopInstance = null;
return;
}
// 时序
if (type === "SequentialMultiInstance") {
this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", { isSequential: true });
} else {
this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", { collection: "${coll_userList}" });
}
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
loopCharacteristics: this.multiLoopInstance
});
},
// 循环基数
updateLoopCardinality(cardinality) {
let loopCardinality = null;
if (cardinality && cardinality.length) {
loopCardinality = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: cardinality });
}
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, { loopCardinality });
},
// 完成条件
updateLoopCondition(condition) {
let completionCondition = null;
if (condition && condition.length) {
completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: condition });
}
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, { completionCondition });
},
// 重试周期
updateLoopTimeCycle(timeCycle) {
const extensionElements = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
values: [
window.bpmnInstances.moddle.create(`${this.prefix}:FailedJobRetryTimeCycle`, {
body: timeCycle
})
]
});
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, { extensionElements });
},
// 直接更新的基础信息
updateLoopBase() {
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
collection: this.loopInstanceForm.collection || null,
elementVariable: this.loopInstanceForm.elementVariable || null
});
},
// 各异步状态
updateLoopAsync(key) {
const { asyncBefore, asyncAfter } = this.loopInstanceForm;
let asyncAttr = Object.create(null);
if (!asyncBefore && !asyncAfter) {
this.$set(this.loopInstanceForm, "exclusive", false);
asyncAttr = { asyncBefore: false, asyncAfter: false, exclusive: false, extensionElements: null };
} else {
asyncAttr[key] = this.loopInstanceForm[key];
}
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, asyncAttr);
}
},
beforeDestroy() {
this.multiLoopInstance = null;
this.bpmnElement = null;
}
};
</script>

59
src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
View File

@@ -1,59 +0,0 @@
<template>
<div class="panel-tab__content">
<div class="element-property input-property">
<div class="element-property__label">元素文档：</div>
<div class="element-property__value">
<el-input
type="textarea"
v-model="documentation"
size="mini"
resize="vertical"
:autosize="{ minRows: 2, maxRows: 4 }"
@input="updateDocumentation"
@blur="updateDocumentation"
/>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ElementOtherConfig",
props: {
id: String
},
data() {
return {
documentation: ""
};
},
watch: {
id: {
immediate: true,
handler: function(id) {
if (id && id.length) {
this.$nextTick(() => {
const documentations = window.bpmnInstances.bpmnElement.businessObject?.documentation;
this.documentation = documentations && documentations.length ? documentations[0].text : "";
});
} else {
this.documentation = "";
}
}
}
},
methods: {
updateDocumentation() {
(this.bpmnElement && this.bpmnElement.id === this.id) || (this.bpmnElement = window.bpmnInstances.elementRegistry.get(this.id));
const documentation = window.bpmnInstances.bpmnFactory.create("bpmn:Documentation", { text: this.documentation });
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
documentation: [documentation]
});
}
},
beforeDestroy() {
this.bpmnElement = null;
}
};
</script>

135
src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
View File

@@ -1,135 +0,0 @@
<template>
<div class="panel-tab__content">
<el-table :data="elementPropertyList" size="mini" max-height="240" border fit>
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip />
<el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
<el-table-column label="操作" width="90px">
<template v-slot="{ row, $index }">
<el-button size="mini" type="text" @click="openAttributesForm(row, $index)">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeAttributes(row, $index)">移除</el-button>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openAttributesForm(null, -1)">添加属性</el-button>
</div>
<el-dialog :visible.sync="propertyFormModelVisible" title="属性配置" width="600px" append-to-body destroy-on-close>
<el-form :model="propertyForm" label-width="80px" size="mini" ref="attributeFormRef" @submit.native.prevent>
<el-form-item label="属性名：" prop="name">
<el-input v-model="propertyForm.name" clearable />
</el-form-item>
<el-form-item label="属性值：" prop="value">
<el-input v-model="propertyForm.value" clearable />
</el-form-item>
</el-form>
<template slot="footer">
<el-button size="mini" @click="propertyFormModelVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="saveAttribute">确 定</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
export default {
name: "ElementProperties",
props: {
id: String,
type: String
},
inject: {
prefix: "prefix",
width: "width"
},
data() {
return {
elementPropertyList: [],
propertyForm: {},
editingPropertyIndex: -1,
propertyFormModelVisible: false
};
},
watch: {
id: {
immediate: true,
handler(val) {
val && val.length && this.resetAttributesList();
}
}
},
methods: {
resetAttributesList() {
this.bpmnElement = window.bpmnInstances.bpmnElement;
this.otherExtensionList = []; // 其他扩展配置
this.bpmnElementProperties =
this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => {
if (ex.$type !== `${this.prefix}:Properties`) {
this.otherExtensionList.push(ex);
}
return ex.$type === `${this.prefix}:Properties`;
}) ?? [];
// 保存所有的 扩展属性字段
this.bpmnElementPropertyList = this.bpmnElementProperties.reduce((pre, current) => pre.concat(current.values), []);
// 复制 显示
this.elementPropertyList = JSON.parse(JSON.stringify(this.bpmnElementPropertyList ?? []));
},
openAttributesForm(attr, index) {
this.editingPropertyIndex = index;
this.propertyForm = index === -1 ? {} : JSON.parse(JSON.stringify(attr));
this.propertyFormModelVisible = true;
this.$nextTick(() => {
if (this.$refs["attributeFormRef"]) this.$refs["attributeFormRef"].clearValidate();
});
},
removeAttributes(attr, index) {
this.$confirm("确认移除该属性吗？", "提示", {
confirmButtonText: "确 认",
cancelButtonText: "取 消"
})
.then(() => {
this.elementPropertyList.splice(index, 1);
this.bpmnElementPropertyList.splice(index, 1);
// 新建一个属性字段的保存列表
const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
values: this.bpmnElementPropertyList
});
this.updateElementExtensions(propertiesObject);
this.resetAttributesList();
})
.catch(() => console.info("操作取消"));
},
saveAttribute() {
const { name, value } = this.propertyForm;
console.log(this.bpmnElementPropertyList);
if (this.editingPropertyIndex !== -1) {
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.bpmnElementPropertyList[this.editingPropertyIndex], {
name,
value
});
} else {
// 新建属性字段
const newPropertyObject = window.bpmnInstances.moddle.create(`${this.prefix}:Property`, { name, value });
// 新建一个属性字段的保存列表
const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
values: this.bpmnElementPropertyList.concat([newPropertyObject])
});
this.updateElementExtensions(propertiesObject);
}
this.propertyFormModelVisible = false;
this.resetAttributesList();
},
updateElementExtensions(properties) {
const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
values: this.otherExtensionList.concat([properties])
});
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
extensionElements: extensions
});
}
}
};
</script>

104
src/components/bpmnProcessDesigner/package/penal/signal-message/SignalAndMessage.vue
View File

@@ -1,104 +0,0 @@
<template>
<div class="panel-tab__content">
<div class="panel-tab__content--title">
<span><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i>消息列表</span>
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openModel('message')">创建新消息</el-button>
</div>
<el-table :data="messageList" size="mini" border>
<el-table-column type="index" label="序号" width="60px" />
<el-table-column label="消息ID" prop="id" max-width="300px" show-overflow-tooltip />
<el-table-column label="消息名称" prop="name" max-width="300px" show-overflow-tooltip />
</el-table>
<div class="panel-tab__content--title" style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eeeeee">
<span><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i>信号列表</span>
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openModel('signal')">创建新信号</el-button>
</div>
<el-table :data="signalList" size="mini" border>
<el-table-column type="index" label="序号" width="60px" />
<el-table-column label="信号ID" prop="id" max-width="300px" show-overflow-tooltip />
<el-table-column label="信号名称" prop="name" max-width="300px" show-overflow-tooltip />
</el-table>
<el-dialog :visible.sync="modelVisible" :title="modelConfig.title" :close-on-click-modal="false" width="400px" append-to-body destroy-on-close>
<el-form :model="modelObjectForm" size="mini" label-width="90px" @submit.native.prevent>
<el-form-item :label="modelConfig.idLabel">
<el-input v-model="modelObjectForm.id" clearable />
</el-form-item>
<el-form-item :label="modelConfig.nameLabel">
<el-input v-model="modelObjectForm.name" clearable />
</el-form-item>
</el-form>
<template slot="footer">
<el-button size="mini" @click="modelVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="addNewObject">保 存</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
export default {
name: "SignalAndMassage",
data() {
return {
signalList: [],
messageList: [],
modelVisible: false,
modelType: "",
modelObjectForm: {}
};
},
computed: {
modelConfig() {
if (this.modelType === "message") {
return { title: "创建消息", idLabel: "消息ID", nameLabel: "消息名称" };
} else {
return { title: "创建信号", idLabel: "信号ID", nameLabel: "信号名称" };
}
}
},
mounted() {
this.initDataList();
},
methods: {
initDataList() {
this.rootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
this.messageIdMap = {};
this.signalIdMap = {};
this.messageList = [];
this.signalList = [];
this.rootElements.forEach(el => {
if (el.$type === "bpmn:Message") {
this.messageIdMap[el.id] = true;
this.messageList.push({ ...el });
}
if (el.$type === "bpmn:Signal") {
this.signalIdMap[el.id] = true;
this.signalList.push({ ...el });
}
});
},
openModel(type) {
this.modelType = type;
this.modelObjectForm = {};
this.modelVisible = true;
},
addNewObject() {
if (this.modelType === "message") {
if (this.messageIdMap[this.modelObjectForm.id]) {
return this.$message.error("该消息已存在，请修改id后重新保存");
}
const messageRef = window.bpmnInstances.moddle.create("bpmn:Message", this.modelObjectForm);
this.rootElements.push(messageRef);
} else {
if (this.signalIdMap[this.modelObjectForm.id]) {
return this.$message.error("该信号已存在，请修改id后重新保存");
}
const signalRef = window.bpmnInstances.moddle.create("bpmn:Signal", this.modelObjectForm);
this.rootElements.push(signalRef);
}
this.modelVisible = false;
this.initDataList();
}
}
};
</script>

72
src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue
View File

@@ -1,72 +0,0 @@
<template>
<div class="panel-tab__content">
<el-form size="mini" label-width="90px" @submit.native.prevent>
<el-form-item label="异步延续">
<el-checkbox v-model="taskConfigForm.asyncBefore" label="异步前" @change="changeTaskAsync" />
<el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />
<el-checkbox v-model="taskConfigForm.exclusive" v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore" label="排除" @change="changeTaskAsync" />
</el-form-item>
<component :is="witchTaskComponent" v-bind="$props" />
</el-form>
</div>
</template>
<script>
import UserTask from "./task-components/UserTask";
import ScriptTask from "./task-components/ScriptTask";
import ReceiveTask from "./task-components/ReceiveTask";
export default {
name: "ElementTaskConfig",
components: { UserTask, ScriptTask, ReceiveTask },
props: {
id: String,
type: String
},
data() {
return {
taskConfigForm: {
asyncAfter: false,
asyncBefore: false,
exclusive: false
},
witchTaskComponent: "",
installedComponent: {
// 手工任务与普通任务一致，不需要其他配置
// 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
// 发送任务、服务任务、业务规则任务共用一个相同配置
UserTask: "UserTask", // 用户任务配置
ScriptTask: "ScriptTask", // 脚本任务配置
ReceiveTask: "ReceiveTask" // 消息接收任务
}
};
},
watch: {
id: {
immediate: true,
handler() {
this.bpmnElement = window.bpmnInstances.bpmnElement;
this.taskConfigForm.asyncBefore = this.bpmnElement?.businessObject?.asyncBefore;
this.taskConfigForm.asyncAfter = this.bpmnElement?.businessObject?.asyncAfter;
this.taskConfigForm.exclusive = this.bpmnElement?.businessObject?.exclusive;
}
},
type: {
immediate: true,
handler() {
this.witchTaskComponent = this.installedComponent[this.type];
}
}
},
methods: {
changeTaskAsync() {
if (!this.taskConfigForm.asyncBefore && !this.taskConfigForm.asyncAfter) {
this.taskConfigForm.exclusive = false;
}
window.bpmnInstances.modeling.updateProperties(window.bpmnInstances.bpmnElement, {
...this.taskConfigForm
});
}
}
};
</script>

97
src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
View File

@@ -1,97 +0,0 @@
<template>
<div style="margin-top: 16px">
<el-form-item label="消息实例">
<div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap">
<el-select v-model="bindMessageId" @change="updateTaskMessage">
<el-option v-for="id in Object.keys(messageMap)" :value="id" :label="messageMap[id]" :key="id" />
</el-select>
<el-button size="mini" type="primary" icon="el-icon-plus" style="margin-left: 8px" @click="openMessageModel" />
</div>
</el-form-item>
<el-dialog :visible.sync="messageModelVisible" :close-on-click-modal="false" title="创建新消息" width="400px" append-to-body destroy-on-close>
<el-form :model="newMessageForm" size="mini" label-width="90px" @submit.native.prevent>
<el-form-item label="消息ID">
<el-input v-model="newMessageForm.id" clearable />
</el-form-item>
<el-form-item label="消息名称">
<el-input v-model="newMessageForm.name" clearable />
</el-form-item>
</el-form>
<template slot="footer">
<el-button size="mini" type="primary" @click="createNewMessage">确 认</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
export default {
name: "ReceiveTask",
props: {
id: String,
type: String
},
data() {
return {
bindMessageId: "",
newMessageForm: {},
messageMap: {},
messageModelVisible: false
};
},
watch: {
id: {
immediate: true,
handler() {
this.$nextTick(() => this.getBindMessage());
}
}
},
created() {
this.bpmnMessageRefsMap = Object.create(null);
this.bpmnRootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
this.bpmnRootElements
.filter(el => el.$type === "bpmn:Message")
.forEach(m => {
this.bpmnMessageRefsMap[m.id] = m;
this.$set(this.messageMap, m.id, m.name);
});
this.$set(this.messageMap, "-1", "无"); // 添加一个空对象，保证可以取消原消息绑定
},
methods: {
getBindMessage() {
this.bpmnElement = window.bpmnInstances.bpmnElement;
this.bindMessageId = this.bpmnElement.businessObject?.messageRef?.id || "-1";
},
openMessageModel() {
this.messageModelVisible = true;
this.newMessageForm = {};
},
createNewMessage() {
if (this.messageMap[this.newMessageForm.id]) {
this.$message.error("该消息已存在，请修改id后重新保存");
return;
}
const newMessage = window.bpmnInstances.moddle.create("bpmn:Message", this.newMessageForm);
this.bpmnRootElements.push(newMessage);
this.$set(this.messageMap, this.newMessageForm.id, this.newMessageForm.name);
this.bpmnMessageRefsMap[this.newMessageForm.id] = newMessage;
this.messageModelVisible = false;
},
updateTaskMessage(messageId) {
if (messageId === "-1") {
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
messageRef: null
});
} else {
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
messageRef: this.bpmnMessageRefsMap[messageId]
});
}
}
},
beforeDestroy() {
this.bpmnElement = null;
}
};
</script>

85
src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue
View File

@@ -1,85 +0,0 @@
<template>
<div style="margin-top: 16px">
<el-form-item label="脚本格式">
<el-input v-model="scriptTaskForm.scriptFormat" clearable @input="updateElementTask()" @change="updateElementTask()" />
</el-form-item>
<el-form-item label="脚本类型">
<el-select v-model="scriptTaskForm.scriptType">
<el-option label="内联脚本" value="inline" />
<el-option label="外部资源" value="external" />
</el-select>
</el-form-item>
<el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
<el-input
v-model="scriptTaskForm.script"
type="textarea"
resize="vertical"
:autosize="{ minRows: 2, maxRows: 4 }"
clearable
@input="updateElementTask()"
@change="updateElementTask()"
/>
</el-form-item>
<el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
<el-input v-model="scriptTaskForm.resource" clearable @input="updateElementTask()" @change="updateElementTask()" />
</el-form-item>
<el-form-item label="结果变量">
<el-input v-model="scriptTaskForm.resultVariable" clearable @input="updateElementTask()" @change="updateElementTask()" />
</el-form-item>
</div>
</template>
<script>
export default {
name: "ScriptTask",
props: {
id: String,
type: String
},
data() {
return {
defaultTaskForm: {
scriptFormat: "",
script: "",
resource: "",
resultVariable: ""
},
scriptTaskForm: {}
};
},
watch: {
id: {
immediate: true,
handler() {
this.bpmnElement = window.bpmnInstances.bpmnElement;
this.$nextTick(() => this.resetTaskForm());
}
}
},
methods: {
resetTaskForm() {
for (let key in this.defaultTaskForm) {
let value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
this.$set(this.scriptTaskForm, key, value);
}
this.$set(this.scriptTaskForm, "scriptType", this.scriptTaskForm.script ? "inline" : "external");
},
updateElementTask() {
let taskAttr = Object.create(null);
taskAttr.scriptFormat = this.scriptTaskForm.scriptFormat || null;
taskAttr.resultVariable = this.scriptTaskForm.resultVariable || null;
if (this.scriptTaskForm.scriptType === "inline") {
taskAttr.script = this.scriptTaskForm.script || null;
taskAttr.resource = null;
} else {
taskAttr.resource = this.scriptTaskForm.resource || null;
taskAttr.script = null;
}
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
}
},
beforeDestroy() {
this.bpmnElement = null;
}
};
</script>

89
src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
View File

@@ -1,89 +0,0 @@
<template>
<div style="margin-top: 16px">
<!-- <el-form-item label="处理用户">-->
<!-- <el-select v-model="userTaskForm.assignee" @change="updateElementTask('assignee')">-->
<!-- <el-option v-for="ak in mockData" :key="'ass-' + ak" :label="`用户${ak}`" :value="`user${ak}`" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="候选用户">-->
<!-- <el-select v-model="userTaskForm.candidateUsers" multiple collapse-tags @change="updateElementTask('candidateUsers')">-->
<!-- <el-option v-for="uk in mockData" :key="'user-' + uk" :label="`用户${uk}`" :value="`user${uk}`" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="候选分组">-->
<!-- <el-select v-model="userTaskForm.candidateGroups" multiple collapse-tags @change="updateElementTask('candidateGroups')">-->
<!-- <el-option v-for="gk in mockData" :key="'ass-' + gk" :label="`分组${gk}`" :value="`group${gk}`" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="到期时间">
<el-input v-model="userTaskForm.dueDate" clearable @change="updateElementTask('dueDate')" />
</el-form-item>
<el-form-item label="跟踪时间">
<el-input v-model="userTaskForm.followUpDate" clearable @change="updateElementTask('followUpDate')" />
</el-form-item>
<el-form-item label="优先级">
<el-input v-model="userTaskForm.priority" clearable @change="updateElementTask('priority')" />
</el-form-item>
友情提示：任务的分配规则，使用
<router-link target="_blank" :to="{path:'/bpm/manager/model'}"><el-link type="danger">流程模型</el-link> </router-link>
下的【分配规则】替代，提供指定角色、部门负责人、部门成员、岗位、工作组、自定义脚本等 7 种维护的任务分配维度，更加灵活！
</div>
</template>
<script>
export default {
name: "UserTask",
props: {
id: String,
type: String
},
data() {
return {
defaultTaskForm: {
assignee: "",
candidateUsers: [],
candidateGroups: [],
dueDate: "",
followUpDate: "",
priority: ""
},
userTaskForm: {},
mockData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
};
},
watch: {
id: {
immediate: true,
handler() {
this.bpmnElement = window.bpmnInstances.bpmnElement;
this.$nextTick(() => this.resetTaskForm());
}
}
},
methods: {
resetTaskForm() {
for (let key in this.defaultTaskForm) {
let value;
if (key === "candidateUsers" || key === "candidateGroups") {
value = this.bpmnElement?.businessObject[key] ? this.bpmnElement.businessObject[key].split(",") : [];
} else {
value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
}
this.$set(this.userTaskForm, key, value);
}
},
updateElementTask(key) {
const taskAttr = Object.create(null);
if (key === "candidateUsers" || key === "candidateGroups") {
taskAttr[key] = this.userTaskForm[key] && this.userTaskForm[key].length ? this.userTaskForm[key].join() : null;
} else {
taskAttr[key] = this.userTaskForm[key] || null;
}
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
}
},
beforeDestroy() {
this.bpmnElement = null;
}
};
</script>

70
src/components/bpmnProcessDesigner/package/theme/element-variables.scss
View File

@@ -1,70 +0,0 @@
/* 改变主题色变量 */
$--color-primary: #1890ff;
$--color-danger: #ff4d4f;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
.el-table td,
.el-table th {
color: #333;
}
.el-drawer__header {
padding: 16px 16px 8px 16px;
margin: 0;
line-height: 24px;
font-size: 18px;
color: #303133;
box-sizing: border-box;
border-bottom: 1px solid #e8e8e8;
}
div[class^="el-drawer"]:focus,
span:focus {
outline: none;
}
.el-drawer__body {
box-sizing: border-box;
padding: 16px;
width: 100%;
overflow-y: auto;
}
.el-dialog {
margin-top: 50vh !important;
transform: translateY(-50%);
overflow: hidden;
}
.el-dialog__wrapper {
overflow: hidden;
max-height: 100vh;
}
.el-dialog__header {
padding: 16px 16px 8px 16px;
box-sizing: border-box;
border-bottom: 1px solid #e8e8e8;
}
.el-dialog__body {
padding: 16px;
max-height: 80vh;
box-sizing: border-box;
overflow-y: auto;
}
.el-dialog__footer {
padding: 16px;
box-sizing: border-box;
border-top: 1px solid #e8e8e8;
}
.el-dialog__close {
font-weight: 600;
}
.el-select {
width: 100%;
}
.el-divider:not(.el-divider--horizontal) {
margin: 0 8px ;
}
.el-divider.el-divider--horizontal {
margin: 16px 0;
}

2
src/components/bpmnProcessDesigner/package/theme/index.scss
View File

@@ -1,2 +0,0 @@
@import "./process-designer.scss";
@import "./process-panel.scss";

156
src/components/bpmnProcessDesigner/package/theme/process-designer.scss
View File

@@ -1,156 +0,0 @@
@import "~bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
@import "~bpmn-js-token-simulation/assets/css/font-awesome.min.css";
@import "~bpmn-js-token-simulation/assets/css/normalize.css";
// 边框被 token-simulation 样式覆盖了
.djs-palette {
background: var(--palette-background-color);
border: solid 1px var(--palette-border-color) !important;
border-radius: 2px;
}
.my-process-designer {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
box-sizing: border-box;
.my-process-designer__header {
width: 100%;
min-height: 36px;
.el-button {
text-align: center;
}
.el-button-group {
margin: 4px;
}
.el-tooltip__popper {
.el-button {
width: 100%;
text-align: left;
padding-left: 8px;
padding-right: 8px;
}
.el-button:hover {
background: rgba(64, 158, 255, 0.8);
color: #ffffff;
}
}
.align {
position: relative;
i {
&:after {
content: "|";
position: absolute;
transform: rotate(90deg) translate(200%, 60%);
}
}
}
.align.align-left i {
transform: rotate(90deg);
}
.align.align-right i {
transform: rotate(-90deg);
}
.align.align-top i {
transform: rotate(180deg);
}
.align.align-bottom i {
transform: rotate(0deg);
}
.align.align-center i {
transform: rotate(90deg);
&:after {
transform: rotate(90deg) translate(0, 60%);
}
}
.align.align-middle i {
transform: rotate(0deg);
&:after {
transform: rotate(90deg) translate(0, 60%);
}
}
}
.my-process-designer__container {
display: inline-flex;
width: 100%;
flex: 1;
.my-process-designer__canvas {
flex: 1;
height: 100%;
position: relative;
background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+")
repeat !important;
div.toggle-mode {
display: none;
}
}
.my-process-designer__property-panel {
height: 100%;
overflow: scroll;
overflow-y: auto;
z-index: 10;
* {
box-sizing: border-box;
}
}
svg {
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
}
}
}
//侧边栏配置
.djs-palette.open {
.djs-palette-entries {
div[class^="bpmn-icon-"]:before,
div[class*="bpmn-icon-"]:before {
line-height: unset;
}
div.entry {
position: relative;
}
div.entry:hover {
&::after {
width: max-content;
content: attr(title);
vertical-align: text-bottom;
position: absolute;
right: -10px;
top: 0;
bottom: 0;
overflow: hidden;
transform: translateX(100%);
font-size: 0.5em;
display: inline-block;
text-decoration: inherit;
font-variant: normal;
text-transform: none;
background: #fafafa;
box-shadow: 0 0 6px #eeeeee;
border: 1px solid #cccccc;
box-sizing: border-box;
padding: 0 16px;
border-radius: 4px;
z-index: 100;
}
}
}
}
pre {
margin: 0;
height: 100%;
overflow: hidden;
max-height: calc(80vh - 32px);
overflow-y: auto;
}
.hljs {
word-break: break-word;
white-space: pre-wrap;
}
.hljs * {
font-family: Consolas, Monaco, monospace;
}

107
src/components/bpmnProcessDesigner/package/theme/process-panel.scss
View File

@@ -1,107 +0,0 @@
.process-panel__container {
box-sizing: border-box;
padding: 0 8px;
border-left: 1px solid #eeeeee;
box-shadow: 0 0 8px #cccccc;
max-height: 100%;
overflow-y: scroll;
}
.panel-tab__title {
font-weight: 600;
padding: 0 8px;
font-size: 1.1em;
line-height: 1.2em;
i {
margin-right: 8px;
font-size: 1.2em;
}
}
.panel-tab__content {
width: 100%;
box-sizing: border-box;
border-top: 1px solid #eeeeee;
padding: 8px 16px;
.panel-tab__content--title {
display: flex;
justify-content: space-between;
padding-bottom: 8px;
span {
flex: 1;
text-align: left;
}
}
}
.element-property {
width: 100%;
display: flex;
align-items: flex-start;
margin: 8px 0;
.element-property__label {
display: block;
width: 90px;
text-align: right;
overflow: hidden;
padding-right: 12px;
line-height: 32px;
font-size: 14px;
box-sizing: border-box;
}
.element-property__value {
flex: 1;
line-height: 32px;
}
.el-form-item {
width: 100%;
margin-bottom: 0;
padding-bottom: 18px;
}
}
.list-property {
flex-direction: column;
.element-listener-item {
width: 100%;
display: inline-grid;
grid-template-columns: 16px auto 32px 32px;
grid-column-gap: 8px;
}
.element-listener-item + .element-listener-item {
margin-top: 8px;
}
}
.listener-filed__title {
display: inline-flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin-top: 0;
span {
width: 200px;
text-align: left;
font-size: 14px;
}
i {
margin-right: 8px;
}
}
.element-drawer__button {
margin-top: 8px;
width: 100%;
display: inline-flex;
justify-content: space-around;
}
.element-drawer__button > .el-button {
width: 100%;
}
.el-collapse-item__content {
padding-bottom: 0;
}
.el-input.is-disabled .el-input__inner {
color: #999999;
}
.el-form-item.el-form-item--mini {
margin-bottom: 0;
& + .el-form-item {
margin-top: 16px;
}
}

69
src/components/bpmnProcessDesigner/package/utils.js
View File

@@ -1,69 +0,0 @@
// 创建监听器实例
export function createListenerObject(options, isTask, prefix) {
const listenerObj = Object.create(null);
listenerObj.event = options.event;
isTask && (listenerObj.id = options.id); // 任务监听器特有的 id 字段
switch (options.listenerType) {
case "scriptListener":
listenerObj.script = createScriptObject(options, prefix);
break;
case "expressionListener":
listenerObj.expression = options.expression;
break;
case "delegateExpressionListener":
listenerObj.delegateExpression = options.delegateExpression;
break;
default:
listenerObj.class = options.class;
}
// 注入字段
if (options.fields) {
listenerObj.fields = options.fields.map(field => {
return createFieldObject(field, prefix);
});
}
// 任务监听器的 定时器 设置
if (isTask && options.event === "timeout" && !!options.eventDefinitionType) {
const timeDefinition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: options.eventTimeDefinitions });
const TimerEventDefinition = window.bpmnInstances.moddle.create("bpmn:TimerEventDefinition", {
id: `TimerEventDefinition_${uuid(8)}`,
[`time${options.eventDefinitionType.replace(/^\S/, s => s.toUpperCase())}`]: timeDefinition
});
listenerObj.eventDefinitions = [TimerEventDefinition];
}
return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj);
}
// 创建 监听器的注入字段 实例
export function createFieldObject(option, prefix) {
const { name, fieldType, string, expression } = option;
const fieldConfig = fieldType === "string" ? { name, string } : { name, expression };
return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig);
}
// 创建脚本实例
export function createScriptObject(options, prefix) {
const { scriptType, scriptFormat, value, resource } = options;
const scriptConfig = scriptType === "inlineScript" ? { scriptFormat, value } : { scriptFormat, resource };
return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig);
}
// 更新元素扩展属性
export function updateElementExtensions(element, extensionList) {
const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
values: extensionList
});
window.bpmnInstances.modeling.updateProperties(element, {
extensionElements: extensions
});
}
// 创建一个id
export function uuid(length = 8, chars) {
let result = "";
let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
for (let i = length; i > 0; --i) {
result += charsString[Math.floor(Math.random() * charsString.length)];
}
return result;
}

Some files were not shown because too many files have changed in this diff Show More