From b704aae49b50b7b0e8f2e0b49299d512a53a6d3e Mon Sep 17 00:00:00 2001
From: gexinzhineng/gxzn27 <1348660141@qq.com>
Date: Sat, 28 Jan 2023 17:42:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=A5=E9=94=99=E5=9F=BA=E6=9C=AC=E8=A7=A3?=
 =?UTF-8?q?=E5=86=B3=EF=BC=8C=E6=95=B0=E6=8D=AE=E7=BB=91=E5=AE=9A=E8=BF=98?=
 =?UTF-8?q?=E6=9C=89=E4=BA=9B=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/penal/PropertiesPanel.vue         |  2 +-
 .../package/penal/base/ElementBaseInfo.vue    | 32 ++++++----
 .../penal/flow-condition/FlowCondition.vue    | 14 ++---
 .../package/penal/form/ElementForm.vue        | 10 +--
 .../penal/listeners/ElementListeners.vue      | 11 ++--
 .../penal/listeners/UserTaskListeners.vue     |  4 ++
 .../package/penal/listeners/utilSelf.js       | 62 -------------------
 .../package/penal/listeners/utilSelf.ts       | 62 +++++++++++++++++++
 .../multi-instance/ElementMultiInstance.vue   | 54 ++++++++++------
 .../penal/other/ElementOtherConfig.vue        | 17 ++++-
 .../penal/properties/ElementProperties.vue    | 10 +--
 .../task/task-components/ReceiveTask.vue      |  6 +-
 .../penal/task/task-components/ScriptTask.vue |  4 +-
 .../penal/task/task-components/UserTask.vue   |  4 +-
 .../bpmnProcessDesigner/package/utils.ts      |  6 +-
 .../src/views/bpm/model/modelEditor.vue       |  5 +-
 16 files changed, 171 insertions(+), 132 deletions(-)
 delete mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.js
 create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.ts

diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
index a649cd733d..eef8326692 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="process-panel__container" :style="{ width: `${width}px;` }">
+  <div class="process-panel__container" :style="{ width: `${width}px` }">
     <el-collapse v-model="activeTab">
       <el-collapse-item name="base">
         <!-- class="panel-tab__title" -->
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
index c294344916..1ffbd6dcfc 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
@@ -45,7 +45,7 @@ const props = defineProps({
   model: Object // 流程模型的数据
 })
 const needProps = ref({})
-let bpmnElement
+const bpmnElement = ref()
 const elementBaseInfo = ref({})
 // 流程表单的下拉框的数据
 // const forms = ref([])
@@ -57,12 +57,12 @@ const rules = reactive({
 
 const resetBaseInfo = () => {
   console.log(window, 'window')
-  console.log(bpmnElement, 'bpmnElement')
+  console.log(bpmnElement.value, 'bpmnElement')
 
-  bpmnElement = window?.bpmnInstances?.bpmnElement
-  console.log(bpmnElement, 'resetBaseInfo11111111111')
-  elementBaseInfo.value = bpmnElement.businessObject
-  needProps.value['type'] = bpmnElement.businessObject.$type
+  bpmnElement.value = window?.bpmnInstances?.bpmnElement
+  console.log(bpmnElement.value, 'resetBaseInfo11111111111')
+  elementBaseInfo.value = bpmnElement.value.businessObject
+  needProps.value['type'] = bpmnElement.value.businessObject.$type
   // elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type
 
   // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
@@ -81,7 +81,10 @@ const handleKeyUpdate = (value) => {
 
   // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
   elementBaseInfo.value['id'] = value
-  updateBaseInfo('id')
+
+  setTimeout(() => {
+    updateBaseInfo('id')
+  }, 100)
 }
 const handleNameUpdate = (value) => {
   console.log(elementBaseInfo, 'elementBaseInfo')
@@ -89,7 +92,10 @@ const handleNameUpdate = (value) => {
     return
   }
   elementBaseInfo.value['name'] = value
-  updateBaseInfo('name')
+
+  setTimeout(() => {
+    updateBaseInfo('name')
+  }, 100)
 }
 // const handleDescriptionUpdate=(value)=> {
 // TODO 芋艿：documentation 暂时无法修改，后续在看看
@@ -113,15 +119,15 @@ const updateBaseInfo = (key) => {
   if (key === 'id') {
     console.log('jinru')
     console.log(window, 'window')
-    console.log(bpmnElement, 'bpmnElement')
-    console.log(toRaw(bpmnElement), 'bpmnElement')
-    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement), {
+    console.log(bpmnElement.value, 'bpmnElement')
+    console.log(toRaw(bpmnElement.value), 'bpmnElement')
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
       id: elementBaseInfo.value[key],
       di: { id: `${elementBaseInfo.value[key]}_di` }
     })
   } else {
     console.log(attrObj, 'attrObj')
-    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement), attrObj)
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), attrObj)
   }
 }
 onMounted(() => {
@@ -165,6 +171,6 @@ watch(
 //   }
 // }
 onBeforeUnmount(() => {
-  bpmnElement = null
+  bpmnElement.value = null
 })
 </script>
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
index a67b5f0488..221a6a7eed 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue
@@ -63,7 +63,7 @@
 </template>
 
 <script setup lang="ts" name="FlowCondition">
-import { ref, nextTick, watch, onBeforeUnmount } from 'vue'
+import { ref, nextTick, watch, onBeforeUnmount, toRaw } from 'vue'
 import { ElSelect, ElForm, ElFormItem, ElInput, ElOption } from 'element-plus'
 
 const props = defineProps({
@@ -117,17 +117,17 @@ const updateFlowType = (flowType) => {
   // 正常条件类
   if (flowType === 'condition') {
     flowConditionRef.value = window.bpmnInstances.moddle.create('bpmn:FormalExpression')
-    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
       conditionExpression: flowConditionRef.value
     })
     return
   }
   // 默认路径
   if (flowType === 'default') {
-    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
       conditionExpression: null
     })
-    window.bpmnInstances.modeling.updateProperties(bpmnElementSource.value, {
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElementSource.value), {
       default: bpmnElement.value
     })
     return
@@ -137,11 +137,11 @@ const updateFlowType = (flowType) => {
     bpmnElementSourceRef.value.default &&
     bpmnElementSourceRef.value.default.id === bpmnElement.value.id
   ) {
-    window.bpmnInstances.modeling.updateProperties(bpmnElementSource.value, {
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElementSource.value), {
       default: null
     })
   }
-  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
     conditionExpression: null
   })
 }
@@ -164,7 +164,7 @@ const updateFlowCondition = () => {
       })
     }
   }
-  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
     conditionExpression: condition
   })
 }
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
index 79d00aca2e..c475a17b32 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
@@ -205,7 +205,7 @@
 </template>
 
 <script setup lang="ts" name="ElementForm">
-import { ref, inject, watch, nextTick } from 'vue'
+import { ref, inject, watch, nextTick, toRaw } from 'vue'
 import {
   ElDialog,
   ElForm,
@@ -280,10 +280,12 @@ const resetFormList = () => {
   updateElementExtensions()
 }
 const updateElementFormKey = () => {
-  window.bpmnInstances.modeling.updateProperties(bpmnELement.value, { formKey: formKey.value })
+  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnELement.value), {
+    formKey: formKey.value
+  })
 }
 const updateElementBusinessKey = () => {
-  window.bpmnInstances.modeling.updateModdleProperties(bpmnELement.value, formData.value, {
+  window.bpmnInstances.modeling.updateModdleProperties(toRaw(bpmnELement.value), formData.value, {
     businessKey: businessKey.value
   })
 }
@@ -437,7 +439,7 @@ const updateElementExtensions = () => {
     values: otherExtensions.value.concat(formData.value)
   })
   // 更新到元素上
-  window.bpmnInstances.modeling.updateProperties(bpmnELement.value, {
+  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnELement.value), {
     extensionElements: newElExtensionElements
   })
 }
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
index f07d5d56d5..cc8de5413f 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
@@ -249,7 +249,7 @@
   </div>
 </template>
 <script setup lang="ts" name="ElementListeners">
-import { ref, inject, watch, nextTick } from 'vue'
+import { ref, inject, watch, nextTick, toRaw } from 'vue'
 import {
   ElMessageBox,
   ElTable,
@@ -288,8 +288,10 @@ const listenerFormRef = ref()
 const listenerFieldFormRef = ref()
 
 const resetListenersList = () => {
+  console.log(window, 'window')
   bpmnElement.value = window.bpmnInstances.bpmnElement
   otherExtensionList.value = []
+  console.log(bpmnElement.value, 'bpmnElement.value')
   bpmnElementListeners.value =
     bpmnElement.value.businessObject?.extensionElements?.values?.filter(
       (ex) => ex.$type === `${prefix}:ExecutionListener`
@@ -394,14 +396,15 @@ const saveListenerConfig = async () => {
     bpmnElement.value.businessObject?.extensionElements?.values?.filter(
       (ex) => ex.$type !== `${prefix}:ExecutionListener`
     ) ?? []
-  console.log(bpmnElement.value.height, 'bpmnElement.value')
+  console.log(bpmnElement.value, 'bpmnElement.value')
+  console.log(toRaw(bpmnElement.value), 'toRawtoRawtoRawtoRawtoRaw')
   console.log(
     otherExtensionList.value.concat(bpmnElementListeners.value),
     'otherExtensionList.value.concat(bpmnElementListeners.value).value'
   )
   updateElementExtensions(
-    bpmnElement.value,
-    otherExtensionList.value.concat(bpmnElementListeners.value)
+    toRaw(bpmnElement.value),
+    toRaw(otherExtensionList.value.concat(bpmnElementListeners.value))
   )
   // 4. 隐藏侧边栏
   listenerFormModelVisible.value = false
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
index 0d4fa10c36..0c81a63de1 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
@@ -331,6 +331,10 @@ const listenerFormRef = ref()
 const listenerFieldFormRef = ref()
 
 const resetListenersList = () => {
+  console.log(
+    window.bpmnInstances.bpmnElement,
+    'window.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElement'
+  )
   bpmnElement.value = window.bpmnInstances.bpmnElement
   otherExtensionList.value = []
   bpmnElementListeners.value =
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.js
deleted file mode 100644
index efd13ec0a4..0000000000
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.js
+++ /dev/null
@@ -1,62 +0,0 @@
-// 初始化表单数据
-export function initListenerForm(listener) {
-  let self = {
-    ...listener
-  };
-  if (listener.script) {
-    self = {
-      ...listener,
-      ...listener.script,
-      scriptType: listener.script.resource ? "externalScript" : "inlineScript"
-    };
-  }
-  if (listener.event === "timeout" && listener.eventDefinitions) {
-    if (listener.eventDefinitions.length) {
-      let k = "";
-      for (let key in listener.eventDefinitions[0]) {
-        console.log(listener.eventDefinitions, key);
-        if (key.indexOf("time") !== -1) {
-          k = key;
-          self.eventDefinitionType = key.replace("time", "").toLowerCase();
-        }
-      }
-      console.log(k);
-      self.eventTimeDefinitions = listener.eventDefinitions[0][k].body;
-    }
-  }
-  return self;
-}
-
-export function initListenerType(listener) {
-  let listenerType;
-  if (listener.class) listenerType = "classListener";
-  if (listener.expression) listenerType = "expressionListener";
-  if (listener.delegateExpression) listenerType = "delegateExpressionListener";
-  if (listener.script) listenerType = "scriptListener";
-  return {
-    ...JSON.parse(JSON.stringify(listener)),
-    ...(listener.script ?? {}),
-    listenerType: listenerType
-  };
-}
-
-export const listenerType = {
-  classListener: "Java 类",
-  expressionListener: "表达式",
-  delegateExpressionListener: "代理表达式",
-  scriptListener: "脚本"
-};
-
-export const eventType = {
-  create: "创建",
-  assignment: "指派",
-  complete: "完成",
-  delete: "删除",
-  update: "更新",
-  timeout: "超时"
-};
-
-export const fieldType = {
-  string: "字符串",
-  expression: "表达式"
-};
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.ts b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.ts
new file mode 100644
index 0000000000..5f46abd053
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.ts
@@ -0,0 +1,62 @@
+// 初始化表单数据
+export function initListenerForm(listener) {
+  let self = {
+    ...listener
+  }
+  if (listener.script) {
+    self = {
+      ...listener,
+      ...listener.script,
+      scriptType: listener.script.resource ? 'externalScript' : 'inlineScript'
+    }
+  }
+  if (listener.event === 'timeout' && listener.eventDefinitions) {
+    if (listener.eventDefinitions.length) {
+      let k = ''
+      for (const key in listener.eventDefinitions[0]) {
+        console.log(listener.eventDefinitions, key)
+        if (key.indexOf('time') !== -1) {
+          k = key
+          self.eventDefinitionType = key.replace('time', '').toLowerCase()
+        }
+      }
+      console.log(k)
+      self.eventTimeDefinitions = listener.eventDefinitions[0][k].body
+    }
+  }
+  return self
+}
+
+export function initListenerType(listener) {
+  let listenerType
+  if (listener.class) listenerType = 'classListener'
+  if (listener.expression) listenerType = 'expressionListener'
+  if (listener.delegateExpression) listenerType = 'delegateExpressionListener'
+  if (listener.script) listenerType = 'scriptListener'
+  return {
+    ...JSON.parse(JSON.stringify(listener)),
+    ...(listener.script ?? {}),
+    listenerType: listenerType
+  }
+}
+
+export const listenerType = {
+  classListener: 'Java 类',
+  expressionListener: '表达式',
+  delegateExpressionListener: '代理表达式',
+  scriptListener: '脚本'
+}
+
+export const eventType = {
+  create: '创建',
+  assignment: '指派',
+  complete: '完成',
+  delete: '删除',
+  update: '更新',
+  timeout: '超时'
+}
+
+export const fieldType = {
+  string: '字符串',
+  expression: '表达式'
+}
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
index 169ac0db3a..ce973b635a 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue
@@ -69,7 +69,7 @@
 </template>
 
 <script setup lang="ts" name="ElementMultiInstance">
-import { inject, ref, onBeforeUnmount, watch } from 'vue'
+import { inject, ref, onBeforeUnmount, watch, toRaw } from 'vue'
 import { ElForm, ElFormItem, ElSelect, ElOption, ElCheckbox, ElInput } from 'element-plus'
 const props = defineProps({
   businessObject: Object,
@@ -129,7 +129,9 @@ const changeLoopCharacteristicsType = (type) => {
   // this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
   // 取消多实例配置
   if (type === 'Null') {
-    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, { loopCharacteristics: null })
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
+      loopCharacteristics: null
+    })
     return
   }
   // 配置循环
@@ -137,7 +139,7 @@ const changeLoopCharacteristicsType = (type) => {
     const loopCharacteristicsObject = window.bpmnInstances.moddle.create(
       'bpmn:StandardLoopCharacteristics'
     )
-    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
       loopCharacteristics: loopCharacteristicsObject
     })
     multiLoopInstance.value = null
@@ -155,7 +157,7 @@ const changeLoopCharacteristicsType = (type) => {
       { collection: '${coll_userList}' }
     )
   }
-  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
     loopCharacteristics: multiLoopInstance.value
   })
 }
@@ -167,9 +169,13 @@ const updateLoopCardinality = (cardinality) => {
       body: cardinality
     })
   }
-  window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, {
-    loopCardinality
-  })
+  window.bpmnInstances.modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      loopCardinality
+    }
+  )
 }
 // 完成条件
 const updateLoopCondition = (condition) => {
@@ -179,9 +185,13 @@ const updateLoopCondition = (condition) => {
       body: condition
     })
   }
-  window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, {
-    completionCondition
-  })
+  window.bpmnInstances.modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      completionCondition
+    }
+  )
 }
 // 重试周期
 const updateLoopTimeCycle = (timeCycle) => {
@@ -192,16 +202,24 @@ const updateLoopTimeCycle = (timeCycle) => {
       })
     ]
   })
-  window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, {
-    extensionElements
-  })
+  window.bpmnInstances.modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      extensionElements
+    }
+  )
 }
 // 直接更新的基础信息
 const updateLoopBase = () => {
-  window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, {
-    collection: loopInstanceForm.value.collection || null,
-    elementVariable: loopInstanceForm.value.elementVariable || null
-  })
+  window.bpmnInstances.modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      collection: loopInstanceForm.value.collection || null,
+      elementVariable: loopInstanceForm.value.elementVariable || null
+    }
+  )
 }
 // 各异步状态
 const updateLoopAsync = (key) => {
@@ -215,7 +233,7 @@ const updateLoopAsync = (key) => {
     asyncAttr[key] = loopInstanceForm.value[key]
   }
   window.bpmnInstances.modeling.updateModdleProperties(
-    bpmnElement.value,
+    toRaw(bpmnElement.value),
     multiLoopInstance.value,
     asyncAttr
   )
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
index e65fc7db1c..37b180f01b 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts" name="ElementOtherConfig">
-import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
+import { ref, watch, nextTick, onBeforeUnmount, toRaw } from 'vue'
 import { ElInput } from 'element-plus'
 const props = defineProps({
   id: String
@@ -25,15 +25,26 @@ const props = defineProps({
 const documentation = ref('')
 const bpmnElement = ref()
 const updateDocumentation = () => {
+  console.log(props, 'props')
+  console.log(window, 'window')
+  console.log(
+    window.bpmnInstances.elementRegistry.get(props.id),
+    'window.bpmnInstances.elementRegistry.get(props.id)'
+  )
+  console.log(bpmnElement.value, 'bpmnElement.value ')
   if (bpmnElement.value && bpmnElement.value.id === props.id) {
-    bpmnElement.value = window.bpmnInstances.elementRegistry.get(props.id)
+    bpmnElement.value = window?.bpmnInstances.elementRegistry.get(props.id)
   }
+  console.log(
+    bpmnElement.value,
+    'bpmnElement.value bpmnElement.value bpmnElement.value bpmnElement.value bpmnElement.value bpmnElement.value '
+  )
   // (bpmnElement.value && bpmnElement.value.id === props.id) ||
   //   (bpmnElement.value = window.bpmnInstances.elementRegistry.get(props.id))
   const documentations = window.bpmnInstances.bpmnFactory.create('bpmn:Documentation', {
     text: documentation.value
   })
-  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
     documentation: [documentations]
   })
 }
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
index b304bcb5ec..2764fb73cf 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
@@ -13,7 +13,7 @@
           <el-button
             type="text"
             style="color: #ff4d4f"
-            @click="removeAttributes(scope.roww, scope.$index)"
+            @click="removeAttributes(scope.row, scope.$index)"
             >移除</el-button
           >
         </template>
@@ -52,7 +52,7 @@
 </template>
 
 <script setup lang="ts" name="ElementProperties">
-import { ref, inject, nextTick, watch } from 'vue'
+import { ref, inject, nextTick, watch, toRaw } from 'vue'
 import {
   ElMessageBox,
   ElDialog,
@@ -131,8 +131,8 @@ const saveAttribute = () => {
   const { name, value } = propertyForm.value
   if (editingPropertyIndex.value !== -1) {
     window.bpmnInstances.modeling.updateModdleProperties(
-      bpmnElement.value,
-      bpmnElementPropertyList.value[editingPropertyIndex.value],
+      toRaw(bpmnElement.value),
+      toRaw(bpmnElementPropertyList.value)[toRaw(editingPropertyIndex.value)],
       {
         name,
         value
@@ -157,7 +157,7 @@ const updateElementExtensions = (properties) => {
   const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
     values: otherExtensionList.value.concat([properties])
   })
-  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
     extensionElements: extensions
   })
 }
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
index 9fc6c5639a..c4816dd3ec 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
@@ -50,7 +50,7 @@
 </template>
 
 <script setup lang="ts" name="ReceiveTask">
-import { ref, watch, onBeforeUnmount, onMounted, nextTick } from 'vue'
+import { ref, watch, onBeforeUnmount, onMounted, nextTick, toRaw } from 'vue'
 import { ElMessage, ElFormItem, ElDialog, ElForm, ElSelect, ElOption } from 'element-plus'
 const props = defineProps({
   id: String,
@@ -85,11 +85,11 @@ const createNewMessage = () => {
 }
 const updateTaskMessage = (messageId) => {
   if (messageId === '-1') {
-    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
       messageRef: null
     })
   } else {
-    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
       messageRef: bpmnMessageRefsMap.value[messageId]
     })
   }
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue
index 7145535403..f8583ff0cf 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue
@@ -45,7 +45,7 @@
 </template>
 
 <script setup lang="ts" name="ScriptTask">
-import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
+import { ref, watch, nextTick, onBeforeUnmount, toRaw } from 'vue'
 import { ElInput, ElFormItem } from 'element-plus'
 const props = defineProps({
   id: String,
@@ -78,7 +78,7 @@ const updateElementTask = () => {
     taskAttr.resource = scriptTaskForm.value.resource || null
     taskAttr.script = null
   }
-  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, taskAttr)
+  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
 }
 
 onBeforeUnmount(() => {
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
index f9c47bc226..7d279c952a 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts" name="UserTask">
-import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
+import { ref, watch, nextTick, onBeforeUnmount, toRaw } from 'vue'
 import { ElLink, ElFormItem, ElInput } from 'element-plus'
 const props = defineProps({
   id: String,
@@ -78,7 +78,7 @@ const updateElementTask = (key) => {
   } else {
     taskAttr[key] = userTaskForm.value[key] || null
   }
-  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, taskAttr)
+  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
 }
 
 watch(
diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts
index 5123baf9dd..c157fa2d13 100644
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts
@@ -1,3 +1,4 @@
+import { toRaw } from 'vue'
 // 创建监听器实例
 export function createListenerObject(options, isTask, prefix) {
   const listenerObj = Object.create(null)
@@ -59,12 +60,9 @@ export function updateElementExtensions(element, extensionList) {
   const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
     values: extensionList
   })
-  console.log(element, 'elementelementelementelement')
-  console.log(extensions.values, 'extensionsextensionsextensions')
-  window.bpmnInstances.modeling.updateProperties(element, {
+  window.bpmnInstances.modeling.updateProperties(toRaw(element), {
     extensionElements: extensions.values
   })
-  console.log('ssss')
 }
 
 // 创建一个id
diff --git a/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue b/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue
index a16fe1104f..2dd70986f3 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeMount } from 'vue'
+import { ref, onMounted } from 'vue'
 // import { translations } from '@/components/bpmnProcessDesigner/src/translations'
 // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
 import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
@@ -64,9 +64,6 @@ const controlForm = ref({
 // })
 // 流程模型的信息
 const model = ref({})
-onBeforeMount(() => {
-  // window.bpmnInstances = {}
-})
 onMounted(() => {
   // 如果 modelId 非空，说明是修改流程模型
   const modelId = router.currentRoute.value.query && router.currentRoute.value.query.modelId