DeXun/double-rack
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 流程详情页面优化显示

Browse Source
This commit is contained in:
tony
2022-12-16 11:17:20 +08:00
parent 295a46662e
commit a899003440
13 changed files with 302 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ruoyi-flowable/src/main/java/com/ruoyi/flowable/domain/vo/FlowTaskVo.java
View File

@@ -35,7 +35,7 @@ public class FlowTaskVo {
private String deploymentId; private String deploymentId;
@ApiModelProperty("流程变量信息") @ApiModelProperty("流程变量信息")
private Map<String, Object> values; private Map<String, Object> variables;
@ApiModelProperty("审批人") @ApiModelProperty("审批人")
private String assignee; private String assignee;

12
ruoyi-flowable/src/main/java/com/ruoyi/flowable/service/impl/FlowDefinitionServiceImpl.java
View File

@@ -181,7 +181,7 @@ public class FlowDefinitionServiceImpl extends FlowServiceFactory implements IFl
/** /**
* 根据流程定义ID启动流程实例 * 根据流程定义ID启动流程实例
* *
* @param procDefId 流程定义Id * @param procDefId 流程模板ID
* @param variables 流程变量 * @param variables 流程变量
* @return * @return
*/ */
@@ -193,13 +193,15 @@ public class FlowDefinitionServiceImpl extends FlowServiceFactory implements IFl
if (Objects.nonNull(processDefinition) && processDefinition.isSuspended()) { if (Objects.nonNull(processDefinition) && processDefinition.isSuspended()) {
return AjaxResult.error("流程已被挂起,请先激活流程"); return AjaxResult.error("流程已被挂起,请先激活流程");
} }
// variables.put("skip", true);
// variables.put(ProcessConstants.FLOWABLE_SKIP_EXPRESSION_ENABLED, true);
// 设置流程发起人Id到流程中 // 设置流程发起人Id到流程中
SysUser sysUser = SecurityUtils.getLoginUser().getUser(); SysUser sysUser = SecurityUtils.getLoginUser().getUser();
identityService.setAuthenticatedUserId(sysUser.getUserId().toString()); identityService.setAuthenticatedUserId(sysUser.getUserId().toString());
variables.put(ProcessConstants.PROCESS_INITIATOR, ""); variables.put(ProcessConstants.PROCESS_INITIATOR, sysUser.getUserId());
ProcessInstance processInstance = runtimeService.startProcessInstanceById(procDefId, variables); runtimeService.startProcessInstanceById(procDefId, variables);
// variables.put(ProcessConstants.PROCESS_INITIATOR, sysUser.getUserId());
// variables.put("skip", true);
// variables.put(ProcessConstants.FLOWABLE_SKIP_EXPRESSION_ENABLED, true);
// // 给第一步申请人节点设置任务执行人和意见 todo:第一个节点不设置为申请人节点有点问题？ // // 给第一步申请人节点设置任务执行人和意见 todo:第一个节点不设置为申请人节点有点问题？
// Task task = taskService.createTaskQuery().processInstanceId(processInstance.getProcessInstanceId()).singleResult(); // Task task = taskService.createTaskQuery().processInstanceId(processInstance.getProcessInstanceId()).singleResult();
// if (Objects.nonNull(task)) { // if (Objects.nonNull(task)) {

19
ruoyi-flowable/src/main/java/com/ruoyi/flowable/service/impl/FlowTaskServiceImpl.java
View File

@@ -90,12 +90,12 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
} }
if (DelegationState.PENDING.equals(task.getDelegationState())) { if (DelegationState.PENDING.equals(task.getDelegationState())) {
taskService.addComment(taskVo.getTaskId(), taskVo.getInstanceId(), FlowComment.DELEGATE.getType(), taskVo.getComment()); taskService.addComment(taskVo.getTaskId(), taskVo.getInstanceId(), FlowComment.DELEGATE.getType(), taskVo.getComment());
taskService.resolveTask(taskVo.getTaskId(), taskVo.getValues()); taskService.resolveTask(taskVo.getTaskId(), taskVo.getVariables());
} else { } else {
taskService.addComment(taskVo.getTaskId(), taskVo.getInstanceId(), FlowComment.NORMAL.getType(), taskVo.getComment()); taskService.addComment(taskVo.getTaskId(), taskVo.getInstanceId(), FlowComment.NORMAL.getType(), taskVo.getComment());
Long userId = SecurityUtils.getLoginUser().getUser().getUserId(); Long userId = SecurityUtils.getLoginUser().getUser().getUserId();
taskService.setAssignee(taskVo.getTaskId(), userId.toString()); taskService.setAssignee(taskVo.getTaskId(), userId.toString());
taskService.complete(taskVo.getTaskId(), taskVo.getValues()); taskService.complete(taskVo.getTaskId(), taskVo.getVariables());
} }
return AjaxResult.success(); return AjaxResult.success();
} }
@@ -616,6 +616,7 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
@Override @Override
public AjaxResult todoList(Integer pageNum, Integer pageSize) { public AjaxResult todoList(Integer pageNum, Integer pageSize) {
Page<FlowTaskDto> page = new Page<>(); Page<FlowTaskDto> page = new Page<>();
// 只查看自己的数据
Long userId = SecurityUtils.getLoginUser().getUser().getUserId(); Long userId = SecurityUtils.getLoginUser().getUser().getUserId();
TaskQuery taskQuery = taskService.createTaskQuery() TaskQuery taskQuery = taskService.createTaskQuery()
.active() .active()
@@ -648,8 +649,7 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
.processInstanceId(task.getProcessInstanceId()) .processInstanceId(task.getProcessInstanceId())
.singleResult(); .singleResult();
SysUser startUser = sysUserService.selectUserById(Long.parseLong(historicProcessInstance.getStartUserId())); SysUser startUser = sysUserService.selectUserById(Long.parseLong(historicProcessInstance.getStartUserId()));
// SysUser startUser = sysUserService.selectUserById(Long.parseLong(task.getAssignee())); flowTask.setStartUserId(startUser.getUserId().toString());
flowTask.setStartUserId(startUser.getNickName());
flowTask.setStartUserName(startUser.getNickName()); flowTask.setStartUserName(startUser.getNickName());
flowTask.setStartDeptName(startUser.getDept().getDeptName()); flowTask.setStartDeptName(startUser.getDept().getDeptName());
flowList.add(flowTask); flowList.add(flowTask);
@@ -916,6 +916,11 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
*/ */
@Override @Override
public AjaxResult processVariables(String taskId) { public AjaxResult processVariables(String taskId) {
// HistoricProcessInstance historicProcessInstance = historyService.createHistoricProcessInstanceQuery()
// .processInstanceId(task.getProcessInstanceId())
// .singleResult();
// SysUser startUser = sysUserService.selectUserById(Long.parseLong(historicProcessInstance.getStartUserId()));
// 流程变量 // 流程变量
HistoricTaskInstance historicTaskInstance = historyService.createHistoricTaskInstanceQuery().includeProcessVariables().finished().taskId(taskId).singleResult(); HistoricTaskInstance historicTaskInstance = historyService.createHistoricTaskInstanceQuery().includeProcessVariables().finished().taskId(taskId).singleResult();
if (Objects.nonNull(historicTaskInstance)) { if (Objects.nonNull(historicTaskInstance)) {
@@ -946,10 +951,8 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
MultiInstanceLoopCharacteristics multiInstance = userTask.getLoopCharacteristics(); MultiInstanceLoopCharacteristics multiInstance = userTask.getLoopCharacteristics();
// 会签节点 // 会签节点
if (Objects.nonNull(multiInstance)) { if (Objects.nonNull(multiInstance)) {
List<SysUser> list = sysUserService.selectUserList(new SysUser());
flowNextDto.setVars(ProcessConstants.PROCESS_MULTI_INSTANCE_USER); flowNextDto.setVars(ProcessConstants.PROCESS_MULTI_INSTANCE_USER);
flowNextDto.setType(ProcessConstants.PROCESS_MULTI_INSTANCE); flowNextDto.setType(ProcessConstants.PROCESS_MULTI_INSTANCE);
flowNextDto.setUserList(list);
} else { } else {
// 读取自定义节点属性 判断是否是否需要动态指定任务接收人员、组 // 读取自定义节点属性 判断是否是否需要动态指定任务接收人员、组
String dataType = userTask.getAttributeValue(ProcessConstants.NAMASPASE, ProcessConstants.PROCESS_CUSTOM_DATA_TYPE); String dataType = userTask.getAttributeValue(ProcessConstants.NAMASPASE, ProcessConstants.PROCESS_CUSTOM_DATA_TYPE);
@@ -982,16 +985,14 @@ public class FlowTaskServiceImpl extends FlowServiceFactory implements IFlowTask
// Step 1. 获取当前节点并找到下一步节点 // Step 1. 获取当前节点并找到下一步节点
FlowNextDto flowNextDto = new FlowNextDto(); FlowNextDto flowNextDto = new FlowNextDto();
// Step 2. 获取当前流程所有流程变量(网关节点时需要校验表达式) // Step 2. 获取当前流程所有流程变量(网关节点时需要校验表达式)
List<UserTask> nextUserTask = FindNextNodeUtil.getNextUserTasksByStart(repositoryService, processDefinition, new HashMap<>()); List<UserTask> nextUserTask = FindNextNodeUtil.getNextUserTasksByStart(repositoryService, processDefinition, flowTaskVo.getVariables());
if (CollectionUtils.isNotEmpty(nextUserTask)) { if (CollectionUtils.isNotEmpty(nextUserTask)) {
for (UserTask userTask : nextUserTask) { for (UserTask userTask : nextUserTask) {
MultiInstanceLoopCharacteristics multiInstance = userTask.getLoopCharacteristics(); MultiInstanceLoopCharacteristics multiInstance = userTask.getLoopCharacteristics();
// 会签节点 // 会签节点
if (Objects.nonNull(multiInstance)) { if (Objects.nonNull(multiInstance)) {
List<SysUser> list = sysUserService.selectUserList(new SysUser());
flowNextDto.setVars(ProcessConstants.PROCESS_MULTI_INSTANCE_USER); flowNextDto.setVars(ProcessConstants.PROCESS_MULTI_INSTANCE_USER);
flowNextDto.setType(ProcessConstants.PROCESS_MULTI_INSTANCE); flowNextDto.setType(ProcessConstants.PROCESS_MULTI_INSTANCE);
flowNextDto.setUserList(list);
} else { } else {
// 读取自定义节点属性 判断是否是否需要动态指定任务接收人员、组 // 读取自定义节点属性 判断是否是否需要动态指定任务接收人员、组
String dataType = userTask.getAttributeValue(ProcessConstants.NAMASPASE, ProcessConstants.PROCESS_CUSTOM_DATA_TYPE); String dataType = userTask.getAttributeValue(ProcessConstants.NAMASPASE, ProcessConstants.PROCESS_CUSTOM_DATA_TYPE);

4
ruoyi-ui/src/components/flow/Role/index.vue
View File

@@ -75,7 +75,7 @@ export default {
checkType: { checkType: {
type: String, type: String,
default: 'multiple', default: 'multiple',
required: true required: false
}, },
}, },
data() { data() {
@@ -126,7 +126,7 @@ export default {
}, },
roleList: { roleList: {
handler(newVal) { handler(newVal) {
if (newVal) { if (newVal && this.selectRoleList) {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.dataTable.clearSelection(); this.$refs.dataTable.clearSelection();
this.selectRoleList?.split(',').forEach(key => { this.selectRoleList?.split(',').forEach(key => {

8
ruoyi-ui/src/components/flow/User/index.vue
View File

@@ -35,7 +35,7 @@
v-model="queryParams.userName" v-model="queryParams.userName"
placeholder="请输入用户名称" placeholder="请输入用户名称"
clearable clearable
style="width: 240px" style="width: 150px"
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
@@ -44,7 +44,7 @@
v-model="queryParams.phonenumber" v-model="queryParams.phonenumber"
placeholder="请输入手机号码" placeholder="请输入手机号码"
clearable clearable
style="width: 240px" style="width: 150px"
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
@@ -181,7 +181,7 @@ export default {
}, },
userList: { userList: {
handler(newVal) { handler(newVal) {
if (newVal) { if (newVal && this.selectUserList) {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.dataTable.clearSelection(); this.$refs.dataTable.clearSelection();
this.selectUserList?.split(',').forEach(key => { this.selectUserList?.split(',').forEach(key => {
@@ -234,7 +234,7 @@ export default {
// 单选框选中数据 // 单选框选中数据
handleSingleUserSelect(selection) { handleSingleUserSelect(selection) {
this.radioSelected = selection.userId;//点击当前行时,radio同样有选中效果 this.radioSelected = selection.userId;//点击当前行时,radio同样有选中效果
this.$emit('handleUserSelect', selection.toString()); this.$emit('handleUserSelect', selection);
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {

50
ruoyi-ui/src/views/flowable/task/finished/detail/index.vue
View File

@@ -1,24 +1,21 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-card class="box-card" > <el-card class="box-card" >
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span class="el-icon-document">基础信息</span> <span class="el-icon-document">办结任务</span>
<el-button style="float: right;" type="primary" @click="goBack">返回</el-button> <el-button style="float: right;" size="mini" type="primary" @click="goBack">关闭</el-button>
</div> </div>
<el-tabs tab-position="top" @tab-click="handleClick">
<!--流程处理表单模块--> <!--表单信息-->
<el-col :span="16" :offset="6" v-if="variableOpen"> <el-tab-pane label="表单信息">
<div> <el-col :span="16" :offset="4" v-if="variableOpen">
<parser :key="new Date().getTime()" :form-conf="variablesData" /> <div class="test-form">
</div> <parser :key="new Date().getTime()" :form-conf="variablesData" />
</el-col> </div>
</el-card> </el-col>
</el-tab-pane>
<!--流程流转记录--> <!--流程流转记录-->
<el-card class="box-card" v-if="flowRecordList"> <el-tab-pane label="流转记录">
<div slot="header" class="clearfix">
<span class="el-icon-notebook-1">审批记录</span>
</div>
<el-col :span="16" :offset="4" > <el-col :span="16" :offset="4" >
<div class="block"> <div class="block">
<el-timeline> <el-timeline>
@@ -62,12 +59,12 @@
</el-timeline> </el-timeline>
</div> </div>
</el-col> </el-col>
</el-card> </el-tab-pane>
<el-card class="box-card"> <el-tab-pane label="流程图">
<div slot="header" class="clearfix"> <flow :xmlData="xmlData" :taskData="taskList"></flow>
<span class="el-icon-picture-outline">流程图</span> </el-tab-pane>
</div> </el-tabs>
<flow :xmlData="xmlData" :taskData="taskList"></flow> <el-button style="position: absolute;right:35px;top:35px;" type="primary" @click="goBack">关闭</el-button>
</el-card> </el-card>
</div> </div>
</template> </template>
@@ -76,7 +73,7 @@
import {flowRecord} from "@/api/flowable/finished"; import {flowRecord} from "@/api/flowable/finished";
import Parser from '@/components/parser/Parser' import Parser from '@/components/parser/Parser'
import {getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition"; import {getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition";
import flow from '@/views/flowable/task/record/flow' import flow from '@/views/flowable/task/finished/detail/flow'
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect"; import Treeselect from "@riophae/vue-treeselect";
@@ -137,6 +134,9 @@ export default {
this.getFlowRecordList( this.taskForm.procInsId, this.taskForm.deployId); this.getFlowRecordList( this.taskForm.procInsId, this.taskForm.deployId);
}, },
methods: { methods: {
handleClick(tab, event) {
console.log(tab, event);
},
/** xml 文件 */ /** xml 文件 */
getModelDetail(deployId) { getModelDetail(deployId) {
// 发送请求，获取xml // 发送请求，获取xml

50
ruoyi-ui/src/views/flowable/task/myProcess/detail/index.vue
View File

@@ -1,23 +1,21 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-card class="box-card" > <el-card class="box-card" >
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span class="el-icon-document">基础信息</span> <span class="el-icon-document">已发任务</span>
<el-button style="float: right;" type="primary" @click="goBack">返回</el-button> <el-button style="float: right;" size="mini" type="primary" @click="goBack">关闭</el-button>
</div> </div>
<el-tabs tab-position="top" @tab-click="handleClick">
<!--流程处理表单模块--> <!--表单信息-->
<el-col :span="16" :offset="6"> <el-tab-pane label="表单信息">
<div> <el-col :span="16" :offset="4">
<parser :key="new Date().getTime()" :form-conf="variablesData" /> <div class="test-form">
</div> <parser :key="new Date().getTime()" :form-conf="variablesData" />
</el-col> </div>
</el-card> </el-col>
<!--流程流转记录--> </el-tab-pane>
<el-card class="box-card" v-if="flowRecordList"> <!--流程流转记录-->
<div slot="header" class="clearfix"> <el-tab-pane label="流转记录">
<span class="el-icon-notebook-1">审批记录</span>
</div>
<el-col :span="16" :offset="4" > <el-col :span="16" :offset="4" >
<div class="block"> <div class="block">
<el-timeline> <el-timeline>
@@ -61,12 +59,13 @@
</el-timeline> </el-timeline>
</div> </div>
</el-col> </el-col>
</el-card> </el-tab-pane>
<el-card class="box-card"> <!--流程图-->
<div slot="header" class="clearfix"> <el-tab-pane label="流程图">
<span class="el-icon-picture-outline">流程图</span> <flow :xmlData="xmlData" :taskData="taskList"></flow>
</div> </el-tab-pane>
<flow :xmlData="xmlData" :taskData="taskList"></flow> </el-tabs>
<el-button style="position: absolute;right:35px;top:35px;" type="primary" @click="goBack">关闭</el-button>
</el-card> </el-card>
</div> </div>
</template> </template>
@@ -75,7 +74,7 @@
import {flowRecord} from "@/api/flowable/finished"; import {flowRecord} from "@/api/flowable/finished";
import Parser from '@/components/parser/Parser' import Parser from '@/components/parser/Parser'
import {getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition"; import {getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition";
import flow from '@/views/flowable/task/record/flow' import flow from '@/views/flowable/task/myProcess/detail/flow'
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default { export default {
@@ -121,6 +120,9 @@ export default {
this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId); this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
}, },
methods: { methods: {
handleClick(tab, event) {
console.log(tab, event);
},
/** xml 文件 */ /** xml 文件 */
getModelDetail(deployId) { getModelDetail(deployId) {
// 发送请求，获取xml // 发送请求，获取xml

6
ruoyi-ui/src/views/flowable/task/myProcess/send/flow.vue
View File

@@ -6,7 +6,7 @@
:is-view="true" :is-view="true"
:taskList="taskData" :taskList="taskData"
/>--> />-->
<flow-view :xmlData="xmlData" :taskList="taskData"/> <flow-view :xmlData="xmlData"/>
</div> </div>
</template> </template>
<script> <script>
@@ -24,10 +24,6 @@ export default {
type: String, type: String,
default: '' default: ''
}, },
taskData: {
type: Array,
default: () => []
}
}, },
data() { data() {
return {}; return {};

132
ruoyi-ui/src/views/flowable/task/myProcess/send/flowview.vue
View File

@@ -21,14 +21,11 @@ import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
export default { export default {
name: "FlowView", name: "FlowView",
props: { props: {
// xml 数据
xmlData: { xmlData: {
type: String, type: String,
default: '' default: ''
}, },
taskList: {
type: Array,
default: () => []
}
}, },
data() { data() {
return { return {
@@ -36,10 +33,14 @@ export default {
}; };
}, },
watch: { watch: {
xmlData: function(val) { xmlData: {
if (val) { handler(newVal) {
this.getImg(val) if (newVal) {
} this.loadFlowImg(newVal)
}
},
immediate: true, // 立即生效
deep: true //监听对象或数组的时候，要用到深度监听
} }
}, },
mounted() { mounted() {
@@ -49,28 +50,18 @@ export default {
container: this.$refs.flowCanvas, container: this.$refs.flowCanvas,
height: 'calc(100vh - 200px)', height: 'calc(100vh - 200px)',
}); });
this.getImg(this.xmlData)
}, },
methods: { methods: {
// 获取流程图片 // 加载流程图片
async getImg(xmlUrl) { async loadFlowImg(xmlData) {
const self = this const self = this
try { try {
await self.bpmnViewer.importXML(xmlUrl); await self.bpmnViewer.importXML(xmlData);
self.fitViewport() self.fitViewport()
if (self.taskList !==undefined && self.taskList.length > 0 ) {
self.fillColor()
}
} catch (err) { } catch (err) {
console.error(err.message, err.warnings) console.error(err.message, err.warnings)
} }
}, },
// 设置高亮颜色的class
setNodeColor(nodeCodes, colorClass, canvas) {
for (let i = 0; i < nodeCodes.length; i++) {
canvas.addMarker(nodeCodes[i], colorClass);
}
},
// 让图能自适应屏幕 // 让图能自适应屏幕
fitViewport() { fitViewport() {
this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto") this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
@@ -81,78 +72,6 @@ export default {
this.zoom += (zoomIn ? 0.1 : -0.1) this.zoom += (zoomIn ? 0.1 : -0.1)
if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom) if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
}, },
// 设置高亮颜色的
fillColor() {
const canvas = this.bpmnViewer.get('canvas')
this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
const completeTask = this.taskList.find(m => m.key === n.id)
const todoTask = this.taskList.find(m => !m.completed)
const endTask = this.taskList[this.taskList.length - 1]
if (n.$type === 'bpmn:UserTask') {
if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
n.outgoing?.forEach(nn => {
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
if (targetTask) {
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
}else {
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
}
}
})
}
}
// 排他网关
else if (n.$type === 'bpmn:ExclusiveGateway') {
if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
n.outgoing?.forEach(nn => {
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
if (targetTask) {
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
}
})
}
}
// 并行网关
else if (n.$type === 'bpmn:ParallelGateway') {
if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
n.outgoing?.forEach(nn => {
const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
if (targetTask) {
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
}
})
}
}
else if (n.$type === 'bpmn:StartEvent') {
n.outgoing.forEach(nn => {
const completeTask = this.taskList.find(m => m.key === nn.targetRef.id)
if (completeTask) {
canvas.addMarker(nn.id, 'highlight')
canvas.addMarker(n.id, 'highlight')
return
}
})
}
else if (n.$type === 'bpmn:EndEvent') {
if (endTask.key === n.id && endTask.completed) {
canvas.addMarker(n.id, 'highlight')
return
}
}
})
},
} }
}; };
</script> </script>
@@ -202,33 +121,6 @@ export default {
min-height: 650px; min-height: 650px;
} }
.highlight.djs-shape .djs-visual > :nth-child(1) {
fill: green !important;
stroke: green !important;
fill-opacity: 0.2 !important;
}
.highlight.djs-shape .djs-visual > :nth-child(2) {
fill: green !important;
}
.highlight.djs-shape .djs-visual > path {
fill: green !important;
fill-opacity: 0.2 !important;
stroke: green !important;
}
.highlight.djs-connection > .djs-visual > path {
stroke: green !important;
}
.highlight-todo.djs-connection > .djs-visual > path {
stroke: orange !important;
stroke-dasharray: 4px !important;
fill-opacity: 0.2 !important;
}
.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
fill: orange !important;
stroke: orange !important;
stroke-dasharray: 4px !important;
fill-opacity: 0.2 !important;
}
.overlays-div { .overlays-div {
font-size: 10px; font-size: 10px;
color: red; color: red;

217
ruoyi-ui/src/views/flowable/task/myProcess/send/index.vue
View File

@@ -2,42 +2,34 @@
<div class="app-container"> <div class="app-container">
<el-card class="box-card" > <el-card class="box-card" >
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span class="el-icon-document">基础信息</span> <span class="el-icon-document">发起任务</span>
<el-button style="float: right;" type="primary" @click="goBack">返回</el-button> <el-button style="float: right;" size="mini" type="primary" @click="goBack">关闭</el-button>
</div> </div>
<!--初始化流程加载表单信息--> <el-tabs tab-position="top" @tab-click="handleClick">
<el-col :span="16" :offset="4"> <!--表单信息-->
<div class="test-form"> <el-tab-pane label="表单信息">
<parser :key="new Date().getTime()" :form-conf="formConf" @submit="submitForm" ref="parser" @getData="getData" /> <!--初始化流程加载表单信息-->
</div> <el-col :span="16" :offset="4">
</el-col> <div class="test-form">
</el-card> <parser :key="new Date().getTime()" :form-conf="formConf" @submit="submitForm" ref="parser" @getData="getData" />
</div>
<!--审批正常流程--> </el-col>
<el-dialog :title="completeTitle" :visible.sync="completeOpen" width="60%" append-to-body> </el-tab-pane>
<el-form ref="taskForm" :model="taskForm"> <!--流程图-->
<el-form-item prop="targetKey"> <el-tab-pane label="流程图">
<!-- <el-row :gutter="24">--> <flow :xmlData="xmlData"></flow>
<flow-user v-if="checkSendUser" :checkType="checkType" @handleUserSelect="handleUserSelect"></flow-user> </el-tab-pane>
<flow-role v-if="checkSendRole" @handleRoleSelect="handleRoleSelect"></flow-role> </el-tabs>
<!-- </el-row>--> <el-button style="position: absolute;right:35px;top:35px;" type="primary" @click="goBack">关闭</el-button>
</el-form-item> <!--选择流程接收人-->
<el-form-item label="处理意见" label-width="80px" prop="comment" :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]"> <el-dialog :title="taskTitle" :visible.sync="taskOpen" width="65%" append-to-body>
<el-input type="textarea" v-model="taskForm.comment" placeholder="请输入处理意见"/> <flow-user v-if="checkSendUser" :checkType="checkType" @handleUserSelect="handleUserSelect"/>
</el-form-item> <flow-role v-if="checkSendRole" @handleRoleSelect="handleRoleSelect"/>
</el-form> <span slot="footer" class="dialog-footer">
<span slot="footer" class="dialog-footer"> <el-button @click="taskOpen = false">取 消</el-button>
<el-button @click="completeOpen = false">取 消</el-button> <el-button type="primary" @click="submitTask">提 交</el-button>
<el-button type="primary" @click="taskComplete">确 定</el-button> </span>
</span> </el-dialog>
</el-dialog>
<!--流程图-->
<el-card class="box-card">
<div slot="header" class="clearfix">
<span class="el-icon-picture-outline">流程图</span>
</div>
<flow :xmlData="xmlData" :taskData="taskList"></flow>
</el-card> </el-card>
</div> </div>
</template> </template>
@@ -45,26 +37,25 @@
<script> <script>
import Parser from '@/components/parser/Parser' import Parser from '@/components/parser/Parser'
import {definitionStart, readXml} from "@/api/flowable/definition"; import {definitionStart, readXml} from "@/api/flowable/definition";
import flow from '@/views/flowable/task/record/flow' import flow from '@/views/flowable/task/myProcess/send/flow'
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {listUser} from "@/api/system/user";
import {flowFormData} from "@/api/flowable/process"; import {flowFormData} from "@/api/flowable/process";
import {getNextFlowNodeByStart} from "@/api/flowable/todo"; import {getNextFlowNodeByStart} from "@/api/flowable/todo";
import FlowUser from '@/components/flow/User'
import FlowRole from '@/components/flow/Role'
export default { export default {
name: "Record", name: "Record",
components: { components: {
Parser, Parser,
flow, flow,
FlowUser,
FlowRole,
}, },
props: {}, props: {},
data() { data() {
return { return {
// 模型xml数据 // 模型xml数据
xmlData: "", xmlData: "",
taskList: [],
// 用户表格数据
userList: null,
defaultProps: { defaultProps: {
children: "children", children: "children",
label: "label" label: "label"
@@ -75,45 +66,32 @@ export default {
}, },
// 遮罩层 // 遮罩层
loading: true, loading: true,
rules: {}, // 表单校验 deployId: "", // 流程定义编号
variablesForm: {}, // 流程变量数据 procDefId: "", // 流程实例编号
taskForm:{
multiple: false,
comment:"", // 意见内容
procInsId: "", // 流程实例编号
instanceId: "", // 流程实例编号
deployId: "", // 流程定义编号
taskId: "" ,// 流程任务编号
procDefId: "", // 流程编号
vars: "",
targetKey:""
},
formConf: {}, // 默认表单数据 formConf: {}, // 默认表单数据
variables: [], // 流程变量数据 variables: [], // 流程变量数据
completeTitle: null, taskTitle: null,
completeOpen: false, taskOpen: false,
checkSendUser: false, // 是否展示人员选择模块 checkSendUser: false, // 是否展示人员选择模块
checkSendRole: false,// 是否展示角色选择模块 checkSendRole: false,// 是否展示角色选择模块
checkType: 'single', // 选择类型 checkType: 'single', // 选择类型
checkValues: null, // 选中任务接收人员数据
formData: {}, // 填写的表单数据,
activeValue: 1, // 切换tab标签
}; };
}, },
created() { created() {
this.taskForm.deployId = this.$route.query && this.$route.query.deployId; this.deployId = this.$route.query && this.$route.query.deployId;
// 初始化表单 // 初始化表单
this.taskForm.procDefId = this.$route.query && this.$route.query.procDefId; this.procDefId = this.$route.query && this.$route.query.procDefId;
this.getNextFlowNode(this.taskForm.deployId); // this.getNextFlowNodeByStart(this.deployId);
this.getFlowFormData(this.taskForm.deployId); this.getFlowFormData(this.deployId);
// 回显流程记录 // 回显流程记录
this.loadModelXml(this.taskForm.deployId); this.loadModelXml(this.deployId);
}, },
methods: { methods: {
/** 查询用户列表 */ handleClick(tab, event) {
getList() { console.log(tab, event);
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.userList = response.rows;
this.total = response.total;
}
);
}, },
/** xml 文件 */ /** xml 文件 */
loadModelXml(deployId) { loadModelXml(deployId) {
@@ -162,27 +140,78 @@ export default {
} }
}, },
/** 申请流程表单数据提交 */ /** 申请流程表单数据提交 */
submitForm(data) { submitForm(formData) {
if (data) { // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
const variables = data.valData; getNextFlowNodeByStart({deploymentId: this.deployId,variables:formData.valData}).then(res => {
const formData = data.formData; const data = res.data;
formData.disabled = true; if (data) {
formData.formBtns = false; if (data.type === 'assignee') { // 指定人员
if (this.taskForm.procDefId) { this.checkSendUser = true;
variables.variables = formData; this.checkType = "single";
// 启动流程并将表单数据加入流程变量 } else if (data.type === 'candidateUsers') { // 候选人员(多个)
definitionStart(this.taskForm.procDefId, JSON.stringify(variables)).then(res => { this.checkSendUser = true;
this.msgSuccess(res.msg); this.checkType = "multiple";
this.goBack(); } else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
}) this.checkSendRole = true;
} else if (data.type === 'multiInstance') { // 会签?
this.checkSendUser = true;
}
if (this.checkSendUser || this.checkSendRole){
this.taskOpen = true;
this.taskTitle = "选择任务接收";
this.formData = formData;
}
} }
})
// else {
// if (data) {
// const variables = data.valData;
// const formData = data.formData;
// formData.disabled = true;
// formData.formBtns = false;
// if (this.taskForm.procDefId) {
// variables.variables = formData;
// // 启动流程并将表单数据加入流程变量
// definitionStart(this.taskForm.procDefId, JSON.stringify(variables)).then(res => {
// this.msgSuccess(res.msg);
// this.goBack();
// })
// }
// }
// }
},
/** 提交流程 */
submitTask() {
if (!this.checkValues && this.checkSendUser){
this.$modal.msgError("请选择任务接收!");
return;
}
if (!this.checkValues && this.checkSendRole){
this.$modal.msgError("请选择流程接收角色组!");
return;
}
if (this.formData) {
const variables = this.formData.valData;
const formData = this.formData.formData;
// 表单是否禁用
formData.disabled = true;
// 是否显示按钮
formData.formBtns = false;
variables.variables = formData;
variables.approval = this.checkValues;
console.log(variables,"流程发起提交表单数据")
// 启动流程并将表单数据加入流程变量
definitionStart(this.procDefId, JSON.stringify(variables)).then(res => {
this.$modal.msgSuccess(res.msg);
this.goBack();
})
} }
}, },
/** 根据当前任务获取流程设计配置的下一步节点 */ /** 根据当前任务获取流程设计配置的下一步节点 */
getNextFlowNode(deploymentId) { getNextFlowNodeByStart(deploymentId,variables) {
// 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况 // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
const params = {deploymentId: deploymentId} getNextFlowNodeByStart({deploymentId: deploymentId,variables:variables}).then(res => {
getNextFlowNodeByStart(params).then(res => {
const data = res.data; const data = res.data;
if (data) { if (data) {
if (data.type === 'assignee') { // 指定人员 if (data.type === 'assignee') { // 指定人员
@@ -202,15 +231,11 @@ export default {
// 用户信息选中数据 // 用户信息选中数据
handleUserSelect(selection) { handleUserSelect(selection) {
if (selection) { if (selection) {
const selectVal = selection.map(item => item.userId); if (selection instanceof Array) {
if (selectVal instanceof Array) { const selectVal = selection.map(item => item.userId);
this.taskForm.values = { this.checkValues = selectVal.join(',')
"approval": selectVal.join(',')
}
} else { } else {
this.taskForm.values = { this.checkValues = selection.userId;
"approval": selectVal
}
} }
} }
}, },
@@ -219,13 +244,9 @@ export default {
if (selection) { if (selection) {
if (selection instanceof Array) { if (selection instanceof Array) {
const selectVal = selection.map(item => item.roleId); const selectVal = selection.map(item => item.roleId);
this.taskForm.values = { this.checkValues = selectVal.join(',')
"approval": selectVal.join(',')
}
} else { } else {
this.taskForm.values = { this.checkValues = selection;
"approval": selection
}
} }
} }
}, },

2
ruoyi-ui/src/views/flowable/task/record/index.vue
View File

@@ -3,7 +3,7 @@
<el-card class="box-card" > <el-card class="box-card" >
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span class="el-icon-document">基础信息</span> <span class="el-icon-document">基础信息</span>
<el-button style="float: right;" type="primary" @click="goBack">返回</el-button> <el-button style="float: right;" type="primary" @click="goBack">关闭</el-button>
</div> </div>
<!--流程处理表单模块--> <!--流程处理表单模块-->

178
ruoyi-ui/src/views/flowable/task/todo/detail/index.vue
View File

@@ -1,31 +1,32 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-card class="box-card" > <el-card class="box-card" >
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span class="el-icon-document">基础信息</span> <span class="el-icon-document">待办任务</span>
<el-button style="float: right;" type="primary" @click="goBack">返回</el-button> <el-tag style="margin-left:10px">发起人:{{startUser}}</el-tag>
</div> <el-tag>任务节点:{{taskName}}</el-tag>
<!--流程处理表单模块--> <el-button style="float: right;" size="mini" type="primary" @click="goBack">关闭</el-button>
<el-col :span="16" :offset="6"> </div>
<div> <el-tabs tab-position="top" @tab-click="handleClick">
<parser :key="new Date().getTime()" :form-conf="variablesData" /> <!--表单信息-->
</div> <el-tab-pane label="表单信息">
<div style="margin-left:10%;margin-bottom: 20px;font-size: 14px;"> <el-col :span="16" :offset="4">
<el-button icon="el-icon-edit-outline" type="success" size="mini" @click="handleComplete">审批</el-button> <div class="test-form">
<!-- <el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">委派</el-button>--> <parser :key="new Date().getTime()" :form-conf="variablesData" />
<!-- <el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleAssign">转办</el-button>--> </div>
<!-- <el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">签收</el-button>--> <div style="margin-left:15%;margin-bottom: 20px;font-size: 14px;">
<el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleReturn">退回</el-button> <el-button icon="el-icon-edit-outline" type="success" size="mini" @click="handleComplete">审批</el-button>
<el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回</el-button> <!-- <el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">委派</el-button>-->
</div> <!-- <el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleAssign">转办</el-button>-->
</el-col> <!-- <el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">签收</el-button>-->
</el-card> <el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleReturn">退回</el-button>
<el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回</el-button>
<!--流程流转记录--> </div>
<el-card class="box-card" v-if="flowRecordList"> </el-col>
<div slot="header" class="clearfix"> </el-tab-pane>
<span class="el-icon-notebook-1">审批记录</span> <!--流程流转记录-->
</div> <el-tab-pane label="流转记录">
<!--flowRecordList-->
<el-col :span="16" :offset="4" > <el-col :span="16" :offset="4" >
<div class="block"> <div class="block">
<el-timeline> <el-timeline>
@@ -69,45 +70,41 @@
</el-timeline> </el-timeline>
</div> </div>
</el-col> </el-col>
</el-card> </el-tab-pane>
<el-card class="box-card"> <!--流程图-->
<div slot="header" class="clearfix"> <el-tab-pane label="流程图">
<span class="el-icon-picture-outline">流程图</span>
</div>
<flow :xmlData="xmlData" :taskData="taskList"></flow> <flow :xmlData="xmlData" :taskData="taskList"></flow>
</el-card> </el-tab-pane>
</el-tabs>
<!--审批正常流程--> <!-- <el-button style="position: absolute;right:35px;top:35px;" type="primary" @click="goBack">关闭</el-button>-->
<el-dialog :title="completeTitle" :visible.sync="completeOpen" width="60%" append-to-body> <!--审批正常流程-->
<el-form ref="taskForm" :model="taskForm"> <el-dialog :title="completeTitle" :visible.sync="completeOpen" width="60%" append-to-body>
<el-form-item prop="targetKey"> <el-form ref="taskForm" :model="taskForm">
<!-- <el-row :gutter="24">--> <el-form-item prop="targetKey">
<flow-user v-if="checkSendUser" :checkType="checkType" @handleUserSelect="handleUserSelect"></flow-user> <flow-user v-if="checkSendUser" :checkType="checkType" @handleUserSelect="handleUserSelect"></flow-user>
<flow-role v-if="checkSendRole" @handleRoleSelect="handleRoleSelect"></flow-role> <flow-role v-if="checkSendRole" @handleRoleSelect="handleRoleSelect"></flow-role>
<!-- </el-row>--> </el-form-item>
</el-form-item> <el-form-item label="处理意见" label-width="80px" prop="comment" :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]">
<el-form-item label="处理意见" label-width="80px" prop="comment" :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]"> <el-input type="textarea" v-model="taskForm.comment" placeholder="请输入处理意见"/>
<el-input type="textarea" v-model="taskForm.comment" placeholder="请输入处理意见"/> </el-form-item>
</el-form-item> </el-form>
</el-form> <span slot="footer" class="dialog-footer">
<span slot="footer" class="dialog-footer">
<el-button @click="completeOpen = false">取 消</el-button> <el-button @click="completeOpen = false">取 消</el-button>
<el-button type="primary" @click="taskComplete">确 定</el-button> <el-button type="primary" @click="taskComplete">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
<!--退回流程-->
<!--退回流程--> <el-dialog :title="returnTitle" :visible.sync="returnOpen" width="40%" append-to-body>
<el-dialog :title="returnTitle" :visible.sync="returnOpen" width="40%" append-to-body>
<el-form ref="taskForm" :model="taskForm" label-width="80px" > <el-form ref="taskForm" :model="taskForm" label-width="80px" >
<el-form-item label="退回节点" prop="targetKey"> <el-form-item label="退回节点" prop="targetKey">
<el-radio-group v-model="taskForm.targetKey"> <el-radio-group v-model="taskForm.targetKey">
<el-radio-button <el-radio-button
v-for="item in returnTaskList" v-for="item in returnTaskList"
:key="item.id" :key="item.id"
:label="item.id" :label="item.id"
>{{item.name}}</el-radio-button> >{{item.name}}</el-radio-button>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="退回意见" prop="comment" :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]"> <el-form-item label="退回意见" prop="comment" :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
<el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见"/> <el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见"/>
</el-form-item> </el-form-item>
@@ -116,20 +113,20 @@
<el-button @click="returnOpen = false">取 消</el-button> <el-button @click="returnOpen = false">取 消</el-button>
<el-button type="primary" @click="taskReturn">确 定</el-button> <el-button type="primary" @click="taskReturn">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
<!--驳回流程-->
<!--驳回流程--> <el-dialog :title="rejectTitle" :visible.sync="rejectOpen" width="40%" append-to-body>
<el-dialog :title="rejectTitle" :visible.sync="rejectOpen" width="40%" append-to-body> <el-form ref="taskForm" :model="taskForm" label-width="80px" >
<el-form ref="taskForm" :model="taskForm" label-width="80px" > <el-form-item label="驳回意见" prop="comment" :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
<el-form-item label="驳回意见" prop="comment" :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]"> <el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见"/>
<el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见"/> </el-form-item>
</el-form-item> </el-form>
</el-form> <span slot="footer" class="dialog-footer">
<span slot="footer" class="dialog-footer">
<el-button @click="rejectOpen = false">取 消</el-button> <el-button @click="rejectOpen = false">取 消</el-button>
<el-button type="primary" @click="taskReject">确 定</el-button> <el-button type="primary" @click="taskReject">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</el-card>
</div> </div>
</template> </template>
@@ -140,7 +137,7 @@ import FlowRole from '@/components/flow/Role'
import Parser from '@/components/parser/Parser' import Parser from '@/components/parser/Parser'
import {definitionStart, getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition"; import {definitionStart, getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition";
import {complete, rejectTask, returnList, returnTask, getNextFlowNode, delegate} from "@/api/flowable/todo"; import {complete, rejectTask, returnList, returnTask, getNextFlowNode, delegate} from "@/api/flowable/todo";
import flow from '@/views/flowable/task/record/flow' import flow from '@/views/flowable/task/todo/detail/flow'
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {listUser} from "@/api/system/user"; import {listUser} from "@/api/system/user";
@@ -207,25 +204,34 @@ export default {
checkSendUser: false, // 是否展示人员选择模块 checkSendUser: false, // 是否展示人员选择模块
checkSendRole: false,// 是否展示角色选择模块 checkSendRole: false,// 是否展示角色选择模块
checkType: 'single', // 选择类型 checkType: 'single', // 选择类型
taskName: null, // 任务节点
startUser: null, // 发起人信息
}; };
}, },
created() { created() {
this.taskForm.deployId = this.$route.query && this.$route.query.deployId; if (this.$route.query) {
this.taskForm.taskId = this.$route.query && this.$route.query.taskId; this.taskName = this.$route.query.taskName;
this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId; this.startUser = this.$route.query.startUser;
this.taskForm.executionId = this.$route.query && this.$route.query.executionId; this.taskForm.deployId = this.$route.query.deployId;
this.taskForm.instanceId = this.$route.query && this.$route.query.procInsId; this.taskForm.taskId = this.$route.query.taskId;
// 回显流程记录 this.taskForm.procInsId = this.$route.query.procInsId;
this.getFlowViewer(this.taskForm.procInsId,this.taskForm.executionId); this.taskForm.executionId = this.$route.query.executionId;
this.getModelDetail(this.taskForm.deployId); this.taskForm.instanceId = this.$route.query.procInsId;
// 流程任务重获取变量表单 // 回显流程记录
if (this.taskForm.taskId){ this.getFlowViewer(this.taskForm.procInsId, this.taskForm.executionId);
this.processVariables(this.taskForm.taskId) this.getModelDetail(this.taskForm.deployId);
this.getNextFlowNode(this.taskForm.taskId) // 流程任务重获取变量表单
if (this.taskForm.taskId) {
this.processVariables(this.taskForm.taskId)
this.getNextFlowNode(this.taskForm.taskId)
}
this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
} }
this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
}, },
methods: { methods: {
handleClick(tab, event) {
console.log(tab, event);
},
/** 查询用户列表 */ /** 查询用户列表 */
getList() { getList() {
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => { listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
@@ -272,23 +278,21 @@ export default {
}, },
// 用户信息选中数据 // 用户信息选中数据
handleUserSelect(selection) { handleUserSelect(selection) {
// console.log(selection,"handleUserSelect")
if (selection) { if (selection) {
const selectVal = selection.map(item => item.userId); if (selection instanceof Array) {
if (selectVal instanceof Array) { const selectVal = selection.map(item => item.userId);
this.taskForm.values = { this.taskForm.values = {
"approval": selectVal.join(',') "approval": selectVal.join(',')
} }
} else { } else {
this.taskForm.values = { this.taskForm.values = {
"approval": selectVal "approval": selection
} }
} }
} }
}, },
// 角色信息选中数据 // 角色信息选中数据
handleRoleSelect(selection) { handleRoleSelect(selection) {
// console.log(selection,"handleRoleSelect")
if (selection) { if (selection) {
if (selection instanceof Array) { if (selection instanceof Array) {
const selectVal = selection.map(item => item.roleId); const selectVal = selection.map(item => item.roleId);

4
ruoyi-ui/src/views/flowable/task/todo/index.vue
View File

@@ -44,7 +44,7 @@
<el-table-column type="selection" width="55" align="center"/> <el-table-column type="selection" width="55" align="center"/>
<el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true"/> <el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true"/>
<el-table-column label="流程名称" align="center" prop="procDefName"/> <el-table-column label="流程名称" align="center" prop="procDefName"/>
<el-table-column label="任务节点" align="center" prop="taskName"/> <el-table-column label="当前节点" align="center" prop="taskName"/>
<el-table-column label="流程版本" align="center"> <el-table-column label="流程版本" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag size="medium" >v{{scope.row.procDefVersion}}</el-tag> <el-tag size="medium" >v{{scope.row.procDefVersion}}</el-tag>
@@ -148,6 +148,8 @@ export default {
executionId: row.executionId, executionId: row.executionId,
deployId: row.deployId, deployId: row.deployId,
taskId: row.taskId, taskId: row.taskId,
taskName: row.taskName,
startUser: row.startUserName + '-' + row.startDeptName,
}}) }})
}, },
// 取消按钮 // 取消按钮