yxt_djz
3 years ago
51 changed files with 4649 additions and 89 deletions
@ -0,0 +1,68 @@ |
|||
/** |
|||
* 存储流程设计相关参数 |
|||
*/ |
|||
export default class BpmData { |
|||
constructor() { |
|||
this.controls = [] // 设计器控件
|
|||
this.init() |
|||
} |
|||
|
|||
init() { |
|||
this.controls = [ |
|||
{ |
|||
action: 'create.start-event', |
|||
title: '开始' |
|||
}, |
|||
{ |
|||
action: 'create.intermediate-event', |
|||
title: '中间' |
|||
}, |
|||
{ |
|||
action: 'create.end-event', |
|||
title: '结束' |
|||
}, |
|||
{ |
|||
action: 'create.exclusive-gateway', |
|||
title: '网关' |
|||
}, |
|||
{ |
|||
action: 'create.task', |
|||
title: '任务' |
|||
}, |
|||
{ |
|||
action: 'create.user-task', |
|||
title: '用户任务' |
|||
}, |
|||
{ |
|||
action: 'create.user-sign-task', |
|||
title: '会签任务' |
|||
}, |
|||
{ |
|||
action: 'create.subprocess-expanded', |
|||
title: '子流程' |
|||
}, |
|||
{ |
|||
action: 'create.data-object', |
|||
title: '数据对象' |
|||
}, |
|||
{ |
|||
action: 'create.data-store', |
|||
title: '数据存储' |
|||
}, |
|||
{ |
|||
action: 'create.participant-expanded', |
|||
title: '扩展流程' |
|||
}, |
|||
{ |
|||
action: 'create.group', |
|||
title: '分组' |
|||
} |
|||
] |
|||
} |
|||
|
|||
// 获取控件配置信息
|
|||
getControl(action) { |
|||
const result = this.controls.filter(item => item.action === action) |
|||
return result[0] || {} |
|||
} |
|||
} |
|||
@ -0,0 +1,169 @@ |
|||
<template> |
|||
<div ref="propertyPanel" class="property-panel"> |
|||
<div v-if="nodeName" class="node-name">{{ nodeName }}</div> |
|||
<component |
|||
:is="getComponent" |
|||
v-if="element" |
|||
:element="element" |
|||
:modeler="modeler" |
|||
:users="users" |
|||
:groups="groups" |
|||
:categorys="categorys" |
|||
@dataType="dataType" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import taskPanel from './components/nodePanel/task' |
|||
import startEndPanel from './components/nodePanel/startEnd' |
|||
import processPanel from './components/nodePanel/process' |
|||
import sequenceFlowPanel from './components/nodePanel/sequenceFlow' |
|||
import gatewayPanel from './components/nodePanel/gateway' |
|||
import { NodeName } from './lang/zh' |
|||
|
|||
export default { |
|||
name: 'PropertyPanel', |
|||
components: { processPanel, taskPanel, startEndPanel, sequenceFlowPanel, gatewayPanel }, |
|||
props: { |
|||
users: { |
|||
type: Array, |
|||
required: true |
|||
}, |
|||
groups: { |
|||
type: Array, |
|||
required: true |
|||
}, |
|||
categorys: { |
|||
type: Array, |
|||
required: true |
|||
}, |
|||
modeler: { |
|||
type: Object, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
element: null, |
|||
form: { |
|||
id: '', |
|||
name: '', |
|||
color: null |
|||
}, |
|||
roles: [ |
|||
{ value: 'manager', label: '经理' }, |
|||
{ value: 'personnel', label: '人事' }, |
|||
{ value: 'charge', label: '主管' } |
|||
] |
|||
} |
|||
}, |
|||
computed: { |
|||
getComponent() { |
|||
const type = this.element?.type |
|||
if (['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'].includes(type)) { |
|||
return 'startEndPanel' |
|||
} |
|||
if ([ |
|||
'bpmn:UserTask', |
|||
'bpmn:Task', |
|||
'bpmn:SendTask', |
|||
'bpmn:ReceiveTask', |
|||
'bpmn:ManualTask', |
|||
'bpmn:BusinessRuleTask', |
|||
'bpmn:ServiceTask', |
|||
'bpmn:ScriptTask' |
|||
// 'bpmn:CallActivity', |
|||
// 'bpmn:SubProcess' |
|||
].includes(type)) { |
|||
return 'taskPanel' |
|||
} |
|||
if (type === 'bpmn:SequenceFlow') { |
|||
return 'sequenceFlowPanel' |
|||
} |
|||
if ([ |
|||
'bpmn:InclusiveGateway', |
|||
'bpmn:ExclusiveGateway', |
|||
'bpmn:ParallelGateway', |
|||
'bpmn:EventBasedGateway' |
|||
].includes(type)) { |
|||
return 'gatewayPanel' |
|||
} |
|||
if (type === 'bpmn:Process') { |
|||
return 'processPanel' |
|||
} |
|||
return null |
|||
}, |
|||
nodeName() { |
|||
if (this.element) { |
|||
const bizObj = this.element.businessObject |
|||
const type = bizObj?.eventDefinitions |
|||
? bizObj.eventDefinitions[0].$type |
|||
: bizObj.$type |
|||
return NodeName[type] || type |
|||
} |
|||
return '' |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.handleModeler() |
|||
}, |
|||
methods: { |
|||
handleModeler() { |
|||
this.modeler.on('root.added', e => { |
|||
if (e.element.type === 'bpmn:Process') { |
|||
this.element = null |
|||
this.$nextTick().then(() => { |
|||
this.element = e.element |
|||
}) |
|||
} |
|||
}) |
|||
this.modeler.on('element.click', e => { |
|||
const { element } = e |
|||
console.log(element) |
|||
if (element.type === 'bpmn:Process') { |
|||
this.element = element |
|||
} |
|||
}) |
|||
this.modeler.on('selection.changed', e => { |
|||
// hack 同类型面板不刷新 |
|||
this.element = null |
|||
const element = e.newSelection[0] |
|||
if (element) { |
|||
this.$nextTick().then(() => { |
|||
this.element = element |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
/** 获取数据类型 */ |
|||
dataType(data){ |
|||
this.$emit('dataType', data) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.property-panel { |
|||
padding: 20px 20px; |
|||
// reset element css |
|||
.el-form--label-top .el-form-item__label { |
|||
padding: 0; |
|||
} |
|||
.el-form-item { |
|||
margin-bottom: 6px; |
|||
} |
|||
.tab-table .el-form-item { |
|||
margin-bottom: 16px; |
|||
} |
|||
.node-name{ |
|||
border-bottom: 1px solid #ccc; |
|||
padding: 0 0 10px 20px; |
|||
margin-bottom: 10px; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
color: #444; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,20 @@ |
|||
import translations from '../lang/zh' |
|||
|
|||
export default function customTranslate(template, replacements) { |
|||
replacements = replacements || {} |
|||
|
|||
// Translate
|
|||
template = translations[template] || template |
|||
|
|||
// Replace
|
|||
return template.replace(/{([^}]+)}/g, function(_, key) { |
|||
var str = replacements[key] |
|||
if ( |
|||
translations[replacements[key]] !== null && |
|||
translations[replacements[key]] !== 'undefined' |
|||
) { |
|||
str = translations[replacements[key]] |
|||
} |
|||
return str || '{' + key + '}' |
|||
}) |
|||
} |
|||
@ -0,0 +1,24 @@ |
|||
|
|||
import executionListenerDialog from '../components/nodePanel/property/executionListener' |
|||
export default { |
|||
components: { |
|||
executionListenerDialog |
|||
}, |
|||
data() { |
|||
return { |
|||
executionListenerLength: 0, |
|||
dialogName: null |
|||
} |
|||
}, |
|||
methods: { |
|||
computedExecutionListenerLength() { |
|||
this.executionListenerLength = this.element.businessObject.extensionElements?.values?.length ?? 0 |
|||
}, |
|||
finishExecutionListener() { |
|||
if (this.dialogName === 'executionListenerDialog') { |
|||
this.computedExecutionListenerLength() |
|||
} |
|||
this.dialogName = '' |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,70 @@ |
|||
import xcrud from 'xcrud' |
|||
import golbalConfig from 'xcrud/package/common/config' |
|||
import showConfig from '../flowable/showConfig' |
|||
golbalConfig.set({ |
|||
input: { |
|||
// size: 'mini'
|
|||
}, |
|||
select: { |
|||
// size: 'mini'
|
|||
}, |
|||
colorPicker: { |
|||
showAlpha: true |
|||
}, |
|||
xform: { |
|||
form: { |
|||
labelWidth: 'auto' |
|||
// size: 'mini'
|
|||
} |
|||
} |
|||
}) |
|||
export default { |
|||
components: { xForm: xcrud.xForm }, |
|||
props: { |
|||
modeler: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
element: { |
|||
type: Object, |
|||
required: true |
|||
}, |
|||
categorys: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
watch: { |
|||
'formData.id': function(val) { |
|||
this.updateProperties({ id: val }) |
|||
}, |
|||
'formData.name': function(val) { |
|||
this.updateProperties({ name: val }) |
|||
}, |
|||
'formData.documentation': function(val) { |
|||
if (!val) { |
|||
this.updateProperties({ documentation: [] }) |
|||
return |
|||
} |
|||
const documentationElement = this.modeler.get('moddle').create('bpmn:Documentation', { text: val }) |
|||
this.updateProperties({ documentation: [documentationElement] }) |
|||
} |
|||
}, |
|||
methods: { |
|||
updateProperties(properties) { |
|||
const modeling = this.modeler.get('modeling') |
|||
modeling.updateProperties(this.element, properties) |
|||
} |
|||
}, |
|||
computed: { |
|||
elementType() { |
|||
const bizObj = this.element.businessObject |
|||
return bizObj.eventDefinitions |
|||
? bizObj.eventDefinitions[0].$type |
|||
: bizObj.$type |
|||
}, |
|||
showConfig() { |
|||
return showConfig[this.elementType] || {} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
import xcrud from 'xcrud' |
|||
import golbalConfig from 'xcrud/package/common/config' |
|||
golbalConfig.set({ |
|||
input: { |
|||
// size: 'mini'
|
|||
}, |
|||
select: { |
|||
// size: 'mini'
|
|||
}, |
|||
colorPicker: { |
|||
showAlpha: true |
|||
}, |
|||
xform: { |
|||
form: { |
|||
labelWidth: 'auto' |
|||
// size: 'mini'
|
|||
} |
|||
} |
|||
}) |
|||
export default { |
|||
components: { xForm: xcrud.xForm } |
|||
} |
|||
@ -0,0 +1,53 @@ |
|||
export function commonParse(element) { |
|||
const result = { |
|||
...element.businessObject, |
|||
...element.businessObject.$attrs |
|||
} |
|||
return formatJsonKeyValue(result) |
|||
} |
|||
|
|||
export function formatJsonKeyValue(result) { |
|||
// 移除flowable前缀，格式化数组
|
|||
for (const key in result) { |
|||
if (key.indexOf('flowable:') === 0) { |
|||
const newKey = key.replace('flowable:', '') |
|||
result[newKey] = result[key] |
|||
delete result[key] |
|||
} |
|||
} |
|||
result = documentationParse(result) |
|||
return result |
|||
} |
|||
|
|||
export function documentationParse(obj) { |
|||
if ('documentation' in obj) { |
|||
let str = '' |
|||
obj.documentation.forEach(item => { |
|||
str += item.text |
|||
}) |
|||
obj.documentation = str |
|||
} |
|||
return obj |
|||
} |
|||
|
|||
export function conditionExpressionParse(obj) { |
|||
if ('conditionExpression' in obj) { |
|||
obj.conditionExpression = obj.conditionExpression.body |
|||
} |
|||
return obj |
|||
} |
|||
|
|||
export function userTaskParse(obj) { |
|||
for (const key in obj) { |
|||
if (key === 'candidateUsers') { |
|||
obj.userType = 'candidateUsers' |
|||
obj[key] = obj[key]?.split(',') || [] |
|||
} else if (key === 'candidateGroups') { |
|||
obj.userType = 'candidateGroups' |
|||
obj[key] = obj[key]?.split(',') || [] |
|||
} else if (key === 'assignee') { |
|||
obj.userType = 'assignee' |
|||
} |
|||
} |
|||
return obj |
|||
} |
|||
@ -0,0 +1,24 @@ |
|||
export default class CustomContextPad { |
|||
constructor(config, contextPad, create, elementFactory, injector, translate) { |
|||
this.create = create; |
|||
this.elementFactory = elementFactory; |
|||
this.translate = translate; |
|||
|
|||
if (config.autoPlace !== false) { |
|||
this.autoPlace = injector.get('autoPlace', false); |
|||
} |
|||
|
|||
contextPad.registerProvider(this); // 定义这是一个contextPad |
|||
} |
|||
|
|||
getContextPadEntries(element) {} |
|||
} |
|||
|
|||
CustomContextPad.$inject = [ |
|||
'config', |
|||
'contextPad', |
|||
'create', |
|||
'elementFactory', |
|||
'injector', |
|||
'translate' |
|||
]; |
|||
@ -0,0 +1,81 @@ |
|||
<template> |
|||
<div> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig"> |
|||
<template #executionListener> |
|||
<el-badge :value="executionListenerLength"> |
|||
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button> |
|||
</el-badge> |
|||
</template> |
|||
</x-form> |
|||
<executionListenerDialog |
|||
v-if="dialogName === 'executionListenerDialog'" |
|||
:element="element" |
|||
:modeler="modeler" |
|||
@close="finishExecutionListener" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinPanel from '../../common/mixinPanel' |
|||
import mixinExecutionListener from '../../common/mixinExecutionListener' |
|||
import { commonParse } from '../../common/parseElement' |
|||
export default { |
|||
mixins: [mixinPanel, mixinExecutionListener], |
|||
data() { |
|||
return { |
|||
formData: {} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'input', |
|||
name: 'id', |
|||
label: '节点 id', |
|||
rules: [{ required: true, message: 'Id 不能为空' }] |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'name', |
|||
label: '节点名称' |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'documentation', |
|||
label: '节点描述' |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
name: 'executionListener', |
|||
label: '执行监听器' |
|||
}, |
|||
{ |
|||
xType: 'switch', |
|||
name: 'async', |
|||
label: '异步', |
|||
activeText: '是', |
|||
inactiveText: '否' |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
'formData.async': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:async': val }) |
|||
} |
|||
}, |
|||
created() { |
|||
this.formData = commonParse(this.element) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -0,0 +1,113 @@ |
|||
<template> |
|||
<div> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig"> |
|||
<template #executionListener> |
|||
<el-badge :value="executionListenerLength"> |
|||
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button> |
|||
</el-badge> |
|||
</template> |
|||
<template #signal> |
|||
<el-badge :value="signalLength"> |
|||
<el-button size="small" @click="dialogName = 'signalDialog'">编辑</el-button> |
|||
</el-badge> |
|||
</template> |
|||
</x-form> |
|||
<executionListenerDialog |
|||
v-if="dialogName === 'executionListenerDialog'" |
|||
:element="element" |
|||
:modeler="modeler" |
|||
@close="finishExecutionListener" |
|||
/> |
|||
<signalDialog |
|||
v-if="dialogName === 'signalDialog'" |
|||
:element="element" |
|||
:modeler="modeler" |
|||
@close="finishExecutionListener" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinPanel from '../../common/mixinPanel' |
|||
import mixinExecutionListener from '../../common/mixinExecutionListener' |
|||
import signalDialog from './property/signal' |
|||
import { commonParse } from '../../common/parseElement' |
|||
export default { |
|||
components: { |
|||
signalDialog |
|||
}, |
|||
mixins: [mixinPanel, mixinExecutionListener], |
|||
data() { |
|||
return { |
|||
signalLength: 0, |
|||
formData: {} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
const _this = this |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'select', |
|||
name: 'processCategory', |
|||
label: '流程分类', |
|||
dic: { data: _this.categorys, label: 'dictLabel', value: 'dictValue' } |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'id', |
|||
label: '流程标识key', |
|||
rules: [{ required: true, message: 'Id 不能为空' }] |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'name', |
|||
label: '流程名称' |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'documentation', |
|||
label: '节点描述' |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
name: 'executionListener', |
|||
label: '执行监听器' |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
name: 'signal', |
|||
label: '信号定义' |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
'formData.processCategory': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:processCategory': val }) |
|||
} |
|||
}, |
|||
created() { |
|||
this.formData = commonParse(this.element) |
|||
}, |
|||
methods: { |
|||
computedSignalLength() { |
|||
this.signalLength = this.element.businessObject.extensionElements?.values?.length ?? 0 |
|||
}, |
|||
finishSignal() { |
|||
if (this.dialogName === 'signalDialog') { |
|||
this.computedSignalLength() |
|||
} |
|||
this.dialogName = '' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -0,0 +1,194 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog |
|||
title="执行监听器" |
|||
:visible.sync="dialogVisible" |
|||
width="900px" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:show-close="false" |
|||
@closed="$emit('close')" |
|||
> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig"> |
|||
<template #params="scope"> |
|||
<el-badge :value="scope.row.params ? scope.row.params.length : 0" type="primary"> |
|||
<el-button size="small" @click="configParam(scope.$index)">配置</el-button> |
|||
</el-badge> |
|||
</template> |
|||
</x-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<listenerParam v-if="showParamDialog" :value="formData.executionListener[nowIndex].params" @close="finishConfigParam" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinPanel from '../../../common/mixinPanel' |
|||
import listenerParam from './listenerParam' |
|||
export default { |
|||
components: { listenerParam }, |
|||
mixins: [mixinPanel], |
|||
data() { |
|||
return { |
|||
dialogVisible: true, |
|||
showParamDialog: false, |
|||
nowIndex: null, |
|||
formData: { |
|||
executionListener: [] |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
// const _this = this |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'tabs', |
|||
tabs: [ |
|||
{ |
|||
label: '执行监听器', |
|||
name: 'executionListener', |
|||
column: [ |
|||
{ |
|||
label: '事件', |
|||
name: 'event', |
|||
width: 180, |
|||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }], |
|||
xType: 'select', |
|||
dic: [ |
|||
{ label: 'start', value: 'start' }, |
|||
{ label: 'end', value: 'end' }, |
|||
{ label: 'take', value: 'take' } |
|||
] |
|||
}, |
|||
{ |
|||
label: '类型', |
|||
name: 'type', |
|||
width: 180, |
|||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }], |
|||
xType: 'select', |
|||
dic: [ |
|||
{ label: '类', value: 'class' }, |
|||
{ label: '表达式', value: 'expression' }, |
|||
{ label: '委托表达式', value: 'delegateExpression' } |
|||
], |
|||
tooltip: `类：示例 com.company.MyCustomListener，自定义类必须实现 org.flowable.engine.delegate.TaskListener 接口 <br /> |
|||
表达式：示例 \${myObject.callMethod(task, task.eventName)} <br /> |
|||
委托表达式：示例 \${myListenerSpringBean} ，该 springBean 需要实现 org.flowable.engine.delegate.TaskListener 接口 |
|||
` |
|||
}, |
|||
{ |
|||
label: 'java 类名', |
|||
name: 'className', |
|||
xType: 'input', |
|||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }] |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
label: '参数', |
|||
width: 120, |
|||
slot: true, |
|||
name: 'params' |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.formData.executionListener = this.element.businessObject.extensionElements?.values |
|||
.filter(item => item.$type === 'flowable:ExecutionListener') |
|||
.map(item => { |
|||
let type |
|||
if ('class' in item) type = 'class' |
|||
if ('expression' in item) type = 'expression' |
|||
if ('delegateExpression' in item) type = 'delegateExpression' |
|||
return { |
|||
event: item.event, |
|||
type: type, |
|||
className: item[type], |
|||
params: item.fields?.map(field => { |
|||
let fieldType |
|||
if ('stringValue' in field) fieldType = 'stringValue' |
|||
if ('expression' in field) fieldType = 'expression' |
|||
return { |
|||
name: field.name, |
|||
type: fieldType, |
|||
value: field[fieldType] |
|||
} |
|||
}) ?? [] |
|||
} |
|||
}) ?? [] |
|||
}, |
|||
methods: { |
|||
configParam(index) { |
|||
this.nowIndex = index |
|||
const nowObj = this.formData.executionListener[index] |
|||
if (!nowObj.params) { |
|||
nowObj.params = [] |
|||
} |
|||
this.showParamDialog = true |
|||
}, |
|||
finishConfigParam(param) { |
|||
this.showParamDialog = false |
|||
// hack 数量不更新问题 |
|||
const cache = this.formData.executionListener[this.nowIndex] |
|||
cache.params = param |
|||
this.$set(this.formData.executionListener[this.nowIndex], this.nowIndex, cache) |
|||
this.nowIndex = null |
|||
}, |
|||
updateElement() { |
|||
if (this.formData.executionListener?.length) { |
|||
let extensionElements = this.element.businessObject.get('extensionElements') |
|||
if (!extensionElements) { |
|||
extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements') |
|||
} |
|||
// 清除旧值 |
|||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') ?? [] |
|||
this.formData.executionListener.forEach(item => { |
|||
const executionListener = this.modeler.get('moddle').create('flowable:ExecutionListener') |
|||
executionListener['event'] = item.event |
|||
executionListener[item.type] = item.className |
|||
if (item.params && item.params.length) { |
|||
item.params.forEach(field => { |
|||
const fieldElement = this.modeler.get('moddle').create('flowable:Field') |
|||
fieldElement['name'] = field.name |
|||
fieldElement[field.type] = field.value |
|||
// 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack |
|||
// const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value }) |
|||
// fieldElement[field.type] = valueElement |
|||
executionListener.get('fields').push(fieldElement) |
|||
}) |
|||
} |
|||
extensionElements.get('values').push(executionListener) |
|||
}) |
|||
this.updateProperties({ extensionElements: extensionElements }) |
|||
} else { |
|||
const extensionElements = this.element.businessObject[`extensionElements`] |
|||
if (extensionElements) { |
|||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') ?? [] |
|||
} |
|||
} |
|||
}, |
|||
closeDialog() { |
|||
this.$refs.xForm.validate().then(() => { |
|||
this.updateElement() |
|||
this.dialogVisible = false |
|||
}).catch(e => console.error(e)) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.flow-containers .el-badge__content.is-fixed { |
|||
top: 18px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,96 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog |
|||
title="监听器参数" |
|||
:visible.sync="dialogVisible" |
|||
width="700px" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:show-close="false" |
|||
@closed="$emit('close', formData.paramList)" |
|||
> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig" /> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinXcrud from '../../../common/mixinXcrud' |
|||
export default { |
|||
mixins: [mixinXcrud], |
|||
props: { |
|||
value: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
dialogVisible: true, |
|||
formData: { |
|||
paramList: this.value |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'tabs', |
|||
tabs: [ |
|||
{ |
|||
label: '监听器参数', |
|||
name: 'paramList', |
|||
column: [ |
|||
{ |
|||
label: '类型', |
|||
name: 'type', |
|||
width: 180, |
|||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }], |
|||
xType: 'select', |
|||
dic: [ |
|||
{ label: '字符串', value: 'stringValue' }, |
|||
{ label: '表达式', value: 'expression' } |
|||
] |
|||
}, |
|||
{ |
|||
label: '名称', |
|||
name: 'name', |
|||
width: 180, |
|||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }], |
|||
xType: 'input' |
|||
}, |
|||
{ |
|||
label: '值', |
|||
name: 'value', |
|||
xType: 'input', |
|||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }] |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
closeDialog() { |
|||
this.$refs.xForm.validate().then(() => { |
|||
this.dialogVisible = false |
|||
}).catch(e => console.error(e)) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.flow-containers .el-badge__content.is-fixed { |
|||
top: 18px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,117 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog |
|||
title="多实例配置" |
|||
:visible.sync="dialogVisible" |
|||
width="500px" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:show-close="false" |
|||
class="muti-instance" |
|||
@closed="$emit('close')" |
|||
> |
|||
<el-alert |
|||
type="info" |
|||
:closable="false" |
|||
show-icon |
|||
style="margin-bottom: 20px" |
|||
> |
|||
<template #title> |
|||
按照BPMN2.0规范的要求，用于为每个实例创建执行的父执行，会提供下列变量:<br> |
|||
nrOfInstances：实例总数。<br> |
|||
nrOfActiveInstances：当前活动的（即未完成的），实例数量。对于顺序多实例，这个值总为1。<br> |
|||
nrOfCompletedInstances：已完成的实例数量。<br> |
|||
loopCounter：给定实例在for-each循环中的index。<br> |
|||
</template> |
|||
</el-alert> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig" /> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinPanel from '../../../common/mixinPanel' |
|||
import { formatJsonKeyValue } from '../../../common/parseElement' |
|||
export default { |
|||
mixins: [mixinPanel], |
|||
data() { |
|||
return { |
|||
dialogVisible: true, |
|||
formData: {} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
const _this = this |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'input', |
|||
name: 'collection', |
|||
label: '集合', |
|||
tooltip: '属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br />不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br />这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。' |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'elementVariable', |
|||
label: '元素变量', |
|||
tooltip: '每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br />创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br />一般来说，该字符串应与指定人员变量相同。' |
|||
}, |
|||
{ |
|||
xType: 'radio', |
|||
name: 'isSequential', |
|||
label: '执行方式', |
|||
dic: [{ label: '串行', value: true }, { label: '并行', value: false }] |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'completionCondition', |
|||
label: '完成条件', |
|||
tooltip: '多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br />结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br />活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br />表示当任务完成60%时，该节点就算完成' |
|||
} |
|||
], |
|||
operate: [ |
|||
{ text: '确定', show: true, click: _this.save }, |
|||
{ text: '清空', show: true, click: () => { _this.formData = {} } } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
const cache = JSON.parse(JSON.stringify(this.element.businessObject.loopCharacteristics ?? {})) |
|||
cache.completionCondition = cache.completionCondition?.body |
|||
this.formData = formatJsonKeyValue(cache) |
|||
}, |
|||
methods: { |
|||
updateElement() { |
|||
if (this.formData.isSequential !== null && this.formData.isSequential !== undefined) { |
|||
let loopCharacteristics = this.element.businessObject.get('loopCharacteristics') |
|||
if (!loopCharacteristics) { |
|||
loopCharacteristics = this.modeler.get('moddle').create('bpmn:MultiInstanceLoopCharacteristics') |
|||
} |
|||
loopCharacteristics['isSequential'] = this.formData.isSequential |
|||
loopCharacteristics['collection'] = this.formData.collection |
|||
loopCharacteristics['elementVariable'] = this.formData.elementVariable |
|||
if (this.formData.completionCondition) { |
|||
const completionCondition = this.modeler.get('moddle').create('bpmn:Expression', { body: this.formData.completionCondition }) |
|||
loopCharacteristics['completionCondition'] = completionCondition |
|||
} |
|||
this.updateProperties({ loopCharacteristics: loopCharacteristics }) |
|||
} else { |
|||
delete this.element.businessObject.loopCharacteristics |
|||
} |
|||
}, |
|||
save() { |
|||
this.updateElement() |
|||
this.dialogVisible = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.muti-instance .el-form-item { |
|||
margin-bottom: 22px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,124 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog |
|||
title="信号定义" |
|||
:visible.sync="dialogVisible" |
|||
width="700px" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:show-close="false" |
|||
@closed="$emit('close')" |
|||
> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig" /> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinPanel from '../../../common/mixinPanel' |
|||
export default { |
|||
mixins: [mixinPanel], |
|||
data() { |
|||
return { |
|||
dialogVisible: true, |
|||
formData: { |
|||
signal: [] |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
// const _this = this |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'tabs', |
|||
tabs: [ |
|||
{ |
|||
label: '信号定义', |
|||
name: 'signal', |
|||
column: [ |
|||
{ |
|||
label: 'scope', |
|||
name: 'scope', |
|||
width: 180, |
|||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }], |
|||
xType: 'select', |
|||
dic: [ |
|||
{ label: '全局', value: 'start' }, |
|||
{ label: '流程实例', value: 'end' } |
|||
] |
|||
}, |
|||
{ |
|||
label: 'id', |
|||
name: 'id', |
|||
width: 200, |
|||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }], |
|||
xType: 'input' |
|||
}, |
|||
{ |
|||
label: '名称', |
|||
name: 'name', |
|||
xType: 'input', |
|||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }] |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
// this.formData.signal = this.element.businessObject.extensionElements?.values.map(item => { |
|||
// let type |
|||
// if ('class' in item.$attrs) type = 'class' |
|||
// if ('expression' in item.$attrs) type = 'expression' |
|||
// if ('delegateExpression' in item.$attrs) type = 'delegateExpression' |
|||
// return { |
|||
// event: item.$attrs.event, |
|||
// type: type, |
|||
// className: item.$attrs[type] |
|||
// } |
|||
// }) ?? [] |
|||
}, |
|||
methods: { |
|||
updateElement() { |
|||
if (this.formData.signal?.length) { |
|||
let extensionElements = this.element.businessObject.get('extensionElements') |
|||
if (!extensionElements) { |
|||
extensionElements = this.modeler.get('moddle').create('bpmn:signal') |
|||
} |
|||
const length = extensionElements.get('values').length |
|||
for (let i = 0; i < length; i++) { |
|||
// 清除旧值 |
|||
extensionElements.get('values').pop() |
|||
} |
|||
this.updateProperties({ extensionElements: extensionElements }) |
|||
} else { |
|||
const extensionElements = this.element.businessObject[`extensionElements`] |
|||
if (extensionElements) { |
|||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') |
|||
} |
|||
} |
|||
}, |
|||
closeDialog() { |
|||
this.$refs.xForm.validate().then(() => { |
|||
this.updateElement() |
|||
this.dialogVisible = false |
|||
}).catch(e => console.error(e)) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.flow-containers .el-badge__content.is-fixed { |
|||
top: 18px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,196 @@ |
|||
<template> |
|||
<div> |
|||
<el-dialog |
|||
title="任务监听器" |
|||
:visible.sync="dialogVisible" |
|||
width="900px" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:show-close="false" |
|||
@closed="$emit('close')" |
|||
> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig"> |
|||
<template #params="scope"> |
|||
<el-badge :value="scope.row.params ? scope.row.params.length : 0" type="primary"> |
|||
<el-button size="small" @click="configParam(scope.$index)">配置</el-button> |
|||
</el-badge> |
|||
</template> |
|||
</x-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<listenerParam v-if="showParamDialog" :value="formData.taskListener[nowIndex].params" @close="finishConfigParam" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinPanel from '../../../common/mixinPanel' |
|||
import listenerParam from './listenerParam' |
|||
export default { |
|||
components: { listenerParam }, |
|||
mixins: [mixinPanel], |
|||
data() { |
|||
return { |
|||
dialogVisible: true, |
|||
showParamDialog: false, |
|||
nowIndex: null, |
|||
formData: { |
|||
taskListener: [] |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
// const _this = this |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'tabs', |
|||
tabs: [ |
|||
{ |
|||
label: '任务监听器', |
|||
name: 'taskListener', |
|||
column: [ |
|||
{ |
|||
label: '事件', |
|||
name: 'event', |
|||
width: 180, |
|||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }], |
|||
xType: 'select', |
|||
dic: [ |
|||
{ label: 'create', value: 'create' }, |
|||
{ label: 'assignment', value: 'assignment' }, |
|||
{ label: 'complete', value: 'complete' }, |
|||
{ label: 'delete', value: 'delete' } |
|||
], |
|||
tooltip: `create（创建）：当任务已经创建，并且所有任务参数都已经设置时触发。<br /> |
|||
assignment（指派）：当任务已经指派给某人时触发。请注意：当流程执行到达用户任务时，在触发create事件之前，会首先触发assignment事件。<br /> |
|||
complete（完成）：当任务已经完成，从运行时数据中删除前触发。<br /> |
|||
delete（删除）：在任务即将被删除前触发。请注意任务由completeTask正常完成时也会触发。 |
|||
` |
|||
}, |
|||
{ |
|||
label: '类型', |
|||
name: 'type', |
|||
width: 180, |
|||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }], |
|||
xType: 'select', |
|||
dic: [ |
|||
{ label: '类', value: 'class' }, |
|||
{ label: '表达式', value: 'expression' }, |
|||
{ label: '委托表达式', value: 'delegateExpression' } |
|||
] |
|||
}, |
|||
{ |
|||
label: 'java 类名', |
|||
name: 'className', |
|||
xType: 'input', |
|||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }] |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
label: '参数', |
|||
width: 120, |
|||
slot: true, |
|||
name: 'params' |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.formData.taskListener = this.element.businessObject.extensionElements?.values |
|||
.filter(item => item.$type === 'flowable:TaskListener') |
|||
.map(item => { |
|||
let type |
|||
if ('class' in item) type = 'class' |
|||
if ('expression' in item) type = 'expression' |
|||
if ('delegateExpression' in item) type = 'delegateExpression' |
|||
return { |
|||
event: item.event, |
|||
type: type, |
|||
className: item[type], |
|||
params: item.fields?.map(field => { |
|||
let fieldType |
|||
if ('stringValue' in field) fieldType = 'stringValue' |
|||
if ('expression' in field) fieldType = 'expression' |
|||
return { |
|||
name: field.name, |
|||
type: fieldType, |
|||
value: field[fieldType] |
|||
} |
|||
}) ?? [] |
|||
} |
|||
}) ?? [] |
|||
}, |
|||
methods: { |
|||
configParam(index) { |
|||
this.nowIndex = index |
|||
const nowObj = this.formData.taskListener[index] |
|||
if (!nowObj.params) { |
|||
nowObj.params = [] |
|||
} |
|||
this.showParamDialog = true |
|||
}, |
|||
finishConfigParam(param) { |
|||
this.showParamDialog = false |
|||
// hack 数量不更新问题 |
|||
const cache = this.formData.taskListener[this.nowIndex] |
|||
cache.params = param |
|||
this.$set(this.formData.taskListener[this.nowIndex], this.nowIndex, cache) |
|||
this.nowIndex = null |
|||
}, |
|||
updateElement() { |
|||
if (this.formData.taskListener?.length) { |
|||
let extensionElements = this.element.businessObject.get('extensionElements') |
|||
if (!extensionElements) { |
|||
extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements') |
|||
} |
|||
// 清除旧值 |
|||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? [] |
|||
this.formData.taskListener.forEach(item => { |
|||
const taskListener = this.modeler.get('moddle').create('flowable:TaskListener') |
|||
taskListener['event'] = item.event |
|||
taskListener[item.type] = item.className |
|||
if (item.params && item.params.length) { |
|||
item.params.forEach(field => { |
|||
const fieldElement = this.modeler.get('moddle').create('flowable:Field') |
|||
fieldElement['name'] = field.name |
|||
fieldElement[field.type] = field.value |
|||
// 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack |
|||
// const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value }) |
|||
// fieldElement[field.type] = valueElement |
|||
taskListener.get('fields').push(fieldElement) |
|||
}) |
|||
} |
|||
extensionElements.get('values').push(taskListener) |
|||
}) |
|||
this.updateProperties({ extensionElements: extensionElements }) |
|||
} else { |
|||
const extensionElements = this.element.businessObject[`extensionElements`] |
|||
if (extensionElements) { |
|||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? [] |
|||
} |
|||
} |
|||
}, |
|||
closeDialog() { |
|||
this.$refs.xForm.validate().then(() => { |
|||
this.updateElement() |
|||
this.dialogVisible = false |
|||
}).catch(e => console.error(e)) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.flow-containers .el-badge__content.is-fixed { |
|||
top: 18px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,92 @@ |
|||
<template> |
|||
<div> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig"> |
|||
<template #executionListener> |
|||
<el-badge :value="executionListenerLength"> |
|||
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button> |
|||
</el-badge> |
|||
</template> |
|||
</x-form> |
|||
<executionListenerDialog |
|||
v-if="dialogName === 'executionListenerDialog'" |
|||
:element="element" |
|||
:modeler="modeler" |
|||
@close="finishExecutionListener" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinPanel from '../../common/mixinPanel' |
|||
import mixinExecutionListener from '../../common/mixinExecutionListener' |
|||
import { commonParse, conditionExpressionParse } from '../../common/parseElement' |
|||
export default { |
|||
mixins: [mixinPanel, mixinExecutionListener], |
|||
data() { |
|||
return { |
|||
formData: {} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'input', |
|||
name: 'id', |
|||
label: '节点 id', |
|||
rules: [{ required: true, message: 'Id 不能为空' }] |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'name', |
|||
label: '节点名称' |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'documentation', |
|||
label: '节点描述' |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
name: 'executionListener', |
|||
label: '执行监听器' |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'conditionExpression', |
|||
label: '跳转条件' |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'skipExpression', |
|||
label: '跳过表达式' |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
'formData.conditionExpression': function(val) { |
|||
if (val) { |
|||
const newCondition = this.modeler.get('moddle').create('bpmn:FormalExpression', { body: val }) |
|||
this.updateProperties({ conditionExpression: newCondition }) |
|||
} else { |
|||
this.updateProperties({ conditionExpression: null }) |
|||
} |
|||
}, |
|||
'formData.skipExpression': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:skipExpression': val }) |
|||
} |
|||
}, |
|||
created() { |
|||
let cache = commonParse(this.element) |
|||
cache = conditionExpressionParse(cache) |
|||
this.formData = cache |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style></style> |
|||
@ -0,0 +1,94 @@ |
|||
<template> |
|||
<div> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig"> |
|||
<template #executionListener> |
|||
<el-badge :value="executionListenerLength"> |
|||
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button> |
|||
</el-badge> |
|||
</template> |
|||
</x-form> |
|||
<executionListenerDialog |
|||
v-if="dialogName === 'executionListenerDialog'" |
|||
:element="element" |
|||
:modeler="modeler" |
|||
@close="finishExecutionListener" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinPanel from '../../common/mixinPanel' |
|||
import mixinExecutionListener from '../../common/mixinExecutionListener' |
|||
import { commonParse } from '../../common/parseElement' |
|||
export default { |
|||
mixins: [mixinPanel, mixinExecutionListener], |
|||
data() { |
|||
return { |
|||
formData: {} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
const _this = this |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'input', |
|||
name: 'id', |
|||
label: '节点 id', |
|||
rules: [{ required: true, message: 'Id 不能为空' }] |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'name', |
|||
label: '节点名称' |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'documentation', |
|||
label: '节点描述' |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
name: 'executionListener', |
|||
label: '执行监听器' |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'initiator', |
|||
label: '发起人', |
|||
show: !!_this.showConfig.initiator |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'formKey', |
|||
label: '表单标识key', |
|||
show: !!_this.showConfig.formKey |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
'formData.initiator': function(val) { |
|||
if (val === '') val = null |
|||
// 默认设置流程发起人 |
|||
// if (val === '') val = 'INITIATOR' |
|||
this.updateProperties({ 'flowable:initiator': val }) |
|||
}, |
|||
'formData.formKey': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:formKey': val }) |
|||
} |
|||
}, |
|||
created() { |
|||
// this.updateProperties({ 'flowable:initiator': 'INITIATOR' }) |
|||
this.formData = commonParse(this.element) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -0,0 +1,426 @@ |
|||
<template> |
|||
<div> |
|||
<x-form ref="xForm" v-model="formData" :config="formConfig"> |
|||
<template #executionListener> |
|||
<el-badge :value="executionListenerLength"> |
|||
<el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button> |
|||
</el-badge> |
|||
</template> |
|||
<template #taskListener> |
|||
<el-badge :value="taskListenerLength"> |
|||
<el-button size="small" @click="dialogName = 'taskListenerDialog'">编辑</el-button> |
|||
</el-badge> |
|||
</template> |
|||
<template #multiInstance> |
|||
<el-badge :is-dot="hasMultiInstance"> |
|||
<el-button size="small" @click="dialogName = 'multiInstanceDialog'">编辑</el-button> |
|||
</el-badge> |
|||
</template> |
|||
</x-form> |
|||
<executionListenerDialog |
|||
v-if="dialogName === 'executionListenerDialog'" |
|||
:element="element" |
|||
:modeler="modeler" |
|||
@close="finishExecutionListener" |
|||
/> |
|||
<taskListenerDialog |
|||
v-if="dialogName === 'taskListenerDialog'" |
|||
:element="element" |
|||
:modeler="modeler" |
|||
@close="finishTaskListener" |
|||
/> |
|||
<multiInstanceDialog |
|||
v-if="dialogName === 'multiInstanceDialog'" |
|||
:element="element" |
|||
:modeler="modeler" |
|||
@close="finishMultiInstance" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinPanel from '../../common/mixinPanel' |
|||
import executionListenerDialog from './property/executionListener' |
|||
import taskListenerDialog from './property/taskListener' |
|||
import multiInstanceDialog from './property/multiInstance' |
|||
import { commonParse, userTaskParse } from '../../common/parseElement' |
|||
export default { |
|||
components: { |
|||
executionListenerDialog, |
|||
taskListenerDialog, |
|||
multiInstanceDialog |
|||
}, |
|||
mixins: [mixinPanel], |
|||
props: { |
|||
users: { |
|||
type: Array, |
|||
required: true |
|||
}, |
|||
groups: { |
|||
type: Array, |
|||
required: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
userTypeOption: [ |
|||
{ label: '指定人员', value: 'assignee' }, |
|||
{ label: '候选人员', value: 'candidateUsers' }, |
|||
{ label: '候选组', value: 'candidateGroups' } |
|||
], |
|||
dataTypeOption: [ |
|||
{ label: '固定', value: 'fixed' }, |
|||
{ label: '动态', value: 'dynamic' } |
|||
], |
|||
dialogName: '', |
|||
executionListenerLength: 0, |
|||
taskListenerLength: 0, |
|||
hasMultiInstance: false, |
|||
formData: {} |
|||
} |
|||
}, |
|||
computed: { |
|||
formConfig() { |
|||
const _this = this |
|||
return { |
|||
inline: false, |
|||
item: [ |
|||
{ |
|||
xType: 'input', |
|||
name: 'id', |
|||
label: '节点 id', |
|||
rules: [{ required: true, message: 'Id 不能为空' }] |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'name', |
|||
label: '节点名称', |
|||
rules: [{ required: true, message: '节点名称不能为空' }] |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'documentation', |
|||
label: '节点描述' |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
name: 'executionListener', |
|||
label: '执行监听器' |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
name: 'taskListener', |
|||
label: '任务监听器', |
|||
show: !!_this.showConfig.taskListener |
|||
}, |
|||
{ |
|||
xType: 'select', |
|||
name: 'userType', |
|||
label: '人员类型', |
|||
dic: _this.userTypeOption, |
|||
show: !!_this.showConfig.userType |
|||
}, |
|||
{ |
|||
xType: 'radio', |
|||
name: 'dataType', |
|||
label: '指定方式', |
|||
dic: _this.dataTypeOption, |
|||
show: !!_this.showConfig.dataType, |
|||
rules: [{ required: true, message: '请指定方式' }] |
|||
}, |
|||
// { |
|||
// xType: 'input', |
|||
// name: 'assigneeFixed', |
|||
// label: '指定人(表达式)', |
|||
// show: !!_this.showConfig.assigneeFixed && _this.formData.userType === 'assignee' && _this.formData.dataType === 'fixed' |
|||
// }, |
|||
// { |
|||
// xType: 'input', |
|||
// name: 'candidateUsersFixed', |
|||
// label: '候选人(表达式)', |
|||
// show: !!_this.showConfig.candidateUsersFixed && _this.formData.userType === 'candidateUsers' && _this.formData.dataType === 'fixed' |
|||
// }, |
|||
// { |
|||
// xType: 'input', |
|||
// name: 'candidateGroupsFixed', |
|||
// label: '候选组(表达式)', |
|||
// show: !!_this.showConfig.candidateGroupsFixed && _this.formData.userType === 'candidateGroups' && _this.formData.dataType === 'fixed' |
|||
// }, |
|||
{ |
|||
xType: 'select', |
|||
name: 'assignee', |
|||
label: '指定人员', |
|||
allowCreate: true, |
|||
filterable: true, |
|||
dic: { data: _this.users, label: 'nickName', value: 'userId' }, |
|||
show: !!_this.showConfig.assignee && _this.formData.userType === 'assignee' |
|||
}, |
|||
{ |
|||
xType: 'select', |
|||
name: 'candidateUsers', |
|||
label: '候选人员', |
|||
multiple: true, |
|||
allowCreate: true, |
|||
filterable: true, |
|||
dic: { data: _this.users, label: 'nickName', value: 'userId' }, |
|||
show: !!_this.showConfig.candidateUsers && _this.formData.userType === 'candidateUsers' |
|||
}, |
|||
{ |
|||
xType: 'select', |
|||
name: 'candidateGroups', |
|||
label: '候选组', |
|||
multiple: true, |
|||
allowCreate: true, |
|||
filterable: true, |
|||
dic: { data: _this.groups, label: 'roleName', value: 'roleId' }, |
|||
show: !!_this.showConfig.candidateGroups && _this.formData.userType === 'candidateGroups' |
|||
}, |
|||
{ |
|||
xType: 'slot', |
|||
name: 'multiInstance', |
|||
label: '多实例' |
|||
}, |
|||
{ |
|||
xType: 'switch', |
|||
name: 'async', |
|||
label: '异步', |
|||
activeText: '是', |
|||
inactiveText: '否', |
|||
show: !!_this.showConfig.async |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'priority', |
|||
label: '优先级', |
|||
show: !!_this.showConfig.priority |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'formKey', |
|||
label: '表单标识key', |
|||
show: !!_this.showConfig.formKey |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'skipExpression', |
|||
label: '跳过表达式', |
|||
show: !!_this.showConfig.skipExpression |
|||
}, |
|||
{ |
|||
xType: 'switch', |
|||
name: 'isForCompensation', |
|||
label: '是否为补偿', |
|||
activeText: '是', |
|||
inactiveText: '否', |
|||
show: !!_this.showConfig.isForCompensation |
|||
}, |
|||
{ |
|||
xType: 'switch', |
|||
name: 'triggerable', |
|||
label: '服务任务可触发', |
|||
activeText: '是', |
|||
inactiveText: '否', |
|||
show: !!_this.showConfig.triggerable |
|||
}, |
|||
{ |
|||
xType: 'switch', |
|||
name: 'autoStoreVariables', |
|||
label: '自动存储变量', |
|||
activeText: '是', |
|||
inactiveText: '否', |
|||
show: !!_this.showConfig.autoStoreVariables |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'ruleVariablesInput', |
|||
label: '输入变量', |
|||
show: !!_this.showConfig.ruleVariablesInput |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'rules', |
|||
label: '规则', |
|||
show: !!_this.showConfig.rules |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'resultVariable', |
|||
label: '结果变量', |
|||
show: !!_this.showConfig.resultVariable |
|||
}, |
|||
{ |
|||
xType: 'switch', |
|||
name: 'exclude', |
|||
label: '排除', |
|||
activeText: '是', |
|||
inactiveText: '否', |
|||
show: !!_this.showConfig.exclude |
|||
}, |
|||
{ |
|||
xType: 'input', |
|||
name: 'class', |
|||
label: '类', |
|||
show: !!_this.showConfig.class |
|||
}, |
|||
{ |
|||
xType: 'datePicker', |
|||
type: 'datetime', |
|||
name: 'dueDate', |
|||
label: '到期时间', |
|||
show: !!_this.showConfig.dueDate |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
'formData.userType': function(val, oldVal) { |
|||
if (oldVal) { |
|||
const types = ['assignee', 'candidateUsers', 'candidateGroups'] |
|||
types.forEach(type => { |
|||
delete this.element.businessObject.$attrs[`flowable:${type}`] |
|||
delete this.formData[type] |
|||
}) |
|||
} |
|||
}, |
|||
// 动态选择流程执行人 |
|||
'formData.dataType': function(val) { |
|||
const that = this |
|||
this.updateProperties({'flowable:dataType': val}) |
|||
if (val === 'dynamic') { |
|||
this.updateProperties({'flowable:userType': that.formData.userType}) |
|||
} |
|||
// 切换时 删除之前选中的值 |
|||
const types = ['assignee', 'candidateUsers', 'candidateGroups'] |
|||
types.forEach(type => { |
|||
delete this.element.businessObject.$attrs[`flowable:${type}`] |
|||
delete this.formData[type] |
|||
}) |
|||
// 传值到父组件 |
|||
const params = { |
|||
dataType: val, |
|||
userType: this.formData.userType |
|||
} |
|||
this.$emit('dataType', params) |
|||
}, |
|||
'formData.assignee': function(val) { |
|||
if (this.formData.userType !== 'assignee') { |
|||
delete this.element.businessObject.$attrs[`flowable:assignee`] |
|||
return |
|||
} |
|||
this.updateProperties({'flowable:assignee': val}) |
|||
}, |
|||
'formData.candidateUsers': function(val) { |
|||
if (this.formData.userType !== 'candidateUsers') { |
|||
delete this.element.businessObject.$attrs[`flowable:candidateUsers`] |
|||
return |
|||
} |
|||
this.updateProperties({'flowable:candidateUsers': val?.join(',')}) |
|||
}, |
|||
'formData.candidateGroups': function(val) { |
|||
if (this.formData.userType !== 'candidateGroups') { |
|||
delete this.element.businessObject.$attrs[`flowable:candidateGroups`] |
|||
return |
|||
} |
|||
this.updateProperties({'flowable:candidateGroups': val?.join(',')}) |
|||
}, |
|||
'formData.async': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:async': true }) |
|||
}, |
|||
'formData.dueDate': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:dueDate': val }) |
|||
}, |
|||
'formData.formKey': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:formKey': val }) |
|||
}, |
|||
'formData.priority': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:priority': val }) |
|||
}, |
|||
'formData.skipExpression': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:skipExpression': val }) |
|||
}, |
|||
'formData.isForCompensation': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'isForCompensation': val }) |
|||
}, |
|||
'formData.triggerable': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:triggerable': val }) |
|||
}, |
|||
'formData.class': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:class': val }) |
|||
}, |
|||
'formData.autoStoreVariables': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:autoStoreVariables': val }) |
|||
}, |
|||
'formData.exclude': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:exclude': val }) |
|||
}, |
|||
'formData.ruleVariablesInput': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:ruleVariablesInput': val }) |
|||
}, |
|||
'formData.rules': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:rules': val }) |
|||
}, |
|||
'formData.resultVariable': function(val) { |
|||
if (val === '') val = null |
|||
this.updateProperties({ 'flowable:resultVariable': val }) |
|||
} |
|||
}, |
|||
created() { |
|||
let cache = commonParse(this.element) |
|||
cache = userTaskParse(cache) |
|||
this.formData = cache |
|||
this.computedExecutionListenerLength() |
|||
this.computedTaskListenerLength() |
|||
this.computedHasMultiInstance() |
|||
}, |
|||
methods: { |
|||
computedExecutionListenerLength() { |
|||
this.executionListenerLength = this.element.businessObject.extensionElements?.values |
|||
?.filter(item => item.$type === 'flowable:ExecutionListener').length ?? 0 |
|||
}, |
|||
computedTaskListenerLength() { |
|||
this.taskListenerLength = this.element.businessObject.extensionElements?.values |
|||
?.filter(item => item.$type === 'flowable:TaskListener').length ?? 0 |
|||
}, |
|||
computedHasMultiInstance() { |
|||
if (this.element.businessObject.loopCharacteristics) { |
|||
this.hasMultiInstance = true |
|||
} else { |
|||
this.hasMultiInstance = false |
|||
} |
|||
}, |
|||
finishExecutionListener() { |
|||
if (this.dialogName === 'executionListenerDialog') { |
|||
this.computedExecutionListenerLength() |
|||
} |
|||
this.dialogName = '' |
|||
}, |
|||
finishTaskListener() { |
|||
if (this.dialogName === 'taskListenerDialog') { |
|||
this.computedTaskListenerLength() |
|||
} |
|||
this.dialogName = '' |
|||
}, |
|||
finishMultiInstance() { |
|||
if (this.dialogName === 'multiInstanceDialog') { |
|||
this.computedHasMultiInstance() |
|||
} |
|||
this.dialogName = '' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style></style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,24 @@ |
|||
|
|||
function randomStr() { |
|||
return Math.random().toString(36).slice(-8) |
|||
} |
|||
|
|||
export default function() { |
|||
return `<?xml version="1.0" encoding="UTF-8"?>
|
|||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" targetNamespace="http://www.flowable.org/processdef"> |
|||
<process id="process_${randomStr()}" name="name_${randomStr()}"> |
|||
<startEvent id="startNode1" name="开始" /> |
|||
</process> |
|||
<bpmndi:BPMNDiagram id="BPMNDiagram_flow"> |
|||
<bpmndi:BPMNPlane id="BPMNPlane_flow" bpmnElement="T-2d89e7a3-ba79-4abd-9f64-ea59621c258c"> |
|||
<bpmndi:BPMNShape id="BPMNShape_startNode1" bpmnElement="startNode1" bioc:stroke=""> |
|||
<omgdc:Bounds x="240" y="200" width="30" height="30" /> |
|||
<bpmndi:BPMNLabel> |
|||
<omgdc:Bounds x="242" y="237" width="23" height="14" /> |
|||
</bpmndi:BPMNLabel> |
|||
</bpmndi:BPMNShape> |
|||
</bpmndi:BPMNPlane> |
|||
</bpmndi:BPMNDiagram> |
|||
</definitions> |
|||
` |
|||
} |
|||
@ -0,0 +1,55 @@ |
|||
export default { |
|||
'bpmn:EndEvent': {}, |
|||
'bpmn:StartEvent': { |
|||
initiator: true, |
|||
formKey: true |
|||
}, |
|||
'bpmn:UserTask': { |
|||
userType: true, |
|||
dataType: true, |
|||
assignee: true, |
|||
candidateUsers: true, |
|||
candidateGroups: true, |
|||
// assigneeFixed: true,
|
|||
// candidateUsersFixed: true,
|
|||
// candidateGroupsFixed: true,
|
|||
async: true, |
|||
priority: true, |
|||
formKey: true, |
|||
skipExpression: true, |
|||
dueDate: true, |
|||
taskListener: true |
|||
}, |
|||
'bpmn:ServiceTask': { |
|||
async: true, |
|||
skipExpression: true, |
|||
isForCompensation: true, |
|||
triggerable: true, |
|||
class: true |
|||
}, |
|||
'bpmn:ScriptTask': { |
|||
async: true, |
|||
isForCompensation: true, |
|||
autoStoreVariables: true |
|||
}, |
|||
'bpmn:ManualTask': { |
|||
async: true, |
|||
isForCompensation: true |
|||
}, |
|||
'bpmn:ReceiveTask': { |
|||
async: true, |
|||
isForCompensation: true |
|||
}, |
|||
'bpmn:SendTask': { |
|||
async: true, |
|||
isForCompensation: true |
|||
}, |
|||
'bpmn:BusinessRuleTask': { |
|||
async: true, |
|||
isForCompensation: true, |
|||
ruleVariablesInput: true, |
|||
rules: true, |
|||
resultVariable: true, |
|||
exclude: true |
|||
} |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
import workflowBpmnModeler from './index.vue' |
|||
|
|||
workflowBpmnModeler.install = Vue => Vue.component(workflowBpmnModeler.name, workflowBpmnModeler) // 给组件配置install方法
|
|||
|
|||
export default workflowBpmnModeler |
|||
@ -0,0 +1,467 @@ |
|||
<template> |
|||
<div v-loading="isView" class="flow-containers" :class="{ 'view-mode': isView }"> |
|||
<el-container style="height: 100%"> |
|||
<el-header style="border-bottom: 1px solid rgb(218 218 218);height: auto;"> |
|||
<div style="display: flex; padding: 10px 0px; justify-content: space-between;"> |
|||
{{xml}} <div> |
|||
<el-upload action="" :before-upload="openBpmn" style="margin-right: 10px; display:inline-block;"> |
|||
<el-tooltip effect="dark" content="加载xml" placement="bottom"> |
|||
<el-button size="mini" icon="el-icon-folder-opened" /> |
|||
</el-tooltip> |
|||
</el-upload> |
|||
<el-tooltip effect="dark" content="新建" placement="bottom"> |
|||
<el-button size="mini" icon="el-icon-circle-plus" @click="newDiagram" /> |
|||
</el-tooltip> |
|||
<el-tooltip effect="dark" content="自适应屏幕" placement="bottom"> |
|||
<el-button size="mini" icon="el-icon-rank" @click="fitViewport" /> |
|||
</el-tooltip> |
|||
<el-tooltip effect="dark" content="放大" placement="bottom"> |
|||
<el-button size="mini" icon="el-icon-zoom-in" @click="zoomViewport(true)" /> |
|||
</el-tooltip> |
|||
<el-tooltip effect="dark" content="缩小" placement="bottom"> |
|||
<el-button size="mini" icon="el-icon-zoom-out" @click="zoomViewport(false)" /> |
|||
</el-tooltip> |
|||
<el-tooltip effect="dark" content="后退" placement="bottom"> |
|||
<el-button size="mini" icon="el-icon-back" @click="modeler.get('commandStack').undo()" /> |
|||
</el-tooltip> |
|||
<el-tooltip effect="dark" content="前进" placement="bottom"> |
|||
<el-button size="mini" icon="el-icon-right" @click="modeler.get('commandStack').redo()" /> |
|||
</el-tooltip> |
|||
</div> |
|||
<div> |
|||
<el-button size="mini" icon="el-icon-view" @click="showXML">查看xml</el-button> |
|||
<el-button size="mini" icon="el-icon-download" @click="saveXML(true)">下载xml</el-button> |
|||
<el-button size="mini" icon="el-icon-picture" @click="saveImg('svg', true)">下载svg</el-button> |
|||
<el-button size="mini" type="primary" @click="save">保存模型</el-button> |
|||
</div> |
|||
</div> |
|||
</el-header> |
|||
<el-container style="align-items: stretch"> |
|||
<el-main style="padding: 0;"> |
|||
<div ref="canvas" class="canvas" /> |
|||
</el-main> |
|||
<el-aside style="width: 400px; min-height: 650px; background-color: #f0f2f5"> |
|||
<panel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :categorys="categorys" @dataType="dataType" /> |
|||
</el-aside> |
|||
</el-container> |
|||
</el-container> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
// 汉化 |
|||
import customTranslate from './common/customTranslate' |
|||
import Modeler from 'bpmn-js/lib/Modeler' |
|||
import panel from './PropertyPanel' |
|||
import BpmData from './BpmData' |
|||
import getInitStr from './flowable/init' |
|||
// 引入flowable的节点文件 |
|||
import flowableModdle from './flowable/flowable.json' |
|||
export default { |
|||
name: 'WorkflowBpmnModeler', |
|||
components: { |
|||
panel |
|||
}, |
|||
props: { |
|||
xml: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
users: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
groups: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
categorys: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
isView: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
taskList: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
modeler: null, |
|||
zoom: 1 |
|||
} |
|||
}, |
|||
watch: { |
|||
xml: function(val) { |
|||
if (val) { |
|||
this.createNewDiagram(val) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 生成实例 |
|||
this.modeler = new Modeler({ |
|||
container: this.$refs.canvas, |
|||
additionalModules: [ |
|||
{ |
|||
translate: ['value', customTranslate] |
|||
} |
|||
], |
|||
moddleExtensions: { |
|||
flowable: flowableModdle |
|||
} |
|||
}) |
|||
|
|||
console.log('1111111111111111111111111111111'); |
|||
console.log(this.xml); |
|||
console.log(this.taskList); |
|||
console.log('1111111111111111111111111111122'); |
|||
// 新增流程定义 |
|||
if (!this.xml) { |
|||
this.newDiagram() |
|||
} else { |
|||
this.createNewDiagram(this.xml) |
|||
} |
|||
}, |
|||
methods: { |
|||
newDiagram() { |
|||
this.createNewDiagram(getInitStr()) |
|||
}, |
|||
// 让图能自适应屏幕 |
|||
fitViewport() { |
|||
this.zoom = this.modeler.get('canvas').zoom('fit-viewport') |
|||
const bbox = document.querySelector('.flow-containers .viewport').getBBox() |
|||
const currentViewbox = this.modeler.get('canvas').viewbox() |
|||
const elementMid = { |
|||
x: bbox.x + bbox.width / 2 - 65, |
|||
y: bbox.y + bbox.height / 2 |
|||
} |
|||
this.modeler.get('canvas').viewbox({ |
|||
x: elementMid.x - currentViewbox.width / 2, |
|||
y: elementMid.y - currentViewbox.height / 2, |
|||
width: currentViewbox.width, |
|||
height: currentViewbox.height |
|||
}) |
|||
this.zoom = bbox.width / currentViewbox.width * 1.8 |
|||
}, |
|||
// 放大缩小 |
|||
zoomViewport(zoomIn = true) { |
|||
this.zoom = this.modeler.get('canvas').zoom() |
|||
this.zoom += (zoomIn ? 0.1 : -0.1) |
|||
this.modeler.get('canvas').zoom(this.zoom) |
|||
}, |
|||
async createNewDiagram(data) { |
|||
// 将字符串转换成图显示出来 |
|||
// data = data.replace(/<!\[CDATA\[(.+?)]]>/g, '<![CDATA[$1]]>') |
|||
data = data.replace(/<!\[CDATA\[(.+?)]]>/g, function(match, str) { |
|||
return str.replace(/</g, '<') |
|||
}) |
|||
try { |
|||
await this.modeler.importXML(data) |
|||
this.adjustPalette() |
|||
this.fitViewport() |
|||
if (this.taskList !==undefined && this.taskList.length > 0 ) { |
|||
this.fillColor() |
|||
} |
|||
} catch (err) { |
|||
console.error(err.message, err.warnings) |
|||
} |
|||
}, |
|||
// 调整左侧工具栏排版 |
|||
adjustPalette() { |
|||
try { |
|||
// 获取 bpmn 设计器实例 |
|||
const canvas = this.$refs.canvas |
|||
const djsPalette = canvas.children[0].children[1].children[4] |
|||
const djsPalStyle = { |
|||
width: '130px', |
|||
padding: '5px', |
|||
background: 'white', |
|||
left: '20px', |
|||
borderRadius: 0 |
|||
} |
|||
for (var key in djsPalStyle) { |
|||
djsPalette.style[key] = djsPalStyle[key] |
|||
} |
|||
const palette = djsPalette.children[0] |
|||
const allGroups = palette.children |
|||
allGroups[0].style['display'] = 'none' |
|||
// 修改控件样式 |
|||
for (var gKey in allGroups) { |
|||
const group = allGroups[gKey] |
|||
for (var cKey in group.children) { |
|||
const control = group.children[cKey] |
|||
const controlStyle = { |
|||
display: 'flex', |
|||
justifyContent: 'flex-start', |
|||
alignItems: 'center', |
|||
width: '100%', |
|||
padding: '5px' |
|||
} |
|||
if ( |
|||
control.className && |
|||
control.dataset && |
|||
control.className.indexOf('entry') !== -1 |
|||
) { |
|||
const controlProps = new BpmData().getControl( |
|||
control.dataset.action |
|||
) |
|||
control.innerHTML = `<div style='font-size: 14px;font-weight:500;margin-left:15px;'>${ |
|||
controlProps['title'] |
|||
}</div>` |
|||
for (var csKey in controlStyle) { |
|||
control.style[csKey] = controlStyle[csKey] |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} catch (e) { |
|||
console.log(e) |
|||
} |
|||
}, |
|||
fillColor() { |
|||
const canvas = this.modeler.get('canvas') |
|||
this.modeler._definitions.rootElements[0].flowElements.forEach(n => { |
|||
const completeTask = this.taskList.find(m => m.key === n.id) |
|||
const todoTask = this.taskList.find(m => !m.completed) |
|||
const endTask = this.taskList[this.taskList.length - 1] |
|||
if (n.$type === 'bpmn:UserTask') { |
|||
if (completeTask) { |
|||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') |
|||
n.outgoing?.forEach(nn => { |
|||
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id) |
|||
if (targetTask) { |
|||
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){ |
|||
canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo') |
|||
canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo') |
|||
}else { |
|||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo') |
|||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo') |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
// 排他网关 |
|||
else if (n.$type === 'bpmn:ExclusiveGateway') { |
|||
if (completeTask) { |
|||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') |
|||
n.outgoing?.forEach(nn => { |
|||
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id) |
|||
if (targetTask) { |
|||
|
|||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo') |
|||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo') |
|||
} |
|||
|
|||
}) |
|||
} |
|||
|
|||
} |
|||
// 并行网关 |
|||
else if (n.$type === 'bpmn:ParallelGateway') { |
|||
if (completeTask) { |
|||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') |
|||
n.outgoing?.forEach(nn => { |
|||
debugger |
|||
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id) |
|||
if (targetTask) { |
|||
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo') |
|||
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo') |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
else if (n.$type === 'bpmn:StartEvent') { |
|||
n.outgoing.forEach(nn => { |
|||
const completeTask = this.taskList.find(m => m.key === nn.targetRef.id) |
|||
if (completeTask) { |
|||
canvas.addMarker(nn.id, 'highlight') |
|||
canvas.addMarker(n.id, 'highlight') |
|||
return |
|||
} |
|||
}) |
|||
} |
|||
else if (n.$type === 'bpmn:EndEvent') { |
|||
if (endTask.key === n.id && endTask.completed) { |
|||
canvas.addMarker(n.id, 'highlight') |
|||
return |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
// 对外 api |
|||
getProcess() { |
|||
const element = this.getProcessElement() |
|||
return { |
|||
id: element.id, |
|||
name: element.name, |
|||
category: element.$attrs['flowable:processCategory'] |
|||
} |
|||
}, |
|||
getProcessElement() { |
|||
const rootElements = this.modeler.getDefinitions().rootElements |
|||
for (let i = 0; i < rootElements.length; i++) { |
|||
if (rootElements[i].$type === 'bpmn:Process') return rootElements[i] |
|||
} |
|||
}, |
|||
async saveXML(download = false) { |
|||
try { |
|||
const { xml } = await this.modeler.saveXML({ format: true }) |
|||
if (download) { |
|||
this.downloadFile(`${this.getProcessElement().name}.bpmn20.xml`, xml, 'application/xml') |
|||
} |
|||
return xml |
|||
} catch (err) { |
|||
console.log(err) |
|||
} |
|||
}, |
|||
async showXML() { |
|||
try { |
|||
const { xml } = await this.modeler.saveXML({ format: true }) |
|||
debugger |
|||
this.$emit('showXML',xml) |
|||
} catch (err) { |
|||
console.log(err) |
|||
} |
|||
}, |
|||
async saveImg(type = 'svg', download = false) { |
|||
try { |
|||
const { svg } = await this.modeler.saveSVG({ format: true }) |
|||
if (download) { |
|||
this.downloadFile(this.getProcessElement().name, svg, 'image/svg+xml') |
|||
} |
|||
return svg |
|||
} catch (err) { |
|||
console.log(err) |
|||
} |
|||
}, |
|||
async save() { |
|||
const process = this.getProcess() |
|||
const xml = await this.saveXML() |
|||
const svg = await this.saveImg() |
|||
const result = { process, xml, svg } |
|||
this.$emit('save', result) |
|||
window.parent.postMessage(result, '*') |
|||
}, |
|||
openBpmn(file) { |
|||
const reader = new FileReader() |
|||
reader.readAsText(file, 'utf-8') |
|||
reader.onload = () => { |
|||
this.createNewDiagram(reader.result) |
|||
} |
|||
return false |
|||
}, |
|||
downloadFile(filename, data, type) { |
|||
var a = document.createElement('a') |
|||
var url = window.URL.createObjectURL(new Blob([data], { type: type })) |
|||
a.href = url |
|||
a.download = filename |
|||
a.click() |
|||
window.URL.revokeObjectURL(url) |
|||
}, |
|||
/** 获取数据类型 */ |
|||
dataType(data){ |
|||
this.$emit('dataType', data) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
/*左边工具栏以及编辑节点的样式*/ |
|||
@import "~bpmn-js/dist/assets/diagram-js.css"; |
|||
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css"; |
|||
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css"; |
|||
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css"; |
|||
.view-mode { |
|||
.el-header, .el-aside, .djs-palette, .bjs-powered-by { |
|||
display: none; |
|||
} |
|||
.el-loading-mask { |
|||
background-color: initial; |
|||
} |
|||
.el-loading-spinner { |
|||
display: none; |
|||
} |
|||
} |
|||
.flow-containers { |
|||
// background-color: #ffffff; |
|||
width: 100%; |
|||
height: 100%; |
|||
.canvas { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.panel { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 50px; |
|||
width: 300px; |
|||
} |
|||
.load { |
|||
margin-right: 10px; |
|||
} |
|||
.el-form-item__label{ |
|||
font-size: 13px; |
|||
} |
|||
|
|||
.djs-palette{ |
|||
left: 0px!important; |
|||
top: 0px; |
|||
border-top: none; |
|||
} |
|||
|
|||
.djs-container svg { |
|||
min-height: 650px; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
// .djs-connection > .djs-visual > path { |
|||
// stroke: orange !important; |
|||
// stroke-dasharray: 4px !important; |
|||
// fill-opacity: 0.2 !important; |
|||
// } |
|||
// .djs-shape .djs-visual > :nth-child(1) { |
|||
// fill: orange !important; |
|||
// stroke: orange !important; |
|||
// stroke-dasharray: 4px !important; |
|||
// fill-opacity: 0.2 !important; |
|||
// } |
|||
.highlight-todo.djs-connection > .djs-visual > path { |
|||
stroke: orange !important; |
|||
stroke-dasharray: 4px !important; |
|||
fill-opacity: 0.2 !important; |
|||
} |
|||
.highlight-todo.djs-shape .djs-visual > :nth-child(1) { |
|||
fill: orange !important; |
|||
stroke: orange !important; |
|||
stroke-dasharray: 4px !important; |
|||
fill-opacity: 0.2 !important; |
|||
} |
|||
.overlays-div { |
|||
font-size: 10px; |
|||
color: red; |
|||
width: 100px; |
|||
top: -20px !important; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,227 @@ |
|||
export default { |
|||
// Labels
|
|||
'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 Gateway': '创建网关', |
|||
'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': '默认值', |
|||
'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': '变量' |
|||
} |
|||
|
|||
export const NodeName = { |
|||
'bpmn:Process': '流程', |
|||
'bpmn:StartEvent': '开始事件', |
|||
'bpmn:IntermediateThrowEvent': '中间事件', |
|||
'bpmn:Task': '任务', |
|||
'bpmn:SendTask': '发送任务', |
|||
'bpmn:ReceiveTask': '接收任务', |
|||
'bpmn:UserTask': '用户任务', |
|||
'bpmn:ManualTask': '手工任务', |
|||
'bpmn:BusinessRuleTask': '业务规则任务', |
|||
'bpmn:ServiceTask': '服务任务', |
|||
'bpmn:ScriptTask': '脚本任务', |
|||
'bpmn:EndEvent': '结束事件', |
|||
'bpmn:SequenceFlow': '流程线', |
|||
'bpmn:ExclusiveGateway': '互斥网关', |
|||
'bpmn:ParallelGateway': '并行网关', |
|||
'bpmn:InclusiveGateway': '相容网关', |
|||
'bpmn:ComplexGateway': '复杂网关', |
|||
'bpmn:EventBasedGateway': '事件网关' |
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
<template> |
|||
<div> |
|||
<bpmn-modeler |
|||
ref="refNode" |
|||
:xml="xmlData" |
|||
:is-view="true" |
|||
:taskList="taskData" |
|||
/> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import bpmnModeler from '@/views/Process/index' |
|||
export default { |
|||
name: "Flow", |
|||
components: { |
|||
bpmnModeler |
|||
}, |
|||
props: { |
|||
xmlData: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
taskData: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
data() { |
|||
return {}; |
|||
} |
|||
}; |
|||
</script> |
|||
Loading…
Reference in new issue