提交代码
姜玉琦
parent
f65ab27693
commit
764983e7d0
|
|
@ -9,11 +9,15 @@ import com.yanzhu.system.domain.flowable.FlowTaskEntity;
|
|||
import com.yanzhu.system.service.ISysDeptService;
|
||||
import io.swagger.annotations.Api;
|
||||
import lombok.extern.slf4j.Slf4j;
|
||||
import org.apache.commons.collections4.CollectionUtils;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
|
||||
import java.util.HashMap;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.stream.Collectors;
|
||||
|
||||
/**
|
||||
|
|
@ -113,4 +117,29 @@ public class FlowBusinessKeyController extends BaseController {
|
|||
flowTaskEntity.setAssigneeId(super.getUserId());
|
||||
return getDataTable(flowBusinessKeyService.selectMyFinishedFlowTask(flowTaskEntity));
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询我的代办任务数量
|
||||
* @return AjaxResult 统计结果
|
||||
*/
|
||||
@GetMapping(value = "/findMyTask")
|
||||
public AjaxResult findMyTask() {
|
||||
FlowTaskEntity flowTaskEntity = new FlowTaskEntity();
|
||||
//超管查询所有数据
|
||||
if(!SysUser.isAdmin(super.getUserId())){
|
||||
SysUser sysUser = super.getLoginUser().getUser();
|
||||
flowTaskEntity.setDeptAncestors(sysUser.getDept().getAncestors());
|
||||
flowTaskEntity.setRoleIds(sysUser.getRoles().stream().map(role -> role.getRoleId()).collect(Collectors.toList()));
|
||||
}
|
||||
flowTaskEntity.setActiveName("await");
|
||||
List<Map<String, Object>> list = flowBusinessKeyService.selectMyFinishedFlowTask(flowTaskEntity);
|
||||
Map<String,Object> data = new HashMap<>();
|
||||
if(CollectionUtils.isNotEmpty(list)){
|
||||
data.put("todo",list.size());
|
||||
}else{
|
||||
data.put("todo",0);
|
||||
}
|
||||
return success(data);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,9 @@ public class FlowTaskEntity extends BaseEntity {
|
|||
@ApiModelProperty("业务名称")
|
||||
private String businessKeyName;
|
||||
|
||||
@ApiModelProperty("项目名称")
|
||||
private String businessKeyParName;
|
||||
|
||||
@ApiModelProperty("任务编号")
|
||||
private String taskId;
|
||||
|
||||
|
|
@ -314,6 +317,14 @@ public class FlowTaskEntity extends BaseEntity {
|
|||
this.deptAncestors = deptAncestors;
|
||||
}
|
||||
|
||||
public String getBusinessKeyParName() {
|
||||
return businessKeyParName;
|
||||
}
|
||||
|
||||
public void setBusinessKeyParName(String businessKeyParName) {
|
||||
this.businessKeyParName = businessKeyParName;
|
||||
}
|
||||
|
||||
private List<Long> roleIds;
|
||||
|
||||
public List<Long> getRoleIds() {
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
fa.businessKey,
|
||||
fa.businessDeptId,
|
||||
fa.businessKeyName,
|
||||
fa.businessKeyParName,
|
||||
fa.startUserId,
|
||||
fa.startUserName,
|
||||
fa.startDeptName,
|
||||
|
|
@ -35,6 +36,7 @@
|
|||
<if test="startDeptName != null and startDeptName != ''"> and fa.startDeptName like concat('%', #{startDeptName}, '%')</if>
|
||||
<if test="startUserName != null and startUserName != ''"> and fa.startUserName like concat('%', #{startUserName}, '%')</if>
|
||||
<if test="businessKeyName != null and businessKeyName != ''"> and fa.businessKeyName like concat('%', #{businessKeyName}, '%')</if>
|
||||
<if test="businessKeyParName != null and businessKeyParName != ''"> and fa.businessKeyParName like concat('%', #{businessKeyParName}, '%')</if>
|
||||
<if test="category != null and category != ''"> and fa.category = #{category}</if>
|
||||
<if test="params.beginDate != null and params.beginDate != '' and params.endDate != null and params.endDate != ''"> and date(fa.createTime) between #{params.beginDate} and #{params.endDate}</if>
|
||||
<!-- 查询条件-项目部门 -->
|
||||
|
|
@ -63,6 +65,7 @@
|
|||
<if test="procDefName != null and procDefName != ''"> and fa.procDefName like concat('%', #{procDefName}, '%')</if>
|
||||
<if test="businessKey != null and businessKey != ''"> and fa.businessKey = #{businessKey}</if>
|
||||
<if test="businessKeyName != null and businessKeyName != ''"> and fa.businessKeyName like concat('%', #{businessKeyName}, '%')</if>
|
||||
<if test="businessKeyParName != null and businessKeyParName != ''"> and fa.businessKeyParName like concat('%', #{businessKeyParName}, '%')</if>
|
||||
<if test="category != null and category != ''"> and fa.category = #{category}</if>
|
||||
<if test="params.beginDate != null and params.beginDate != '' and params.endDate != null and params.endDate != ''"> and date(fa.createTime) between #{params.beginDate} and #{params.endDate}</if>
|
||||
<!-- 查询条件-项目部门 -->
|
||||
|
|
@ -94,6 +97,7 @@
|
|||
<if test="procDefName != null and procDefName != ''"> and fa.procDefName like concat('%', #{procDefName}, '%')</if>
|
||||
<if test="businessKey != null and businessKey != ''"> and fa.businessKey = #{businessKey}</if>
|
||||
<if test="businessKeyName != null and businessKeyName != ''"> and fa.businessKeyName like concat('%', #{businessKeyName}, '%')</if>
|
||||
<if test="businessKeyParName != null and businessKeyParName != ''"> and fa.businessKeyParName like concat('%', #{businessKeyParName}, '%')</if>
|
||||
<if test="category != null and category != ''"> and fa.category = #{category}</if>
|
||||
<if test="params.beginDate != null and params.beginDate != '' and params.endDate != null and params.endDate != ''"> and fa.endTime between #{params.beginDate} and #{params.endDate}</if>
|
||||
order by fa.endTime desc
|
||||
|
|
|
|||
|
|
@ -26,3 +26,31 @@ export default {
|
|||
display: none;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.nest-menu,.el-submenu__title{
|
||||
position: relative;
|
||||
.todo_num_tips{
|
||||
position: absolute;
|
||||
right: 36px;
|
||||
background-color: #f56c6c;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
padding: 0 6px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #fff;
|
||||
cursor: pointer;
|
||||
top: 16px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.el-submenu__title{
|
||||
.todo_num_tips{
|
||||
top:20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 查询业务流程列表
|
||||
export function allList(query) {
|
||||
return request({
|
||||
url: '/flowable/businessKey/allList',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 统计业务流程列表
|
||||
export function queryCount(query) {
|
||||
return request({
|
||||
url: '/flowable/businessKey/queryCount',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 根据业务流程查询操作日志
|
||||
export function findCommentByProcInsId(query) {
|
||||
return request({
|
||||
url: '/flowable/businessKey/findCommentByProcInsId',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 根据业务流程查询表单数据
|
||||
export function findFormDatasByProcInsId(query) {
|
||||
return request({
|
||||
url: '/flowable/businessKey/findFormDatasByProcInsId',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 根据条件查询我的代办任务
|
||||
export function myAwaitFlowTaskList(query) {
|
||||
return request({
|
||||
url: '/flowable/businessKey/myAwaitFlowTaskList',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 根据条件查询我的已办任务
|
||||
export function myFinishedFlowTaskList(query) {
|
||||
return request({
|
||||
url: '/flowable/businessKey/myFinishedFlowTaskList',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询我的代办数量
|
||||
export function findMyTask(){
|
||||
return request({
|
||||
url: '/flowable/businessKey/findMyTask',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -88,7 +88,9 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('app/toggleSideBar')
|
||||
this.$store.dispatch('app/toggleSideBar');
|
||||
//查询任务tips
|
||||
this.$store.dispatch('settingAwaitNum');
|
||||
},
|
||||
async logout() {
|
||||
this.$confirm('确定注销并退出系统吗？', '提示', {
|
||||
|
|
|
|||
|
|
@ -26,6 +26,10 @@ export default {
|
|||
} else {
|
||||
vnodes.push(<span slot='title'>{(title)}</span>)
|
||||
}
|
||||
let name=context?.parent?.item?.name;
|
||||
if(['Todo','Task'].includes(name)){
|
||||
vnodes.push(h('span',{class:"todo_num_tips tips_"+name},1))
|
||||
}
|
||||
}
|
||||
return vnodes
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,6 +54,10 @@ export default {
|
|||
return variables;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//查询任务tips
|
||||
this.$store.dispatch('settingAwaitNum');
|
||||
},
|
||||
methods: {
|
||||
handleClickOutside() {
|
||||
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
import { findMyTask } from "@/api/flowable/businessKey";
|
||||
|
||||
const flowtask = {
|
||||
state: {
|
||||
awaitTaskNum:0
|
||||
},
|
||||
|
||||
mutations: {
|
||||
SET_AWAIT_TASK: (state, number) => {
|
||||
state.awaitTaskNum = number
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
// 设置代办任务
|
||||
settingAwaitNum({ commit }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
//查询当前登录人的代办任务数量
|
||||
findMyTask({}).then(response => {
|
||||
let todos=document.querySelectorAll(".tips_Todo");
|
||||
let tasks=document.querySelectorAll(".tips_Task");
|
||||
if(todos.length>0){
|
||||
todos.forEach(el=>{
|
||||
el.innerHTML=response.data.todo;
|
||||
if(response.data.todo>0){
|
||||
el.style.display="inline";
|
||||
}else{
|
||||
el.style.display="none";
|
||||
}
|
||||
});
|
||||
}
|
||||
if(tasks.length>0){
|
||||
tasks.forEach(el=>{
|
||||
el.innerHTML=response.data.todo;
|
||||
if(response.data.todo>0){
|
||||
el.style.display="inline";
|
||||
}else{
|
||||
el.style.display="none";
|
||||
}
|
||||
});
|
||||
}
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default flowtask
|
||||
|
|
@ -1,6 +1,12 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="流程名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
|
|
@ -10,9 +16,18 @@
|
|||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目名称" prop="deptName" v-if="showDeptName">
|
||||
<el-form-item label="项目单位" prop="businessKeyParName" v-if="showDeptName">
|
||||
<el-input
|
||||
v-model="queryParams.deptName"
|
||||
v-model="queryParams.businessKeyParName"
|
||||
placeholder="请输入项目单位名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目名称" prop="businessKeyName">
|
||||
<el-input
|
||||
v-model="queryParams.businessKeyName"
|
||||
placeholder="请输入项目名称"
|
||||
clearable
|
||||
size="small"
|
||||
|
|
@ -46,7 +61,9 @@
|
|||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<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>
|
||||
|
|
@ -66,10 +83,39 @@
|
|||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row> -->
|
||||
|
||||
<el-table v-loading="loading" :data="finishedList" border @selection-change="handleSelectionChange">
|
||||
<el-table-column label="项目名称" align="center" prop="businessKeyName" width="20" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="流程编号" align="center" prop="taskId" width="80" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="流程名称" align="center" prop="procDefName" :show-overflow-tooltip="true"/>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="finishedList"
|
||||
border
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
label="项目单位"
|
||||
align="center"
|
||||
prop="businessKeyParName"
|
||||
width="150"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
label="项目名称"
|
||||
align="center"
|
||||
prop="businessKeyName"
|
||||
width="150"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
label="流程编号"
|
||||
align="center"
|
||||
prop="taskId"
|
||||
width="80"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
label="流程名称"
|
||||
align="center"
|
||||
prop="procDefName"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column label="流程类别" align="center" prop="category" width="130">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag
|
||||
|
|
@ -86,31 +132,51 @@
|
|||
</el-table-column>
|
||||
<el-table-column label="发起人" align="center" width="180">
|
||||
<template slot-scope="scope">
|
||||
<label>{{scope.row.startUserName}}<br/><el-tag type="info" size="mini">{{scope.row.startDeptName}}</el-tag></label>
|
||||
<label
|
||||
>{{ scope.row.startUserName }}<br /><el-tag type="info" size="mini">{{
|
||||
scope.row.startDeptName
|
||||
}}</el-tag></label
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="接收时间" align="center" prop="createTime" width="160"/>
|
||||
<el-table-column label="审批时间" align="center" prop="endTime" width="160"/>
|
||||
<el-table-column label="接收时间" align="center" prop="createTime" width="160" />
|
||||
<el-table-column label="审批时间" align="center" prop="endTime" width="160" />
|
||||
<el-table-column label="审批耗时" align="center" prop="duration" width="140">
|
||||
<template slot-scope="scope">
|
||||
{{getDurationDate(scope.row)}}
|
||||
{{ getDurationDate(scope.row) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程状态" align="center" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.finishTime == null" size="mini">进行中</el-tag>
|
||||
<el-tag type="success" v-if="scope.row.finishTime != null && scope.row.ASSIGNEE_ != null" size="mini">已完成</el-tag>
|
||||
<el-tag type="danger" v-if="scope.row.finishTime != null && scope.row.ASSIGNEE_ == null" size="mini">已终止</el-tag>
|
||||
<el-tag
|
||||
type="success"
|
||||
v-if="scope.row.finishTime != null && scope.row.ASSIGNEE_ != null"
|
||||
size="mini"
|
||||
>已完成</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="danger"
|
||||
v-if="scope.row.finishTime != null && scope.row.ASSIGNEE_ == null"
|
||||
size="mini"
|
||||
>已终止</el-tag
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150" fixed="right" class-name="small-padding fixed-width">
|
||||
<el-table-column
|
||||
label="操作"
|
||||
width="150"
|
||||
fixed="right"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-tickets"
|
||||
@click="handleFlowRecord(scope.row)"
|
||||
>流转记录</el-button>
|
||||
>流转记录</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
|
|
@ -123,7 +189,7 @@
|
|||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
|
|
@ -133,14 +199,22 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { finishedList, getDeployment, delDeployment, addDeployment, updateDeployment, exportDeployment, revokeProcess } from "@/api/flowable/finished";
|
||||
import {myFinishedFlowTaskList} from "@/api/flowable/businessKey";
|
||||
import {
|
||||
finishedList,
|
||||
getDeployment,
|
||||
delDeployment,
|
||||
addDeployment,
|
||||
updateDeployment,
|
||||
exportDeployment,
|
||||
revokeProcess,
|
||||
} from "@/api/flowable/finished";
|
||||
import { myFinishedFlowTaskList } from "@/api/flowable/businessKey";
|
||||
import detailDrawer from "../myProcess/detail/detailDrawer.vue";
|
||||
|
||||
export default {
|
||||
name: "Deploy",
|
||||
dicts: ["sys_process_category"],
|
||||
components: {},
|
||||
components: {detailDrawer},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
|
|
@ -176,13 +250,14 @@ export default {
|
|||
parentDeploymentId: null,
|
||||
engineVersion: null,
|
||||
params: null,
|
||||
businessKeyName: null,
|
||||
businessKeyParName: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
},
|
||||
daterangeCheckTime:[],
|
||||
rules: {},
|
||||
daterangeCheckTime: [],
|
||||
showDeptName: false,
|
||||
};
|
||||
},
|
||||
|
|
@ -202,7 +277,7 @@ export default {
|
|||
this.queryParams.params["beginDate"] = this.daterangeCheckTime[0];
|
||||
this.queryParams.params["endDate"] = this.daterangeCheckTime[1];
|
||||
}
|
||||
myFinishedFlowTaskList(this.queryParams).then(response => {
|
||||
myFinishedFlowTaskList(this.queryParams).then((response) => {
|
||||
this.finishedList = response.data.records;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
|
|
@ -225,26 +300,24 @@ export default {
|
|||
derivedFrom: null,
|
||||
derivedFromRoot: null,
|
||||
parentDeploymentId: null,
|
||||
engineVersion: null
|
||||
engineVersion: null,
|
||||
};
|
||||
this.daterangeCheckTime=[];
|
||||
this.daterangeCheckTime = [];
|
||||
this.resetForm("form");
|
||||
},
|
||||
setIcon(val){
|
||||
if (val){
|
||||
setIcon(val) {
|
||||
if (val) {
|
||||
return "el-icon-check";
|
||||
}else {
|
||||
} else {
|
||||
return "el-icon-time";
|
||||
}
|
||||
|
||||
},
|
||||
setColor(val){
|
||||
if (val){
|
||||
setColor(val) {
|
||||
if (val) {
|
||||
return "#2bc418";
|
||||
}else {
|
||||
} else {
|
||||
return "#b3bdbb";
|
||||
}
|
||||
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
|
|
@ -253,15 +326,15 @@ export default {
|
|||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.daterangeCheckTime=[];
|
||||
this.daterangeCheckTime = [];
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
this.ids = selection.map((item) => item.id);
|
||||
this.single = selection.length !== 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
|
|
@ -270,29 +343,51 @@ export default {
|
|||
this.title = "添加流程定义";
|
||||
},
|
||||
/** 流程流转记录 */
|
||||
handleFlowRecord(row){
|
||||
this.$router.push({ path: '/flowable/task/finished/detail/index',
|
||||
handleFlowRecord(row) {
|
||||
this.$router.push({
|
||||
path: "/flowable/task/finished/detail/index",
|
||||
query: {
|
||||
procInsId: row.procInsId,
|
||||
deployId: row.deployId,
|
||||
taskId: row.taskId,
|
||||
}})
|
||||
},
|
||||
});
|
||||
},
|
||||
/** 撤回任务 */
|
||||
handleRevoke(row){
|
||||
handleRevoke(row) {
|
||||
const params = {
|
||||
instanceId: row.procInsId
|
||||
procInsId: row.procInsId,
|
||||
instanceId: row.procInsId,
|
||||
taskId:row.taskId,
|
||||
userId:row.startUserId,
|
||||
assignee:row.startUserName
|
||||
}
|
||||
revokeProcess(params).then( res => {
|
||||
this.$modal.msgSuccess(res.msg);
|
||||
this.getList();
|
||||
let _this = this;
|
||||
_this.$confirm('是否确认撤回当前任务流程?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_this.loading=true;
|
||||
revokeProcess(params).then(res => {
|
||||
//刷新代办任务
|
||||
_this.$store.dispatch('settingAwaitNum');
|
||||
_this.$modal.msgSuccess("任务撤回成功");
|
||||
_this.loading = false;
|
||||
//关闭并刷新列表
|
||||
_this.getList();
|
||||
}).catch(() => {
|
||||
_this.loading = false;
|
||||
});;
|
||||
}).catch(() => {
|
||||
console.log("取消撤销操作");
|
||||
});
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getDeployment(id).then(response => {
|
||||
const id = row.id || this.ids;
|
||||
getDeployment(id).then((response) => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改流程定义";
|
||||
|
|
@ -300,16 +395,16 @@ export default {
|
|||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.id != null) {
|
||||
updateDeployment(this.form).then(response => {
|
||||
updateDeployment(this.form).then((response) => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addDeployment(this.form).then(response => {
|
||||
addDeployment(this.form).then((response) => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
|
|
@ -324,28 +419,31 @@ export default {
|
|||
this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
type: "warning",
|
||||
})
|
||||
.then(function () {
|
||||
return delDeployment(ids);
|
||||
}).then(() => {
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm('是否确认导出所有流程定义数据项?', "警告", {
|
||||
this.$confirm("是否确认导出所有流程定义数据项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return exportDeployment(queryParams);
|
||||
}).then(response => {
|
||||
this.download(response.msg);
|
||||
type: "warning",
|
||||
})
|
||||
}
|
||||
}
|
||||
.then(function () {
|
||||
return exportDeployment(queryParams);
|
||||
})
|
||||
.then((response) => {
|
||||
this.download(response.msg);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,469 @@
|
|||
<template>
|
||||
<div class="app-detailDrawer">
|
||||
<el-drawer
|
||||
v-if="onOpen"
|
||||
:visible.sync="onOpen"
|
||||
ref="drawer"
|
||||
direction="rtl"
|
||||
size="80%"
|
||||
>
|
||||
<template slot="title">
|
||||
<div>流程详情 【{{ title }}】 - 当前进度【{{ jdtitle }}】<span v-if="showjd"> - 当前节点【{{options.taskName}}】</span></div>
|
||||
</template>
|
||||
<div class="drawer">
|
||||
<div class="drawerLeft">
|
||||
<div class="block containers">
|
||||
<div class="canvas" ref="flowCanvas"></div>
|
||||
<div class="maskLayer" />
|
||||
</div>
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(item,index ) in flowRecordList"
|
||||
:key="index"
|
||||
:icon="setIcon(item)"
|
||||
:color="setColor(item)"
|
||||
>
|
||||
<p style="font-weight: 700"> {{ getSort(index) }}{{item.taskName}}{{item.commentResult}}</p>
|
||||
<el-card :body-style="{ padding: '6px' }">
|
||||
<el-descriptions class="margin-top" :column="1" size="small" border>
|
||||
<el-descriptions-item v-if="item.assigneeName" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-user"></i>办理人</template>
|
||||
{{item.assigneeName}}
|
||||
<el-tag type="info" size="mini">{{item.deptName}}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.candidate" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-user"></i>候选办理</template>
|
||||
{{item.candidate}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.deleteReason" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-user"></i>驳回节点</template>
|
||||
{{getDeleteReason(item.deleteReason)}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-date"></i>接收时间</template>
|
||||
{{item.startTime}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.endTime" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-date"></i>处理时间</template>
|
||||
{{item.endTime}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.duration" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-time"></i>处理耗时</template>
|
||||
{{getDurationDate(item.duration)}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.message" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-tickets"></i>处理意见</template>
|
||||
{{item.message}}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<div class="drawerRight">
|
||||
<el-form
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="所属项目">
|
||||
{{ initData.projectName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="发起单位">
|
||||
{{ options.startDeptName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="发起人">
|
||||
{{ options.startUserName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="审批事项">
|
||||
{{ title }}
|
||||
</el-form-item>
|
||||
<el-form-item label="审批内容">
|
||||
<div v-for="(file,index ) in initData.files" :key="index">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-paperclip"
|
||||
@click="handledownload(file)"
|
||||
>{{file.substring(file.lastIndexOf('/')+1)}}</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请说明">
|
||||
{{initData.remark}}
|
||||
</el-form-item>
|
||||
<div style="text-align: center">
|
||||
<el-button type="danger" @click="doCanel">关 闭</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { flowXmlAndNode } from "@/api/flowable/definition";
|
||||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||||
import { findCommentByProcInsId, findFormDatasByProcInsId } from "@/api/flowable/businessKey";
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 抽屉层
|
||||
onOpen: false,
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
// 标题
|
||||
title: "",
|
||||
jdtitle:"",
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {},
|
||||
bpmnViewer: null,
|
||||
options: {},
|
||||
flowRecordList: [],
|
||||
showjd:false,
|
||||
//label样式
|
||||
labelStyle: { width: "180px" },
|
||||
initData:{}
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
setIcon(row) {
|
||||
if (row.endTime) {
|
||||
if(row.commentResult=="驳回")
|
||||
{
|
||||
return "el-icon-close";
|
||||
}else{
|
||||
return "el-icon-check";
|
||||
}
|
||||
} else {
|
||||
return "el-icon-time";
|
||||
}
|
||||
},
|
||||
setColor(row) {
|
||||
if (row.endTime) {
|
||||
if(row.commentResult=="驳回")
|
||||
{
|
||||
return "#f56c6c";
|
||||
}else{
|
||||
return "#2bc418";
|
||||
}
|
||||
} else {
|
||||
return "#b3bdbb";
|
||||
}
|
||||
},
|
||||
getSort(i) {
|
||||
let num = this.flowRecordList.length - i;
|
||||
if (num < 10) {
|
||||
num = "0" + num;
|
||||
}
|
||||
return num + ". ";
|
||||
},
|
||||
doCanel() {
|
||||
this.onOpen = false;
|
||||
},
|
||||
show(options) {
|
||||
this.options = options;
|
||||
this.title = options.procDefName;
|
||||
this.deptName = options.startDeptName;
|
||||
this.nickName = options.startUserName;
|
||||
this.onOpen = true;
|
||||
this.showjd = false;
|
||||
|
||||
if(options.finishTime==null){
|
||||
this.jdtitle="进行中";
|
||||
this.showjd=true;
|
||||
}else if(options.finishTime!=null && options.assigneeId==null){
|
||||
this.jdtitle="已终止";
|
||||
}else{
|
||||
this.jdtitle="已完成";
|
||||
}
|
||||
this.getFlowRecordList(options.procInsId, options.deployId);
|
||||
this.getFormDatasList(options.procInsId, options.deployId);
|
||||
flowXmlAndNode({ procInsId:options.procInsId, deployId: options.deployId }).then((res) => {
|
||||
this.initFlowImage(res.data);
|
||||
});
|
||||
},
|
||||
async initFlowImage(data) {
|
||||
const self = this;
|
||||
try {
|
||||
self.bpmnViewer = new BpmnViewer({
|
||||
container: this.$refs.flowCanvas,
|
||||
height: "90px",
|
||||
});
|
||||
await self.bpmnViewer.importXML(data.xmlData);
|
||||
// 自适应
|
||||
self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
|
||||
if (data.nodeData !==undefined && data.nodeData.length > 0 ) {
|
||||
self.fillColor(data.nodeData)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err.message, err.warnings);
|
||||
}
|
||||
},
|
||||
/** 流程流转记录 */
|
||||
getFlowRecordList(procInsId, deployId) {
|
||||
// const that = this
|
||||
// const params = {procInsId: procInsId, deployId: deployId}
|
||||
// flowRecord(params).then(res => {
|
||||
// that.flowRecordList = res.data.flowList;
|
||||
// }).catch(res => {
|
||||
// this.$message.error("数据异常，请联系管理员...");
|
||||
// })
|
||||
const that = this
|
||||
const params = {procInsId: procInsId}
|
||||
findCommentByProcInsId(params).then(res => {
|
||||
that.flowRecordList = res.data;
|
||||
}).catch(res => {
|
||||
this.$message.error("数据异常，请联系管理员...");
|
||||
})
|
||||
},
|
||||
/** 流程表单数据 */
|
||||
getFormDatasList(procInsId, deployId) {
|
||||
// const that = this
|
||||
// const params = {procInsId: procInsId, deployId: deployId}
|
||||
// flowRecord(params).then(res => {
|
||||
// that.flowRecordList = res.data.flowList;
|
||||
// }).catch(res => {
|
||||
// this.$message.error("数据异常，请联系管理员...");
|
||||
// })
|
||||
const that = this
|
||||
const params = {procInsId: procInsId}
|
||||
findFormDatasByProcInsId(params).then(res => {
|
||||
this.initData = res.data;
|
||||
this.initData.files = res.data.files.split(',');
|
||||
}).catch(res => {
|
||||
this.$message.error("数据异常，请联系管理员...");
|
||||
})
|
||||
},
|
||||
// 设置高亮颜色的
|
||||
fillColor(nodeData) {
|
||||
const canvas = this.bpmnViewer.get('canvas')
|
||||
this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
|
||||
const completeTask = nodeData.find(m => m.key === n.id)
|
||||
const todoTask = nodeData.find(m => !m.completed)
|
||||
const endTask = nodeData[nodeData.length - 1]
|
||||
if (n.$type === 'bpmn:UserTask') {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||
n.outgoing?.forEach(nn => {
|
||||
const targetTask = nodeData.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 = nodeData.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 = nodeData.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 = nodeData.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
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getDurationDate(val){
|
||||
// 计算出相差天数
|
||||
let days = Math.floor(val / (24 * 3600 * 1000))
|
||||
// 计算出小时数
|
||||
let leave1 = val % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
|
||||
let hours = Math.floor(leave1 / (3600 * 1000))
|
||||
// 计算相差分钟数
|
||||
let leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
|
||||
let minutes = Math.floor(leave2 / (60 * 1000))
|
||||
// 计算相差秒数
|
||||
let leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
|
||||
let seconds = Math.round(leave3 / 1000)
|
||||
if(days>0){
|
||||
if(days<10) days = "0"+days;
|
||||
if(hours<10) hours = "0"+hours;
|
||||
if(minutes<10) minutes = "0"+minutes;
|
||||
if(seconds<10) seconds = "0"+seconds;
|
||||
return days + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒';
|
||||
}
|
||||
if(hours>0){
|
||||
if(hours<10) hours = "0"+hours;
|
||||
if(minutes<10) minutes = "0"+minutes;
|
||||
if(seconds<10) seconds = "0"+seconds;
|
||||
return hours + '小时' + minutes + '分钟' + seconds + '秒';
|
||||
}
|
||||
if(minutes>0){
|
||||
if(minutes<10) minutes = "0"+minutes;
|
||||
if(seconds<10) seconds = "0"+seconds;
|
||||
return minutes + '分钟' + seconds + '秒';
|
||||
}
|
||||
if(seconds>0){
|
||||
if(seconds<10) seconds = "0"+seconds;
|
||||
return seconds + '秒';
|
||||
}
|
||||
},
|
||||
handledownload(url){
|
||||
this.$download.resource(url);
|
||||
},
|
||||
getDeleteReason(val){
|
||||
val = val.replace("Change activity to ","");
|
||||
let flowRecordList = this.flowRecordList;
|
||||
for(let i=0;i<flowRecordList.length;i++){
|
||||
if(flowRecordList[i].taskDefKey==val){
|
||||
return "驳回至"+flowRecordList[i].taskName;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.app-detailDrawer{
|
||||
.drawer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
.drawerLeft {
|
||||
width: 60%;
|
||||
min-width: 280px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
overflow-y: scroll;
|
||||
padding-right: 20px;
|
||||
.bjs-powered-by {
|
||||
display: none !important;
|
||||
|
||||
}
|
||||
.maskLayer {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 77px;
|
||||
}
|
||||
}
|
||||
.drawerRight {
|
||||
width: 40%;
|
||||
min-width: 400px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
.containers {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
.panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
width: 300px;
|
||||
}
|
||||
.load {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-form-item__label{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.djs-palette{
|
||||
left: 0px!important;
|
||||
top: 0px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.djs-container svg {
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
font-size: 10px;
|
||||
color: red;
|
||||
width: 100px;
|
||||
top: -20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,379 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-drawer
|
||||
v-if="onOpen"
|
||||
:visible.sync="onOpen"
|
||||
ref="drawer"
|
||||
direction="rtl"
|
||||
size="60%"
|
||||
@close="closeCallBack"
|
||||
>
|
||||
<template slot="title">
|
||||
<div>工程管理 【{{ title }}】</div>
|
||||
</template>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
label-width="120px"
|
||||
style="padding-right: 35px"
|
||||
>
|
||||
<div class="block containers">
|
||||
<div class="canvas" ref="flowCanvas"></div>
|
||||
<div class="maskLayer" />
|
||||
</div>
|
||||
<el-form-item label="所属项目" prop="businessKey">
|
||||
<el-select
|
||||
v-model="form.businessKey"
|
||||
placeholder="请选择所属项目"
|
||||
style="width: 100%"
|
||||
filterable
|
||||
:disabled="disPro"
|
||||
@change="projectChage"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item,index) in projectOptions"
|
||||
:key="index"
|
||||
:label="item.projectName"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="发起单位">
|
||||
{{ deptName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="发起人">
|
||||
{{ nickName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="审批事项">
|
||||
{{ title }}
|
||||
</el-form-item>
|
||||
<el-form-item label="审批内容" prop="files">
|
||||
<FileUpload
|
||||
@input="fileInput"
|
||||
:limit="9"
|
||||
v-model="form.files"
|
||||
:fileType="['pdf', 'png', 'jpg', 'jpeg', 'doc', 'docx', 'xls', 'xlsx']"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请说明" prop="remark">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="form.remark"
|
||||
placeholder="请输入申请说明"
|
||||
rows="5"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div style="text-align: center">
|
||||
<el-button type="primary" @click="submitForm">提交流程</el-button>
|
||||
<el-button @click="doCanel">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from "@/store";
|
||||
import { definitionStart, flowXmlAndNode } from "@/api/flowable/definition";
|
||||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||||
import { findFormDatasByProcInsId } from "@/api/flowable/businessKey";
|
||||
import { complete, getNextFlowNodeByStart } from "@/api/flowable/todo";
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
closeCallBack: {
|
||||
type: Function,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 抽屉层
|
||||
onOpen: false,
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
// 标题
|
||||
title: "",
|
||||
// 表单参数
|
||||
form: {
|
||||
businessKey: "",
|
||||
projectName: "",
|
||||
files: "",
|
||||
remark: "",
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
businessKey: [{ required: true, message: "请选择所属项目", trigger: "blur" }],
|
||||
files: [{ required: true, message: "请上传申请内容", trigger: "blur" }],
|
||||
remark: [
|
||||
{ required: false, message: "请输入申请说明", trigger: "blur" },
|
||||
{
|
||||
max: 500,
|
||||
message: "申请说明最多输入500字",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
projectOptions: null,
|
||||
deptName: null,
|
||||
nickName: null,
|
||||
disPro: false,
|
||||
bpmnViewer: null,
|
||||
options: {},
|
||||
taskTitle: null,
|
||||
taskOpen: false,
|
||||
daterangeMarksTime: [],
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
// 项目选择
|
||||
projectChage(val) {
|
||||
let projectName = "";
|
||||
this.projectOptions.forEach((item) => {
|
||||
if ((item.id = val)) {
|
||||
projectName = item.projectName;
|
||||
return;
|
||||
}
|
||||
});
|
||||
this.form.projectName = projectName;
|
||||
},
|
||||
doCanel() {
|
||||
this.onOpen = false;
|
||||
},
|
||||
show(options) {
|
||||
this.options = options;
|
||||
this.onOpen = true;
|
||||
this.title = options.procDefName;
|
||||
this.initFormDate(options.procInsId);
|
||||
flowXmlAndNode({ procInsId:options.procInsId, deployId: options.deployId }).then((res) => {
|
||||
this.initFlowImage(res.data);
|
||||
});
|
||||
},
|
||||
async initFlowImage(data) {
|
||||
const self = this;
|
||||
try {
|
||||
self.bpmnViewer = new BpmnViewer({
|
||||
container: this.$refs.flowCanvas,
|
||||
height: "150px",
|
||||
});
|
||||
await self.bpmnViewer.importXML(data.xmlData);
|
||||
// 自适应
|
||||
self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
|
||||
if (data.nodeData !==undefined && data.nodeData.length > 0 ) {
|
||||
self.fillColor(data.nodeData)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err.message, err.warnings);
|
||||
}
|
||||
},
|
||||
/** 流程表单数据 */
|
||||
initFormDate(procInsId, deployId) {
|
||||
this.projectOptions=[{id:this.options.businessKey,projectName:this.options.businessKeyName}];
|
||||
const params = {procInsId: procInsId}
|
||||
findFormDatasByProcInsId(params).then(res => {
|
||||
this.form = res.data;
|
||||
this.deptName = this.options.startDeptName;
|
||||
this.nickName = this.options.startUserName;
|
||||
this.form.taskId = this.options.taskId;
|
||||
this.form.taskName = this.options.taskName;
|
||||
this.form.userId = store.getters.userId;
|
||||
this.form.assignee = store.getters.name;
|
||||
this.form.procInsId = this.options.procInsId;
|
||||
this.form.instanceId = this.options.procInsId;
|
||||
}).catch(res => {
|
||||
this.$message.error("数据异常，请联系管理员...");
|
||||
})
|
||||
},
|
||||
fileInput(files) {
|
||||
let fileUrls = "";
|
||||
if (files.length > 0) {
|
||||
fileUrls = "";
|
||||
files.forEach((item) => {
|
||||
fileUrls += "," + item.url;
|
||||
});
|
||||
fileUrls = fileUrls.substring(1);
|
||||
}
|
||||
this.form.files = fileUrls;
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
this.form.variables={
|
||||
businessKey:this.form.businessKey,
|
||||
projectName:this.form.projectName,
|
||||
files:this.form.files,
|
||||
remark:this.form.remark,
|
||||
INITIATOR:this.form.INITIATOR
|
||||
}
|
||||
complete(this.form).then(res => {
|
||||
this.$store.dispatch('settingAwaitNum');
|
||||
this.$modal.msgSuccess("任务提交成功");
|
||||
this.loading = false;
|
||||
//关闭并刷新列表
|
||||
this.$refs.drawer.closeDrawer();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 设置高亮颜色的
|
||||
fillColor(nodeData) {
|
||||
const canvas = this.bpmnViewer.get('canvas')
|
||||
this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
|
||||
const completeTask = nodeData.find(m => m.key === n.id)
|
||||
const todoTask = nodeData.find(m => !m.completed)
|
||||
const endTask = nodeData[nodeData.length - 1]
|
||||
if (n.$type === 'bpmn:UserTask') {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
|
||||
n.outgoing?.forEach(nn => {
|
||||
const targetTask = nodeData.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 = nodeData.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 = nodeData.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 = nodeData.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>
|
||||
<style lang="scss">
|
||||
.bjs-powered-by {
|
||||
display: none !important;
|
||||
}
|
||||
.maskLayer {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 66px;
|
||||
}
|
||||
.app-container{
|
||||
.containers {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
}
|
||||
.panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
width: 300px;
|
||||
}
|
||||
.load {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-form-item__label{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.djs-palette{
|
||||
left: 0px!important;
|
||||
top: 0px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.djs-container svg {
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
font-size: 10px;
|
||||
color: red;
|
||||
width: 100px;
|
||||
top: -20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -16,9 +16,18 @@
|
|||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目名称" prop="deptName" v-if="showDeptName">
|
||||
<el-form-item label="项目单位" prop="businessKeyParName" v-if="showDeptName">
|
||||
<el-input
|
||||
v-model="queryParams.deptName"
|
||||
v-model="queryParams.businessKeyParName"
|
||||
placeholder="请输入项目单位名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目名称" prop="businessKeyName">
|
||||
<el-input
|
||||
v-model="queryParams.businessKeyName"
|
||||
placeholder="请输入项目名称"
|
||||
clearable
|
||||
size="small"
|
||||
|
|
@ -40,16 +49,16 @@
|
|||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请时间" prop="deployTime">
|
||||
<el-form-item label="申请时间">
|
||||
<el-date-picker
|
||||
clearable
|
||||
size="small"
|
||||
v-model="queryParams.deployTime"
|
||||
type="date"
|
||||
v-model="daterangeCheckTime"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="请选择申请时间"
|
||||
>
|
||||
</el-date-picker>
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
|
||||
|
|
@ -85,6 +94,17 @@
|
|||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane name="all"
|
||||
><div slot="label">全部申请（{{ tabs.all }}）</div></el-tab-pane
|
||||
>
|
||||
<el-tab-pane name="await"
|
||||
><div slot="label">进行中（{{ tabs.await }}）</div></el-tab-pane
|
||||
>
|
||||
<el-tab-pane name="finished"
|
||||
><div slot="label">已完成（{{ tabs.finished }}）</div></el-tab-pane
|
||||
>
|
||||
</el-tabs>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="myProcessList"
|
||||
|
|
@ -182,10 +202,10 @@
|
|||
@keyup.enter.native="handleProcessQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目名称" prop="deptName" v-if="showDeptName">
|
||||
<el-form-item label="项目单位" prop="deptName" v-if="showDeptName">
|
||||
<el-input
|
||||
v-model="queryProcessParams.deptName"
|
||||
placeholder="请输入项目名称"
|
||||
placeholder="请输入项目单位名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleProcessQuery"
|
||||
|
|
@ -266,6 +286,11 @@ import {
|
|||
} from "@/api/flowable/finished";
|
||||
import { myProcessList, stopProcess } from "@/api/flowable/process";
|
||||
import { listDefinition } from "@/api/flowable/definition";
|
||||
import { allList, queryCount } from "@/api/flowable/businessKey";
|
||||
import initTaskDrawer from "./initTaskDrawer.vue";
|
||||
import editTaskDrawer from "./editTaskDrawer.vue";
|
||||
import detailDrawer from "./detail/detailDrawer.vue";
|
||||
|
||||
export default {
|
||||
name: "Deploy",
|
||||
dicts: ["sys_process_category"],
|
||||
|
|
@ -307,7 +332,9 @@ export default {
|
|||
derivedFromRoot: null,
|
||||
parentDeploymentId: null,
|
||||
engineVersion: null,
|
||||
deptName: null,
|
||||
activeName: null,
|
||||
businessKeyName: null,
|
||||
businessKeyParName: null,
|
||||
},
|
||||
// 查询参数
|
||||
queryProcessParams: {
|
||||
|
|
@ -328,6 +355,13 @@ export default {
|
|||
form: {},
|
||||
// 表单校验
|
||||
rules: {},
|
||||
tabs: {
|
||||
all: 0,
|
||||
await: 0,
|
||||
finished: 0,
|
||||
},
|
||||
daterangeCheckTime: [],
|
||||
activeName: "await",
|
||||
showDeptName: false,
|
||||
};
|
||||
},
|
||||
|
|
@ -336,18 +370,33 @@ export default {
|
|||
if (this.$store.getters.userId == 1) {
|
||||
this.showDeptName = true;
|
||||
}
|
||||
this.queryParams.activeName = this.activeName;
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询流程定义列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
myProcessList(this.queryParams).then((response) => {
|
||||
this.queryParams.params = {};
|
||||
if (null != this.daterangeCheckTime && "" != this.daterangeCheckTime) {
|
||||
this.queryParams.params["beginDate"] = this.daterangeCheckTime[0];
|
||||
this.queryParams.params["endDate"] = this.daterangeCheckTime[1];
|
||||
}
|
||||
this.queryGroupCount(this.queryParams);
|
||||
allList(this.queryParams).then((response) => {
|
||||
this.myProcessList = response.data.records;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 统计 */
|
||||
queryGroupCount(params) {
|
||||
queryCount(params).then((response) => {
|
||||
this.tabs.await = response.data.await;
|
||||
this.tabs.finished = response.data.finished;
|
||||
this.tabs.all = parseInt(response.data.await) + parseInt(response.data.finished);
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
|
|
@ -367,6 +416,7 @@ export default {
|
|||
parentDeploymentId: null,
|
||||
engineVersion: null,
|
||||
};
|
||||
this.daterangeCheckTime = [];
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
|
|
@ -377,6 +427,7 @@ export default {
|
|||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.daterangeCheckTime = [];
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
|
|
|
|||
|
|
@ -0,0 +1,226 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-drawer
|
||||
v-if="onOpen"
|
||||
:visible.sync="onOpen"
|
||||
ref="drawer"
|
||||
direction="rtl"
|
||||
size="60%"
|
||||
@close="closeCallBack"
|
||||
>
|
||||
<template slot="title">
|
||||
<div>工程管理 【{{ title }}】</div>
|
||||
</template>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
label-width="120px"
|
||||
style="padding-right: 35px"
|
||||
>
|
||||
<div class="mycanvas">
|
||||
<div class="canvas" ref="flowCanvas"></div>
|
||||
<div class="maskLayer" />
|
||||
</div>
|
||||
<el-form-item label="所属项目" prop="businessKey">
|
||||
<el-select
|
||||
v-model="form.businessKey"
|
||||
placeholder="请选择所属项目"
|
||||
style="width: 100%"
|
||||
filterable
|
||||
:disabled="disPro"
|
||||
@change="projectChage"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item,index) in projectOptions"
|
||||
:key="index"
|
||||
:label="item.projectName"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="发起单位">
|
||||
{{ deptName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="发起人">
|
||||
{{ nickName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="审批事项">
|
||||
{{ title }}
|
||||
</el-form-item>
|
||||
<el-form-item label="审批内容" prop="files">
|
||||
<FileUpload
|
||||
@input="fileInput"
|
||||
:limit="9"
|
||||
:fileType="['pdf', 'png', 'jpg', 'jpeg', 'doc', 'docx', 'xls', 'xlsx']"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请说明" prop="remark">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="form.remark"
|
||||
placeholder="请输入申请说明"
|
||||
rows="5"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div style="text-align: center">
|
||||
<el-button type="primary" @click="submitForm">提交流程</el-button>
|
||||
<el-button @click="doCanel">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from "@/store";
|
||||
import { definitionStart, flowXmlAndNode } from "@/api/flowable/definition";
|
||||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||||
import { getNextFlowNodeByStart } from "@/api/flowable/todo";
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
closeCallBack: {
|
||||
type: Function,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 抽屉层
|
||||
onOpen: false,
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
// 标题
|
||||
title: "",
|
||||
// 表单参数
|
||||
form: {
|
||||
businessKey: "",
|
||||
projectName: "",
|
||||
files: "",
|
||||
remark: "",
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
businessKey: [{ required: true, message: "请选择所属项目", trigger: "blur" }],
|
||||
files: [{ required: true, message: "请上传申请内容", trigger: "blur" }],
|
||||
remark: [
|
||||
{ required: false, message: "请输入申请说明", trigger: "blur" },
|
||||
{
|
||||
max: 500,
|
||||
message: "申请说明最多输入500字",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
projectOptions: null,
|
||||
deptName: null,
|
||||
nickName: null,
|
||||
disPro: false,
|
||||
bpmnViewer: null,
|
||||
options: {},
|
||||
taskTitle: null,
|
||||
taskOpen: false,
|
||||
daterangeMarksTime: [],
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
// 查询和我相关的项目信息
|
||||
initMyProject() {
|
||||
// 获取项目列表的接口
|
||||
this.$api.publics.getMyProjectList({}).then((response) => {
|
||||
this.projectOptions = response.rows;
|
||||
if (response.rows.length == 0) {
|
||||
this.$message.error("未查询到和您关联项目，请联系子公司或管理员...");
|
||||
} else if (response.rows.length == 1) {
|
||||
// 这里只有一个项目，默认选中并只读
|
||||
this.form.businessKey = response.rows[0].id;
|
||||
this.form.projectName = response.rows[0].projectName;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 项目选择
|
||||
projectChage(val) {
|
||||
let projectName = "";
|
||||
this.projectOptions.forEach((item) => {
|
||||
if ((item.id = val)) {
|
||||
projectName = item.projectName;
|
||||
return;
|
||||
}
|
||||
});
|
||||
this.form.projectName = projectName;
|
||||
},
|
||||
doCanel() {
|
||||
this.onOpen = false;
|
||||
},
|
||||
show(options) {
|
||||
this.options = options;
|
||||
this.initMyProject();
|
||||
this.title = options.name;
|
||||
this.deptName = store.getters.dept.deptName;
|
||||
this.nickName = store.getters.name;
|
||||
const self = this;
|
||||
this.onOpen = true;
|
||||
flowXmlAndNode({ deployId: options.deploymentId }).then((res) => {
|
||||
this.initFlowImage(res.data.xmlData);
|
||||
});
|
||||
},
|
||||
async initFlowImage(data) {
|
||||
try {
|
||||
self.bpmnViewer = new BpmnViewer({
|
||||
container: this.$refs.flowCanvas,
|
||||
height: "150px",
|
||||
});
|
||||
await self.bpmnViewer.importXML(data);
|
||||
// 自适应
|
||||
self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
|
||||
} catch (err) {
|
||||
console.error(err.message, err.warnings);
|
||||
}
|
||||
},
|
||||
fileInput(files) {
|
||||
let fileUrls = "";
|
||||
if (files.length > 0) {
|
||||
fileUrls = "";
|
||||
files.forEach((item) => {
|
||||
fileUrls += "," + item.url;
|
||||
});
|
||||
fileUrls = fileUrls.substring(1);
|
||||
}
|
||||
this.form.files = fileUrls;
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
definitionStart(this.options.id, JSON.stringify(this.form)).then((res) => {
|
||||
this.$modal.msgSuccess(res.msg);
|
||||
this.loading = false;
|
||||
//关闭并刷新列表
|
||||
this.$refs.drawer.closeDrawer();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.bjs-powered-by {
|
||||
display: none !important;
|
||||
}
|
||||
.maskLayer {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 66px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,25 +1,69 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="流程名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入名称"
|
||||
placeholder="请输入流程名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="deployTime">
|
||||
<el-date-picker clearable size="small"
|
||||
v-model="queryParams.deployTime"
|
||||
type="date"
|
||||
<el-form-item label="项目单位" prop="businessKeyParName" v-if="showDeptName">
|
||||
<el-input
|
||||
v-model="queryParams.businessKeyParName"
|
||||
placeholder="请输入项目单位名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目名称" prop="businessKeyName">
|
||||
<el-input
|
||||
v-model="queryParams.businessKeyName"
|
||||
placeholder="请输入项目名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="流程类型" prop="category">
|
||||
<el-select
|
||||
v-model="queryParams.category"
|
||||
@keyup.enter.native="handleQuery"
|
||||
placeholder="请选择流程类型"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in dict.type.sys_process_category"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="接受时间">
|
||||
<el-date-picker
|
||||
v-model="daterangeCheckTime"
|
||||
style="width: 240px"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="选择时间">
|
||||
</el-date-picker>
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<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>
|
||||
|
|
@ -40,22 +84,35 @@
|
|||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="todoList" border @selection-change="handleSelectionChange">
|
||||
<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="procDefName"/>
|
||||
<el-table-column label="当前节点" align="center" prop="taskName"/>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="todoList"
|
||||
border
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<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="procDefName" />
|
||||
<el-table-column label="当前节点" align="center" prop="taskName" />
|
||||
<el-table-column label="流程版本" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="medium" >v{{scope.row.procDefVersion}}</el-tag>
|
||||
<el-tag size="medium">v{{ scope.row.procDefVersion }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="流程发起人" align="center">
|
||||
<template slot-scope="scope">
|
||||
<label>{{scope.row.startUserName}} <el-tag type="info" size="mini">{{scope.row.startDeptName}}</el-tag></label>
|
||||
<label
|
||||
>{{ scope.row.startUserName }}
|
||||
<el-tag type="info" size="mini">{{ scope.row.startDeptName }}</el-tag></label
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="接收时间" align="center" prop="createTime" width="180"/>
|
||||
<el-table-column label="接收时间" align="center" prop="createTime" width="180" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
|
|
@ -70,7 +127,7 @@
|
|||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
|
|
@ -88,12 +145,16 @@ import {
|
|||
rejectTask,
|
||||
getDeployment,
|
||||
delDeployment,
|
||||
exportDeployment
|
||||
exportDeployment,
|
||||
} from "@/api/flowable/todo";
|
||||
import { myAwaitFlowTaskList } from "@/api/flowable/businessKey";
|
||||
import editTaskDrawer from "../myProcess/editTaskDrawer.vue";
|
||||
import approveDrawer from "./detail/approveDrawer.vue";
|
||||
|
||||
export default {
|
||||
name: "Deploy",
|
||||
components: {},
|
||||
components: { editTaskDrawer, approveDrawer },
|
||||
dicts: ["sys_process_category"],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
|
|
@ -119,38 +180,56 @@ export default {
|
|||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
category: null
|
||||
category: null,
|
||||
params: null,
|
||||
businessKeyName: null,
|
||||
businessKeyParName: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {}
|
||||
rules: {},
|
||||
daterangeCheckTime: [],
|
||||
showDeptName: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 超管查询所有项目
|
||||
if (this.$store.getters.userId == 1) {
|
||||
this.showDeptName = true;
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询流程定义列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
todoList(this.queryParams).then(response => {
|
||||
this.queryParams.params = {};
|
||||
if (null != this.daterangeCheckTime && "" != this.daterangeCheckTime) {
|
||||
this.queryParams.params["beginDate"] = this.daterangeCheckTime[0];
|
||||
this.queryParams.params["endDate"] = this.daterangeCheckTime[1];
|
||||
}
|
||||
//重新刷新代办任务
|
||||
this.$store.dispatch('settingAwaitNum');
|
||||
myAwaitFlowTaskList(this.queryParams).then((response) => {
|
||||
this.todoList = response.data.records;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 跳转到处理页面
|
||||
handleProcess(row){
|
||||
this.$router.push({ path: '/flowable/task/todo/detail/index',
|
||||
handleProcess(row) {
|
||||
this.$router.push({
|
||||
path: "/flowable/task/todo/detail/index",
|
||||
query: {
|
||||
procInsId: row.procInsId,
|
||||
executionId: row.executionId,
|
||||
deployId: row.deployId,
|
||||
taskId: row.taskId,
|
||||
taskName: row.taskName,
|
||||
startUser: row.startUserName + '-' + row.startDeptName,
|
||||
}})
|
||||
startUser: row.startUserName + "-" + row.startDeptName,
|
||||
},
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
|
|
@ -169,8 +248,9 @@ export default {
|
|||
derivedFrom: null,
|
||||
derivedFromRoot: null,
|
||||
parentDeploymentId: null,
|
||||
engineVersion: null
|
||||
engineVersion: null,
|
||||
};
|
||||
this.daterangeCheckTime=[];
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
|
|
@ -181,13 +261,14 @@ export default {
|
|||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.daterangeCheckTime=[];
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.taskId)
|
||||
this.single = selection.length !== 1
|
||||
this.multiple = !selection.length
|
||||
this.ids = selection.map((item) => item.taskId);
|
||||
this.single = selection.length !== 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
|
|
@ -195,15 +276,16 @@ export default {
|
|||
this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function () {
|
||||
type: "warning",
|
||||
})
|
||||
.then(function () {
|
||||
return delDeployment(ids);
|
||||
}).then(() => {
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue