!9 新增内置监听器功能

Merge pull request !9 from 马铃薯头/master

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)
     }
   }
 }

ruoyi-ui/src/components/flow/Listener/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <el-row>
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
+        <el-form-item label="名称" prop="name">
+          <el-input
+            v-model="queryParams.name"
+            placeholder="请输入名称"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="监听类型" prop="type">
+          <el-select v-model="queryParams.type" placeholder="请选择监听类型" clearable>
+            <el-option
+              v-for="dict in dict.type.sys_listener_type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
+
+    <el-table v-loading="loading" :data="listenerList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="名称" align="center" prop="name"/>
+      <el-table-column label="监听类型" align="center" prop="type">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_listener_type" :value="scope.row.type"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="事件类型" align="center" prop="eventType"/>
+      <el-table-column label="值类型" align="center" prop="valueType">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_listener_value_type" :value="scope.row.valueType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="执行内容" align="center" prop="value"/>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page-sizes="[5,10]"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+  import { listListener } from '@/api/system/listener'
+
+  export default {
+    name: 'FlowListener',
+    dicts: ['sys_listener_value_type', 'sys_listener_type', 'common_status', 'sys_listener_event_type'],
+    props: {
+      selectValues: {
+        type: Number | String | Array,
+        default: null,
+        required: false
+      }
+    },
+    data() {
+      return {
+        /** 遮罩层 */
+        loading: true,
+        /** 流程监听表格数据 */
+        listenerList: [],
+        /** 总条数 */
+        total: 0,
+        /** 查询参数 */
+        queryParams: {
+          pageNum: 1,
+          pageSize: 5,
+          name: null,
+          type: null,
+          eventType: null,
+          valueType: null,
+          value: null,
+          status: null
+        }
+      }
+    },
+    mounted() {
+      this.getList()
+    },
+    methods: {
+      /** 查询流程监听列表 */
+      getList() {
+        this.loading = true
+        listListener(this.queryParams).then(response => {
+          this.listenerList = response.rows
+          this.total = response.total
+          this.loading = false
+        })
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1
+        this.getList()
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm('queryForm')
+        this.handleQuery()
+      },
+      /** 多选框选中数据 */
+      handleSelectionChange(selection) {
+        this.$emit('handleSelect', selection)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>