Skip to content

Commit 4e2d21a

Browse files
YunaiVYunaiV
authored
Merge pull request #204 from zhanglc0618/fix/lost-properties
fix: 【bpm】bpmn设计器: 组件部分属性第一次失去焦点丢失数据问题
2 parents f48e6a2 + 5e6c5c0 commit 4e2d21a

File tree

4 files changed

+83
-36
lines changed

4 files changed

+83
-36
lines changed

‎src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue‎

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -282,21 +282,26 @@ const editingListenerIndex = ref(-1) // 监听器所在下标，-1 为新增
282282
const editingListenerFieldIndex = ref(-1) // 字段所在下标，-1 为新增
283283
const listenerTypeObject = ref(listenerType)
284284
const fieldTypeObject = ref(fieldType)
285-
const bpmnElement = ref()
286285
const otherExtensionList = ref()
287286
const bpmnElementListeners = ref()
288287
const listenerFormRef = ref()
289288
const listenerFieldFormRef = ref()
290289
const bpmnInstances = () => (window as any)?.bpmnInstances
291290
292291
const resetListenersList = () => {
293-
bpmnElement.value = bpmnInstances().bpmnElement
292+
const instances = bpmnInstances()
293+
if (!instances || !instances.bpmnElement) return
294+
295+
// 直接使用原始BPMN元素，避免Vue响应式代理问题
296+
const bpmnElement = instances.bpmnElement
297+
const businessObject = bpmnElement.businessObject
298+
294299
otherExtensionList.value =
295-
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
300+
businessObject?.extensionElements?.values?.filter(
296301
(ex) => ex.$type !== `${prefix}:ExecutionListener`
297302
) ?? [] // 保留非监听器类型的扩展属性，避免移除监听器时清空其他配置（如审批人等）。相关案例：https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues/ICMSYC
298303
bpmnElementListeners.value =
299-
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
304+
businessObject?.extensionElements?.values?.filter(
300305
(ex) => ex.$type === `${prefix}:ExecutionListener`
301306
) ?? []
302307
elementListenersList.value = bpmnElementListeners.value.map((listener) =>
@@ -378,10 +383,13 @@ const removeListener = (index) => {
378383
cancelButtonText: '取 消'
379384
})
380385
.then(() => {
386+
const instances = bpmnInstances()
387+
if (!instances || !instances.bpmnElement) return
388+
381389
bpmnElementListeners.value.splice(index, 1)
382390
elementListenersList.value.splice(index, 1)
383391
updateElementExtensions(
384-
bpmnElement.value,
392+
instances.bpmnElement,
385393
otherExtensionList.value.concat(bpmnElementListeners.value)
386394
)
387395
})
@@ -392,7 +400,13 @@ const saveListenerConfig = async () => {
392400
// debugger
393401
let validateStatus = await listenerFormRef.value.validate()
394402
if (!validateStatus) return // 验证不通过直接返回
403+
404+
const instances = bpmnInstances()
405+
if (!instances || !instances.bpmnElement) return
406+
407+
const bpmnElement = instances.bpmnElement
395408
const listenerObject = createListenerObject(listenerForm.value, false, prefix)
409+
396410
if (editingListenerIndex.value === -1) {
397411
bpmnElementListeners.value.push(listenerObject)
398412
elementListenersList.value.push(listenerForm.value)
@@ -402,11 +416,11 @@ const saveListenerConfig = async () => {
402416
}
403417
// 保存其他配置
404418
otherExtensionList.value =
405-
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
419+
bpmnElement.businessObject?.extensionElements?.values?.filter(
406420
(ex) => ex.$type !== `${prefix}:ExecutionListener`
407421
) ?? []
408422
updateElementExtensions(
409-
bpmnElement.value,
423+
bpmnElement,
410424
otherExtensionList.value.concat(bpmnElementListeners.value)
411425
)
412426
// 4. 隐藏侧边栏
@@ -420,18 +434,22 @@ const openProcessListenerDialog = async () => {
420434
processListenerDialogRef.value.open('execution')
421435
}
422436
const selectProcessListener = (listener) => {
437+
const instances = bpmnInstances()
438+
if (!instances || !instances.bpmnElement) return
439+
440+
const bpmnElement = instances.bpmnElement
423441
const listenerForm = initListenerForm2(listener)
424442
const listenerObject = createListenerObject(listenerForm, false, prefix)
425443
bpmnElementListeners.value.push(listenerObject)
426444
elementListenersList.value.push(listenerForm)
427445
428446
// 保存其他配置
429447
otherExtensionList.value =
430-
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
448+
bpmnElement.businessObject?.extensionElements?.values?.filter(
431449
(ex) => ex.$type !== `${prefix}:ExecutionListener`
432450
) ?? []
433451
updateElementExtensions(
434-
bpmnElement.value,
452+
bpmnElement,
435453
otherExtensionList.value.concat(bpmnElementListeners.value)
436454
)
437455
}

‎src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -329,25 +329,28 @@ const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单
329329
const editingListenerIndex = ref(-1) // 监听器所在下标，-1 为新增
330330
const editingListenerFieldIndex = ref(-1) // 字段所在下标，-1 为新增
331331
const listenerFieldForm = ref<any>({}) // 监听器 注入字段 详情表单
332-
const bpmnElement = ref()
333332
const bpmnElementListeners = ref()
334333
const otherExtensionList = ref()
335334
const listenerFormRef = ref()
336335
const listenerFieldFormRef = ref()
337336
const bpmnInstances = () => (window as any)?.bpmnInstances
338337
339338
const resetListenersList = () => {
340-
console.log(
341-
bpmnInstances().bpmnElement,
342-
'window.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElement'
343-
)
344-
bpmnElement.value = bpmnInstances().bpmnElement
339+
const instances = bpmnInstances()
340+
if (!instances || !instances.bpmnElement) return
341+
342+
// 直接使用原始BPMN元素，避免Vue响应式代理问题
343+
const bpmnElement = instances.bpmnElement
344+
const businessObject = bpmnElement.businessObject
345+
346+
console.log(bpmnElement, 'bpmnElement - resetListenersList')
347+
345348
otherExtensionList.value =
346-
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
349+
businessObject?.extensionElements?.values?.filter(
347350
(ex) => ex.$type !== `${prefix}:TaskListener`
348351
) ?? [] // 保留非监听器类型的扩展属性，避免移除监听器时清空其他配置（如审批人等）。相关案例：https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues/ICMSYC
349352
bpmnElementListeners.value =
350-
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
353+
businessObject?.extensionElements?.values?.filter(
351354
(ex) => ex.$type === `${prefix}:TaskListener`
352355
) ?? []
353356
elementListenersList.value = bpmnElementListeners.value.map((listener) =>
@@ -385,10 +388,13 @@ const removeListener = (listener, index?) => {
385388
cancelButtonText: '取 消'
386389
})
387390
.then(() => {
391+
const instances = bpmnInstances()
392+
if (!instances || !instances.bpmnElement) return
393+
388394
bpmnElementListeners.value.splice(index, 1)
389395
elementListenersList.value.splice(index, 1)
390396
updateElementExtensions(
391-
bpmnElement.value,
397+
instances.bpmnElement,
392398
otherExtensionList.value.concat(bpmnElementListeners.value)
393399
)
394400
})
@@ -398,7 +404,13 @@ const removeListener = (listener, index?) => {
398404
const saveListenerConfig = async () => {
399405
let validateStatus = await listenerFormRef.value.validate()
400406
if (!validateStatus) return // 验证不通过直接返回
407+
408+
const instances = bpmnInstances()
409+
if (!instances || !instances.bpmnElement) return
410+
411+
const bpmnElement = instances.bpmnElement
401412
const listenerObject = createListenerObject(listenerForm.value, true, prefix)
413+
402414
if (editingListenerIndex.value === -1) {
403415
bpmnElementListeners.value.push(listenerObject)
404416
elementListenersList.value.push(listenerForm.value)
@@ -408,11 +420,11 @@ const saveListenerConfig = async () => {
408420
}
409421
// 保存其他配置
410422
otherExtensionList.value =
411-
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
423+
bpmnElement.businessObject?.extensionElements?.values?.filter(
412424
(ex) => ex.$type !== `${prefix}:TaskListener`
413425
) ?? []
414426
updateElementExtensions(
415-
bpmnElement.value,
427+
bpmnElement,
416428
otherExtensionList.value.concat(bpmnElementListeners.value)
417429
)
418430
// 4. 隐藏侧边栏
@@ -464,18 +476,22 @@ const openProcessListenerDialog = async () => {
464476
processListenerDialogRef.value.open('task')
465477
}
466478
const selectProcessListener = (listener) => {
479+
const instances = bpmnInstances()
480+
if (!instances || !instances.bpmnElement) return
481+
482+
const bpmnElement = instances.bpmnElement
467483
const listenerForm = initListenerForm2(listener)
468484
const listenerObject = createListenerObject(listenerForm, true, prefix)
469485
bpmnElementListeners.value.push(listenerObject)
470486
elementListenersList.value.push(listenerForm)
471487
472488
// 保存其他配置
473489
otherExtensionList.value =
474-
bpmnElement.value.businessObject?.extensionElements?.values?.filter(
490+
bpmnElement.businessObject?.extensionElements?.values?.filter(
475491
(ex) => ex.$type !== `${prefix}:TaskListener`
476492
) ?? []
477493
updateElementExtensions(
478-
bpmnElement.value,
494+
bpmnElement,
479495
otherExtensionList.value.concat(bpmnElementListeners.value)
480496
)
481497
}

‎src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -67,24 +67,28 @@ const elementPropertyList = ref<any[]>([])
6767
const propertyForm = ref<any>({})
6868
const editingPropertyIndex = ref(-1)
6969
const propertyFormModelVisible = ref(false)
70-
const bpmnElement = ref()
7170
const otherExtensionList = ref()
7271
const bpmnElementProperties = ref()
7372
const bpmnElementPropertyList = ref()
7473
const attributeFormRef = ref()
7574
const bpmnInstances = () => (window as any)?.bpmnInstances
7675
7776
const resetAttributesList = () => {
78-
bpmnElement.value = bpmnInstances().bpmnElement
77+
const instances = bpmnInstances()
78+
if (!instances || !instances.bpmnElement) return
79+
80+
// 直接使用原始BPMN元素，避免Vue响应式代理问题
81+
const bpmnElement = instances.bpmnElement
82+
const businessObject = bpmnElement.businessObject
83+
7984
otherExtensionList.value = [] // 其他扩展配置
8085
bpmnElementProperties.value =
81-
// bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
82-
bpmnElement.value.businessObject?.extensionElements?.values?.filter((ex) => {
86+
businessObject?.extensionElements?.values?.filter((ex) => {
8387
if (ex.$type !== `${prefix}:Properties`) {
8488
otherExtensionList.value.push(ex)
8589
}
8690
return ex.$type === `${prefix}:Properties`
87-
}) ?? [];
91+
}) ?? []
8892
8993
// 保存所有的 扩展属性字段
9094
bpmnElementPropertyList.value = bpmnElementProperties.value.reduce(
@@ -123,23 +127,28 @@ const removeAttributes = (attr, index) => {
123127
const saveAttribute = () => {
124128
console.log(propertyForm.value, 'propertyForm.value')
125129
const { name, value } = propertyForm.value
130+
const instances = bpmnInstances()
131+
if (!instances || !instances.bpmnElement) return
132+
133+
const bpmnElement = instances.bpmnElement
134+
126135
if (editingPropertyIndex.value !== -1) {
127-
bpmnInstances().modeling.updateModdleProperties(
128-
toRaw(bpmnElement.value),
129-
toRaw(bpmnElementPropertyList.value)[toRaw(editingPropertyIndex.value)],
136+
instances.modeling.updateModdleProperties(
137+
bpmnElement,
138+
bpmnElementPropertyList.value[editingPropertyIndex.value],
130139
{
131140
name,
132141
value
133142
}
134143
)
135144
} else {
136145
// 新建属性字段
137-
const newPropertyObject = bpmnInstances().moddle.create(`${prefix}:Property`, {
146+
const newPropertyObject = instances.moddle.create(`${prefix}:Property`, {
138147
name,
139148
value
140149
})
141150
// 新建一个属性字段的保存列表
142-
const propertiesObject = bpmnInstances().moddle.create(`${prefix}:Properties`, {
151+
const propertiesObject = instances.moddle.create(`${prefix}:Properties`, {
143152
values: bpmnElementPropertyList.value.concat([newPropertyObject])
144153
})
145154
updateElementExtensions(propertiesObject)
@@ -148,10 +157,14 @@ const saveAttribute = () => {
148157
resetAttributesList()
149158
}
150159
const updateElementExtensions = (properties) => {
151-
const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
160+
const instances = bpmnInstances()
161+
if (!instances || !instances.bpmnElement) return
162+
163+
const bpmnElement = instances.bpmnElement
164+
const extensions = instances.moddle.create('bpmn:ExtensionElements', {
152165
values: otherExtensionList.value.concat([properties])
153166
})
154-
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
167+
instances.modeling.updateProperties(bpmnElement, {
155168
extensionElements: extensions
156169
})
157170
}

‎src/components/bpmnProcessDesigner/package/utils.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { toRaw } from 'vue'
21
const bpmnInstances = () => (window as any)?.bpmnInstances
32
// 创建监听器实例
43
export function createListenerObject(options, isTask, prefix) {
@@ -61,7 +60,8 @@ export function updateElementExtensions(element, extensionList) {
6160
const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
6261
values: extensionList
6362
})
64-
bpmnInstances().modeling.updateProperties(toRaw(element), {
63+
// 直接使用原始元素对象，不需要toRaw包装
64+
bpmnInstances().modeling.updateProperties(element, {
6565
extensionElements: extensions
6666
})
6767
}

0 commit comments

Comments
 (0)