Skip to content

Commit 4835316

Browse files
YunaiVgitee-org
authored andcommitted
!610 bpmn设计器适配simple设计器
Merge pull request !610 from Lesan/feature/bpm
2 parents 9bdafb0 + e8315e2 commit 4835316

File tree

5 files changed

+246
-18
lines changed

5 files changed

+246
-18
lines changed

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1357,6 +1357,62 @@
13571357
"isBody": true
13581358
}
13591359
]
1360+
},
1361+
{
1362+
"name": "ApproveType",
1363+
"superClass": ["Element"],
1364+
"meta": {
1365+
"allowedIn": ["bpmn:UserTask"]
1366+
},
1367+
"properties": [
1368+
{
1369+
"name": "value",
1370+
"type": "Integer",
1371+
"isBody": true
1372+
}
1373+
]
1374+
},
1375+
{
1376+
"name": "ApproveMethod",
1377+
"superClass": ["Element"],
1378+
"meta": {
1379+
"allowedIn": ["bpmn:UserTask"]
1380+
},
1381+
"properties": [
1382+
{
1383+
"name": "value",
1384+
"type": "Integer",
1385+
"isBody": true
1386+
}
1387+
]
1388+
},
1389+
{
1390+
"name": "CandidateStrategy",
1391+
"superClass": ["Element"],
1392+
"meta": {
1393+
"allowedIn": ["bpmn:UserTask"]
1394+
},
1395+
"properties": [
1396+
{
1397+
"name": "value",
1398+
"type": "Integer",
1399+
"isBody": true
1400+
}
1401+
]
1402+
},
1403+
{
1404+
"name": "CandidateParam",
1405+
"superClass": ["Element"],
1406+
"meta": {
1407+
"allowedIn": ["bpmn:UserTask"]
1408+
},
1409+
"properties": [
1410+
{
1411+
"name": "value",
1412+
"type": "String",
1413+
"isBody": true
1414+
}
1415+
]
13601416
}
13611417
],
13621418
"emumerations": []

src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
key="multiInstance"
3737
>
3838
<template #title><Icon icon="ep:help-filled" />多实例(会签配置)</template>
39-
<element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
39+
<element-multi-instance :id="elementId" :business-object="elementBusinessObject" :type="elementType" />
4040
</el-collapse-item>
4141
<el-collapse-item name="listeners" key="listeners">
4242
<template #title><Icon icon="ep:bell-filled" />执行监听器</template>

src/components/bpmnProcessDesigner/package/penal/custom-config/components/UserTask.vue

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ const { buttonsSetting, btnDisplayNameEdit, changeBtnDisplayName, btnDisplayName
193193
useButtonsSetting()
194194
195195
// 字段权限
196-
const fieldsPermissionEl = ref()
196+
const fieldsPermissionEl = ref([])
197197
const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFieldsPermission(
198198
FieldPermissionType.READ
199199
)
@@ -246,7 +246,7 @@ const resetCustomConfigList = () => {
246246
elExtensionElements.value.values?.filter(
247247
(ex) => ex.$type === `${prefix}:AssignEmptyUserIds`
248248
)?.[0] || bpmnInstances().moddle.create(`${prefix}:AssignEmptyUserIds`, { value: '' })
249-
assignEmptyUserIds.value = assignEmptyUserIdsEl.value.value.split(',').map((item) => {
249+
assignEmptyUserIds.value = assignEmptyUserIdsEl.value.value?.split(',').map((item) => {
250250
// 如果数字超出了最大安全整数范围,则将其作为字符串处理
251251
let num = Number(item)
252252
return num > Number.MAX_SAFE_INTEGER || num < -Number.MAX_SAFE_INTEGER ? item : num
@@ -270,17 +270,18 @@ const resetCustomConfigList = () => {
270270
271271
// 字段权限
272272
if (formType.value === 10) {
273-
fieldsPermissionEl.value = elExtensionElements.value.values?.filter(
273+
const fieldsPermissionList = elExtensionElements.value.values?.filter(
274274
(ex) => ex.$type === `${prefix}:FieldsPermission`
275275
)
276-
if (fieldsPermissionEl.value.length === 0) {
277-
getNodeConfigFormFields()
278-
fieldsPermissionConfig.value.forEach((el) => {
279-
fieldsPermissionEl.value.push(
280-
bpmnInstances().moddle.create(`${prefix}:FieldsPermission`, el)
281-
)
282-
})
283-
}
276+
fieldsPermissionEl.value = []
277+
getNodeConfigFormFields()
278+
fieldsPermissionConfig.value.forEach((element) => {
279+
element.permission =
280+
fieldsPermissionList?.find((obj) => obj.field === element.field)?.permission ?? '1'
281+
fieldsPermissionEl.value.push(
282+
bpmnInstances().moddle.create(`${prefix}:FieldsPermission`, element)
283+
)
284+
})
284285
}
285286
286287
// 保留剩余扩展元素,便于后面更新该元素对应属性

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

Lines changed: 127 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,30 @@
11
<template>
22
<div class="panel-tab__content">
3-
<el-form label-width="90px">
3+
<el-radio-group v-model="approveMethod" @change="onApproveMethodChange">
4+
<div class="flex-col">
5+
<div v-for="(item, index) in APPROVE_METHODS" :key="index">
6+
<el-radio :value="item.value" :label="item.value">
7+
{{ item.label }}
8+
</el-radio>
9+
<el-form-item prop="approveRatio">
10+
<el-input-number
11+
v-model="approveRatio"
12+
:min="10"
13+
:max="100"
14+
:step="10"
15+
size="small"
16+
v-if="
17+
item.value === ApproveMethodType.APPROVE_BY_RATIO &&
18+
approveMethod === ApproveMethodType.APPROVE_BY_RATIO
19+
"
20+
@change="onApproveRatioChange"
21+
/>
22+
</el-form-item>
23+
</div>
24+
</div>
25+
</el-radio-group>
26+
<!-- 与Simple设计器配置合并,保留以前的代码 -->
27+
<el-form label-width="90px" style="display: none">
428
<el-form-item label="快捷配置">
529
<el-button size="small" @click="changeConfig('依次审批')">依次审批</el-button>
630
<el-button size="small" @click="changeConfig('会签')">会签</el-button>
@@ -76,11 +100,14 @@
76100
</template>
77101

78102
<script lang="ts" setup>
103+
import { ApproveMethodType, APPROVE_METHODS } from '@/components/SimpleProcessDesignerV2/src/consts'
104+
79105
defineOptions({ name: 'ElementMultiInstance' })
80106
81107
const props = defineProps({
82108
businessObject: Object,
83-
type: String
109+
type: String,
110+
id: String
84111
})
85112
const prefix = inject('prefix')
86113
const loopCharacteristics = ref('')
@@ -267,16 +294,111 @@ const changeConfig = (config) => {
267294
}
268295
}
269296
297+
/**
298+
* -----新版本多实例-----
299+
*/
300+
const approveMethod = ref()
301+
const approveRatio = ref(100)
302+
const otherExtensions = ref()
303+
const getElementLoopNew = () => {
304+
const extensionElements = bpmnElement.value.businessObject?.extensionElements ?? []
305+
approveMethod.value = extensionElements.values.filter(
306+
(ex) => ex.$type === `${prefix}:ApproveMethod`
307+
)?.[0]?.value
308+
309+
otherExtensions.value =
310+
extensionElements.values.filter((ex) => ex.$type !== `${prefix}:ApproveMethod`) ?? []
311+
}
312+
const onApproveMethodChange = () => {
313+
approveRatio.value = 100
314+
updateLoopCharacteristics()
315+
}
316+
const onApproveRatioChange = () => {
317+
updateLoopCharacteristics()
318+
}
319+
const updateLoopCharacteristics = () => {
320+
// 根据ApproveMethod生成multiInstanceLoopCharacteristics节点
321+
if (approveMethod.value === ApproveMethodType.RANDOM_SELECT_ONE_APPROVE) {
322+
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
323+
loopCharacteristics: null
324+
})
325+
} else {
326+
if (approveMethod.value === ApproveMethodType.APPROVE_BY_RATIO) {
327+
multiLoopInstance.value = bpmnInstances().moddle.create(
328+
'bpmn:MultiInstanceLoopCharacteristics',
329+
{ isSequential: false, collection: '${coll_userList}' }
330+
)
331+
multiLoopInstance.value.completionCondition = bpmnInstances().moddle.create(
332+
'bpmn:FormalExpression',
333+
{
334+
body: '${ nrOfCompletedInstances/nrOfInstances >= ' + approveRatio.value / 100 + '}'
335+
}
336+
)
337+
}
338+
if (approveMethod.value === ApproveMethodType.ANY_APPROVE) {
339+
multiLoopInstance.value = bpmnInstances().moddle.create(
340+
'bpmn:MultiInstanceLoopCharacteristics',
341+
{ isSequential: false, collection: '${coll_userList}' }
342+
)
343+
multiLoopInstance.value.completionCondition = bpmnInstances().moddle.create(
344+
'bpmn:FormalExpression',
345+
{
346+
body: '${ nrOfCompletedInstances > 0 }'
347+
}
348+
)
349+
}
350+
if (approveMethod.value === ApproveMethodType.SEQUENTIAL_APPROVE) {
351+
multiLoopInstance.value = bpmnInstances().moddle.create(
352+
'bpmn:MultiInstanceLoopCharacteristics',
353+
{ isSequential: true, collection: '${coll_userList}' }
354+
)
355+
multiLoopInstance.value.loopCardinality = bpmnInstances().moddle.create(
356+
'bpmn:FormalExpression',
357+
{
358+
body: '1'
359+
}
360+
)
361+
multiLoopInstance.value.completionCondition = bpmnInstances().moddle.create(
362+
'bpmn:FormalExpression',
363+
{
364+
body: '${ nrOfCompletedInstances >= nrOfInstances }'
365+
}
366+
)
367+
}
368+
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
369+
loopCharacteristics: toRaw(multiLoopInstance.value)
370+
})
371+
}
372+
373+
// 添加ApproveMethod到ExtensionElements
374+
const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
375+
values: [
376+
...otherExtensions.value,
377+
bpmnInstances().moddle.create(`${prefix}:ApproveMethod`, {
378+
value: approveMethod.value
379+
})
380+
]
381+
})
382+
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
383+
extensionElements: extensions
384+
})
385+
}
386+
270387
onBeforeUnmount(() => {
271388
multiLoopInstance.value = null
272389
bpmnElement.value = null
273390
})
274391
275392
watch(
276-
() => props.businessObject,
393+
() => props.id,
277394
(val) => {
278-
bpmnElement.value = bpmnInstances().bpmnElement
279-
getElementLoop(val)
395+
if (val) {
396+
nextTick(() => {
397+
bpmnElement.value = bpmnInstances().bpmnElement
398+
// getElementLoop(val)
399+
getElementLoopNew()
400+
})
401+
}
280402
},
281403
{ immediate: true }
282404
)

src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@ const props = defineProps({
142142
id: String,
143143
type: String
144144
})
145+
const prefix = inject('prefix')
145146
const userTaskForm = ref({
146147
candidateStrategy: undefined, // 分配规则
147148
candidateParam: [] // 分配选项
@@ -154,12 +155,43 @@ const deptTreeOptions = ref() // 部门树
154155
const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
155156
const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
156157
const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
158+
const otherExtensions = ref()
157159
158160
const resetTaskForm = () => {
159161
const businessObject = bpmnElement.value.businessObject
160162
if (!businessObject) {
161163
return
162164
}
165+
166+
const extensionElements = businessObject?.extensionElements ?? []
167+
userTaskForm.value.candidateStrategy = extensionElements.values?.filter(
168+
(ex) => ex.$type === `${prefix}:CandidateStrategy`
169+
)?.[0]?.value
170+
const candidateParamStr = extensionElements.values?.filter(
171+
(ex) => ex.$type === `${prefix}:CandidateParam`
172+
)?.[0]?.value
173+
if (candidateParamStr && candidateParamStr.length > 0) {
174+
if (userTaskForm.value.candidateStrategy === 60) {
175+
// 特殊:流程表达式,只有一个 input 输入框
176+
userTaskForm.value.candidateParam = [candidateParamStr]
177+
} else {
178+
userTaskForm.value.candidateParam = candidateParamStr.split(',').map((item) => {
179+
// 如果数字超出了最大安全整数范围,则将其作为字符串处理
180+
let num = Number(item)
181+
return num > Number.MAX_SAFE_INTEGER || num < -Number.MAX_SAFE_INTEGER ? item : num
182+
})
183+
}
184+
} else {
185+
userTaskForm.value.candidateParam = []
186+
}
187+
188+
otherExtensions.value =
189+
extensionElements.values?.filter(
190+
(ex) => ex.$type !== `${prefix}:CandidateStrategy` && ex.$type !== `${prefix}:CandidateParam`
191+
) ?? []
192+
193+
// 改用通过extensionElements来存储数据
194+
return
163195
if (businessObject.candidateStrategy != undefined) {
164196
userTaskForm.value.candidateStrategy = parseInt(businessObject.candidateStrategy) as any
165197
} else {
@@ -172,7 +204,7 @@ const resetTaskForm = () => {
172204
} else {
173205
userTaskForm.value.candidateParam = businessObject.candidateParam
174206
.split(',')
175-
.map((item) => +item)
207+
.map((item) => item)
176208
}
177209
} else {
178210
userTaskForm.value.candidateParam = []
@@ -187,6 +219,23 @@ const changeCandidateStrategy = () => {
187219
188220
/** 选中某个 options 时候,更新 bpmn 图 */
189221
const updateElementTask = () => {
222+
const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
223+
values: [
224+
...otherExtensions.value,
225+
bpmnInstances().moddle.create(`${prefix}:CandidateStrategy`, {
226+
value: userTaskForm.value.candidateStrategy
227+
}),
228+
bpmnInstances().moddle.create(`${prefix}:CandidateParam`, {
229+
value: userTaskForm.value.candidateParam.join(',')
230+
})
231+
]
232+
})
233+
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
234+
extensionElements: extensions
235+
})
236+
237+
// 改用通过extensionElements来存储数据
238+
return
190239
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
191240
candidateStrategy: userTaskForm.value.candidateStrategy,
192241
candidateParam: userTaskForm.value.candidateParam.join(',')

0 commit comments

Comments
 (0)