基于若依的ruoyi-vue3.8.7的flowable支持指定接收人的流程审批前端部分

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio

演示地址：RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/

更多nbcio-boot功能请看演示系统

gitee源代码地址

后端代码： https://gitee.com/nbacheng/nbcio-boot

前端代码：https://gitee.com/nbacheng/nbcio-vue.git

在线演示（包括H5）： http://218.75.87.38:9888

1、userTask.vue 主要增加一个radio与下面逻辑

} else if (val === 'INITIATOR') {userTaskForm.assignee = "${initiator}";userTaskForm.text = "流程发起人";} else if (val === 'APPROVAL') {userTaskForm.assignee = "${getNextApprovalHandler.getApproval(execution)}";userTaskForm.text = "指定接收人";}

2、启动start.vue如下完整代码

<template><div class="app-container"><el-card class="box-card"><div slot="header" class="clearfix"><span>发起流程</span></div><el-col :span="18" :offset="3"><div class="form-conf" v-if="formOpen"><parser :key="new Date().getTime()" :form-conf="formData" @submit="submit" ref="parser" @getData="getData"/></div></el-col></el-card><el-dialog :title="userData.title" :visible.sync="userData.open" width="60%" append-to-body><el-row type="flex" :gutter="20"><!--部门数据--><el-col :span="5"><el-card shadow="never" style="height: 100%"><div slot="header"><span>部门列表</span></div><div class="head-container"><el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search"/><el-tree:data="deptOptions":props="deptProps":expand-on-click-node="false":filter-node-method="filterNode"ref="tree"default-expand-all@node-click="handleNodeClick"/></div></el-card></el-col><el-col :span="18"><el-table ref="userTable":key="userData.type"height="500"v-loading="userLoading":data="userList"highlight-current-row@current-change="changeCurrentUser"@selection-change="handleSelectionChange"><el-table-column v-if="userData.type === 'copy' || userData.type === 'next' || userData.type === 'addSign' || userData.type === 'approval'" width="55" type="selection" /><el-table-column v-else width="30"><template slot-scope="scope"><el-radio :label="scope.row.userId" v-model="currentUserId">{{''}}</el-radio></template></el-table-column><el-table-column label="用户名" align="center" prop="nickName" /><el-table-column label="手机" align="center" prop="phonenumber" /><el-table-column label="部门" align="center" prop="dept.deptName" /></el-table><pagination:total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getList"/></el-col></el-row><span slot="footer" class="dialog-footer"><el-button @click="userData.open = false">取 消</el-button><el-button type="primary" @click="submitUserData">确 定</el-button></span></el-dialog></div>
</template><script>
import { selectUser, deptTreeSelect } from '@/api/system/user'
import { getProcessForm, startProcess } from '@/api/workflow/process'
import { complete} from '@/api/workflow/task'
import Parser from '@/utils/generator/parser'export default {name: 'WorkStart',components: {Parser},data() {return {definitionId: null,deployId: null,procInsId: null,formOpen: false,formData: {},userData: {title: '',type: '',open: false,},// 部门名称deptName: undefined,// 部门树选项deptOptions: undefined,userLoading: false,// 用户表格数据userList: null,deptProps: {children: "children",label: "label"},// 查询参数queryParams: {pageNum: 1,pageSize: 10,deptId: undefined},total: 0,currentUserId: null,nextApproval: [],userMultipleSelection: [],taskForm:{comment:"", // 意见内容procInsId: "", // 流程实例编号taskId: "" ,// 流程任务编号copyUserIds: "", // 抄送人Idvars: "",targetKey:""},}},created() {this.initData();},methods: {initData() {this.deployId = this.$route.params && this.$route.params.deployId;this.definitionId = this.$route.query && this.$route.query.definitionId;this.procInsId = this.$route.query && this.$route.query.procInsId;getProcessForm({definitionId: this.definitionId,deployId: this.deployId,procInsId: this.procInsId}).then(res => {if (res.data) {this.formData = res.data;this.formOpen = true}})},/** 接收子组件传的值 */getData(data) {if (data) {const variables = [];data.fields.forEach(item => {let variableData = {};variableData.label = item.__config__.label// 表单值为多个选项时if (item.__config__.defaultValue instanceof Array) {const array = [];item.__config__.defaultValue.forEach(val => {array.push(val)})variableData.val = array;} else {variableData.val = item.__config__.defaultValue}variables.push(variableData)})this.variables = variables;}},/** 查询部门下拉树结构 */getTreeSelect() {deptTreeSelect().then(response => {this.deptOptions = response.data;});},/** 查询用户列表 */getList() {this.userLoading = true;selectUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {this.userList = response.rows;this.total = response.total;this.toggleSelection(this.userMultipleSelection);this.userLoading = false;});},// 筛选节点filterNode(value, data) {if (!value) return true;return data.label.indexOf(value) !== -1;},// 节点单击事件handleNodeClick(data) {this.queryParams.deptId = data.id;this.getList();},// 多选框选中数据handleSelectionChange(selection) {this.userMultipleSelection = selection},changeCurrentUser(val) {this.currentUserId = val.userId},toggleSelection(selection) {if (selection && selection.length > 0) {this.$nextTick(()=> {selection.forEach(item => {let row = this.userList.find(k => k.userId === item.userId);this.$refs.userTable.toggleRowSelection(row);})})} else {this.$nextTick(() => {this.$refs.userTable.clearSelection();});}},onSelectUsers(title, type) {this.userData.title = title;this.userData.type = type;this.getTreeSelect();this.getList()this.userData.open = true;},onSelectNextApprovals() {this.userMultipleSelection = this.nextApproval;this.onSelectUsers('指定接收人', 'approval')},submitUserData() {let type = this.userData.type;if (type === 'approval' ) {if (!this.userMultipleSelection || this.userMultipleSelection.length <= 0) {this.$modal.msgError("请选择用户");return false;}let userIds = this.userMultipleSelection.map(k => k.userId);if (type === 'approval') {// 设置下一级接收人userName信息this.nextApproval = this.userMultipleSelection;this.taskForm.nextApproval = userIds instanceof Array ? userIds.join(',') : userIds;}this.userData.open = false;console.log("submitUserData type",type);if (type === 'approval') {console.log("submitUserData taskForm",this.taskForm);complete(this.taskForm).then(response => {this.$modal.msgSuccess(response.msg);this.goBack();});}} else {if (!this.taskForm.comment) {this.$modal.msgError("请输入审批意见");return false;}if (!this.currentUserId) {this.$modal.msgError("请选择用户");return false;}this.taskForm.userId = this.currentUserId;}},submit(data) {if (data && this.definitionId) {// 启动流程并将表单数据加入流程变量startProcess(this.definitionId, JSON.stringify(data.valData)).then(res => {console.log("startProcess res",res);if(res.code === 200 && res.data &&res.data.hasOwnProperty('nextUserIds') && res.data.nextUserIds === '${approval}') {this.taskForm.variables = res.data.variables;this.taskForm.taskId = res.data.taskId;this.taskForm.procInsId = res.data.procInsId;this.onSelectNextApprovals();}else {this.$modal.msgSuccess(res.msg);this.$tab.closeOpenPage({path: '/work/own'})}})}}}
}
</script><style lang="scss" scoped>
.form-conf {margin: 15px auto;width: 80%;padding: 15px;
}
</style>

3、效果图