flowable-engine-web/src/api/common.js

@@ -2,9 +2,16 @@ import request from '@/api/request.js'
 
 
 export function deleteFile(fileId) {
-    // 查询组织架构树
+    // 删除文件
     return request({
         url: '/flowable/process/file/' + fileId,
         method: 'delete',
     })
 }
+
+export function getProcessListener(type){
+    return request({
+        url: `/flowable/process/listener/option/${type}`,
+        method: 'get',
+    })
+}

flowable-engine-web/src/views/admin/FormProcessDesign.vue

@@ -256,7 +256,6 @@ export default {
           process: this.setup.process,
           remark: this.setup.remark
         }
-        console.log(JSON.stringify(this.setup.process))
         addProcessDefinition(template).then(res => {
           if (res.code === 1000){
             if (this.isNew){

flowable-engine-web/src/views/admin/layout/process/DefaultNodeProps.js

@@ -33,6 +33,10 @@ export const APPROVAL_PROPS = {
     leader: { //第几级领导
         level: 1
     },
+    listener:{
+        state: false,
+        list:[]
+    },
     roleList: [], //角色列表
     refuse: { //拒绝的操作
         type: 'TO_END', //驳回规则 TO_END  TO_NODE  TO_BEFORE

flowable-engine-web/src/views/common/process/config/ApprovalNodeConfig.vue

@@ -6,7 +6,9 @@
           <el-radio v-for="item in approvalTypes" :label="item.type" :key="item.type">{{ item.name }}</el-radio>
         </el-radio-group>
         <div v-if="nodeProps.assignedType === 'ASSIGN_USER'">
-          <el-button size="mini" icon="el-icon-plus" type="primary" @click="$refs.userPicker.showUserPicker()" round>选择人员</el-button>
+          <el-button size="mini" icon="el-icon-plus" type="primary" @click="$refs.userPicker.showUserPicker()" round>
+            选择人员
+          </el-button>
           <user-picker title="请选择系统角色" :multiple="false" ref="userPicker" :v-model="assignedUser" @ok="selectedUser"/>
           <avatar-ellipsis :row="3" :user-info="assignedUser"/>
         </div>
@@ -41,7 +43,9 @@
           </el-form-item>
         </div>
         <div v-else-if="nodeProps.assignedType === 'ROLE'">
-          <el-button size="mini" icon="el-icon-plus" type="primary" @click="$refs.rolePicker.showRolePicker()" round>选择系统角色</el-button>
+          <el-button size="mini" icon="el-icon-plus" type="primary" @click="$refs.rolePicker.showRolePicker()" round>
+            选择系统角色
+          </el-button>
           <role-picker title="请选择人员" :multiple="false" ref="rolePicker" :v-model="roleList" @ok="selectedRole"/>
           <role-items v-model="nodeProps.roleList"/>
         </div>
@@ -67,8 +71,11 @@
           <el-radio label="TO_USER">转交到指定人员</el-radio>
         </el-radio-group>
         <div style="margin-top: 10px" v-if="nodeProps.nobody.handler === 'TO_USER'">
-          <el-button size="mini" icon="el-icon-plus" type="primary" @click="$refs.toUserPicker.showUserPicker()" round>选择人员</el-button>
+          <el-button size="mini" icon="el-icon-plus" type="primary" @click="$refs.toUserPicker.showUserPicker()" round>
-          <user-picker title="请指定用户" :multiple="false" ref="toUserPicker" :v-model="nobodyAssignedUser" @ok="selectNoSetUser"/>
+            选择人员
+          </el-button>
+          <user-picker title="请指定用户" :multiple="false" ref="toUserPicker" :v-model="nobodyAssignedUser"
+                       @ok="selectNoSetUser"/>
           <avatar-ellipsis :row="3" :user-info="nobodyAssignedUser"/>
         </div>
       </el-form-item>
@@ -131,11 +138,81 @@
                        :value="node.id"></el-option>
           </el-select>
         </div>
-
+      </el-form-item>
+      <el-form-item label="自定义监听器">
+        <div slot="label">
+          <span style="margin-left: 20px">使用自定义监听器: </span>
+          <el-switch v-model="config.listener.state" @change="getListener"></el-switch>
+        </div>
+        <div v-if="config.listener.state">
+          <div slot="label">
+            <span style="margin-right: 10px">设置监听器</span>
+            <el-button type="text" @click="addListener(config.listener.list)"> + 添加</el-button>
+          </div>
+          <div v-for="(listen, index) in config.listener.list" :key="index">
+            <el-input v-if="listen.isSys" placeholder="监听器名称" :disabled="true" size="small" style="width: 100px;"
+                      v-model="listen.listenerName"/>
+            <el-input v-if="!listen.isSys" placeholder="监听器名称" size="small" style="width: 100px;"
+                      v-model="listen.listenerName"/>
+            <el-radio-group size="small" style="margin: 0 5px;" @change="typeChange(listen)" v-model="listen.isSys">
+              <el-radio-button :label="true">内置</el-radio-button>
+              <el-radio-button :label="false">自定义</el-radio-button>
+            </el-radio-group>
+            <el-select v-if="listen.isSys" style="width: 180px;" v-model="listen.listenerValue" size="small"
+                       @change="listenerOptionChange(listen)"
+                       placeholder="请选择表单字段">
+              <el-option v-for="option in listenerOption" :key="option.value" :label="option.label"
+                         :value="option.value"/>
+            </el-select>
+            <!--            <el-input v-if="listen.isSys" placeholder="请设置字段值" size="small" v-model="listen.listenerValue" style="width: 180px;"/>-->
+            <el-button v-if="!listen.isSys" type="text" size="small" @click="settingListener(listen)">设置</el-button>
+            <el-button @click="delListener(config.listener.list, index)"
+                       class="el-icon-delete" type="text"
+                       style="margin-left: 5px; color: #c75450;"/>
+          </div>
+        </div>
       </el-form-item>
     </el-form>
 
-
+    <el-dialog custom-class="custom-dialog" class="border" width="600px" title="定义监听器设置"
+               append-to-body :close-on-click-modal="true"
+               :destroy-on-close="true" :visible.sync="editListenShow">
+      <el-form ref="listenerForm" label-position="left" label-width="100px" :rules="listenerRules">
+        <el-form-item label="监听器名称" prop="listenerName" class="listen">
+          <el-input placeholder="请设置监听器名称" size="small" v-model="selectListen.listenerName"/>
+        </el-form-item>
+        <el-form-item label="监听器类型" prop="eventType" class="listen">
+          <el-select placeholder="请选择监听器类型" @change="selectListen.eventType = []"
+                     v-model="selectListen.listenerType">
+            <el-option :value="'1'" label="任务监听"/>
+            <el-option :value="'2'" label="执行监听"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="事件类型" prop="listenerType" class="listen">
+          <el-select multiple placeholder="请选择事件类型" v-model="selectListen.eventType">
+            <el-option value="create" label="create"/>
+            <el-option v-if="selectListen.listenerType === '2'" value="end" label="end"/>
+            <el-option v-if="selectListen.listenerType === '2'" value="take" label="take"/>
+            <el-option v-if="selectListen.listenerType === '1'" value="assignment" label="assignment"/>
+            <el-option v-if="selectListen.listenerType === '1'" value="complete" label="complete"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="值类型" prop="listenerValueType" class="listen">
+          <el-radio-group size="small" style="margin: 0 5px;" @change="listenerValueTypeChange" v-model="selectListen.listenerValueType">
+            <el-radio-button :label="'0'">Java类</el-radio-button>
+            <el-radio-button :label="'1'">表达式</el-radio-button>
+            <el-radio-button :label="'2'">代理表达式</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="值" prop="listenerValue" class="listen">
+          <el-input :placeholder="listenerValuePlaceholder" size="small" v-model="selectListen.listenerValue"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button size="mini" @click="editListenShow = false">取消</el-button>
+        <el-button size="mini" type="primary" @click="editListenShow = false">确认</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -143,6 +220,7 @@
 import RolePicker from "@/components/common/RolePicker";
 import UserPicker from "@/components/common/UserPicker";
 import RoleItems from "../RoleItems";
+import {getProcessListener} from "@/api/common";
 
 
 export default {
@@ -157,6 +235,13 @@ export default {
     }
   },
   data() {
+    const checkLength =(rule,value,callback) =>{
+      if (value.length === 0){
+        callback(new Error("事件类型不能为空!"))
+      }else {
+        callback()
+      }
+    }
     return {
       showOrgSelect: false,
       orgPickerSelected: [],
@@ -168,7 +253,26 @@ export default {
         {name: "角色", type: "ROLE"},
         {name: "发起人自己", type: "SELF"},
         {name: "表单内联系人", type: "FORM_USER"}
-      ]
+      ],
+      listenerOption: [],
+      selectListen: {},
+      editListenShow: false,
+      listenerValuePlaceholder:'请输入类路径',
+      listenerRules:{
+        listenerName:[
+          {required: true,message:'监听器名称不能为空',trigger:'blur'}
+        ],
+        eventType:[
+          {required: true,message:'监听器类型不能为空',trigger:'blur'},
+          {validator: checkLength,trigger:'blur'}
+        ],
+        listenerType:[
+          {required: true,message:'监听器类型不能为空',trigger:'blur'},
+        ],
+        listenerValue:[
+          {required: true,message:'值不能为空',trigger:'blur'}
+        ],
+      }
     };
   },
   computed: {
@@ -230,6 +334,9 @@ export default {
       }
     }
   },
+  mounted() {
+    this.getListener(this.config.listener.state)
+  },
   methods: {
     selectNoSetUser(select) {
       let userInfoList = []
@@ -258,6 +365,58 @@ export default {
       }
       this.assignedUser = userInfoList
     },
+    getListener(value) {
+      if (!value) {
+        return
+      }
+      getProcessListener(1).then(res => {
+        this.listenerOption = res.data
+      })
+    },
+    addListener(list) {
+      if (list.length > 0 && (list[list.length - 1].listenerName.trim() === ''
+          || list[list.length - 1].listenerValue.trim() === '')) {
+        this.$message.warning("请完善之前项后在添加")
+        return;
+      }
+      let item = {
+        listenerType: '1',
+        listenerName: '',
+        listenerValue: '',
+        eventType: [],
+        listenerValueType: '0',
+        isSys: true,
+      }
+      list.push(item)
+    },
+    delListener(list, index) {
+      console.log(list)
+      list.splice(index, 1)
+    },
+    listenerOptionChange(listen) {
+      for (let option of this.listenerOption) {
+        if (option.value === listen.listenerValue) {
+          listen.listenerName = option.label
+          return;
+        }
+      }
+    },
+    typeChange(listen) {
+      listen.listenerValue = ''
+      listen.listenerName = ''
+    },
+    settingListener(listen){
+      this.selectListen = listen
+      this.editListenShow = true
+    },
+    listenerValueTypeChange(val){
+      if (val === '0'){
+        this.listenerValuePlaceholder = '请输入类路径'
+      }else {
+        this.listenerValuePlaceholder = '请输入表达式'
+      }
+      console.log(val)
+    }
   }
 };
 </script>
@@ -313,4 +472,10 @@ export default {
 /deep/ .el-divider--horizontal {
   margin: 10px 0;
 }
+
+.listen {
+  /deep/ .el-form-item__label {
+    line-height: 40px !important;
+  }
+}
 </style>