Compare commits
No commits in common. "4aa6dd07a319b0355d533fafc1a542abf0d4fa66" and "76fcef91400c1b1bff934e1c14250afc9225fc85" have entirely different histories.
4aa6dd07a3
...
76fcef9140
|
|
@ -74,7 +74,7 @@
|
||||||
<!--监理单位/总包公司/分包单位查询当前关联数据-->
|
<!--监理单位/总包公司/分包单位查询当前关联数据-->
|
||||||
<if test='nowRole == "5" or nowRole == "6" or nowRole == "7"'> and fa.businessKey in (select DISTINCT projectId from sur_project_unit_info where unitId=#{nowDept} and del_flag=0)</if>
|
<if test='nowRole == "5" or nowRole == "6" or nowRole == "7"'> and fa.businessKey in (select DISTINCT projectId from sur_project_unit_info where unitId=#{nowDept} and del_flag=0)</if>
|
||||||
<!--普通用户查询项目人员-->
|
<!--普通用户查询项目人员-->
|
||||||
<if test='nowRole == "15" or nowRole == "16" or nowRole == "17" or nowRole == "99"'> and fa.businessKey in (select DISTINCT project_id from sur_project_userinfo where user_id=#{nowUser} and is_del=0)</if>
|
<if test='nowRole == "15" or nowRole == "16" or nowRole == "17" or nowRole == "99"'> and fa.businessKey in (select DISTINCT projectId from sur_project_userinfo where user_id=#{nowUser} and is_del=0)</if>
|
||||||
AND (fa.ASSIGNEE_ = #{nowUser}
|
AND (fa.ASSIGNEE_ = #{nowUser}
|
||||||
OR (
|
OR (
|
||||||
fa.ASSIGNEE_ IS NULL
|
fa.ASSIGNEE_ IS NULL
|
||||||
|
|
|
||||||
|
|
@ -132,17 +132,15 @@
|
||||||
@pagination="getList"
|
@pagination="getList"
|
||||||
/>
|
/>
|
||||||
<detailDrawer ref="detailDrawer"></detailDrawer>
|
<detailDrawer ref="detailDrawer"></detailDrawer>
|
||||||
<detailLeaveDrawer ref="detailLeaveDrawer"></detailLeaveDrawer>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { finishedList, getDeployment, delDeployment, addDeployment, updateDeployment, exportDeployment, revokeProcess } from "@/api/flowable/finished";
|
import { finishedList, getDeployment, delDeployment, addDeployment, updateDeployment, exportDeployment, revokeProcess } from "@/api/flowable/finished";
|
||||||
import {myFinishedFlowTaskList} from "@/api/flowable/businessKey";
|
import {myFinishedFlowTaskList} from "@/api/flowable/businessKey";
|
||||||
import detailDrawer from "../myProcess/detail/detailDrawer.vue";
|
import detailDrawer from "../myProcess/detail/detailDrawer.vue";
|
||||||
import detailLeaveDrawer from "../myProcess/detail/detailLeaveDrawer.vue";
|
|
||||||
export default {
|
export default {
|
||||||
name: "Deploy",
|
name: "Deploy",
|
||||||
components: { detailDrawer, detailLeaveDrawer },
|
components: { detailDrawer },
|
||||||
dicts: ["sys_process_category"],
|
dicts: ["sys_process_category"],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -266,12 +264,7 @@ export default {
|
||||||
},
|
},
|
||||||
/** 流程流转记录 */
|
/** 流程流转记录 */
|
||||||
handleFlowRecord(row){
|
handleFlowRecord(row){
|
||||||
//根据不同业务跳转不同表单
|
this.$refs.detailDrawer.show(row);
|
||||||
if(row.procDefKey=="flow_xmglzdl_qjspb"){
|
|
||||||
this.$refs.detailLeaveDrawer.show(row);
|
|
||||||
}else{
|
|
||||||
this.$refs.detailDrawer.show(row);
|
|
||||||
}
|
|
||||||
// this.$router.push({ path: '/flowable/task/finished/detail/index',
|
// this.$router.push({ path: '/flowable/task/finished/detail/index',
|
||||||
// query: {
|
// query: {
|
||||||
// procInsId: row.procInsId,
|
// procInsId: row.procInsId,
|
||||||
|
|
|
||||||
|
|
@ -1,496 +0,0 @@
|
||||||
<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 block containers">
|
|
||||||
<div class="canvas" ref="flowCanvas"></div>
|
|
||||||
<div class="maskLayer" />
|
|
||||||
<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-card class="box-card">
|
|
||||||
<el-descriptions class="margin-top" :title="title" :column="1" size="medium" border>
|
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-map-location"></i>
|
|
||||||
所属项目
|
|
||||||
</template>
|
|
||||||
{{ initData.projectName }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-school"></i>
|
|
||||||
申请单位
|
|
||||||
</template>
|
|
||||||
{{ options.startDeptName }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-collection-tag"></i>
|
|
||||||
申请事项
|
|
||||||
</template>
|
|
||||||
{{ title }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-user"></i>
|
|
||||||
申请人
|
|
||||||
</template>
|
|
||||||
{{ options.startUserName }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-s-flag"></i>
|
|
||||||
申请日期
|
|
||||||
</template>
|
|
||||||
{{ initData.date }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-time"></i>
|
|
||||||
请假日期
|
|
||||||
</template>
|
|
||||||
{{ initData.beginDate }} - {{ initData.endDate }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-tickets"></i>
|
|
||||||
请假时间
|
|
||||||
</template>
|
|
||||||
共 {{initData.day}} 天
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-chat-dot-square"></i>
|
|
||||||
请假事由
|
|
||||||
</template>
|
|
||||||
{{initData.remark}}
|
|
||||||
</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
</el-card>
|
|
||||||
<div style="text-align: center;margin-top: 30px;">
|
|
||||||
<el-button type="danger" @click="doCanel">关 闭</el-button>
|
|
||||||
</div>
|
|
||||||
</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;
|
|
||||||
}).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){
|
|
||||||
console.log(i);
|
|
||||||
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 {
|
|
||||||
.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: 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 {
|
|
||||||
font-size: 10px;
|
|
||||||
color: red;
|
|
||||||
width: 100px;
|
|
||||||
top: -20px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
@ -69,7 +69,7 @@
|
||||||
v-hasPermi="['system:deployment:add']"
|
v-hasPermi="['system:deployment:add']"
|
||||||
>新增流程</el-button>
|
>新增流程</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1.5">
|
<!-- <el-col :span="1.5">
|
||||||
<el-button
|
<el-button
|
||||||
type="danger"
|
type="danger"
|
||||||
plain
|
plain
|
||||||
|
|
@ -79,7 +79,7 @@
|
||||||
@click="handleDelete"
|
@click="handleDelete"
|
||||||
v-hasPermi="['system:deployment:remove']"
|
v-hasPermi="['system:deployment:remove']"
|
||||||
>删除</el-button>
|
>删除</el-button>
|
||||||
</el-col>
|
</el-col> -->
|
||||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||||
|
|
@ -213,9 +213,7 @@
|
||||||
/>
|
/>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
<initTaskDrawer ref="initTaskDrawer" :closeCallBack="getList"></initTaskDrawer>
|
<initTaskDrawer ref="initTaskDrawer" :closeCallBack="getList"></initTaskDrawer>
|
||||||
<initLeaveTaskDrawer ref="initLeaveTaskDrawer" :closeCallBack="getList"></initLeaveTaskDrawer>
|
|
||||||
<detailDrawer ref="detailDrawer"></detailDrawer>
|
<detailDrawer ref="detailDrawer"></detailDrawer>
|
||||||
<detailLeaveDrawer ref="detailLeaveDrawer"></detailLeaveDrawer>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -232,16 +230,12 @@ import { myProcessList,stopProcess } from "@/api/flowable/process";
|
||||||
import {allList,queryCount} from "@/api/flowable/businessKey";
|
import {allList,queryCount} from "@/api/flowable/businessKey";
|
||||||
import {myDefinitionList} from "@/api/flowable/definition";
|
import {myDefinitionList} from "@/api/flowable/definition";
|
||||||
import initTaskDrawer from "./initTaskDrawer.vue";
|
import initTaskDrawer from "./initTaskDrawer.vue";
|
||||||
import initLeaveTaskDrawer from './initLeaveTaskDrawer'
|
|
||||||
import detailDrawer from "./detail/detailDrawer.vue";
|
import detailDrawer from "./detail/detailDrawer.vue";
|
||||||
import detailLeaveDrawer from "./detail/detailLeaveDrawer.vue";
|
|
||||||
export default {
|
export default {
|
||||||
name: "Deploy",
|
name: "Deploy",
|
||||||
components: {
|
components: {
|
||||||
initTaskDrawer,
|
initTaskDrawer,
|
||||||
initLeaveTaskDrawer,
|
detailDrawer
|
||||||
detailDrawer,
|
|
||||||
detailLeaveDrawer
|
|
||||||
},
|
},
|
||||||
dicts: ["sys_process_category"],
|
dicts: ["sys_process_category"],
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -411,11 +405,7 @@ export default {
|
||||||
/** 发起流程申请 */
|
/** 发起流程申请 */
|
||||||
handleStartProcess(row){
|
handleStartProcess(row){
|
||||||
this.open = false;
|
this.open = false;
|
||||||
if(row.flowKey=="flow_xmglzdl_qjspb"){
|
this.$refs.initTaskDrawer.show(row);
|
||||||
this.$refs.initLeaveTaskDrawer.show(row);
|
|
||||||
}else{
|
|
||||||
this.$refs.initTaskDrawer.show(row);
|
|
||||||
}
|
|
||||||
// this.$router.push({ path: '/flowable/task/myProcess/send/index',
|
// this.$router.push({ path: '/flowable/task/myProcess/send/index',
|
||||||
// query: {
|
// query: {
|
||||||
// deployId: row.deploymentId,
|
// deployId: row.deploymentId,
|
||||||
|
|
@ -428,24 +418,18 @@ export default {
|
||||||
const params = {
|
const params = {
|
||||||
instanceId: row.procInsId
|
instanceId: row.procInsId
|
||||||
}
|
}
|
||||||
let that = this;
|
|
||||||
this.$modal.confirm('撤销流程会终止，是否继续？').then(function() {
|
this.$modal.confirm('撤销流程会终止，是否继续？').then(function() {
|
||||||
that.loading = true;
|
this.loading = true;
|
||||||
return stopProcess(params);
|
return stopProcess(params);
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
that.$modal.msgSuccess(res.msg);
|
this.$modal.msgSuccess(res.msg);
|
||||||
that.loading=false;
|
this.loading=false;
|
||||||
that.getList();
|
this.getList();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
/** 流程流转记录 */
|
/** 流程流转记录 */
|
||||||
handleFlowRecord(row){
|
handleFlowRecord(row){
|
||||||
//根据不同业务跳转不同表单
|
this.$refs.detailDrawer.show(row);
|
||||||
if(row.procDefKey=="flow_xmglzdl_qjspb"){
|
|
||||||
this.$refs.detailLeaveDrawer.show(row);
|
|
||||||
}else{
|
|
||||||
this.$refs.detailDrawer.show(row);
|
|
||||||
}
|
|
||||||
// this.$router.push({ path: '/flowable/task/myProcess/detail/index',
|
// this.$router.push({ path: '/flowable/task/myProcess/detail/index',
|
||||||
// query: {
|
// query: {
|
||||||
// procInsId: row.procInsId,
|
// procInsId: row.procInsId,
|
||||||
|
|
|
||||||
|
|
@ -18,105 +18,57 @@
|
||||||
:rules="rules"
|
:rules="rules"
|
||||||
v-loading="loading"
|
v-loading="loading"
|
||||||
label-width="120px"
|
label-width="120px"
|
||||||
style="padding-right: 35px;"
|
style="padding-right: 35px"
|
||||||
>
|
>
|
||||||
<div class="canvas" ref="flowCanvas"></div>
|
<div class="canvas" ref="flowCanvas"></div>
|
||||||
<div class="maskLayer" />
|
<div class="maskLayer" />
|
||||||
<el-card class="box-card" style="margin-left:35px;">
|
<el-form-item label="所属项目" prop="businessKey">
|
||||||
<el-descriptions class="margin-top" :title="title" :column="2" size="medium" border>
|
<el-select
|
||||||
<el-descriptions-item :span="2" prop="businessKey">
|
v-model="form.businessKey"
|
||||||
<template slot="label">
|
placeholder="请选择所属项目"
|
||||||
<i class="el-icon-map-location"></i>
|
style="width: 100%"
|
||||||
所属项目<span class="cr"> *</span>
|
filterable
|
||||||
</template>
|
:disabled="disPro"
|
||||||
<el-select
|
@change="projectChage"
|
||||||
v-model="form.businessKey"
|
>
|
||||||
placeholder="请选择所属项目"
|
<el-option
|
||||||
style="width: 100%"
|
v-for="(item, index) in projectOptions"
|
||||||
filterable
|
:key="index"
|
||||||
:disabled="disPro"
|
:label="item.projectName"
|
||||||
@change="projectChage"
|
:value="item.id"
|
||||||
>
|
>
|
||||||
<el-option
|
</el-option>
|
||||||
v-for="(item, index) in projectOptions"
|
</el-select>
|
||||||
:key="index"
|
</el-form-item>
|
||||||
:label="item.projectName"
|
<el-form-item label="发起单位">
|
||||||
:value="item.id"
|
{{ deptName }}
|
||||||
>
|
</el-form-item>
|
||||||
</el-option>
|
<el-form-item label="发起人">
|
||||||
</el-select>
|
{{ nickName }}
|
||||||
</el-descriptions-item>
|
</el-form-item>
|
||||||
<el-descriptions-item :span="2" label-class-name="my-label" :labelStyle="labelStyle">
|
<el-form-item label="审批事项">
|
||||||
<template slot="label">
|
{{ title }}
|
||||||
<i class="el-icon-school"></i>
|
</el-form-item>
|
||||||
申请单位
|
<el-form-item label="审批内容" prop="files" v-if="options.flowKey!='flow_xmglzdl_qjsp' && options.flowKey!='flow_aql_sxkj'">
|
||||||
</template>
|
<FileUpload
|
||||||
{{ deptName }}
|
@input="fileInput"
|
||||||
</el-descriptions-item>
|
:limit="9"
|
||||||
<el-descriptions-item :span="2" label-class-name="my-label" :labelStyle="labelStyle">
|
:fileType="['pdf', 'png', 'jpg', 'jpeg', 'doc', 'docx', 'xls', 'xlsx']"
|
||||||
<template slot="label">
|
/>
|
||||||
<i class="el-icon-collection-tag"></i>
|
</el-form-item>
|
||||||
申请事项
|
<el-form-item label="申请说明" prop="remark" v-if="options.flowKey!='flow_xmglzdl_qjsp' && options.flowKey!='flow_aql_sxkj'">
|
||||||
</template>
|
<el-input
|
||||||
{{ title }}
|
type="textarea"
|
||||||
</el-descriptions-item>
|
v-model="form.remark"
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
placeholder="请输入申请说明"
|
||||||
<template slot="label">
|
rows="5"
|
||||||
<i class="el-icon-user"></i>
|
/>
|
||||||
申请人
|
</el-form-item>
|
||||||
</template>
|
|
||||||
{{ nickName }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-s-flag"></i>
|
|
||||||
申请日期
|
|
||||||
</template>
|
|
||||||
{{ date }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-time"></i>
|
|
||||||
请假日期<span class="cr"> *</span>
|
|
||||||
</template>
|
|
||||||
<el-date-picker
|
|
||||||
v-model="daterangeMarksTime"
|
|
||||||
style="width: 400px"
|
|
||||||
value-format="yyyy-MM-dd"
|
|
||||||
type="daterange"
|
|
||||||
range-separator="-"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
@change="checkTime"
|
|
||||||
></el-date-picker>
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-tickets"></i>
|
|
||||||
请假时间
|
|
||||||
</template>
|
|
||||||
{{times}}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item :span="2" label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-chat-dot-square"></i>
|
|
||||||
请假事由<span class="cr"> *</span>
|
|
||||||
</template>
|
|
||||||
<el-input
|
|
||||||
type="textarea"
|
|
||||||
v-model="form.remark"
|
|
||||||
placeholder="请输入申请说明"
|
|
||||||
rows="5"
|
|
||||||
max="1"
|
|
||||||
/>
|
|
||||||
</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
<div style="text-align: center;margin-top: 30px;">
|
|
||||||
<el-button type="primary" @click="submitForm">提交申请</el-button>
|
|
||||||
<el-button @click="doCanel">取 消</el-button>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-form>
|
</el-form>
|
||||||
|
<div style="text-align: center">
|
||||||
|
<el-button type="primary" @click="submitForm">提交流程</el-button>
|
||||||
|
<el-button @click="doCanel">取 消</el-button>
|
||||||
|
</div>
|
||||||
</el-drawer>
|
</el-drawer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -150,7 +102,18 @@ export default {
|
||||||
remark: "",
|
remark: "",
|
||||||
},
|
},
|
||||||
// 表单校验
|
// 表单校验
|
||||||
rules: {},
|
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,
|
projectOptions: null,
|
||||||
deptName: null,
|
deptName: null,
|
||||||
nickName: null,
|
nickName: null,
|
||||||
|
|
@ -160,10 +123,6 @@ export default {
|
||||||
taskTitle: null,
|
taskTitle: null,
|
||||||
taskOpen: false,
|
taskOpen: false,
|
||||||
daterangeMarksTime: [],
|
daterangeMarksTime: [],
|
||||||
//label样式
|
|
||||||
labelStyle: { width: "180px" },
|
|
||||||
times:"... ...",
|
|
||||||
date:null
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
|
|
@ -202,20 +161,17 @@ export default {
|
||||||
},
|
},
|
||||||
show(options) {
|
show(options) {
|
||||||
this.options = options;
|
this.options = options;
|
||||||
this.form={};
|
|
||||||
this.initMyProject();
|
this.initMyProject();
|
||||||
this.title = options.name;
|
this.title = options.name;
|
||||||
this.deptName = store.getters.dept.deptName;
|
this.deptName = store.getters.dept.deptName;
|
||||||
this.nickName = store.getters.name;
|
this.nickName = store.getters.name;
|
||||||
this.date = this.$dt(new Date()).format("YYYY-MM-DD");
|
const self = this;
|
||||||
this.form.date = this.$dt(new Date()).format("YYYY-MM-DD HH:mm");
|
|
||||||
this.onOpen = true;
|
this.onOpen = true;
|
||||||
flowXmlAndNode({ deployId: options.deploymentId }).then((res) => {
|
flowXmlAndNode({ deployId: options.deploymentId }).then((res) => {
|
||||||
this.initFlowImage(res.data.xmlData);
|
this.initFlowImage(res.data.xmlData);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
async initFlowImage(data) {
|
async initFlowImage(data) {
|
||||||
const self = this;
|
|
||||||
try {
|
try {
|
||||||
self.bpmnViewer = new BpmnViewer({
|
self.bpmnViewer = new BpmnViewer({
|
||||||
container: this.$refs.flowCanvas,
|
container: this.$refs.flowCanvas,
|
||||||
|
|
@ -228,17 +184,21 @@ export default {
|
||||||
console.error(err.message, err.warnings);
|
console.error(err.message, err.warnings);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
checkTime(val) {
|
fileInput(files) {
|
||||||
let time = new Date(val[1]).getTime()-new Date(val[0]).getTime();
|
let fileUrls = "";
|
||||||
let hours = time/3600000;
|
if (files.length > 0) {
|
||||||
let day = (hours/24)+1;//这里默认加1天，PS:2023-09-10 2023-09-11实际请假应该为2天，而不是一天
|
fileUrls = "";
|
||||||
if(hours%24>0) day++;
|
files.forEach((item) => {
|
||||||
this.form.day=day;
|
fileUrls += "," + item.url;
|
||||||
this.times="共 "+day+" 天"
|
});
|
||||||
|
fileUrls = fileUrls.substring(1);
|
||||||
|
}
|
||||||
|
this.form.files = fileUrls;
|
||||||
},
|
},
|
||||||
submitForm() {
|
submitForm() {
|
||||||
this.$refs["form"].validate((valid) => {
|
this.$refs["form"].validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
|
this.loading = true;
|
||||||
// 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
|
// 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
|
||||||
// getNextFlowNodeByStart({
|
// getNextFlowNodeByStart({
|
||||||
// deploymentId: this.options.deploymentId,
|
// deploymentId: this.options.deploymentId,
|
||||||
|
|
@ -251,26 +211,7 @@ export default {
|
||||||
// }
|
// }
|
||||||
// });
|
// });
|
||||||
// 启动流程并将表单数据加入流程变量
|
// 启动流程并将表单数据加入流程变量
|
||||||
if(!this.form.businessKey){
|
|
||||||
this.$modal.msgWarning("请选择所属项目...");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (null != this.daterangeMarksTime && "" != this.daterangeMarksTime) {
|
|
||||||
this.form.beginDate = this.daterangeMarksTime[0];
|
|
||||||
this.form.endDate = this.daterangeMarksTime[1];
|
|
||||||
}else{
|
|
||||||
this.$modal.msgWarning("请选择请假日期...");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(!this.form.day){
|
|
||||||
this.$modal.msgWarning("请选择请假日期...");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(!this.form.remark){
|
|
||||||
this.$modal.msgWarning("请输入请假事由...");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.loading = true;
|
|
||||||
definitionStart(this.options.id, JSON.stringify(this.form)).then((res) => {
|
definitionStart(this.options.id, JSON.stringify(this.form)).then((res) => {
|
||||||
this.$modal.msgSuccess(res.msg);
|
this.$modal.msgSuccess(res.msg);
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
|
|
@ -294,8 +235,4 @@ export default {
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
top: 66px;
|
top: 66px;
|
||||||
}
|
}
|
||||||
.cr{
|
|
||||||
font-weight: 700;
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -96,33 +96,11 @@
|
||||||
rows="5"
|
rows="5"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="退回节点" v-if="returnTask">
|
|
||||||
<el-select
|
|
||||||
v-model="form.targetKey"
|
|
||||||
placeholder="请选择退回节点"
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="(item, index) in returnTaskList"
|
|
||||||
:key="index"
|
|
||||||
:label="item.name"
|
|
||||||
:value="item.id"
|
|
||||||
>
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<div style="text-align: center">
|
<div style="text-align: center">
|
||||||
<el-button icon="el-icon-s-custom" v-if="false" type="primary" plain size="mini">任务转办</el-button>
|
|
||||||
<el-button icon="el-icon-check" type="success" size="mini" @click="handlePass">审批通过</el-button>
|
<el-button icon="el-icon-check" type="success" size="mini" @click="handlePass">审批通过</el-button>
|
||||||
<el-button icon="el-icon-back" type="warning" size="mini" @click="handleBack">退回任务</el-button>
|
<el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">审批驳回</el-button>
|
||||||
<el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回上级</el-button>
|
|
||||||
</div>
|
</div>
|
||||||
</el-form>
|
</el-form>
|
||||||
<div class="page-warning">
|
|
||||||
<p><strong style="color: #67C23A;">“审批通过”</strong> 操作后，代表您对当前任务满意，任务进入下一阶段。</p>
|
|
||||||
<p><strong style="color: #E6A23C;">“退回任务”</strong> 操作后，代表您对当前任务不满意，任务进入您选择的阶段，或者直接退回给申请人重新申请。</p>
|
|
||||||
<p><strong style="color: #F56C6C;">“驳回上级”</strong> 操作后，代表您对当前任务不满意，任务退回到上一阶段继续处理。</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-drawer>
|
</el-drawer>
|
||||||
|
|
@ -133,7 +111,7 @@
|
||||||
import store from "@/store";
|
import store from "@/store";
|
||||||
import { flowXmlAndNode } from "@/api/flowable/definition";
|
import { flowXmlAndNode } from "@/api/flowable/definition";
|
||||||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||||||
import { complete, rejectTask, returnTask, returnList } from "@/api/flowable/todo";
|
import { complete, rejectTask } from "@/api/flowable/todo";
|
||||||
import {findCommentByProcInsId,findFormDatasByProcInsId} from "@/api/flowable/businessKey";
|
import {findCommentByProcInsId,findFormDatasByProcInsId} from "@/api/flowable/businessKey";
|
||||||
export default {
|
export default {
|
||||||
components: {},
|
components: {},
|
||||||
|
|
@ -164,20 +142,13 @@ export default {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
queryParams:{
|
|
||||||
nickName:null,
|
|
||||||
phonenumber:null,
|
|
||||||
},
|
|
||||||
bpmnViewer: null,
|
bpmnViewer: null,
|
||||||
options: {},
|
options: {},
|
||||||
flowRecordList: [],
|
flowRecordList: [],
|
||||||
showjd:false,
|
showjd:false,
|
||||||
//label样式
|
//label样式
|
||||||
labelStyle: { width: "180px" },
|
labelStyle: { width: "180px" },
|
||||||
initData:{},
|
initData:{}
|
||||||
returnTaskList: [], // 回退列表数据
|
|
||||||
returnTask:false,
|
|
||||||
returnTaskBtn:false
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
|
|
@ -190,7 +161,14 @@ export default {
|
||||||
handlePass() {
|
handlePass() {
|
||||||
this.$refs["form"].validate((valid) => {
|
this.$refs["form"].validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
this.$confirm('是否确认审批通过当前流程申请?', '提示', {
|
this.form.taskId = this.options.taskId;
|
||||||
|
this.form.taskName = this.options.taskName;
|
||||||
|
this.form.userId = store.getters.userId;
|
||||||
|
this.form.deployId = this.options.deployId;
|
||||||
|
this.form.procInsId = this.options.procInsId;
|
||||||
|
this.form.instanceId = this.options.procInsId;
|
||||||
|
this.form.executionId = this.options.procInsId;
|
||||||
|
this.$confirm('是否确认通过当前流程申请?', '提示', {
|
||||||
confirmButtonText: '确定',
|
confirmButtonText: '确定',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
type: 'warning'
|
type: 'warning'
|
||||||
|
|
@ -212,7 +190,14 @@ export default {
|
||||||
handleReject() {
|
handleReject() {
|
||||||
this.$refs["form"].validate((valid) => {
|
this.$refs["form"].validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
this.$confirm('是否确认审批驳回当前流程申请?', '提示', {
|
this.form.taskId = this.options.taskId;
|
||||||
|
this.form.taskName = this.options.taskName;
|
||||||
|
this.form.userId = store.getters.userId;
|
||||||
|
this.form.deployId = this.options.deployId;
|
||||||
|
this.form.procInsId = this.options.procInsId;
|
||||||
|
this.form.instanceId = this.options.procInsId;
|
||||||
|
this.form.executionId = this.options.procInsId;
|
||||||
|
this.$confirm('是否确认驳回当前流程申请?', '提示', {
|
||||||
confirmButtonText: '确定',
|
confirmButtonText: '确定',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
type: 'warning'
|
type: 'warning'
|
||||||
|
|
@ -230,58 +215,6 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
/** 退回任务 */
|
|
||||||
handleBack(){
|
|
||||||
if(!this.returnTask){
|
|
||||||
this.returnTask=true;
|
|
||||||
this.$modal.msgWarning("请选择退回节点");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.$refs["form"].validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
if(!this.form.targetKey){
|
|
||||||
this.$modal.msgWarning("请选择退回节点");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.$confirm('是否确认退回当前流程申请?', '提示', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning'
|
|
||||||
}).then(() => {
|
|
||||||
this.loading=true;
|
|
||||||
returnTask(this.form).then(res => {
|
|
||||||
this.$modal.msgSuccess("任务退回成功");
|
|
||||||
this.loading = false;
|
|
||||||
//关闭并刷新列表
|
|
||||||
this.$refs.drawer.closeDrawer();
|
|
||||||
});
|
|
||||||
}).catch(() => {
|
|
||||||
console.log("取消操作");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
initReturnList(){
|
|
||||||
returnList(this.form).then(res => {
|
|
||||||
this.returnTaskList = res.data;
|
|
||||||
//退回节点>1时，可显示退回按钮
|
|
||||||
if(res.data.length>1){
|
|
||||||
this.returnTaskBtn=true;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
initFormDate(){
|
|
||||||
this.form.taskId = this.options.taskId;
|
|
||||||
this.form.taskName = this.options.taskName;
|
|
||||||
this.form.userId = store.getters.userId;
|
|
||||||
this.form.deployId = this.options.deployId;
|
|
||||||
this.form.procInsId = this.options.procInsId;
|
|
||||||
this.form.instanceId = this.options.procInsId;
|
|
||||||
this.form.executionId = this.options.procInsId;
|
|
||||||
this.returnTask=false;
|
|
||||||
this.returnTaskBtn=false;
|
|
||||||
this.initReturnList();
|
|
||||||
},
|
|
||||||
setIcon(row) {
|
setIcon(row) {
|
||||||
if (row.endTime) {
|
if (row.endTime) {
|
||||||
if(row.commentResult=="驳回")
|
if(row.commentResult=="驳回")
|
||||||
|
|
@ -324,7 +257,6 @@ export default {
|
||||||
this.onOpen = true;
|
this.onOpen = true;
|
||||||
this.showjd = false;
|
this.showjd = false;
|
||||||
this.form = {};
|
this.form = {};
|
||||||
this.initFormDate();
|
|
||||||
if(options.finishTime==null){
|
if(options.finishTime==null){
|
||||||
this.jdtitle="进行中";
|
this.jdtitle="进行中";
|
||||||
this.showjd=true;
|
this.showjd=true;
|
||||||
|
|
@ -612,12 +544,4 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.page-warning {
|
|
||||||
padding: 8px 16px;
|
|
||||||
background-color: #f0f9eb;
|
|
||||||
border-radius: 4px;
|
|
||||||
border-left: 5px solid #67C23A;
|
|
||||||
margin: 20px 0;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,655 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="app-approveDrawer">
|
|
||||||
<el-drawer
|
|
||||||
v-if="onOpen"
|
|
||||||
:visible.sync="onOpen"
|
|
||||||
ref="drawer"
|
|
||||||
direction="rtl"
|
|
||||||
@close="closeCallBack"
|
|
||||||
size="80%"
|
|
||||||
>
|
|
||||||
<template slot="title">
|
|
||||||
<div>流程详情 【{{ title }}】 - 当前进度【{{ jdtitle }}】<span v-if="showjd"> - 当前节点【{{options.taskName}}】</span></div>
|
|
||||||
</template>
|
|
||||||
<div class="drawer">
|
|
||||||
<div class="drawerLeft block containers">
|
|
||||||
<div class="canvas" ref="flowCanvas"></div>
|
|
||||||
<div class="maskLayer" />
|
|
||||||
<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-card class="box-card">
|
|
||||||
<el-descriptions class="margin-top" :title="title" :column="1" size="medium" border>
|
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-map-location"></i>
|
|
||||||
所属项目
|
|
||||||
</template>
|
|
||||||
{{ initData.projectName }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-school"></i>
|
|
||||||
申请单位
|
|
||||||
</template>
|
|
||||||
{{ options.startDeptName }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-collection-tag"></i>
|
|
||||||
申请事项
|
|
||||||
</template>
|
|
||||||
{{ title }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-user"></i>
|
|
||||||
申请人
|
|
||||||
</template>
|
|
||||||
{{ options.startUserName }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-s-flag"></i>
|
|
||||||
申请日期
|
|
||||||
</template>
|
|
||||||
{{ initData.date }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-time"></i>
|
|
||||||
请假日期
|
|
||||||
</template>
|
|
||||||
{{ initData.beginDate }} - {{ initData.endDate }}
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-tickets"></i>
|
|
||||||
请假时间
|
|
||||||
</template>
|
|
||||||
共 {{initData.day}} 天
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
|
||||||
<template slot="label">
|
|
||||||
<i class="el-icon-chat-dot-square"></i>
|
|
||||||
请假事由
|
|
||||||
</template>
|
|
||||||
{{initData.remark}}
|
|
||||||
</el-descriptions-item>
|
|
||||||
</el-descriptions>
|
|
||||||
</el-card>
|
|
||||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px" v-loading="loading" style="margin-top: 30px;">
|
|
||||||
<el-form-item label="审批意见" prop="comment">
|
|
||||||
<el-input
|
|
||||||
type="textarea"
|
|
||||||
v-model="form.comment"
|
|
||||||
placeholder="请输入审批意见（最多500字）"
|
|
||||||
rows="5"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="退回节点" v-if="returnTask">
|
|
||||||
<el-select
|
|
||||||
v-model="form.targetKey"
|
|
||||||
placeholder="请选择退回节点"
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="(item, index) in returnTaskList"
|
|
||||||
:key="index"
|
|
||||||
:label="item.name"
|
|
||||||
:value="item.id"
|
|
||||||
>
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<div style="text-align: center">
|
|
||||||
<el-button icon="el-icon-s-custom" v-if="false" type="primary" plain size="mini" @click="handleAssign">任务转办</el-button>
|
|
||||||
<el-button icon="el-icon-check" type="success" size="mini" @click="handlePass">审批通过</el-button>
|
|
||||||
<el-button icon="el-icon-back" v-if="returnTaskBtn" type="warning" size="mini" @click="handleBack">退回任务</el-button>
|
|
||||||
<el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回上级</el-button>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
<div class="page-warning">
|
|
||||||
<p><strong style="color: #67C23A;">“审批通过”</strong> 操作后，代表您对当前任务满意，任务进入下一阶段。</p>
|
|
||||||
<p><strong style="color: #E6A23C;">“退回任务”</strong> 操作后，代表您对当前任务不满意，任务进入您选择的阶段，或者直接退回给申请人重新申请。</p>
|
|
||||||
<p><strong style="color: #F56C6C;">“驳回上级”</strong> 操作后，代表您对当前任务不满意，任务退回到上一阶段继续处理。</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-drawer>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import store from "@/store";
|
|
||||||
import { flowXmlAndNode } from "@/api/flowable/definition";
|
|
||||||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
|
||||||
import { complete, rejectTask, returnTask, returnList } from "@/api/flowable/todo";
|
|
||||||
import {findCommentByProcInsId,findFormDatasByProcInsId} from "@/api/flowable/businessKey";
|
|
||||||
export default {
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
closeCallBack: {
|
|
||||||
type: Function,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
// 抽屉层
|
|
||||||
onOpen: false,
|
|
||||||
// 遮罩层
|
|
||||||
loading: false,
|
|
||||||
// 标题
|
|
||||||
title: "",
|
|
||||||
jdtitle:"",
|
|
||||||
// 表单参数
|
|
||||||
form: {},
|
|
||||||
// 表单校验
|
|
||||||
rules: {
|
|
||||||
comment: [
|
|
||||||
{ required: true, message: "请输入审批意见", trigger: "blur" },
|
|
||||||
{
|
|
||||||
max: 500,
|
|
||||||
message: "审批意见最多输入500字",
|
|
||||||
trigger: "blur",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
queryParams:{
|
|
||||||
nickName:null,
|
|
||||||
phonenumber:null,
|
|
||||||
},
|
|
||||||
bpmnViewer: null,
|
|
||||||
options: {},
|
|
||||||
flowRecordList: [],
|
|
||||||
showjd:false,
|
|
||||||
//label样式
|
|
||||||
labelStyle: { width: "180px" },
|
|
||||||
initData:{},
|
|
||||||
returnTaskList: [], // 回退列表数据
|
|
||||||
returnTask:false,
|
|
||||||
returnTaskBtn:false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {},
|
|
||||||
watch: {},
|
|
||||||
created() {},
|
|
||||||
mounted() {},
|
|
||||||
beforeDestroy() {},
|
|
||||||
methods: {
|
|
||||||
/** 通过任务 */
|
|
||||||
handlePass() {
|
|
||||||
this.$refs["form"].validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
this.$confirm('是否确认审批通过当前流程申请?', '提示', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning'
|
|
||||||
}).then(() => {
|
|
||||||
this.loading=true;
|
|
||||||
complete(this.form).then(res => {
|
|
||||||
this.$modal.msgSuccess("任务审批成功");
|
|
||||||
this.loading = false;
|
|
||||||
//关闭并刷新列表
|
|
||||||
this.$refs.drawer.closeDrawer();
|
|
||||||
});
|
|
||||||
}).catch(() => {
|
|
||||||
console.log("取消操作");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
/** 驳回任务 */
|
|
||||||
handleReject() {
|
|
||||||
this.$refs["form"].validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
this.$confirm('是否确认审批驳回当前流程申请?', '提示', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning'
|
|
||||||
}).then(() => {
|
|
||||||
this.loading=true;
|
|
||||||
rejectTask(this.form).then(res => {
|
|
||||||
this.$modal.msgSuccess("任务驳回成功");
|
|
||||||
this.loading = false;
|
|
||||||
//关闭并刷新列表
|
|
||||||
this.$refs.drawer.closeDrawer();
|
|
||||||
});
|
|
||||||
}).catch(() => {
|
|
||||||
console.log("取消操作");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
/** 退回任务 */
|
|
||||||
handleBack(){
|
|
||||||
if(!this.returnTask){
|
|
||||||
this.returnTask=true;
|
|
||||||
this.$modal.msgWarning("请选择退回节点");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.$refs["form"].validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
if(!this.form.targetKey){
|
|
||||||
this.$modal.msgWarning("请选择退回节点");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.$confirm('是否确认退回当前流程申请?', '提示', {
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning'
|
|
||||||
}).then(() => {
|
|
||||||
this.loading=true;
|
|
||||||
returnTask(this.form).then(res => {
|
|
||||||
this.$modal.msgSuccess("任务退回成功");
|
|
||||||
this.loading = false;
|
|
||||||
//关闭并刷新列表
|
|
||||||
this.$refs.drawer.closeDrawer();
|
|
||||||
});
|
|
||||||
}).catch(() => {
|
|
||||||
console.log("取消操作");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
initReturnList(){
|
|
||||||
returnList(this.form).then(res => {
|
|
||||||
this.returnTaskList = res.data;
|
|
||||||
//退回节点>1时，可显示退回按钮
|
|
||||||
if(res.data.length>1){
|
|
||||||
this.returnTaskBtn=true;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
initFormDate(){
|
|
||||||
this.form.taskId = this.options.taskId;
|
|
||||||
this.form.taskName = this.options.taskName;
|
|
||||||
this.form.userId = store.getters.userId;
|
|
||||||
this.form.deployId = this.options.deployId;
|
|
||||||
this.form.procInsId = this.options.procInsId;
|
|
||||||
this.form.instanceId = this.options.procInsId;
|
|
||||||
this.form.executionId = this.options.procInsId;
|
|
||||||
this.returnTask=false;
|
|
||||||
this.returnTaskBtn=false;
|
|
||||||
this.initReturnList();
|
|
||||||
},
|
|
||||||
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;
|
|
||||||
this.form = {};
|
|
||||||
this.initFormDate();
|
|
||||||
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;
|
|
||||||
}).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){
|
|
||||||
console.log(i);
|
|
||||||
return "驳回至"+flowRecordList[i].taskName;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="scss">
|
|
||||||
.app-approveDrawer{
|
|
||||||
.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 {
|
|
||||||
.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: 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 {
|
|
||||||
font-size: 10px;
|
|
||||||
color: red;
|
|
||||||
width: 100px;
|
|
||||||
top: -20px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.page-warning {
|
|
||||||
padding: 8px 16px;
|
|
||||||
background-color: #f0f9eb;
|
|
||||||
border-radius: 4px;
|
|
||||||
border-left: 5px solid #67C23A;
|
|
||||||
margin: 20px 0;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -87,7 +87,6 @@
|
||||||
@pagination="getList"
|
@pagination="getList"
|
||||||
/>
|
/>
|
||||||
<approveDrawer ref="approveDrawer" :closeCallBack="getList"></approveDrawer>
|
<approveDrawer ref="approveDrawer" :closeCallBack="getList"></approveDrawer>
|
||||||
<approveLeaveDrawer ref="approveLeaveDrawer" :closeCallBack="getList"></approveLeaveDrawer>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -97,11 +96,10 @@ import {
|
||||||
} from "@/api/flowable/todo";
|
} from "@/api/flowable/todo";
|
||||||
import {myAwaitFlowTaskList} from "@/api/flowable/businessKey";
|
import {myAwaitFlowTaskList} from "@/api/flowable/businessKey";
|
||||||
import approveDrawer from "./detail/approveDrawer.vue";
|
import approveDrawer from "./detail/approveDrawer.vue";
|
||||||
import approveLeaveDrawer from "./detail/approveLeaveDrawer.vue";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Deploy",
|
name: "Deploy",
|
||||||
components: {approveDrawer,approveLeaveDrawer},
|
components: {approveDrawer},
|
||||||
dicts: ["sys_process_category"],
|
dicts: ["sys_process_category"],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -163,12 +161,7 @@ export default {
|
||||||
},
|
},
|
||||||
// 跳转到处理页面
|
// 跳转到处理页面
|
||||||
handleProcess(row){
|
handleProcess(row){
|
||||||
//根据不同业务跳转不同表单
|
this.$refs.approveDrawer.show(row);
|
||||||
if(row.procDefKey=="flow_xmglzdl_qjspb"){
|
|
||||||
this.$refs.approveLeaveDrawer.show(row);
|
|
||||||
}else{
|
|
||||||
this.$refs.approveDrawer.show(row);
|
|
||||||
}
|
|
||||||
// this.$router.push({ path: '/flowable/task/todo/detail/index',
|
// this.$router.push({ path: '/flowable/task/todo/detail/index',
|
||||||
// query: {
|
// query: {
|
||||||
// procInsId: row.procInsId,
|
// procInsId: row.procInsId,
|
||||||
|
|
|
||||||
|
|
@ -299,6 +299,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { mapGetters } from "vuex";
|
||||||
import {
|
import {
|
||||||
listProjectChecking,
|
listProjectChecking,
|
||||||
getProjectChecking,
|
getProjectChecking,
|
||||||
|
|
@ -364,7 +365,9 @@ export default {
|
||||||
previewList: [],
|
previewList: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {
|
||||||
|
...mapGetters(["dept"]),
|
||||||
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
||||||
|
|
@ -355,7 +355,7 @@
|
||||||
type="text"
|
type="text"
|
||||||
icon="el-icon-user-solid"
|
icon="el-icon-user-solid"
|
||||||
@click="handleProjectUserinfo(scope.row)"
|
@click="handleProjectUserinfo(scope.row)"
|
||||||
v-hasPermi="['project:surProjectUserInfo:list']"
|
v-hasPermi="['project:surProjectUserInfo:add']"
|
||||||
>项目人员</el-button
|
>项目人员</el-button
|
||||||
>
|
>
|
||||||
<el-dropdown
|
<el-dropdown
|
||||||
|
|
|
||||||
|
|
@ -307,7 +307,9 @@ export default {
|
||||||
isOpen: false,
|
isOpen: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {},
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
show(project) {
|
show(project) {
|
||||||
this.project = project;
|
this.project = project;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue