新增内置监听器功能

ruoyi-ui/src/components/Process/components/nodePanel/property/executionListener.vue

@@ -19,6 +19,11 @@
       <span slot="footer" class="dialog-footer">
         <el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
       </span>
+      <listener-list
+        :visible="listenerDialogVisible"
+        @close="() => this.listenerDialogVisible = false"
+        @submit="addListener"
+      />
     </el-dialog>
     <listenerParam v-if="showParamDialog" :value="formData.executionListener[nowIndex].params" @close="finishConfigParam" />
   </div>
@@ -27,12 +32,15 @@
 <script>
 import mixinPanel from '../../../common/mixinPanel'
 import listenerParam from './listenerParam'
+import FlowListener from '@/components/flow/Listener'
+import ListenerList from '@/components/Process/components/nodePanel/property/listenerList'
 export default {
-  components: { listenerParam },
+  components: { ListenerList, listenerParam, FlowListener },
   mixins: [mixinPanel],
   data() {
     return {
       dialogVisible: true,
+      listenerDialogVisible: false,
       showParamDialog: false,
       nowIndex: null,
       formData: {
@@ -103,6 +111,7 @@ export default {
     }
   },
   mounted() {
+    this.$nextTick(() => this.addButton())
     this.formData.executionListener = this.element.businessObject.extensionElements?.values
       .filter(item => item.$type === 'flowable:ExecutionListener')
       .map(item => {
@@ -128,6 +137,16 @@ export default {
       }) ?? []
   },
   methods: {
+    addButton() {
+      const button = document.createElement('button')
+      button.innerText = '内置监听器'
+      button.setAttribute('type', 'button')
+      button.setAttribute('class', 'el-button el-button--primary el-button--mini')
+      button.addEventListener('click', () => this.listenerDialogVisible = true)
+      const div = document.getElementById('pane-executionListener')
+      const table = div.getElementsByClassName('el-table')[0]
+      div.insertBefore(button, table)
+    },
     configParam(index) {
       this.nowIndex = index
       const nowObj = this.formData.executionListener[index]
@@ -178,10 +197,14 @@ export default {
       }
     },
     closeDialog() {
+      console.log(this.formData)
       this.$refs.xForm.validate().then(() => {
         this.updateElement()
         this.dialogVisible = false
       }).catch(e => console.error(e))
+    },
+    addListener(data) {
+      this.formData.executionListener = this.formData.executionListener.concat(data)
     }
   }
 }

ruoyi-ui/src/components/Process/components/nodePanel/property/listenerList.vue

@@ -0,0 +1,72 @@
+<template>
+  <el-dialog title="内置监听器"
+             width="900px"
+             :visible.sync="dialogVisible"
+             append-to-body
+             :close-on-click-modal="false"
+             :close-on-press-escape="false"
+             :show-close="false"
+             :before-close="close"
+  >
+    <flow-listener @handleSelect="handleSelect"/>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="checkComplete">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+  import FlowListener from '@/components/flow/Listener'
+
+  export default {
+    name: 'ListentList',
+    components: { FlowListener },
+    props: {
+      visible: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        dialogVisible: this.visible,
+        listenerList: []
+      }
+    },
+    watch: {
+      visible: {
+        handler(newVal) {
+          this.dialogVisible = newVal
+        },
+        immediate: true,
+        deep: true
+      }
+    },
+    methods: {
+      close() {
+        this.dialogVisible = false
+        this.$emit('close')
+      },
+      checkComplete() {
+        this.close()
+        this.$emit('submit', this.listenerList)
+      },
+      handleSelect(selection) {
+        const type = ['class', 'expression', 'delegateExpression']
+        let list = []
+        selection.forEach(data => {
+          const formData = {
+            event: data.eventType,
+            type: type[parseInt(data.valueType) - 1],
+            className: data.value
+          }
+          list.push(formData)
+        })
+        this.listenerList = list
+      }
+    }
+  }
+</script>
+
+<style></style>

ruoyi-ui/src/components/Process/components/nodePanel/property/taskListener.vue

@@ -19,6 +19,11 @@
       <span slot="footer" class="dialog-footer">
         <el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
       </span>
+      <listener-list
+        :visible="listenerDialogVisible"
+        @close="() => this.listenerDialogVisible = false"
+        @submit="addListener"
+      />
     </el-dialog>
     <listenerParam v-if="showParamDialog" :value="formData.taskListener[nowIndex].params" @close="finishConfigParam" />
   </div>
@@ -27,12 +32,14 @@
 <script>
 import mixinPanel from '../../../common/mixinPanel'
 import listenerParam from './listenerParam'
+import ListenerList from '@/components/Process/components/nodePanel/property/listenerList'
 export default {
-  components: { listenerParam },
+  components: { listenerParam, ListenerList },
   mixins: [mixinPanel],
   data() {
     return {
       dialogVisible: true,
+      listenerDialogVisible: false,
       showParamDialog: false,
       nowIndex: null,
       formData: {
@@ -109,6 +116,7 @@ export default {
     }
   },
   mounted() {
+    this.$nextTick(() => this.addButton())
     this.formData.taskListener = this.element.businessObject.extensionElements?.values
       .filter(item => item.$type === 'flowable:TaskListener')
       .map(item => {
@@ -134,6 +142,16 @@ export default {
       }) ?? []
   },
   methods: {
+    addButton() {
+      const button = document.createElement('button')
+      button.innerText = '内置监听器'
+      button.setAttribute('type', 'button')
+      button.setAttribute('class', 'el-button el-button--primary el-button--mini')
+      button.addEventListener('click', () => this.listenerDialogVisible = true)
+      const div = document.getElementById('pane-taskListener')
+      const table = div.getElementsByClassName('el-table')[0]
+      div.insertBefore(button, table)
+    },
     configParam(index) {
       this.nowIndex = index
       const nowObj = this.formData.taskListener[index]
@@ -188,6 +206,9 @@ export default {
         this.updateElement()
         this.dialogVisible = false
       }).catch(e => console.error(e))
+    },
+    addListener(data) {
+      this.formData.taskListener = this.formData.taskListener.concat(data)
     }
   }
 }