各个节点绑定值修改等bug

gexinzhineng/gxzn27
1 parent 548f8bc3
Showing 6 changed files with 39 additions and 58 deletions
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/template.js
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts
@@ -9,14 +9,15 @@
         show-overflow-tooltip
         :formatter="(row) => listenerTypeObject[row.listenerType]"
       />
-      <el-table-column label="操作" width="130px">
+      <el-table-column label="操作" width="100px">
         <template #default="scope">
-          <el-button size="small" @click="openListenerForm(scope.row, scope.$index)"
+          <el-button size="small" link @click="openListenerForm(scope.row, scope.$index)"
             >编辑</el-button
           >
           <el-divider direction="vertical" />
           <el-button
             size="small"
+            link
             style="color: #ff4d4f"
             @click="removeListener(scope.row, scope.$index)"
             >移除</el-button
@@ -26,7 +27,6 @@
     </el-table>
     <div class="element-drawer__button">
       <XButton
-        size="mini"
         type="primary"
         preIcon="ep:plus"
         title="添加监听器"
@@ -137,7 +137,7 @@
       <el-divider />
       <p class="listener-filed__title">
         <span><Icon icon="ep:menu" />注入字段：</span>
-        <XButton type="primary" size="mini" @click="openListenerFieldForm(null)" title="添加字段" />
+        <XButton type="primary" @click="openListenerFieldForm(null)" title="添加字段" />
       </p>
       <el-table
         :data="fieldsListOfListener"
@@ -163,16 +163,13 @@
         />
         <el-table-column label="操作" width="130px">
           <template #default="scope">
-            <el-button
-              size="small"
-              type="text"
-              @click="openListenerFieldForm(scope.row, scope.$index)"
+            <el-button size="small" link @click="openListenerFieldForm(scope.row, scope.$index)"
               >编辑</el-button
             >
             <el-divider direction="vertical" />
             <el-button
               size="small"
-              type="text"
+              link
               style="color: #ff4d4f"
               @click="removeListenerField(scope.row, scope.$index)"
               >移除</el-button
@@ -293,9 +290,7 @@ const resetListenersList = () =&gt; {
   otherExtensionList.value = []
   console.log(bpmnElement.value, 'bpmnElement.value')
   bpmnElementListeners.value =
-    // bpmnElement.value.businessObject?.extensionElements?.filter(
-    bpmnElement.value.businessObject?.extensionElements?.filter(
-      // bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
       (ex) => ex.$type === `${prefix}:ExecutionListener`
     ) ?? []
   elementListenersList.value = bpmnElementListeners.value.map((listener) =>
@@ -396,8 +391,8 @@ const saveListenerConfig = async () =&gt; {
   // 保存其他配置
   console.log(bpmnElement.value, 'bpmnElement.value')
   otherExtensionList.value =
-    bpmnElement.value.businessObject?.extensionElements?.filter(
-      // bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    // bpmnElement.value.businessObject?.extensionElements?.filter(
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
       (ex) => ex.$type !== `${prefix}:ExecutionListener`
     ) ?? []
   console.log(bpmnElement.value, 'bpmnElement.value')
@@ -406,20 +401,10 @@ const saveListenerConfig = async () =&gt; {
     otherExtensionList.value.concat(bpmnElementListeners.value),
     'otherExtensionList.value.concat(bpmnElementListeners.value).value'
   )
-  // updateElementExtensions(
-  //   bpmnElement.value,
-  //   // toRaw(bpmnElement.value),
-  //   otherExtensionList.value.concat(bpmnElementListeners.value)
-  //   // toRaw(otherExtensionList.value.concat(bpmnElementListeners.value))
-  // )
-  const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
-    values: otherExtensionList.value.concat(bpmnElementListeners.value)
-  })
-  console.log(extensions, 'extensionsextensionsextensions')
-  console.log(extensions.values, 'extensionsextensionsextensions')
-  window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
-    extensionElements: extensions.values
-  })
+  updateElementExtensions(
+    bpmnElement.value,
+    otherExtensionList.value.concat(bpmnElementListeners.value)
+  )
   // 4. 隐藏侧边栏
   listenerFormModelVisible.value = false
   listenerForm.value = {}
@@ -17,13 +17,13 @@
       />
       <el-table-column label="操作" width="90px">
         <template #default="scope">
-          <el-button size="small" type="text" @click="openListenerForm(scope.row, scope.$index)"
+          <el-button size="small" link @click="openListenerForm(scope.row, scope.$index)"
             >编辑</el-button
           >
           <el-divider direction="vertical" />
           <el-button
             size="small"
-            type="text"
+            link
             style="color: #ff4d4f"
             @click="removeListener(scope.row, scope.$index)"
             >移除</el-button
@@ -204,16 +204,13 @@
         />
         <el-table-column label="操作" width="100px">
           <template #default="scope">
-            <el-button
-              size="small"
-              type="text"
-              @click="openListenerFieldForm(scope.row, scope.$index)"
+            <el-button size="small" link @click="openListenerFieldForm(scope.row, scope.$index)"
               >编辑</el-button
             >
             <el-divider direction="vertical" />
             <el-button
               size="small"
-              type="text"
+              link
               style="color: #ff4d4f"
               @click="removeListenerField(scope.row, scope.$index)"
               >移除</el-button
@@ -338,8 +335,7 @@ const resetListenersList = () =&gt; {
   bpmnElement.value = window.bpmnInstances.bpmnElement
   otherExtensionList.value = []
   bpmnElementListeners.value =
-    bpmnElement.value.businessObject?.extensionElements?.filter(
-      // bpmnElement.value.businessObject?.extensionElements?.values.filter(
+    bpmnElement.value.businessObject?.extensionElements?.values.filter(
       (ex) => ex.$type === `${prefix}:TaskListener`
     ) ?? []
   elementListenersList.value = bpmnElementListeners.value.map((listener) =>
 export const template = isTaskListener => {
   return `
   <div class="panel-tab__content">
-    <el-table :data="elementListenersList" size="mini" border>
+    <el-table :data="elementListenersList" size="small" border>
       <el-table-column label="序号" width="50px" type="index" />
       <el-table-column label="事件类型" min-width="100px" prop="event" />
       <el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
       <el-table-column label="操作" width="90px">
         <template #default="scope">
-          <el-button size="mini" type="text" @click="openListenerForm(scope, scope.$index)">编辑</el-button>
+          <el-button size="small" type="text" @click="openListenerForm(scope, scope.$index)">编辑</el-button>
           <el-divider direction="vertical" />
-          <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(scope, scope.$index)">移除</el-button>
+          <el-button size="small" type="text" style="color: #ff4d4f" @click="removeListener(scope, scope.$index)">移除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <div class="element-drawer__button">
-      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
+      <el-button size="small" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
     </div>
     <!-- 监听器 编辑/创建 部分 -->
     <el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="width + 'px'" append-to-body destroy-on-close>
-      <el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
+      <el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
         <el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
           <el-select v-model="listenerForm.event">
             <el-option label="start" value="start" />
@@ -115,31 +115,31 @@ export const template = isTaskListener =&gt; {
       <el-divider />
       <p class="listener-filed__title">
         <span><i class="el-icon-menu"></i>注入字段：</span>
-        <el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
+        <el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
       </p>
-      <el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
+      <el-table :data="fieldsListOfListener" size="small" max-height="240" border fit style="flex: none">
         <el-table-column label="序号" width="50px" type="index" />
         <el-table-column label="字段名称" min-width="100px" prop="name" />
         <el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
         <el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
         <el-table-column label="操作" width="100px">
           <template #default="scope">
-            <el-button size="mini" type="text" @click="openListenerFieldForm(scope, scope.$index)">编辑</el-button>
+            <el-button size="small" type="text" @click="openListenerFieldForm(scope, scope.$index)">编辑</el-button>
             <el-divider direction="vertical" />
-            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(scope, scope.$index)">移除</el-button>
+            <el-button size="small" type="text" style="color: #ff4d4f" @click="removeListenerField(scope, scope.$index)">移除</el-button>
           </template>
         </el-table-column>
       </el-table>
       <div class="element-drawer__button">
-        <el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
+        <el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
       </div>
     </el-drawer>
     <!-- 注入西段 编辑/创建 部分 -->
     <el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
-      <el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
+      <el-form :model="listenerFieldForm" size="small" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
         <el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
           <el-input v-model="listenerFieldForm.name" clearable />
         </el-form-item>
@@ -168,8 +168,8 @@ export const template = isTaskListener =&gt; {
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
+        <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
       </template>
     </el-dialog>
   </div>
@@ -4,14 +4,15 @@
       <el-table-column label="序号" width="50px" type="index" />
       <el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip />
       <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
-      <el-table-column label="操作" width="90px">
+      <el-table-column label="操作" width="110px">
         <template #default="scope">
-          <el-button type="text" @click="openAttributesForm(scope.row, scope.$index)"
+          <el-button link @click="openAttributesForm(scope.row, scope.$index)" size="small"
             >编辑</el-button
           >
           <el-divider direction="vertical" />
           <el-button
-            type="text"
+            link
+            size="small"
             style="color: #ff4d4f"
             @click="removeAttributes(scope.row, scope.$index)"
             >移除</el-button
@@ -86,8 +87,8 @@ const resetAttributesList = () =&gt; {
   bpmnElement.value = window.bpmnInstances.bpmnElement
   otherExtensionList.value = [] // 其他扩展配置
   bpmnElementProperties.value =
-    bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
-      // bpmnElement.value.businessObject?.extensionElements?.values.filter((ex) => {
+    // bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
+    bpmnElement.value.businessObject?.extensionElements?.values.filter((ex) => {
       if (ex.$type !== `${prefix}:Properties`) {
         otherExtensionList.value.push(ex)
       }
@@ -18,7 +18,6 @@
           />
         </el-select>
         <XButton
-          size="mini"
           type="primary"
           preIcon="ep:plus"
           style="margin-left: 8px"
@@ -61,7 +61,7 @@ export function updateElementExtensions(element, extensionList) {
     values: extensionList
   })
   window.bpmnInstances.modeling.updateProperties(toRaw(element), {
-    extensionElements: extensions.values
+    extensionElements: extensions
   })
 }