Skip to content

Commit a389392

Browse files
LesanOuOLesanOuO
committed
feat: bpmn设计器添加CallActivity支持
1 parent 5d31881 commit a389392

File tree

2 files changed

+297
-4
lines changed

2 files changed

+297
-4
lines changed

‎src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -406,6 +406,31 @@
406406
"name": "variableMappingDelegateExpression",
407407
"isAttr": true,
408408
"type": "String"
409+
},
410+
{
411+
"name": "calledElementType",
412+
"isAttr": true,
413+
"type": "String"
414+
},
415+
{
416+
"name": "processInstanceName",
417+
"isAttr": true,
418+
"type": "String"
419+
},
420+
{
421+
"name": "inheritBusinessKey",
422+
"isAttr": true,
423+
"type": "Boolean"
424+
},
425+
{
426+
"name": "businessKey",
427+
"isAttr": true,
428+
"type": "String"
429+
},
430+
{
431+
"name": "inheritVariables",
432+
"isAttr": true,
433+
"type": "Boolean"
409434
}
410435
]
411436
},

‎src/components/bpmnProcessDesigner/package/penal/task/task-components/CallActivity.vue

Lines changed: 272 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,280 @@
11
<template>
22
<div>
3+
<el-form label-width="100px">
4+
<el-form-item label="实例名称" prop="processInstanceName">
5+
<el-input
6+
v-model="formData.processInstanceName"
7+
clearable
8+
placeholder="请输入实例名称"
9+
@change="updateCallActivityAttr('processInstanceName')"
10+
/>
11+
</el-form-item>
12+
13+
<!-- TODO 需要可选择已存在的流程 -->
14+
<el-form-item label="被调用流程" prop="calledElement">
15+
<el-input
16+
v-model="formData.calledElement"
17+
clearable
18+
placeholder="请输入被调用流程"
19+
@change="updateCallActivityAttr('calledElement')"
20+
/>
21+
</el-form-item>
22+
23+
<el-form-item label="继承变量" prop="inheritVariables">
24+
<el-switch
25+
v-model="formData.inheritVariables"
26+
@change="updateCallActivityAttr('inheritVariables')"
27+
/>
28+
</el-form-item>
29+
30+
<el-form-item label="继承业务键" prop="inheritBusinessKey">
31+
<el-switch
32+
v-model="formData.inheritBusinessKey"
33+
@change="updateCallActivityAttr('inheritBusinessKey')"
34+
/>
35+
</el-form-item>
36+
37+
<el-form-item v-if="!formData.inheritBusinessKey" label="业务键表达式" prop="businessKey">
38+
<el-input
39+
v-model="formData.businessKey"
40+
clearable
41+
placeholder="请输入业务键表达式"
42+
@change="updateCallActivityAttr('businessKey')"
43+
/>
44+
</el-form-item>
45+
46+
<el-divider />
47+
<div>
48+
<div class="flex mb-10px">
49+
<el-text>输入参数</el-text>
50+
<XButton
51+
class="ml-auto"
52+
type="primary"
53+
preIcon="ep:plus"
54+
title="添加参数"
55+
size="small"
56+
@click="openVariableForm('in', null, -1)"
57+
/>
58+
</div>
59+
<el-table :data="inVariableList" max-height="240" fit border>
60+
<el-table-column label="源" prop="source" min-width="100px" show-overflow-tooltip />
61+
<el-table-column label="目标" prop="target" min-width="100px" show-overflow-tooltip />
62+
<el-table-column label="操作" width="110px">
63+
<template #default="scope">
64+
<el-button link @click="openVariableForm('in', scope.row, scope.$index)" size="small">
65+
编辑
66+
</el-button>
67+
<el-divider direction="vertical" />
68+
<el-button
69+
link
70+
size="small"
71+
style="color: #ff4d4f"
72+
@click="removeVariable('in', scope.$index)"
73+
>
74+
移除
75+
</el-button>
76+
</template>
77+
</el-table-column>
78+
</el-table>
79+
</div>
80+
81+
<el-divider />
82+
<div>
83+
<div class="flex mb-10px">
84+
<el-text>输出参数</el-text>
85+
<XButton
86+
class="ml-auto"
87+
type="primary"
88+
preIcon="ep:plus"
89+
title="添加参数"
90+
size="small"
91+
@click="openVariableForm('out', null, -1)"
92+
/>
93+
</div>
94+
<el-table :data="outVariableList" max-height="240" fit border>
95+
<el-table-column label="源" prop="source" min-width="100px" show-overflow-tooltip />
96+
<el-table-column label="目标" prop="target" min-width="100px" show-overflow-tooltip />
97+
<el-table-column label="操作" width="110px">
98+
<template #default="scope">
99+
<el-button
100+
link
101+
@click="openVariableForm('out', scope.row, scope.$index)"
102+
size="small"
103+
>
104+
编辑
105+
</el-button>
106+
<el-divider direction="vertical" />
107+
<el-button
108+
link
109+
size="small"
110+
style="color: #ff4d4f"
111+
@click="removeVariable('out', scope.$index)"
112+
>
113+
移除
114+
</el-button>
115+
</template>
116+
</el-table-column>
117+
</el-table>
118+
</div>
119+
</el-form>
120+
121+
<!-- 添加或修改参数 -->
122+
<el-dialog
123+
v-model="variableDialogVisible"
124+
title="参数配置"
125+
width="600px"
126+
append-to-body
127+
destroy-on-close
128+
>
129+
<el-form :model="varialbeFormData" label-width="80px" ref="varialbeFormRef">
130+
<el-form-item label="源：" prop="source">
131+
<el-input v-model="varialbeFormData.source" clearable />
132+
</el-form-item>
133+
<el-form-item label="目标：" prop="target">
134+
<el-input v-model="varialbeFormData.target" clearable />
135+
</el-form-item>
136+
</el-form>
137+
<template #footer>
138+
<el-button @click="variableDialogVisible = false">取 消</el-button>
139+
<el-button type="primary" @click="saveVariable">确 定</el-button>
140+
</template>
141+
</el-dialog>
3142
</div>
4143
</template>
5144

6-
<script setup>
145+
<script lang="ts" setup>
146+
defineOptions({ name: 'CallActivity' })
147+
const props = defineProps({
148+
id: String,
149+
type: String
150+
})
151+
const prefix = inject('prefix')
152+
const message = useMessage()
7153
8-
</script>
154+
const formData = ref({
155+
processInstanceName: '',
156+
calledElement: '',
157+
inheritVariables: false,
158+
businessKey: '',
159+
inheritBusinessKey: false,
160+
calledElementType: 'key'
161+
})
162+
const inVariableList = ref()
163+
const outVariableList = ref()
164+
const variableType = ref() // 参数类型
165+
const editingVariableIndex = ref(-1) // 编辑参数下标
166+
const variableDialogVisible = ref(false)
167+
const varialbeFormRef = ref()
168+
const varialbeFormData = ref({
169+
source: '',
170+
target: ''
171+
})
172+
173+
const bpmnInstances = () => (window as any)?.bpmnInstances
174+
const bpmnElement = ref()
175+
const otherExtensionList = ref()
176+
177+
const initCallActivity = () => {
178+
bpmnElement.value = bpmnInstances().bpmnElement
179+
console.log(bpmnElement.value.businessObject, 'callActivity')
9180
10-
<style lang="scss" scoped>
181+
// 初始化所有配置项
182+
Object.keys(formData.value).forEach((key) => {
183+
formData.value[key] = bpmnElement.value.businessObject[key] ?? formData.value[key]
184+
})
185+
186+
otherExtensionList.value = [] // 其他扩展配置
187+
inVariableList.value = []
188+
outVariableList.value = []
189+
// 初始化输入参数
190+
bpmnElement.value.businessObject?.extensionElements?.values?.forEach((ex) => {
191+
if (ex.$type === `${prefix}:In`) {
192+
inVariableList.value.push(ex)
193+
} else if (ex.$type === `${prefix}:Out`) {
194+
outVariableList.value.push(ex)
195+
} else {
196+
otherExtensionList.value.push(ex)
197+
}
198+
})
199+
200+
// 默认添加
201+
// bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
202+
// calledElementType: 'key'
203+
// })
204+
}
205+
206+
const updateCallActivityAttr = (attr) => {
207+
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
208+
[attr]: formData.value[attr]
209+
})
210+
}
211+
212+
const openVariableForm = (type, data, index) => {
213+
editingVariableIndex.value = index
214+
variableType.value = type
215+
varialbeFormData.value = index === -1 ? {} : { ...data }
216+
variableDialogVisible.value = true
217+
}
218+
219+
const removeVariable = async (type, index) => {
220+
try {
221+
await message.delConfirm()
222+
if (type === 'in') {
223+
inVariableList.value.splice(index, 1)
224+
}
225+
if (type === 'out') {
226+
outVariableList.value.splice(index, 1)
227+
}
228+
updateElementExtensions()
229+
} catch {}
230+
}
231+
232+
const saveVariable = () => {
233+
if (editingVariableIndex.value === -1) {
234+
if (variableType.value === 'in') {
235+
inVariableList.value.push(
236+
bpmnInstances().moddle.create(`${prefix}:In`, { ...varialbeFormData.value })
237+
)
238+
}
239+
if (variableType.value === 'out') {
240+
outVariableList.value.push(
241+
bpmnInstances().moddle.create(`${prefix}:Out`, { ...varialbeFormData.value })
242+
)
243+
}
244+
updateElementExtensions()
245+
} else {
246+
if (variableType.value === 'in') {
247+
inVariableList.value[editingVariableIndex.value].source = varialbeFormData.value.source
248+
inVariableList.value[editingVariableIndex.value].target = varialbeFormData.value.target
249+
}
250+
if (variableType.value === 'out') {
251+
outVariableList.value[editingVariableIndex.value].source = varialbeFormData.value.source
252+
outVariableList.value[editingVariableIndex.value].target = varialbeFormData.value.target
253+
}
254+
}
255+
variableDialogVisible.value = false
256+
}
257+
258+
const updateElementExtensions = () => {
259+
const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
260+
values: [...inVariableList.value, ...outVariableList.value, ...otherExtensionList.value]
261+
})
262+
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
263+
extensionElements: extensions
264+
})
265+
}
266+
267+
watch(
268+
() => props.id,
269+
(val) => {
270+
val &&
271+
val.length &&
272+
nextTick(() => {
273+
initCallActivity()
274+
})
275+
},
276+
{ immediate: true }
277+
)
278+
</script>
11279

12-
</style>
280+
<style lang="scss" scoped></style>

0 commit comments

Comments
 (0)