Compare commits
256 Commits
688c541074
...
projects/m
| Author | SHA1 | Date | |
|---|---|---|---|
| ec0c09a674 | |||
|
|
90e9b179eb | ||
|
|
8e2b332c7b | ||
| f37a12d2e1 | |||
| cb19872012 | |||
|
|
8ba79185d4 | ||
|
|
104cda5a41 | ||
|
|
151c5708c4 | ||
| 837735b7e8 | |||
|
|
e00a08385f | ||
|
|
a8c3d2c585 | ||
| eb097e77bd | |||
|
|
30eecb8bd1 | ||
|
|
f4a6229170 | ||
| ab593bff20 | |||
| 4b01dd3ec3 | |||
| ed3ea7dde8 | |||
| 1d9e272f99 | |||
|
|
43c9153777 | ||
|
|
c6d504583b | ||
|
|
22f3c87f02 | ||
|
|
1f54c9179d | ||
| f7247f5161 | |||
|
|
c8856f34b5 | ||
|
|
42c42abc08 | ||
| 0fffed9b0e | |||
|
|
d251daa3f5 | ||
|
|
ed5120ca97 | ||
|
|
becf34d089 | ||
| f0d64de77b | |||
| 56819176b3 | |||
| d302179f6f | |||
| 8c117fae8e | |||
|
|
b6cf7b2ddc | ||
|
|
2f98b42bd2 | ||
| fb8ae9226a | |||
| 3d3763c4ef | |||
| ea675b9dea | |||
| bda065e4be | |||
|
|
5ea4c219ed | ||
|
|
16186667da | ||
|
|
c7cd6e7b1e | ||
|
|
29c3a9fb72 | ||
|
|
1e1313d090 | ||
| d0eb1d84c8 | |||
|
|
445d8f4818 | ||
|
|
46ce982cfc | ||
| 391e06a382 | |||
| 72e1b4e8f9 | |||
| b41ba04cb4 | |||
|
|
4482ce0433 | ||
|
|
ecf6745c8a | ||
| c9128ce946 | |||
| ba08175de8 | |||
|
|
22f8322baf | ||
|
|
6f8abc9758 | ||
| 59d53b60c7 | |||
| d448280782 | |||
| 0337b54202 | |||
|
|
9dec81e0b2 | ||
|
|
64de2c50b6 | ||
|
|
bd0f9e24fd | ||
|
|
f3043ee11f | ||
| 5584a47575 | |||
| b0078cb099 | |||
| e5acd497b5 | |||
| 6b452dce36 | |||
| aacf87f6d3 | |||
|
|
bfa17e422d | ||
|
|
e25f872589 | ||
| 83b834d2fc | |||
| 1b2c16fcdb | |||
| 475ec35ec5 | |||
| 1328da9616 | |||
| 92b9ec7da7 | |||
| c1af47db81 | |||
| 15afbcd612 | |||
|
|
dabbc6b63a | ||
|
|
cfab3353d3 | ||
|
|
2298fc56b6 | ||
| bb77d0f8c6 | |||
|
|
e8938a62eb | ||
|
|
2a599d96b3 | ||
|
|
6050eb4df5 | ||
| 02c3b3db0d | |||
| 3308fcbef9 | |||
| cb7135bad5 | |||
| 4a56f92961 | |||
|
|
8f11c2f47c | ||
|
|
b41dc9593c | ||
| 862fe20760 | |||
| 1ed409a98e | |||
| 68e738cf12 | |||
|
|
4866198a98 | ||
|
|
49df8a72bd | ||
|
|
087af452de | ||
|
|
63a753d7d6 | ||
| b1cdf083dd | |||
| 673ddcb996 | |||
| a9e60dbe82 | |||
|
|
92d197a513 | ||
|
|
e7f440a142 | ||
| 5d3622bf62 | |||
| 5ccb9297e1 | |||
| ce528f18b6 | |||
|
|
024060182e | ||
|
|
4f111a95d6 | ||
| 8fc6b73179 | |||
| 7f504e5cdd | |||
| 7c5d8bde0b | |||
|
|
0b1761e83c | ||
|
|
cafa156d72 | ||
| ed46ed7d09 | |||
|
|
f89c6dfe14 | ||
|
|
a3b2eae33f | ||
| e70ff40554 | |||
| d3d93acd0f | |||
| 93236f9828 | |||
|
|
fef8824844 | ||
| a4fceeb981 | |||
| 84468cc883 | |||
| ea04d55fc1 | |||
| ef1078360a | |||
| 60f6c3a8fe | |||
| a4b340ac5d | |||
|
|
2592551e66 | ||
|
|
1fde96e677 | ||
| 0b16e1fe0d | |||
| abcec3bcdc | |||
| bdd14eec70 | |||
| 44e7e219a4 | |||
|
|
ec51beb8ea | ||
|
|
433618e71d | ||
| 812b72f10d | |||
|
|
05f10ab51d | ||
|
|
e7828fd277 | ||
| 58457487d1 | |||
|
|
6c54c223c5 | ||
|
|
b2cc509f8e | ||
| b6236e89b1 | |||
| cbc7cbc574 | |||
| b5b952e1cc | |||
| 33ed9f15fa | |||
| c85c6e4323 | |||
| 30d22b34e1 | |||
| 3d3fa2ccee | |||
| f960ece594 | |||
| 949675b3a2 | |||
| f52815abe6 | |||
|
|
ac4cea0c7e | ||
|
|
93fea84c79 | ||
| a06682de3f | |||
| e1773dae03 | |||
| f6d866907c | |||
| 7fe8d7e72c | |||
| 1e4a33a703 | |||
| d1ad913bab | |||
|
|
38edf00925 | ||
|
|
bf231f7157 | ||
| 04e2471a54 | |||
|
|
9e2ce5f636 | ||
|
|
8a54c046d9 | ||
| 3fa702cc12 | |||
| 8ebff703ee | |||
|
|
02e267e647 | ||
|
|
a6ffba4cf8 | ||
| 3de4d5c5f2 | |||
| c6c2d1c3b1 | |||
|
|
1bbd749094 | ||
|
|
073b4b8e20 | ||
| 3ec82a6a41 | |||
| 7c83268e0c | |||
| 49cb1e6877 | |||
|
|
481dde003a | ||
|
|
43e54e8ee7 | ||
| 28dbe075a4 | |||
|
|
4571786780 | ||
|
|
21cef13168 | ||
| 5f5e0ffc69 | |||
| 4d0841bd32 | |||
| b6d3b17300 | |||
| dad71db912 | |||
| 94c7f803cc | |||
| 0dae8cd16d | |||
|
|
1fd547893f | ||
|
|
ad5812df96 | ||
|
|
c01106e389 | ||
| 021182e873 | |||
|
|
71834ef906 | ||
|
|
412ec6ab0c | ||
| 9aca4874c1 | |||
|
|
c9d25e5e88 | ||
|
|
610090c2a0 | ||
| 83917eaf4a | |||
|
|
d64e9b9535 | ||
|
|
b0f44c2332 | ||
| 8ae9efe4bd | |||
|
|
15358fd7e2 | ||
|
|
dfabc9ed23 | ||
| 78f6165cfc | |||
|
|
7944824ffe | ||
| 984cf2e7d5 | |||
|
|
07bc6aab69 | ||
|
|
7a14b2846a | ||
| db7d4745dd | |||
| 6b99175574 | |||
|
|
34aeb029b5 | ||
|
|
caf614ca35 | ||
| b8f9d3626f | |||
|
|
c8913f192c | ||
|
|
0fa651fccf | ||
| 33782e189c | |||
| ee828ec4a7 | |||
| e75d2f1810 | |||
| ff9ee438ae | |||
| df10a757bf | |||
| cea7fb622f | |||
| 6924566ab0 | |||
| 13c8c2bfbc | |||
|
|
0d118d499f | ||
|
|
f00a972f32 | ||
| 58aaabb6d1 | |||
|
|
4cc890c961 | ||
|
|
04cea7a199 | ||
| fa746ab9b0 | |||
| 08d2d7f5d3 | |||
| e4948eb340 | |||
| f80f648771 | |||
| 5d16c37965 | |||
| 9235a6b602 | |||
|
|
b8c39e8095 | ||
|
|
53526b5f78 | ||
| 0fe8b7490f | |||
| 65f42828b8 | |||
| dfe6405870 | |||
| 312ed7ecb7 | |||
| b367bfcbe4 | |||
| 1c301215d1 | |||
| e0fac4556d | |||
|
|
f025a2b77b | ||
|
|
c361a8c519 | ||
| cb9456358f | |||
| 23334b5017 | |||
| 830de9fed9 | |||
| 24a38689d4 | |||
| 6ce3faf98d | |||
| f5107cfb70 | |||
|
|
028cd07e1a | ||
|
|
0aa509e430 | ||
| b07fb8c3d4 | |||
| 63e9100368 | |||
| 2e5e423a38 | |||
| 3b8c8b047b | |||
| d9b354f0c4 | |||
| 783cb0c3fe | |||
| 17f31863f9 |
30
.env.dev
@@ -1,8 +1,8 @@
|
||||
###
|
||||
# @Author: Do not edit
|
||||
# @Date: 2023-08-29 09:40:39
|
||||
# @LastEditTime: 2024-03-25 15:59:53
|
||||
# @LastEditors: zhp
|
||||
# @Author: zhp
|
||||
# @Date: 2024-04-12 14:30:48
|
||||
# @LastEditTime: 2024-04-23 17:25:25
|
||||
# @LastEditors: DY
|
||||
# @Description:
|
||||
###
|
||||
# 开发环境配置
|
||||
@@ -12,24 +12,18 @@ ENV = 'development'
|
||||
VUE_APP_TITLE = MES系统
|
||||
|
||||
# 芋道管理系统/开发环境
|
||||
# VUE_APP_BASE_API = 'http://100.64.0.26:48082'
|
||||
# VUE_APP_BASE_API = 'http://10.70.2.2:8080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.20:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.2.173:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.49:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.8:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.104:48082'
|
||||
VUE_APP_BASE_API = 'http://192.168.0.33:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.62:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
|
||||
# VUE_APP_BASE_API = 'http://192.168.1.47:48082'
|
||||
# socket地址
|
||||
# VUE_APP_BASE_API = 'http://192.168.4.176:48082'
|
||||
# 积木报表指向地址
|
||||
VUE_APP_JIMU_API = 'http://192.168.1.101:48082'
|
||||
|
||||
# socket地址(现场)
|
||||
VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
|
||||
# socket地址(公司线上)
|
||||
# VUE_APP_Socket_API = 'ws://192.168.0.33:48082'
|
||||
# socket dcs地址(只有现场)
|
||||
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
|
||||
|
||||
# 积木报表指向地址
|
||||
VUE_APP_JIMU_API = 'http://10.70.2.22:8080'
|
||||
|
||||
# 路由懒加载
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
|
||||
@@ -1,11 +1,4 @@
|
||||
###
|
||||
# @Author: zhp
|
||||
# @Date: 2023-11-07 19:11:40
|
||||
# @LastEditTime: 2023-11-16 16:40:59
|
||||
# @LastEditors: zhp
|
||||
# @Description:
|
||||
###
|
||||
# 生产环境配置
|
||||
# 生产环境配置(许昌现场)
|
||||
ENV = 'production'
|
||||
|
||||
# 页面标题
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# 生产环境配置
|
||||
# 公司线上环境(33服务器)
|
||||
ENV = 'production'
|
||||
|
||||
# 页面标题
|
||||
@@ -7,15 +7,12 @@ VUE_APP_TITLE = MES系统
|
||||
# 芋道管理系统/生产环境
|
||||
VUE_APP_BASE_API = '/prod-api'
|
||||
|
||||
# dcs地址
|
||||
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
|
||||
# socket地址
|
||||
VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
|
||||
|
||||
# 积木报表指向地址
|
||||
VUE_APP_JIMU_API = 'http://192.168.0.33:48082'
|
||||
# socket地址
|
||||
VUE_APP_Socket_API = 'ws://192.168.0.33:48082'
|
||||
# dcs地址(只有现场的)
|
||||
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
|
||||
|
||||
|
||||
# 根据服务器或域名修改
|
||||
|
||||
@@ -34,4 +34,22 @@ export function getQoq(data) {
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取能源设备树
|
||||
export function getTree() {
|
||||
return request({
|
||||
url: '/analysis/energy-analysis/getTree',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 导出(走势分析)
|
||||
export function exportTrend(data) {
|
||||
return request({
|
||||
url: '/analysis/energy-analysis/exportTrend',
|
||||
method: 'post',
|
||||
responseType: 'blob',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: Do not edit
|
||||
* @Date: 2023-10-21 11:50:46
|
||||
* @LastEditTime: 2023-10-30 14:37:28
|
||||
* @LastEditTime: 2024-04-19 17:13:24
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
*/
|
||||
@@ -65,4 +65,13 @@ export function getCoreDepartmentList(query) {
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 设备获得所有列表
|
||||
export function getDepartmentList(query) {
|
||||
return request({
|
||||
url: '/system/dept/list-all-simple',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
@@ -53,4 +53,28 @@ export function energyQuantityManualExport(data) {
|
||||
data: data,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
// 获得能源表名配置分页
|
||||
export function energyTablePage(data) {
|
||||
return request({
|
||||
url: '/base/energy-table/page',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 获得能源表名配置
|
||||
export function energyTableGet(query) {
|
||||
return request({
|
||||
url: '/base/energy-table/get',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
// 更新能源表名配置
|
||||
export function energyTableUpdate(data) {
|
||||
return request({
|
||||
url: '/base/energy-table/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
@@ -68,3 +68,4 @@ export function exportEnergyTypeExcel(query) {
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2023-11-06 15:38:12
|
||||
* @LastEditTime: 2023-12-15 15:29:16
|
||||
* @LastEditTime: 2024-04-11 14:57:02
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
@@ -94,7 +94,7 @@ export function getWorkerList(query) {
|
||||
|
||||
export function getMaterialCheckList(query) {
|
||||
return request({
|
||||
url: '/base/core-hot-material-check/listByMaterial',
|
||||
url: 'base/quality-hot-material-det/filterList',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
@@ -102,7 +102,7 @@ export function getMaterialCheckList(query) {
|
||||
|
||||
export function createQualityHotMaterialDet(query){
|
||||
return request({
|
||||
url: '/base/quality-hot-material-det/create',
|
||||
url: 'base/quality-hot-material-det/createBatch',
|
||||
method: 'post',
|
||||
data: query
|
||||
})
|
||||
@@ -110,7 +110,7 @@ export function createQualityHotMaterialDet(query){
|
||||
|
||||
export function updateQualityHotMaterialDet(query){
|
||||
return request({
|
||||
url: '/base/quality-hot-material-det/listbyfilter',
|
||||
url: 'base/quality-hot-material-det/updateBatch',
|
||||
method: 'put',
|
||||
data: query
|
||||
})
|
||||
@@ -118,7 +118,7 @@ export function updateQualityHotMaterialDet(query){
|
||||
|
||||
export function getQualityHotMaterialDetList(query){
|
||||
return request({
|
||||
url: '/base/quality-hot-material-det/listbyfilter',
|
||||
url: '/base/quality-hot-material-det/filterList',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2023-11-07 15:02:37
|
||||
* @LastEditTime: 2023-11-07 18:32:07
|
||||
* @LastEditTime: 2024-04-09 15:14:42
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
20
src/api/infra/apiAccessLog.js
Normal file
@@ -0,0 +1,20 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获得API 访问日志分页
|
||||
export function getApiAccessLogPage(query) {
|
||||
return request({
|
||||
url: '/infra/api-access-log/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 导出API 访问日志 Excel
|
||||
export function exportApiAccessLogExcel(query) {
|
||||
return request({
|
||||
url: '/infra/api-access-log/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
28
src/api/infra/apiErrorLog.js
Normal file
@@ -0,0 +1,28 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 更新 API 错误日志的处理状态
|
||||
export function updateApiErrorLogProcess(id, processStatus) {
|
||||
return request({
|
||||
url: '/infra/api-error-log/update-status?id=' + id + '&processStatus=' + processStatus,
|
||||
method: 'put',
|
||||
})
|
||||
}
|
||||
|
||||
// 获得API 错误日志分页
|
||||
export function getApiErrorLogPage(query) {
|
||||
return request({
|
||||
url: '/infra/api-error-log/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 导出API 错误日志 Excel
|
||||
export function exportApiErrorLogExcel(query) {
|
||||
return request({
|
||||
url: '/infra/api-error-log/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
90
src/api/infra/codegen.js
Normal file
@@ -0,0 +1,90 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获得表定义分页
|
||||
export function getCodegenTablePage(query) {
|
||||
return request({
|
||||
url: '/infra/codegen/table/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获得表和字段的明细
|
||||
export function getCodegenDetail(tableId) {
|
||||
return request({
|
||||
url: '/infra/codegen/detail?tableId=' + tableId,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
// 修改代码生成信息
|
||||
export function updateCodegen(data) {
|
||||
return request({
|
||||
url: '/infra/codegen/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 基于数据库的表结构,同步数据库的表和字段定义
|
||||
export function syncCodegenFromDB(tableId) {
|
||||
return request({
|
||||
url: '/infra/codegen/sync-from-db?tableId=' + tableId,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
|
||||
// 基于 SQL 建表语句,同步数据库的表和字段定义
|
||||
export function syncCodegenFromSQL(tableId, sql) {
|
||||
return request({
|
||||
url: '/infra/codegen/sync-from-sql?tableId=' + tableId,
|
||||
method: 'put',
|
||||
headers:{
|
||||
'Content-type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
data: 'tableId=' + tableId + "&sql=" + sql,
|
||||
})
|
||||
}
|
||||
|
||||
// 预览生成代码
|
||||
export function previewCodegen(tableId) {
|
||||
return request({
|
||||
url: '/infra/codegen/preview?tableId=' + tableId,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
// 下载生成代码
|
||||
export function downloadCodegen(tableId) {
|
||||
return request({
|
||||
url: '/infra/codegen/download?tableId=' + tableId,
|
||||
method: 'get',
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得表定义分页
|
||||
export function getSchemaTableList(query) {
|
||||
return request({
|
||||
url: '/infra/codegen/db/table/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 基于数据库的表结构,创建代码生成器的表定义
|
||||
export function createCodegenList(data) {
|
||||
return request({
|
||||
url: '/infra/codegen/create-list',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除数据库的表和字段定义
|
||||
export function deleteCodegen(tableId) {
|
||||
return request({
|
||||
url: '/infra/codegen/delete?tableId=' + tableId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
62
src/api/infra/config.js
Normal file
@@ -0,0 +1,62 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询参数列表
|
||||
export function listConfig(query) {
|
||||
return request({
|
||||
url: '/infra/config/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询参数详细
|
||||
export function getConfig(configId) {
|
||||
return request({
|
||||
url: '/infra/config/get?id=' + configId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 根据参数键名查询参数值
|
||||
export function getConfigKey(configKey) {
|
||||
return request({
|
||||
url: '/infra/config/get-value-by-key?key=' + configKey,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增参数配置
|
||||
export function addConfig(data) {
|
||||
return request({
|
||||
url: '/infra/config/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改参数配置
|
||||
export function updateConfig(data) {
|
||||
return request({
|
||||
url: '/infra/config/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除参数配置
|
||||
export function delConfig(configId) {
|
||||
return request({
|
||||
url: '/infra/config/delete?id=' + configId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 导出参数
|
||||
export function exportConfig(query) {
|
||||
return request({
|
||||
url: '/infra/config/export',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
43
src/api/infra/dataSourceConfig.js
Normal file
@@ -0,0 +1,43 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建数据源配置
|
||||
export function createDataSourceConfig(data) {
|
||||
return request({
|
||||
url: '/infra/data-source-config/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新数据源配置
|
||||
export function updateDataSourceConfig(data) {
|
||||
return request({
|
||||
url: '/infra/data-source-config/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除数据源配置
|
||||
export function deleteDataSourceConfig(id) {
|
||||
return request({
|
||||
url: '/infra/data-source-config/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得数据源配置
|
||||
export function getDataSourceConfig(id) {
|
||||
return request({
|
||||
url: '/infra/data-source-config/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得数据源配置列表
|
||||
export function getDataSourceConfigList() {
|
||||
return request({
|
||||
url: '/infra/data-source-config/list',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
26
src/api/infra/dbDoc.js
Normal file
@@ -0,0 +1,26 @@
|
||||
// 导出参数
|
||||
import request from "@/utils/request";
|
||||
|
||||
export function exportHtml() {
|
||||
return request({
|
||||
url: '/infra/db-doc/export-html',
|
||||
method: 'get',
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
export function exportWord() {
|
||||
return request({
|
||||
url: '/infra/db-doc/export-word',
|
||||
method: 'get',
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
export function exportMarkdown() {
|
||||
return request({
|
||||
url: '/infra/db-doc/export-markdown',
|
||||
method: 'get',
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
18
src/api/infra/file.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 删除文件
|
||||
export function deleteFile(id) {
|
||||
return request({
|
||||
url: '/infra/file/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得文件分页
|
||||
export function getFilePage(query) {
|
||||
return request({
|
||||
url: '/infra/file/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
59
src/api/infra/fileConfig.js
Normal file
@@ -0,0 +1,59 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建文件配置
|
||||
export function createFileConfig(data) {
|
||||
return request({
|
||||
url: '/infra/file-config/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新文件配置
|
||||
export function updateFileConfig(data) {
|
||||
return request({
|
||||
url: '/infra/file-config/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新文件配置为主配置
|
||||
export function updateFileConfigMaster(id) {
|
||||
return request({
|
||||
url: '/infra/file-config/update-master?id=' + id,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
|
||||
// 删除文件配置
|
||||
export function deleteFileConfig(id) {
|
||||
return request({
|
||||
url: '/infra/file-config/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得文件配置
|
||||
export function getFileConfig(id) {
|
||||
return request({
|
||||
url: '/infra/file-config/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得文件配置分页
|
||||
export function getFileConfigPage(query) {
|
||||
return request({
|
||||
url: '/infra/file-config/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function testFileConfig(id) {
|
||||
return request({
|
||||
url: '/infra/file-config/test?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
82
src/api/infra/job.js
Normal file
@@ -0,0 +1,82 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询定时任务调度列表
|
||||
export function listJob(query) {
|
||||
return request({
|
||||
url: '/infra/job/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询定时任务调度详细
|
||||
export function getJob(jobId) {
|
||||
return request({
|
||||
url: '/infra/job/get?id=' + jobId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增定时任务调度
|
||||
export function addJob(data) {
|
||||
return request({
|
||||
url: '/infra/job/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改定时任务调度
|
||||
export function updateJob(data) {
|
||||
return request({
|
||||
url: '/infra/job/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除定时任务调度
|
||||
export function delJob(jobId) {
|
||||
return request({
|
||||
url: '/infra/job/delete?id=' + jobId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 导出定时任务调度
|
||||
export function exportJob(query) {
|
||||
return request({
|
||||
url: '/infra/job/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
// 任务状态修改
|
||||
export function updateJobStatus(jobId, status) {
|
||||
return request({
|
||||
url: '/infra/job/update-status',
|
||||
method: 'put',
|
||||
headers:{
|
||||
'Content-type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
data: 'id=' + jobId + "&status=" + status,
|
||||
})
|
||||
}
|
||||
|
||||
// 定时任务立即执行一次
|
||||
export function runJob(jobId) {
|
||||
return request({
|
||||
url: '/infra/job/trigger?id=' + jobId,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得定时任务的下 n 次执行时间
|
||||
export function getJobNextTimes(jobId) {
|
||||
return request({
|
||||
url: '/infra/job/get_next_times?id=' + jobId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
28
src/api/infra/jobLog.js
Normal file
@@ -0,0 +1,28 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获得定时任务
|
||||
export function getJobLog(id) {
|
||||
return request({
|
||||
url: '/infra/job-log/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得定时任务分页
|
||||
export function getJobLogPage(query) {
|
||||
return request({
|
||||
url: '/infra/job-log/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 导出定时任务 Excel
|
||||
export function exportJobLogExcel(query) {
|
||||
return request({
|
||||
url: '/infra/job-log/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
9
src/api/infra/redis.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询缓存详细
|
||||
export function getCache() {
|
||||
return request({
|
||||
url: '/infra/redis/get-monitor-info',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
54
src/api/infra/testDemo.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 创建字典类型
|
||||
export function createTestDemo(data) {
|
||||
return request({
|
||||
url: '/infra/test-demo/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新字典类型
|
||||
export function updateTestDemo(data) {
|
||||
return request({
|
||||
url: '/infra/test-demo/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除字典类型
|
||||
export function deleteTestDemo(id) {
|
||||
return request({
|
||||
url: '/infra/test-demo/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得字典类型
|
||||
export function getTestDemo(id) {
|
||||
return request({
|
||||
url: '/infra/test-demo/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得字典类型分页
|
||||
export function getTestDemoPage(query) {
|
||||
return request({
|
||||
url: '/infra/test-demo/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 导出字典类型 Excel
|
||||
export function exportTestDemoExcel(query) {
|
||||
return request({
|
||||
url: '/infra/test-demo/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2023-11-07 14:10:18
|
||||
* @LastEditTime: 2023-11-16 17:49:52
|
||||
* @LastEditTime: 2024-04-11 16:16:05
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
@@ -18,14 +18,14 @@ export function getStatisticalDataPage(query) {
|
||||
|
||||
export function getWorkOrderList(query) {
|
||||
return request({
|
||||
url: '/base/core-work-order/listbyfilter',
|
||||
url: 'base/core-work-order/listbyfilter',
|
||||
method: 'get',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
export function getProductList(query) {
|
||||
return request({
|
||||
url: '/base/core-product/listAll',
|
||||
url: 'base/core-product/listAll',
|
||||
method: 'get',
|
||||
params: query,
|
||||
})
|
||||
|
||||
45
src/api/report/customizedReports.js
Normal file
@@ -0,0 +1,45 @@
|
||||
import request from '@/utils/request'
|
||||
// 原片工段数据
|
||||
export function originalSection(data) {
|
||||
return request({
|
||||
url: '/extend/customized-reports/originalSection',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 原片产线数据
|
||||
export function getOriginalLine(query) {
|
||||
return request({
|
||||
url: '/extend/customized-reports/getOriginalLine',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 深加工产线数据
|
||||
export function getProcessingLine(query) {
|
||||
return request({
|
||||
url: '/extend/customized-reports/getProcessingLine',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 深加工工段数据
|
||||
export function processing(data) {
|
||||
return request({
|
||||
url: '/extend/customized-reports/processing',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// isra数据记录
|
||||
export function israData(data) {
|
||||
return request({
|
||||
url: '/extend/customized-reports/isra',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
96
src/api/report/qcReport.js
Normal file
@@ -0,0 +1,96 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-18 09:27:54
|
||||
* @LastEditTime: 2024-04-23 15:16:12
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 更新质量检测类型基础
|
||||
export function getOriginalData(data) {
|
||||
return request({
|
||||
url: 'extend/customized-reports/original',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getIngredientData(data) {
|
||||
return request({
|
||||
url: 'extend/customized-reports/materialCost',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function getCuttingtData(data) {
|
||||
return request({
|
||||
url: 'extend/customized-reports/cutting',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function getAutoDailyData(data) {
|
||||
return request({
|
||||
url: 'base/report-auto-daily/listAll',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function getQualityRecordReport(data) {
|
||||
return request({
|
||||
url: 'base/quality-inspection-record/qualityRecordReport',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function getProductChildData(data) {
|
||||
return request({
|
||||
url: 'base/report-auto-ydaily-det/list',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function updateAutoDailyData(data) {
|
||||
return request({
|
||||
url: 'base/report-auto-daily/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function getCWSectionList(query) {
|
||||
return request({
|
||||
url: 'base/core-production-line/listAll',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function getCuttingReportDataList(data) {
|
||||
return request({
|
||||
url: 'extend/customized-reports/cuttingReport',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function getProcessingLineDataList(data) {
|
||||
return request({
|
||||
url: 'extend/customized-reports/getProcessingLine',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function getOriginalLineDataList(data) {
|
||||
return request({
|
||||
url: 'extend/customized-reports/getOriginalLine',
|
||||
method: 'get',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
@@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
BIN
src/assets/img/1.png
Normal file
|
After Width: | Height: | Size: 75 KiB |
BIN
src/assets/img/OperationalOverview/AGV.png
Normal file
|
After Width: | Height: | Size: 126 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 141 KiB |
BIN
src/assets/img/large.png
Normal file
|
After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 16 KiB |
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
138
src/components/ButtonNav/index.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<!--
|
||||
filename: index.vue
|
||||
author: liubin
|
||||
date: 2024-04-02 09:49:36
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<!-- 按钮切换 -->
|
||||
<div
|
||||
v-if="buttonMode"
|
||||
class="button-nav">
|
||||
<button
|
||||
v-for="m in menus"
|
||||
:key="m"
|
||||
@click="currentMenu = m"
|
||||
:data-text="m"
|
||||
:class="[m === currentMenu ? 'active' : '']"></button>
|
||||
</div>
|
||||
<!-- 标签切换 -->
|
||||
<div
|
||||
v-else
|
||||
class="custom-tabs"
|
||||
style="height: 100%; width: 100%">
|
||||
<el-tabs
|
||||
class="tag-nav"
|
||||
v-model="currentMenu"
|
||||
style="height: 100%">
|
||||
<el-tab-pane
|
||||
v-for="(m, idx) in menus"
|
||||
:key="m"
|
||||
:label="idx == 0 ? `\u2002${m}\u2002` : `\u3000${m}\u3000`"
|
||||
:name="m">
|
||||
<slot :name="`tab${idx + 1}`"></slot>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ButtonNav',
|
||||
props: {
|
||||
menus: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
validator: (val) => {
|
||||
return val.length > 0;
|
||||
},
|
||||
},
|
||||
buttonMode: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentMenu: '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.currentMenu = this.menus[0];
|
||||
},
|
||||
watch: {
|
||||
currentMenu(val) {
|
||||
this.$emit('change', val);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.button-nav {
|
||||
width: 100%;
|
||||
// padding: 12px 0;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
color: #888;
|
||||
letter-spacing: 2px;
|
||||
flex: 1;
|
||||
box-sizing: padding-box;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #111;
|
||||
border-bottom: 4px solid #0b58ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.custom-tabs >>> .el-tabs__header {
|
||||
margin-bottom: 8px;
|
||||
display: inline-block;
|
||||
/* transform: translateY(-12px); */
|
||||
}
|
||||
.custom-tabs >>> .el-tabs__item {
|
||||
padding-left: 0px !important;
|
||||
padding-right: 0px !important;
|
||||
line-height: 36px !important;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.custom-tabs >>> .el-tabs__content {
|
||||
height: calc(100% - 42px);
|
||||
}
|
||||
.custom-tabs >>> .el-tab-pane {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
border: 10px solid #f002;
|
||||
}
|
||||
</style>
|
||||
@@ -12,7 +12,7 @@
|
||||
:label-width="`${labelWidth}px`"
|
||||
:size="size"
|
||||
:label-position="labelPosition"
|
||||
v-loading="formLoading">
|
||||
v-loading="0 && formLoading">
|
||||
<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex">
|
||||
<el-col v-for="col in row" :key="col.label" :span="24 / row.length">
|
||||
<el-form-item :label="col.label" :prop="col.prop" :rules="col.rules">
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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 的话,也是非常不错的选择。
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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 || ' ';
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -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>
|
||||
@@ -1,8 +0,0 @@
|
||||
import MyProcessDesigner from "./ProcessDesigner.vue";
|
||||
|
||||
MyProcessDesigner.install = function(Vue) {
|
||||
Vue.component(MyProcessDesigner.name, MyProcessDesigner);
|
||||
};
|
||||
|
||||
// 流程图的设计器,可编辑
|
||||
export default MyProcessDesigner;
|
||||
@@ -1,8 +0,0 @@
|
||||
import MyProcessViewer from "./ProcessViewer.vue";
|
||||
|
||||
MyProcessViewer.install = function(Vue) {
|
||||
Vue.component(MyProcessViewer.name, MyProcessViewer);
|
||||
};
|
||||
|
||||
// 流程图的查看器,不可编辑
|
||||
export default MyProcessViewer;
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import CustomContextPadProvider from "./contentPadProvider";
|
||||
|
||||
export default {
|
||||
__init__: ["contextPadProvider"],
|
||||
contextPadProvider: ["type", CustomContextPadProvider]
|
||||
};
|
||||
@@ -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>`;
|
||||
};
|
||||
@@ -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;
|
||||
@@ -1,9 +0,0 @@
|
||||
/*
|
||||
* @author igdianov
|
||||
* address https://github.com/igdianov/activiti-bpmn-moddle
|
||||
* */
|
||||
|
||||
module.exports = {
|
||||
__init__: ["ActivitiModdleExtension"],
|
||||
ActivitiModdleExtension: ["type", require("./activitiExtension")]
|
||||
};
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
"use strict";
|
||||
|
||||
module.exports = {
|
||||
__init__: ["camundaModdleExtension"],
|
||||
camundaModdleExtension: ["type", require("./extension")]
|
||||
};
|
||||
@@ -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;
|
||||
@@ -1,9 +0,0 @@
|
||||
/*
|
||||
* @author igdianov
|
||||
* address https://github.com/igdianov/activiti-bpmn-moddle
|
||||
* */
|
||||
|
||||
module.exports = {
|
||||
__init__: ["FlowableModdleExtension"],
|
||||
FlowableModdleExtension: ["type", require("./flowableExtension")]
|
||||
};
|
||||
@@ -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的构造器指向,防止原型链的混乱;
|
||||
@@ -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]
|
||||
};
|
||||
@@ -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;
|
||||
};
|
||||
@@ -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 + "}";
|
||||
});
|
||||
};
|
||||
}
|
||||
@@ -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.": "指定多个组作为逗号分隔的列表。"
|
||||
};
|
||||
@@ -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
|
||||
};
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -1,7 +0,0 @@
|
||||
import MyPropertiesPanel from "./PropertiesPanel.vue";
|
||||
|
||||
MyPropertiesPanel.install = function(Vue) {
|
||||
Vue.component(MyPropertiesPanel.name, MyPropertiesPanel);
|
||||
};
|
||||
|
||||
export default MyPropertiesPanel;
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
`;
|
||||
};
|
||||
@@ -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: "表达式"
|
||||
};
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
@import "./process-designer.scss";
|
||||
@import "./process-panel.scss";
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
const hljs = require("highlight.js/lib/core");
|
||||
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
|
||||
hljs.registerLanguage("json", require("highlight.js/lib/languages/json"));
|
||||
|
||||
module.exports = hljs;
|
||||
@@ -1,14 +0,0 @@
|
||||
import BpmnRenderer from "bpmn-js/lib/draw/BpmnRenderer";
|
||||
|
||||
export default function CustomRenderer(config, eventBus, styles, pathMap, canvas, textRenderer) {
|
||||
BpmnRenderer.call(this, config, eventBus, styles, pathMap, canvas, textRenderer, 2000);
|
||||
|
||||
this.handlers["label"] = function() {
|
||||
return null;
|
||||
};
|
||||
}
|
||||
|
||||
const F = function() {}; // 核心,利用空对象作为中介;
|
||||
F.prototype = BpmnRenderer.prototype; // 核心,将父类的原型赋值给空对象F;
|
||||
CustomRenderer.prototype = new F(); // 核心,将 F的实例赋值给子类;
|
||||
CustomRenderer.prototype.constructor = CustomRenderer; // 修复子类CustomRenderer的构造器指向,防止原型链的混乱;
|
||||
@@ -1,6 +0,0 @@
|
||||
import CustomRenderer from "./CustomRenderer";
|
||||
|
||||
export default {
|
||||
__init__: ["customRenderer"],
|
||||
customRenderer: ["type", CustomRenderer]
|
||||
};
|
||||
@@ -1,16 +0,0 @@
|
||||
import BpmnRules from "bpmn-js/lib/features/rules/BpmnRules";
|
||||
import inherits from "inherits";
|
||||
|
||||
export default function CustomRules(eventBus) {
|
||||
BpmnRules.call(this, eventBus);
|
||||
}
|
||||
|
||||
inherits(CustomRules, BpmnRules);
|
||||
|
||||
CustomRules.prototype.canDrop = function() {
|
||||
return false;
|
||||
};
|
||||
|
||||
CustomRules.prototype.canMove = function() {
|
||||
return false;
|
||||
};
|
||||
@@ -1,6 +0,0 @@
|
||||
import CustomRules from "./CustomRules";
|
||||
|
||||
export default {
|
||||
__init__: ["customRules"],
|
||||
customRules: ["type", CustomRules]
|
||||
};
|
||||
@@ -1,25 +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 {
|
||||
"Exclusive Gateway": "Exklusives Gateway",
|
||||
"Parallel Gateway": "Paralleles Gateway",
|
||||
"Inclusive Gateway": "Inklusives Gateway",
|
||||
"Complex Gateway": "Komplexes Gateway",
|
||||
"Event based Gateway": "Ereignis-basiertes Gateway",
|
||||
"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)": "升级启动事件 (非中断)"
|
||||
};
|
||||
@@ -1,39 +0,0 @@
|
||||
//outside.js
|
||||
|
||||
const ctx = "@@clickoutsideContext";
|
||||
|
||||
export default {
|
||||
bind(el, binding, vnode) {
|
||||
const ele = el;
|
||||
const documentHandler = e => {
|
||||
if (!vnode.context || ele.contains(e.target)) {
|
||||
return false;
|
||||
}
|
||||
// 调用指令回调
|
||||
if (binding.expression) {
|
||||
vnode.context[el[ctx].methodName](e);
|
||||
} else {
|
||||
el[ctx].bindingFn(e);
|
||||
}
|
||||
};
|
||||
// 将方法添加到ele
|
||||
ele[ctx] = {
|
||||
documentHandler,
|
||||
methodName: binding.expression,
|
||||
bindingFn: binding.value
|
||||
};
|
||||
|
||||
setTimeout(() => {
|
||||
document.addEventListener("touchstart", documentHandler); // 为document绑定事件
|
||||
});
|
||||
},
|
||||
update(el, binding) {
|
||||
const ele = el;
|
||||
ele[ctx].methodName = binding.expression;
|
||||
ele[ctx].bindingFn = binding.value;
|
||||
},
|
||||
unbind(el) {
|
||||
document.removeEventListener("touchstart", el[ctx].documentHandler); // 解绑
|
||||
delete el[ctx];
|
||||
}
|
||||
};
|
||||
@@ -1,10 +0,0 @@
|
||||
export function debounce(fn, delay = 500) {
|
||||
let timer;
|
||||
return function(...args) {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
timer = setTimeout(fn.bind(this, ...args), delay);
|
||||
};
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
class Log {
|
||||
static type = ["primary", "success", "warn", "error", "info"];
|
||||
|
||||
static typeColor(type = "default") {
|
||||
let color = "";
|
||||
switch (type) {
|
||||
case "primary":
|
||||
color = "#2d8cf0";
|
||||
break;
|
||||
case "success":
|
||||
color = "#19be6b";
|
||||
break;
|
||||
case "info":
|
||||
color = "#909399";
|
||||
break;
|
||||
case "warn":
|
||||
color = "#ff9900";
|
||||
break;
|
||||
case "error":
|
||||
color = "#f03f14";
|
||||
break;
|
||||
case "default":
|
||||
color = "#35495E";
|
||||
break;
|
||||
default:
|
||||
color = type;
|
||||
break;
|
||||
}
|
||||
return color;
|
||||
}
|
||||
|
||||
static print(text, type = "default", back = false) {
|
||||
if (typeof text === "object") {
|
||||
// 如果是對象則調用打印對象方式
|
||||
console.dir(text);
|
||||
return;
|
||||
}
|
||||
if (back) {
|
||||
// 如果是打印帶背景圖的
|
||||
console.log(`%c ${text} `, `background:${this.typeColor(type)}; padding: 2px; border-radius: 4px;color: #fff;`);
|
||||
} else {
|
||||
console.log(`%c ${text} `, `color: ${this.typeColor(type)};`);
|
||||
}
|
||||
}
|
||||
|
||||
static pretty(title, text, type = "primary") {
|
||||
if (typeof text === "object") {
|
||||
console.log(
|
||||
`%c ${title} %c`,
|
||||
`background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)}; padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`
|
||||
);
|
||||
console.dir(text);
|
||||
return;
|
||||
}
|
||||
console.log(
|
||||
`%c ${title} %c ${text} %c`,
|
||||
`background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)}; padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`,
|
||||
`border:1px solid ${this.typeColor(type)}; padding: 1px; border-radius: 0 4px 4px 0; color: ${this.typeColor(type)};`,
|
||||
"background:transparent"
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Log;
|
||||
@@ -1,50 +0,0 @@
|
||||
function xmlStr2XmlObj(xmlStr) {
|
||||
let xmlObj = {};
|
||||
if (document.all) {
|
||||
const xmlDom = new window.ActiveXObject("Microsoft.XMLDOM");
|
||||
xmlDom.loadXML(xmlStr);
|
||||
xmlObj = xmlDom;
|
||||
} else {
|
||||
xmlObj = new DOMParser().parseFromString(xmlStr, "text/xml");
|
||||
}
|
||||
return xmlObj;
|
||||
}
|
||||
|
||||
function xml2json(xml) {
|
||||
try {
|
||||
let obj = {};
|
||||
if (xml.children.length > 0) {
|
||||
for (let i = 0; i < xml.children.length; i++) {
|
||||
const item = xml.children.item(i);
|
||||
const nodeName = item.nodeName;
|
||||
if (typeof obj[nodeName] == "undefined") {
|
||||
obj[nodeName] = xml2json(item);
|
||||
} else {
|
||||
if (typeof obj[nodeName].push == "undefined") {
|
||||
const old = obj[nodeName];
|
||||
obj[nodeName] = [];
|
||||
obj[nodeName].push(old);
|
||||
}
|
||||
obj[nodeName].push(xml2json(item));
|
||||
}
|
||||
}
|
||||
} else {
|
||||
obj = xml.textContent;
|
||||
}
|
||||
return obj;
|
||||
} catch (e) {
|
||||
console.log(e.message);
|
||||
}
|
||||
}
|
||||
|
||||
function xmlObj2json(xml) {
|
||||
const xmlObj = xmlStr2XmlObj(xml);
|
||||
console.log(xmlObj);
|
||||
let jsonObj = {};
|
||||
if (xmlObj.childNodes.length > 0) {
|
||||
jsonObj = xml2json(xmlObj);
|
||||
}
|
||||
return jsonObj;
|
||||
}
|
||||
|
||||
export default xmlObj2json;
|
||||
60
src/components/tableInnerComponents.js
Normal file
@@ -0,0 +1,60 @@
|
||||
/**
|
||||
* 本文件保存一些 BaseTable 会用到的组件
|
||||
*/
|
||||
|
||||
// 操作按钮
|
||||
export const TableBtn = {
|
||||
name: 'TableBtn',
|
||||
props: ['injectData'],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit('emitData', {
|
||||
action: this.injectData.label,
|
||||
value: this.injectData,
|
||||
});
|
||||
},
|
||||
},
|
||||
render: function (h) {
|
||||
return (
|
||||
<el-button
|
||||
type="text"
|
||||
onClick={this.handleClick}>
|
||||
{this.injectData.entryText}
|
||||
</el-button>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// 余量
|
||||
export const RemainBox = {
|
||||
name: 'RemainBox',
|
||||
props: ['injectData'],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
value() {
|
||||
return this.injectData[this.injectData.prop] || null;
|
||||
},
|
||||
color() {
|
||||
if (this.value) {
|
||||
const v = +this.value;
|
||||
return v < 0 ? '#FF5454' : v >= 0 && v < 2 ? '#FFD767' : '#37D97F';
|
||||
}
|
||||
return 'unset';
|
||||
},
|
||||
},
|
||||
render: function (h) {
|
||||
return (
|
||||
<div
|
||||
style={`background: ${
|
||||
this.color
|
||||
}; position:absolute; inset: 0; padding: 0 10px; display: flex; align-items: center; color: ${'#fff'}`}>
|
||||
{this.injectData[this.injectData.prop]?.toFixed(0) || ''}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
@@ -1,48 +1,14 @@
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
|
||||
@toggleClick="toggleSideBar" />
|
||||
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
|
||||
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
|
||||
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
|
||||
|
||||
<div style="padding-top: 5px; padding-right: 38px;">
|
||||
<navbar-right :blackTitle='true'/>
|
||||
<navbar-right :blackTitle='true' />
|
||||
</div>
|
||||
|
||||
<!-- <div class="right-menu"> -->
|
||||
<!-- <template v-if="device!=='mobile'"> -->
|
||||
<!-- <search id="header-search" class="right-menu-item" /> -->
|
||||
|
||||
<!-- 站内信 -->
|
||||
<!-- <notify-message class="right-menu-item hover-effect" /> -->
|
||||
|
||||
<!-- <screenfull id="screenfull" class="right-menu-item hover-effect" /> -->
|
||||
|
||||
<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
|
||||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||
</el-tooltip> -->
|
||||
|
||||
<!-- </template> -->
|
||||
|
||||
<!-- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
||||
<div class="avatar-wrapper"> -->
|
||||
<!-- <img :src="avatar" class="user-avatar"> -->
|
||||
<!-- <span v-if="nickname" class="user-nickname">{{ nickname }}</span>
|
||||
<i class="el-icon-caret-bottom" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<router-link to="/user/profile">
|
||||
<el-dropdown-item>个人中心</el-dropdown-item>
|
||||
</router-link> -->
|
||||
<!-- <el-dropdown-item @click.native="setting = true">
|
||||
<span>布局设置</span>
|
||||
</el-dropdown-item> -->
|
||||
<!-- <el-dropdown-item divided @click.native="logout">
|
||||
<span>退出登录</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -55,7 +21,6 @@ import Screenfull from '@/components/Screenfull'
|
||||
import SizeSelect from '@/components/SizeSelect'
|
||||
import Search from '@/components/HeaderSearch'
|
||||
import NotifyMessage from '@/layout/components/Message'
|
||||
// import {getPath} from "@/utils/ruoyi";
|
||||
import NavbarRight from './NavbarRight.vue'
|
||||
|
||||
export default {
|
||||
@@ -102,7 +67,7 @@ export default {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.href = getPath('/');
|
||||
})
|
||||
}).catch(() => {});
|
||||
}).catch(() => { });
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -114,15 +79,15 @@ export default {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
|
||||
|
||||
.hamburger-container {
|
||||
line-height: 52px;
|
||||
line-height: 44px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
-webkit-tap-highlight-color:transparent;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025)
|
||||
@@ -185,7 +150,8 @@ export default {
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.user-nickname{
|
||||
|
||||
.user-nickname {
|
||||
margin-left: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -1,24 +1,22 @@
|
||||
<template>
|
||||
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
|
||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
||||
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
|
||||
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
|
||||
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
|
||||
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
|
||||
<div :class="{'fixed-header':fixedHeader}">
|
||||
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
|
||||
<div :class="{ 'fixed-header': fixedHeader }">
|
||||
<navbar />
|
||||
<tags-view v-if="needTagsView" />
|
||||
</div>
|
||||
<app-main />
|
||||
<div class="main-footer" style="color: #C7C7C7; user-select: none; font-size: 14px; letter-spacing: 1px; height: 30px; display: grid; place-content: center;">© 中建材智能自动化研究院有限公司</div>
|
||||
<right-panel>
|
||||
<settings />
|
||||
</right-panel>
|
||||
<div class="main-footer"
|
||||
style="color: #C7C7C7; user-select: none; font-size: 14px; letter-spacing: 1px; height: 30px; display: grid; place-content: center;">
|
||||
© 中建材智能自动化研究院有限公司</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RightPanel from '@/components/RightPanel'
|
||||
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
||||
import { AppMain, Navbar, Sidebar, TagsView } from './components'
|
||||
import ResizeMixin from './mixin/ResizeHandler'
|
||||
import { mapState } from 'vuex'
|
||||
import variables from '@/assets/styles/variables.scss'
|
||||
@@ -28,8 +26,6 @@ export default {
|
||||
components: {
|
||||
AppMain,
|
||||
Navbar,
|
||||
RightPanel,
|
||||
Settings,
|
||||
Sidebar,
|
||||
TagsView
|
||||
},
|
||||
|
||||
@@ -64,12 +64,10 @@ Vue.prototype.searchBarWidth = function (name, num) {
|
||||
|
||||
// 全局组件挂载
|
||||
Vue.component('DictTag', DictTag);
|
||||
Vue.component('DocAlert', DocAlert);
|
||||
Vue.component('Pagination', Pagination);
|
||||
Vue.component('RightToolbar', RightToolbar);
|
||||
// 字典标签组件
|
||||
import DictTag from '@/components/DictTag';
|
||||
import DocAlert from '@/components/DocAlert';
|
||||
// 头部标签插件
|
||||
import VueMeta from 'vue-meta';
|
||||
import CodeBrickZj from 'code-brick-zj';
|
||||
|
||||