sxyanzhu
/
jhprjv2
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交代码

dev_xds
姜玉琦 2024-03-18 22:48:40 +08:00
parent 1b8fb5fac3
commit 509eb22d28
14 changed files with 2127 additions and 1648 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ruoyi-framework/src/main/java/com/ruoyi/framework/config/SecurityConfig.java
View File

@ -113,7 +113,7 @@ public class SecurityConfig extends WebSecurityConfigurerAdapter
// 对于登录login 注册register 验证码captchaImage 允许匿名访问 // 对于登录login 注册register 验证码captchaImage 允许匿名访问
.antMatchers("/login","/wechat/**", "/common/**", "/register", "/captchaImage","/bgscreen/**","/publics/**","/system/dict/data/**").permitAll() .antMatchers("/login","/wechat/**", "/common/**", "/register", "/captchaImage","/bgscreen/**","/publics/**","/system/dict/data/**").permitAll()
// 静态资源，可匿名访问 // 静态资源，可匿名访问
.antMatchers(HttpMethod.GET, "/", "/*.html", "/**/*.html", "/**/*.css", "/**/*.js", "/**/img/**", "/profile/**").permitAll() .antMatchers(HttpMethod.GET, "/", "/*.txt", "/*.html", "/**/*.html", "/**/*.css", "/**/*.js", "/**/img/**", "/profile/**").permitAll()
.antMatchers("/swagger-ui.html", "/swagger-resources/**", "/webjars/**", "/*/api-docs", "/druid/**").permitAll() .antMatchers("/swagger-ui.html", "/swagger-resources/**", "/webjars/**", "/*/api-docs", "/druid/**").permitAll()
// 除上面外的所有请求全部需要鉴权认证 // 除上面外的所有请求全部需要鉴权认证
.anyRequest().authenticated() .anyRequest().authenticated()

559
ruoyi-ui/src/views/flowable/task/myProcess/detail/detailDrawer.vue
View File

@ -8,93 +8,126 @@
size="80%" size="80%"
> >
<template slot="title"> <template slot="title">
<div>流程详情 【{{ title }}】 - 当前进度【{{ jdtitle }}】<span v-if="showjd"> - 当前节点【{{options.taskName}}】</span></div> <div>
流程详情 【{{ title }}】 - 当前进度【{{ jdtitle }}】<span v-if="showjd">
- 当前节点【{{ options.taskName }}】</span
>
</div>
</template> </template>
<div class="drawer"> <div class="drawer">
<div class="drawerLeft"> <div class="drawerLeft">
<div class="block containers"> <div class="block containers">
<div class="canvas" ref="flowCanvas"></div> <div class="canvas" ref="flowCanvas"></div>
<div class="maskLayer" /> <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> </div>
</el-form-item> <el-timeline>
<el-form-item label="申请说明"> <el-timeline-item
{{initData.remark}} v-for="(item, index) in flowRecordList"
</el-form-item> :key="index"
<div style="text-align: center"> :icon="setIcon(item)"
<el-button type="danger" @click="doCanel">关 闭</el-button> :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-form>
</div>
</div> </div>
</el-drawer> </el-drawer>
</div> </div>
@ -103,11 +136,13 @@
<script> <script>
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 {findCommentByProcInsId,findFormDatasByProcInsId} from "@/api/flowable/businessKey"; import {
findCommentByProcInsId,
findFormDatasByProcInsId,
} from "@/api/flowable/businessKey";
export default { export default {
components: {}, components: {},
props: { props: {},
},
data() { data() {
return { return {
// 抽屉层 // 抽屉层
@ -116,7 +151,7 @@ export default {
loading: false, loading: false,
// 标题 // 标题
title: "", title: "",
jdtitle:"", jdtitle: "",
// 表单参数 // 表单参数
form: {}, form: {},
// 表单校验 // 表单校验
@ -124,10 +159,10 @@ export default {
bpmnViewer: null, bpmnViewer: null,
options: {}, options: {},
flowRecordList: [], flowRecordList: [],
showjd:false, showjd: false,
//label样式 //label样式
labelStyle: { width: "180px" }, labelStyle: { width: "180px" },
initData:{} initData: {},
}; };
}, },
computed: {}, computed: {},
@ -138,10 +173,9 @@ export default {
methods: { methods: {
setIcon(row) { setIcon(row) {
if (row.endTime) { if (row.endTime) {
if(row.commentResult=="驳回") if (row.commentResult == "驳回") {
{
return "el-icon-close"; return "el-icon-close";
}else{ } else {
return "el-icon-check"; return "el-icon-check";
} }
} else { } else {
@ -150,10 +184,9 @@ export default {
}, },
setColor(row) { setColor(row) {
if (row.endTime) { if (row.endTime) {
if(row.commentResult=="驳回") if (row.commentResult == "驳回") {
{
return "#f56c6c"; return "#f56c6c";
}else{ } else {
return "#2bc418"; return "#2bc418";
} }
} else { } else {
@ -178,19 +211,21 @@ export default {
this.onOpen = true; this.onOpen = true;
this.showjd = false; this.showjd = false;
if(options.finishTime==null){ if (options.finishTime == null) {
this.jdtitle="进行中"; this.jdtitle = "进行中";
this.showjd=true; this.showjd = true;
}else if(options.finishTime!=null && options.assigneeId==null){ } else if (options.finishTime != null && options.assigneeId == null) {
this.jdtitle="已终止"; this.jdtitle = "已终止";
}else{ } else {
this.jdtitle="已完成"; this.jdtitle = "已完成";
} }
this.getFlowRecordList(options.procInsId, options.deployId); this.getFlowRecordList(options.procInsId, options.deployId);
this.getFormDatasList(options.procInsId, options.deployId); this.getFormDatasList(options.procInsId, options.deployId);
flowXmlAndNode({ procInsId:options.procInsId, deployId: options.deployId }).then((res) => { flowXmlAndNode({ procInsId: options.procInsId, deployId: options.deployId }).then(
this.initFlowImage(res.data); (res) => {
}); this.initFlowImage(res.data);
}
);
}, },
async initFlowImage(data) { async initFlowImage(data) {
const self = this; const self = this;
@ -202,8 +237,8 @@ export default {
await self.bpmnViewer.importXML(data.xmlData); await self.bpmnViewer.importXML(data.xmlData);
// 自适应 // 自适应
self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto"); self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
if (data.nodeData !==undefined && data.nodeData.length > 0 ) { if (data.nodeData !== undefined && data.nodeData.length > 0) {
self.fillColor(data.nodeData) self.fillColor(data.nodeData);
} }
} catch (err) { } catch (err) {
console.error(err.message, err.warnings); console.error(err.message, err.warnings);
@ -218,13 +253,15 @@ export default {
// }).catch(res => { // }).catch(res => {
// this.$message.error("数据异常，请联系管理员..."); // this.$message.error("数据异常，请联系管理员...");
// }) // })
const that = this const that = this;
const params = {procInsId: procInsId} const params = { procInsId: procInsId };
findCommentByProcInsId(params).then(res => { findCommentByProcInsId(params)
that.flowRecordList = res.data; .then((res) => {
}).catch(res => { that.flowRecordList = res.data;
this.$message.error("数据异常，请联系管理员..."); })
}) .catch((res) => {
this.$message.error("数据异常，请联系管理员...");
});
}, },
/** 流程表单数据 */ /** 流程表单数据 */
getFormDatasList(procInsId, deployId) { getFormDatasList(procInsId, deployId) {
@ -235,175 +272,213 @@ export default {
// }).catch(res => { // }).catch(res => {
// this.$message.error("数据异常，请联系管理员..."); // this.$message.error("数据异常，请联系管理员...");
// }) // })
const that = this const that = this;
const params = {procInsId: procInsId} const params = { procInsId: procInsId };
findFormDatasByProcInsId(params).then(res => { findFormDatasByProcInsId(params)
this.initData = res.data; .then((res) => {
this.initData.files = res.data.files.split(','); this.initData = res.data;
}).catch(res => { this.initData.files = res.data.files.split(",");
this.$message.error("数据异常，请联系管理员..."); })
}) .catch((res) => {
this.$message.error("数据异常，请联系管理员...");
});
}, },
// 设置高亮颜色的 // 设置高亮颜色的
fillColor(nodeData) { fillColor(nodeData) {
const canvas = this.bpmnViewer.get('canvas') const canvas = this.bpmnViewer.get("canvas");
this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => { this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach((n) => {
const completeTask = nodeData.find(m => m.key === n.id) const completeTask = nodeData.find((m) => m.key === n.id);
const todoTask = nodeData.find(m => !m.completed) const todoTask = nodeData.find((m) => !m.completed);
const endTask = nodeData[nodeData.length - 1] const endTask = nodeData[nodeData.length - 1];
if (n.$type === 'bpmn:UserTask') { if (n.$type === "bpmn:UserTask") {
if (completeTask) { if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') canvas.addMarker(
n.outgoing?.forEach(nn => { n.id,
const targetTask = nodeData.find(m => m.key === nn.targetRef.id) completeTask.completed ? "highlight" : "highlight-todo"
);
n.outgoing?.forEach((nn) => {
const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
if (targetTask) { if (targetTask) {
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){ if (
canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo') todoTask &&
canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo') completeTask.key === todoTask.key &&
}else { !todoTask.completed
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo') ) {
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo') 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') { else if (n.$type === "bpmn:ExclusiveGateway") {
if (completeTask) { if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') canvas.addMarker(
n.outgoing?.forEach(nn => { n.id,
const targetTask = nodeData.find(m => m.key === nn.targetRef.id) completeTask.completed ? "highlight" : "highlight-todo"
);
n.outgoing?.forEach((nn) => {
const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
if (targetTask) { if (targetTask) {
canvas.addMarker(
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo') nn.id,
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo') targetTask.completed ? "highlight" : "highlight-todo"
);
canvas.addMarker(
nn.targetRef.id,
targetTask.completed ? "highlight" : "highlight-todo"
);
} }
});
})
} }
} }
// 并行网关 // 并行网关
else if (n.$type === 'bpmn:ParallelGateway') { else if (n.$type === "bpmn:ParallelGateway") {
if (completeTask) { if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') canvas.addMarker(
n.outgoing?.forEach(nn => { n.id,
const targetTask = nodeData.find(m => m.key === nn.targetRef.id) completeTask.completed ? "highlight" : "highlight-todo"
);
n.outgoing?.forEach((nn) => {
const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
if (targetTask) { if (targetTask) {
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo') canvas.addMarker(
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo') nn.id,
targetTask.completed ? "highlight" : "highlight-todo"
);
canvas.addMarker(
nn.targetRef.id,
targetTask.completed ? "highlight" : "highlight-todo"
);
} }
}) });
} }
} } else if (n.$type === "bpmn:StartEvent") {
else if (n.$type === 'bpmn:StartEvent') { n.outgoing.forEach((nn) => {
n.outgoing.forEach(nn => { const completeTask = nodeData.find((m) => m.key === nn.targetRef.id);
const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
if (completeTask) { if (completeTask) {
canvas.addMarker(nn.id, 'highlight') canvas.addMarker(nn.id, "highlight");
canvas.addMarker(n.id, 'highlight') canvas.addMarker(n.id, "highlight");
return return;
} }
}) });
} } else if (n.$type === "bpmn:EndEvent") {
else if (n.$type === 'bpmn:EndEvent') {
if (endTask.key === n.id && endTask.completed) { if (endTask.key === n.id && endTask.completed) {
canvas.addMarker(n.id, 'highlight') canvas.addMarker(n.id, "highlight");
return return;
} }
} }
}) });
}, },
getDurationDate(val){ getDurationDate(val) {
// 计算出相差天数 // 计算出相差天数
let days = Math.floor(val / (24 * 3600 * 1000)) let days = Math.floor(val / (24 * 3600 * 1000));
// 计算出小时数 // 计算出小时数
let leave1 = val % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数 let leave1 = val % (24 * 3600 * 1000); // 计算天数后剩余的毫秒数
let hours = Math.floor(leave1 / (3600 * 1000)) let hours = Math.floor(leave1 / (3600 * 1000));
// 计算相差分钟数 // 计算相差分钟数
let leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数 let leave2 = leave1 % (3600 * 1000); // 计算小时数后剩余的毫秒数
let minutes = Math.floor(leave2 / (60 * 1000)) let minutes = Math.floor(leave2 / (60 * 1000));
// 计算相差秒数 // 计算相差秒数
let leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数 let leave3 = leave2 % (60 * 1000); // 计算分钟数后剩余的毫秒数
let seconds = Math.round(leave3 / 1000) let seconds = Math.round(leave3 / 1000);
if(days>0){ if (days > 0) {
if(days<10) days = "0"+days; if (days < 10) days = "0" + days;
if(hours<10) hours = "0"+hours; if (hours < 10) hours = "0" + hours;
if(minutes<10) minutes = "0"+minutes; if (minutes < 10) minutes = "0" + minutes;
if(seconds<10) seconds = "0"+seconds; if (seconds < 10) seconds = "0" + seconds;
return days + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒'; return days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
} }
if(hours>0){ if (hours > 0) {
if(hours<10) hours = "0"+hours; if (hours < 10) hours = "0" + hours;
if(minutes<10) minutes = "0"+minutes; if (minutes < 10) minutes = "0" + minutes;
if(seconds<10) seconds = "0"+seconds; if (seconds < 10) seconds = "0" + seconds;
return hours + '小时' + minutes + '分钟' + seconds + '秒'; return hours + "小时" + minutes + "分钟" + seconds + "秒";
} }
if(minutes>0){ if (minutes > 0) {
if(minutes<10) minutes = "0"+minutes; if (minutes < 10) minutes = "0" + minutes;
if(seconds<10) seconds = "0"+seconds; if (seconds < 10) seconds = "0" + seconds;
return minutes + '分钟' + seconds + '秒'; return minutes + "分钟" + seconds + "秒";
} }
if(seconds>0){ if (seconds > 0) {
if(seconds<10) seconds = "0"+seconds; if (seconds < 10) seconds = "0" + seconds;
return seconds + '秒'; return seconds + "秒";
} }
}, },
handledownload(url){ handledownload(url) {
this.$download.resource(url); let fileType = url.split(".");
if (fileTypes.indexOf(fileType) > -1) {
window.open(process.env.VUE_APP_BASE_API + url);
} else {
this.$download.resource(url);
}
}, },
getDeleteReason(val){ getDeleteReason(val) {
val = val.replace("Change activity to ",""); val = val.replace("Change activity to ", "");
let flowRecordList = this.flowRecordList; let flowRecordList = this.flowRecordList;
for(let i=0;i<flowRecordList.length;i++){ for (let i = 0; i < flowRecordList.length; i++) {
if(flowRecordList[i].taskDefKey==val){ if (flowRecordList[i].taskDefKey == val) {
return "驳回至"+flowRecordList[i].taskName; return "驳回至" + flowRecordList[i].taskName;
} }
} }
} },
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.app-detailDrawer{ .app-detailDrawer {
.drawer { .drawer {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
padding-bottom: 20px; padding-bottom: 20px;
.drawerLeft { .drawerLeft {
width: 60%; width: 60%;
min-width: 280px; min-width: 280px;
height: 100%; height: 100%;
float: left; float: left;
border-right: 1px solid #dcdfe6; border-right: 1px solid #dcdfe6;
overflow-y: scroll; overflow-y: scroll;
padding-right: 20px; padding-right: 20px;
.bjs-powered-by { .bjs-powered-by {
display: none !important; display: none !important;
}
} .maskLayer {
.maskLayer { width: 100%;
width: 100%; height: 90px;
height: 90px; position: absolute;
position: absolute; z-index: 9999;
z-index: 9999; top: 77px;
top: 77px; }
} }
} .drawerRight {
.drawerRight { width: 40%;
width: 40%; min-width: 400px;
min-width: 400px; height: 100%;
height: 100%; float: left;
float: left; padding-left: 20px;
padding-left: 20px; }
} }
} .containers {
.containers { width: 100%;
width: 100%; height: 150px;
height: 150px;
.canvas { .canvas {
width: 100%; width: 100%;
height: 100px; height: 100px;
@ -417,12 +492,12 @@ export default {
.load { .load {
margin-right: 10px; margin-right: 10px;
} }
.el-form-item__label{ .el-form-item__label {
font-size: 13px; font-size: 13px;
} }
.djs-palette{ .djs-palette {
left: 0px!important; left: 0px !important;
top: 0px; top: 0px;
border-top: none; border-top: none;
} }

879
ruoyi-ui/src/views/flowable/task/myProcess/detail/detailLeaveDrawer.vue
View File

@ -1,68 +1,109 @@
<template> <template>
<div class="app-detailDrawer"> <div class="app-detailDrawer">
<el-drawer <el-drawer
v-if="onOpen" v-if="onOpen"
:visible.sync="onOpen" :visible.sync="onOpen"
ref="drawer" ref="drawer"
direction="rtl" direction="rtl"
size="80%" size="80%"
> >
<template slot="title"> <template slot="title">
<div>流程详情 【{{ title }}】 - 当前进度【{{ jdtitle }}】<span v-if="showjd"> - 当前节点【{{options.taskName}}】</span></div> <div>
</template> 流程详情 【{{ title }}】 - 当前进度【{{ jdtitle }}】<span v-if="showjd">
<div class="drawer"> - 当前节点【{{ options.taskName }}】</span
>
</div>
</template>
<div class="drawer">
<div class="drawerLeft"> <div class="drawerLeft">
<div class="block containers"> <div class="block containers">
<div class="canvas" ref="flowCanvas"></div> <div class="canvas" ref="flowCanvas"></div>
<div class="maskLayer" /> <div class="maskLayer" />
</div> </div>
<el-timeline> <el-timeline>
<el-timeline-item <el-timeline-item
v-for="(item,index ) in flowRecordList" v-for="(item, index) in flowRecordList"
:key="index" :key="index"
:icon="setIcon(item)" :icon="setIcon(item)"
:color="setColor(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"
> >
<p style="font-weight: 700"> {{ getSort(index) }}{{item.taskName}}{{item.commentResult}}</p> <template slot="label"><i class="el-icon-user"></i>办理人</template>
<el-card :body-style="{ padding: '6px' }"> {{ item.assigneeName }}
<el-descriptions class="margin-top" :column="1" size="small" border> <el-tag type="info" size="mini">{{ item.deptName }}</el-tag>
<el-descriptions-item v-if="item.assigneeName" label-class-name="my-label" :labelStyle="labelStyle"> </el-descriptions-item>
<template slot="label"><i class="el-icon-user"></i>办理人</template> <el-descriptions-item
{{item.assigneeName}} v-if="item.candidate"
<el-tag type="info" size="mini">{{item.deptName}}</el-tag> label-class-name="my-label"
</el-descriptions-item> :labelStyle="labelStyle"
<el-descriptions-item v-if="item.candidate" label-class-name="my-label" :labelStyle="labelStyle"> >
<template slot="label"><i class="el-icon-user"></i>候选办理</template> <template slot="label"><i class="el-icon-user"></i>候选办理</template>
{{item.candidate}} {{ item.candidate }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item v-if="item.deleteReason" label-class-name="my-label" :labelStyle="labelStyle"> <el-descriptions-item
<template slot="label"><i class="el-icon-user"></i>驳回节点</template> v-if="item.deleteReason"
{{getDeleteReason(item.deleteReason)}} label-class-name="my-label"
</el-descriptions-item> :labelStyle="labelStyle"
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle"> >
<template slot="label"><i class="el-icon-date"></i>接收时间</template> <template slot="label"><i class="el-icon-user"></i>驳回节点</template>
{{item.startTime}} {{ getDeleteReason(item.deleteReason) }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item v-if="item.endTime" label-class-name="my-label" :labelStyle="labelStyle"> <el-descriptions-item
<template slot="label"><i class="el-icon-date"></i>处理时间</template> label-class-name="my-label"
{{item.endTime}} :labelStyle="labelStyle"
</el-descriptions-item> >
<el-descriptions-item v-if="item.duration" label-class-name="my-label" :labelStyle="labelStyle"> <template slot="label"><i class="el-icon-date"></i>接收时间</template>
<template slot="label"><i class="el-icon-time"></i>处理耗时</template> {{ item.startTime }}
{{getDurationDate(item.duration)}} </el-descriptions-item>
</el-descriptions-item> <el-descriptions-item
<el-descriptions-item v-if="item.message" label-class-name="my-label" :labelStyle="labelStyle"> v-if="item.endTime"
<template slot="label"><i class="el-icon-tickets"></i>处理意见</template> label-class-name="my-label"
{{item.message}} :labelStyle="labelStyle"
</el-descriptions-item> >
</el-descriptions> <template slot="label"><i class="el-icon-date"></i>处理时间</template>
</el-card> {{ item.endTime }}
</el-timeline-item> </el-descriptions-item>
</el-timeline> <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>
<div class="drawerRight"> <div class="drawerRight">
<el-card class="box-card"> <el-card class="box-card">
<el-descriptions class="margin-top" :title="title" :column="1" size="medium" border> <el-descriptions
class="margin-top"
:title="title"
:column="1"
size="medium"
border
>
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle"> <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
<template slot="label"> <template slot="label">
<i class="el-icon-map-location"></i> <i class="el-icon-map-location"></i>
@ -110,390 +151,426 @@
<i class="el-icon-tickets"></i> <i class="el-icon-tickets"></i>
请假时间 请假时间
</template> </template>
共 {{initData.day}} 天 共 {{ initData.day }} 天
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle"> <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
<template slot="label"> <template slot="label">
<i class="el-icon-chat-dot-square"></i> <i class="el-icon-chat-dot-square"></i>
请假事由 请假事由
</template> </template>
{{initData.remark}} {{ initData.remark }}
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
</el-card> </el-card>
<div style="text-align: center;margin-top: 30px;"> <div style="text-align: center; margin-top: 30px">
<el-button type="danger" @click="doCanel">关 闭</el-button> <el-button type="danger" @click="doCanel">关 闭</el-button>
</div> </div>
</div> </div>
</div> </div>
</el-drawer> </el-drawer>
</div> </div>
</template> </template>
<script> <script>
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 {findCommentByProcInsId,findFormDatasByProcInsId} from "@/api/flowable/businessKey"; import {
export default { findCommentByProcInsId,
components: {}, findFormDatasByProcInsId,
props: { } from "@/api/flowable/businessKey";
}, export default {
data() { components: {},
return { props: {},
// 抽屉层 data() {
onOpen: false, return {
// 遮罩层 // 抽屉层
loading: false, onOpen: false,
// 标题 // 遮罩层
title: "", loading: false,
jdtitle:"", // 标题
// 表单参数 title: "",
form: {}, jdtitle: "",
// 表单校验 // 表单参数
rules: {}, form: {},
bpmnViewer: null, // 表单校验
options: {}, rules: {},
flowRecordList: [], bpmnViewer: null,
showjd:false, options: {},
//label样式 flowRecordList: [],
labelStyle: { width: "180px" }, showjd: false,
initData:{} //label样式
}; labelStyle: { width: "180px" },
}, initData: {},
computed: {}, };
watch: {}, },
created() {}, computed: {},
mounted() {}, watch: {},
beforeDestroy() {}, created() {},
methods: { mounted() {},
setIcon(row) { beforeDestroy() {},
if (row.endTime) { methods: {
if(row.commentResult=="驳回") setIcon(row) {
{ if (row.endTime) {
return "el-icon-close"; if (row.commentResult == "驳回") {
}else{ return "el-icon-close";
return "el-icon-check";
}
} else { } else {
return "el-icon-time"; return "el-icon-check";
} }
}, } else {
setColor(row) { return "el-icon-time";
if (row.endTime) { }
if(row.commentResult=="驳回") },
{ setColor(row) {
return "#f56c6c"; if (row.endTime) {
}else{ if (row.commentResult == "驳回") {
return "#2bc418"; return "#f56c6c";
}
} else { } else {
return "#b3bdbb"; return "#2bc418";
} }
}, } else {
getSort(i) { return "#b3bdbb";
let num = this.flowRecordList.length - i; }
if (num < 10) { },
num = "0" + num; getSort(i) {
} let num = this.flowRecordList.length - i;
return num + ". "; if (num < 10) {
}, num = "0" + num;
doCanel() { }
this.onOpen = false; return num + ". ";
}, },
show(options) { doCanel() {
this.options = options; this.onOpen = false;
this.title = options.procDefName; },
this.deptName = options.startDeptName; show(options) {
this.nickName = options.startUserName; this.options = options;
this.onOpen = true; this.title = options.procDefName;
this.showjd = false; this.deptName = options.startDeptName;
this.nickName = options.startUserName;
if(options.finishTime==null){ this.onOpen = true;
this.jdtitle="进行中"; this.showjd = false;
this.showjd=true;
}else if(options.finishTime!=null && options.assigneeId==null){ if (options.finishTime == null) {
this.jdtitle="已终止"; this.jdtitle = "进行中";
}else{ this.showjd = true;
this.jdtitle="已完成"; } else if (options.finishTime != null && options.assigneeId == null) {
} this.jdtitle = "已终止";
this.getFlowRecordList(options.procInsId, options.deployId); } else {
this.getFormDatasList(options.procInsId, options.deployId); this.jdtitle = "已完成";
flowXmlAndNode({ procInsId:options.procInsId, deployId: options.deployId }).then((res) => { }
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); 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);
async initFlowImage(data) { // 自适应
const self = this; self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
try { if (data.nodeData !== undefined && data.nodeData.length > 0) {
self.bpmnViewer = new BpmnViewer({ self.fillColor(data.nodeData);
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);
} }
}, } catch (err) {
/** 流程流转记录 */ console.error(err.message, err.warnings);
getFlowRecordList(procInsId, deployId) { }
// const that = this },
// const params = {procInsId: procInsId, deployId: deployId} /** 流程流转记录 */
// flowRecord(params).then(res => { getFlowRecordList(procInsId, deployId) {
// that.flowRecordList = res.data.flowList; // const that = this
// }).catch(res => { // const params = {procInsId: procInsId, deployId: deployId}
// this.$message.error("数据异常，请联系管理员..."); // flowRecord(params).then(res => {
// }) // that.flowRecordList = res.data.flowList;
const that = this // }).catch(res => {
const params = {procInsId: procInsId} // this.$message.error("数据异常，请联系管理员...");
findCommentByProcInsId(params).then(res => { // })
const that = this;
const params = { procInsId: procInsId };
findCommentByProcInsId(params)
.then((res) => {
that.flowRecordList = res.data; that.flowRecordList = res.data;
}).catch(res => {
this.$message.error("数据异常，请联系管理员...");
}) })
}, .catch((res) => {
/** 流程表单数据 */ this.$message.error("数据异常，请联系管理员...");
getFormDatasList(procInsId, deployId) { });
// const that = this },
// const params = {procInsId: procInsId, deployId: deployId} /** 流程表单数据 */
// flowRecord(params).then(res => { getFormDatasList(procInsId, deployId) {
// that.flowRecordList = res.data.flowList; // const that = this
// }).catch(res => { // const params = {procInsId: procInsId, deployId: deployId}
// this.$message.error("数据异常，请联系管理员..."); // flowRecord(params).then(res => {
// }) // that.flowRecordList = res.data.flowList;
const that = this // }).catch(res => {
const params = {procInsId: procInsId} // this.$message.error("数据异常，请联系管理员...");
findFormDatasByProcInsId(params).then(res => { // })
const that = this;
const params = { procInsId: procInsId };
findFormDatasByProcInsId(params)
.then((res) => {
this.initData = res.data; this.initData = res.data;
}).catch(res => { })
.catch((res) => {
this.$message.error("数据异常，请联系管理员..."); this.$message.error("数据异常，请联系管理员...");
}) });
}, },
// 设置高亮颜色的 // 设置高亮颜色的
fillColor(nodeData) { fillColor(nodeData) {
const canvas = this.bpmnViewer.get('canvas') const canvas = this.bpmnViewer.get("canvas");
this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => { this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach((n) => {
const completeTask = nodeData.find(m => m.key === n.id) const completeTask = nodeData.find((m) => m.key === n.id);
const todoTask = nodeData.find(m => !m.completed) const todoTask = nodeData.find((m) => !m.completed);
const endTask = nodeData[nodeData.length - 1] const endTask = nodeData[nodeData.length - 1];
if (n.$type === 'bpmn:UserTask') { if (n.$type === "bpmn:UserTask") {
if (completeTask) { if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') canvas.addMarker(
n.outgoing?.forEach(nn => { n.id,
const targetTask = nodeData.find(m => m.key === nn.targetRef.id) completeTask.completed ? "highlight" : "highlight-todo"
if (targetTask) { );
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){ n.outgoing?.forEach((nn) => {
canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo') const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo') if (targetTask) {
}else { if (
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo') todoTask &&
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo') 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') else if (n.$type === "bpmn:ExclusiveGateway") {
return 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; getDurationDate(val) {
if(seconds<10) seconds = "0"+seconds; // 计算出相差天数
return hours + '小时' + minutes + '分钟' + seconds + '秒'; let days = Math.floor(val / (24 * 3600 * 1000));
} // 计算出小时数
if(minutes>0){ let leave1 = val % (24 * 3600 * 1000); // 计算天数后剩余的毫秒数
if(minutes<10) minutes = "0"+minutes; let hours = Math.floor(leave1 / (3600 * 1000));
if(seconds<10) seconds = "0"+seconds; // 计算相差分钟数
return minutes + '分钟' + seconds + '秒'; let leave2 = leave1 % (3600 * 1000); // 计算小时数后剩余的毫秒数
} let minutes = Math.floor(leave2 / (60 * 1000));
if(seconds>0){ // 计算相差秒数
if(seconds<10) seconds = "0"+seconds; let leave3 = leave2 % (60 * 1000); // 计算分钟数后剩余的毫秒数
return seconds + '秒'; let seconds = Math.round(leave3 / 1000);
} if (days > 0) {
}, if (days < 10) days = "0" + days;
handledownload(url){ if (hours < 10) hours = "0" + hours;
this.$download.resource(url); if (minutes < 10) minutes = "0" + minutes;
}, if (seconds < 10) seconds = "0" + seconds;
getDeleteReason(val){ return days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
val = val.replace("Change activity to ",""); }
let flowRecordList = this.flowRecordList; if (hours > 0) {
for(let i=0;i<flowRecordList.length;i++){ if (hours < 10) hours = "0" + hours;
if(flowRecordList[i].taskDefKey==val){ if (minutes < 10) minutes = "0" + minutes;
return "驳回至"+flowRecordList[i].taskName; 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"> </script>
.app-detailDrawer{ <style lang="scss">
.drawer { .app-detailDrawer {
.drawer {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
padding-bottom: 20px; padding-bottom: 20px;
.drawerLeft { .drawerLeft {
width: 60%; width: 60%;
min-width: 280px; min-width: 280px;
height: 100%; height: 100%;
float: left; float: left;
border-right: 1px solid #dcdfe6; border-right: 1px solid #dcdfe6;
overflow-y: scroll; overflow-y: scroll;
padding-right: 20px; padding-right: 20px;
.bjs-powered-by { .bjs-powered-by {
display: none !important; display: none !important;
}
} .maskLayer {
.maskLayer { width: 100%;
width: 100%; height: 90px;
height: 90px; position: absolute;
position: absolute; z-index: 9999;
z-index: 9999; top: 77px;
top: 77px; }
} }
} .drawerRight {
.drawerRight { width: 40%;
width: 40%; min-width: 400px;
min-width: 400px; height: 100%;
height: 100%; float: left;
float: left; padding-left: 20px;
padding-left: 20px; }
}
} }
.containers { .containers {
width: 100%; width: 100%;
height: 150px; height: 150px;
.canvas { .canvas {
width: 100%; width: 100%;
height: 100px; height: 100px;
} }
.panel { .panel {
position: absolute; position: absolute;
right: 0; right: 0;
top: 50px; top: 50px;
width: 300px; width: 300px;
} }
.load { .load {
margin-right: 10px; margin-right: 10px;
} }
.el-form-item__label{ .el-form-item__label {
font-size: 13px; font-size: 13px;
} }
.djs-palette{ .djs-palette {
left: 0px!important; left: 0px !important;
top: 0px; top: 0px;
border-top: none; border-top: none;
} }
.djs-container svg { .djs-container svg {
min-height: 150px; min-height: 150px;
} }
.highlight.djs-shape .djs-visual > :nth-child(1) { .highlight.djs-shape .djs-visual > :nth-child(1) {
fill: green !important; fill: green !important;
stroke: green !important; stroke: green !important;
fill-opacity: 0.2 !important; fill-opacity: 0.2 !important;
} }
.highlight.djs-shape .djs-visual > :nth-child(2) { .highlight.djs-shape .djs-visual > :nth-child(2) {
fill: green !important; fill: green !important;
} }
.highlight.djs-shape .djs-visual > path { .highlight.djs-shape .djs-visual > path {
fill: green !important; fill: green !important;
fill-opacity: 0.2 !important; fill-opacity: 0.2 !important;
stroke: green !important; stroke: green !important;
} }
.highlight.djs-connection > .djs-visual > path { .highlight.djs-connection > .djs-visual > path {
stroke: green !important; stroke: green !important;
} }
.highlight-todo.djs-connection > .djs-visual > path { .highlight-todo.djs-connection > .djs-visual > path {
stroke: orange !important; stroke: orange !important;
stroke-dasharray: 4px !important; stroke-dasharray: 4px !important;
fill-opacity: 0.2 !important; fill-opacity: 0.2 !important;
} }
.highlight-todo.djs-shape .djs-visual > :nth-child(1) { .highlight-todo.djs-shape .djs-visual > :nth-child(1) {
fill: orange !important; fill: orange !important;
stroke: orange !important; stroke: orange !important;
stroke-dasharray: 4px !important; stroke-dasharray: 4px !important;
fill-opacity: 0.2 !important; fill-opacity: 0.2 !important;
} }
.overlays-div { .overlays-div {
font-size: 10px; font-size: 10px;
color: red; color: red;
width: 100px; width: 100px;
top: -20px !important; top: -20px !important;
}
} }
} }
</style> }
</style>

729
ruoyi-ui/src/views/flowable/task/myProcess/editTaskDrawer.vue
View File

@ -1,184 +1,189 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-drawer <el-drawer
v-if="onOpen" v-if="onOpen"
:visible.sync="onOpen" :visible.sync="onOpen"
ref="drawer" ref="drawer"
direction="rtl" direction="rtl"
size="60%" size="60%"
@close="closeCallBack" @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"
> >
<template slot="title"> <div class="block containers">
<div>工程管理 【{{ title }}】</div> <div class="canvas" ref="flowCanvas"></div>
</template> <div class="maskLayer" />
<el-form </div>
ref="form" <el-form-item label="所属项目" prop="businessKey">
:model="form" <el-select
:rules="rules" v-model="form.businessKey"
v-loading="loading" placeholder="请选择所属项目"
label-width="120px" style="width: 100%"
style="padding-right: 35px" filterable
> :disabled="disPro"
<div class="block containers"> @change="projectChage"
<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 <el-option
v-for="(item,index) in projectOptions" v-for="(item, index) in projectOptions"
:key="index" :key="index"
:label="item.projectName" :label="item.projectName"
:value="item.id" :value="item.id"
> >
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="发起单位"> <el-form-item label="发起单位">
{{ deptName }} {{ deptName }}
</el-form-item> </el-form-item>
<el-form-item label="发起人"> <el-form-item label="发起人">
{{ nickName }} {{ nickName }}
</el-form-item> </el-form-item>
<el-form-item label="审批事项"> <el-form-item label="审批事项">
{{ title }} {{ title }}
</el-form-item> </el-form-item>
<el-form-item label="审批内容" prop="files"> <el-form-item label="审批内容" prop="files">
<FileUpload <FileUpload
@input="fileInput" @input="fileInput"
:limit="9" :limit="9"
v-model="form.files" v-model="form.files"
:fileType="['pdf', 'png', 'jpg', 'jpeg', 'doc', 'docx', 'xls', 'xlsx']" :fileType="['pdf', 'png', 'jpg', 'jpeg']"
/> />
</el-form-item> </el-form-item>
<el-form-item label="申请说明" prop="remark"> <el-form-item label="申请说明" prop="remark">
<el-input <el-input
type="textarea" type="textarea"
v-model="form.remark" v-model="form.remark"
placeholder="请输入申请说明" placeholder="请输入申请说明"
rows="5" rows="5"
/> />
</el-form-item> </el-form-item>
<div style="text-align: center"> <div style="text-align: center">
<el-button type="primary" @click="submitForm">提交流程</el-button> <el-button type="primary" @click="submitForm">提交流程</el-button>
<el-button @click="doCanel">取 消</el-button> <el-button @click="doCanel">取 消</el-button>
</div> </div>
</el-form> </el-form>
</el-drawer> </el-drawer>
</div> </div>
</template> </template>
<script> <script>
import store from "@/store"; import store from "@/store";
import { definitionStart, flowXmlAndNode } from "@/api/flowable/definition"; import { definitionStart, flowXmlAndNode } from "@/api/flowable/definition";
import { CustomViewer as BpmnViewer } from "@/components/customBpmn"; import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
import { findFormDatasByProcInsId } from "@/api/flowable/businessKey"; import { findFormDatasByProcInsId } from "@/api/flowable/businessKey";
import { complete, getNextFlowNodeByStart } from "@/api/flowable/todo"; import { complete, getNextFlowNodeByStart } from "@/api/flowable/todo";
export default { export default {
components: {}, components: {},
props: { props: {
closeCallBack: { closeCallBack: {
type: Function, type: Function,
},
}, },
data() { },
return { data() {
// 抽屉层 return {
onOpen: false, // 抽屉层
// 遮罩层 onOpen: false,
loading: false, // 遮罩层
// 标题 loading: false,
title: "", // 标题
// 表单参数 title: "",
form: { // 表单参数
businessKey: "", form: {
projectName: "", businessKey: "",
files: "", projectName: "",
remark: "", 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; rules: {
this.onOpen = true; businessKey: [{ required: true, message: "请选择所属项目", trigger: "blur" }],
this.title = options.procDefName; files: [{ required: true, message: "请上传申请内容", trigger: "blur" }],
this.initFormDate(options.procInsId); remark: [
flowXmlAndNode({ procInsId:options.procInsId, deployId: options.deployId }).then((res) => { { required: false, message: "请输入申请说明", trigger: "blur" },
this.initFlowImage(res.data); {
}); max: 500,
message: "申请说明最多输入500字",
trigger: "blur",
},
],
}, },
async initFlowImage(data) { projectOptions: null,
const self = this; deptName: null,
try { nickName: null,
self.bpmnViewer = new BpmnViewer({ disPro: false,
container: this.$refs.flowCanvas, bpmnViewer: null,
height: "150px", options: {},
}); taskTitle: null,
await self.bpmnViewer.importXML(data.xmlData); taskOpen: false,
// 自适应 daterangeMarksTime: [],
self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto"); };
if (data.nodeData !==undefined && data.nodeData.length > 0 ) { },
self.fillColor(data.nodeData) computed: {},
} watch: {},
} catch (err) { created() {},
console.error(err.message, err.warnings); mounted() {},
beforeDestroy() {},
methods: {
// 项目选择
projectChage(val) {
let projectName = "";
this.projectOptions.forEach((item) => {
if ((item.id = val)) {
projectName = item.projectName;
return;
} }
}, });
/** 流程表单数据 */ this.form.projectName = projectName;
initFormDate(procInsId, deployId) { },
this.projectOptions=[{id:this.options.businessKey,projectName:this.options.businessKeyName}]; doCanel() {
const params = {procInsId: procInsId} this.onOpen = false;
findFormDatasByProcInsId(params).then(res => { },
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.form = res.data;
this.deptName = this.options.startDeptName; this.deptName = this.options.startDeptName;
this.nickName = this.options.startUserName; this.nickName = this.options.startUserName;
@ -188,192 +193,224 @@
this.form.assignee = store.getters.name; this.form.assignee = store.getters.name;
this.form.procInsId = this.options.procInsId; this.form.procInsId = this.options.procInsId;
this.form.instanceId = this.options.procInsId; this.form.instanceId = this.options.procInsId;
}).catch(res => {
this.$message.error("数据异常，请联系管理员...");
}) })
}, .catch((res) => {
fileInput(files) { this.$message.error("数据异常，请联系管理员...");
let fileUrls = ""; });
if (files.length > 0) { },
fileUrls = ""; fileInput(files) {
files.forEach((item) => { let fileUrls = "";
fileUrls += "," + item.url; 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();
}); });
fileUrls = fileUrls.substring(1);
} }
this.form.files = fileUrls; });
}, },
submitForm() { // 设置高亮颜色的
this.$refs["form"].validate((valid) => { fillColor(nodeData) {
if (valid) { const canvas = this.bpmnViewer.get("canvas");
this.loading = true; this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach((n) => {
this.form.variables={ const completeTask = nodeData.find((m) => m.key === n.id);
businessKey:this.form.businessKey, const todoTask = nodeData.find((m) => !m.completed);
projectName:this.form.projectName, const endTask = nodeData[nodeData.length - 1];
files:this.form.files, if (n.$type === "bpmn:UserTask") {
remark:this.form.remark, if (completeTask) {
INITIATOR:this.form.INITIATOR canvas.addMarker(
} n.id,
complete(this.form).then(res => { completeTask.completed ? "highlight" : "highlight-todo"
this.$store.dispatch('settingAwaitNum'); );
this.$modal.msgSuccess("任务提交成功"); n.outgoing?.forEach((nn) => {
this.loading = false; const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
//关闭并刷新列表 if (targetTask) {
this.$refs.drawer.closeDrawer(); 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") {
fillColor(nodeData) { if (completeTask) {
const canvas = this.bpmnViewer.get('canvas') canvas.addMarker(
this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => { n.id,
const completeTask = nodeData.find(m => m.key === n.id) completeTask.completed ? "highlight" : "highlight-todo"
const todoTask = nodeData.find(m => !m.completed) );
const endTask = nodeData[nodeData.length - 1] n.outgoing?.forEach((nn) => {
if (n.$type === 'bpmn:UserTask') { const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
if (completeTask) { if (targetTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') canvas.addMarker(
n.outgoing?.forEach(nn => { nn.id,
const targetTask = nodeData.find(m => m.key === nn.targetRef.id) targetTask.completed ? "highlight" : "highlight-todo"
if (targetTask) { );
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){ canvas.addMarker(
canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo') nn.targetRef.id,
canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo') targetTask.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') else if (n.$type === "bpmn:ParallelGateway") {
return 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"> </script>
.bjs-powered-by { <style lang="scss">
display: none !important; .bjs-powered-by {
} display: none !important;
.maskLayer { }
.maskLayer {
width: 100%;
height: 150px;
position: absolute;
z-index: 9999;
top: 66px;
}
.app-container {
.containers {
width: 100%; width: 100%;
height: 150px; height: 150px;
position: absolute; .canvas {
z-index: 9999;
top: 66px;
}
.app-container{
.containers {
width: 100%; width: 100%;
height: 150px; height: 150px;
.canvas { }
width: 100%; .panel {
height: 150px; position: absolute;
} right: 0;
.panel { top: 50px;
position: absolute; width: 300px;
right: 0; }
top: 50px; .load {
width: 300px; margin-right: 10px;
} }
.load { .el-form-item__label {
margin-right: 10px; font-size: 13px;
} }
.el-form-item__label{
font-size: 13px; .djs-palette {
} left: 0px !important;
top: 0px;
.djs-palette{ border-top: none;
left: 0px!important; }
top: 0px;
border-top: none; .djs-container svg {
} min-height: 150px;
}
.djs-container svg {
min-height: 150px; .highlight.djs-shape .djs-visual > :nth-child(1) {
} fill: green !important;
stroke: green !important;
.highlight.djs-shape .djs-visual > :nth-child(1) { fill-opacity: 0.2 !important;
fill: green !important; }
stroke: green !important; .highlight.djs-shape .djs-visual > :nth-child(2) {
fill-opacity: 0.2 !important; fill: green !important;
} }
.highlight.djs-shape .djs-visual > :nth-child(2) { .highlight.djs-shape .djs-visual > path {
fill: green !important; fill: green !important;
} fill-opacity: 0.2 !important;
.highlight.djs-shape .djs-visual > path { stroke: green !important;
fill: green !important; }
fill-opacity: 0.2 !important; .highlight.djs-connection > .djs-visual > path {
stroke: green !important; stroke: green !important;
} }
.highlight.djs-connection > .djs-visual > path { .highlight-todo.djs-connection > .djs-visual > path {
stroke: green !important; stroke: orange !important;
} stroke-dasharray: 4px !important;
.highlight-todo.djs-connection > .djs-visual > path { fill-opacity: 0.2 !important;
stroke: orange !important; }
stroke-dasharray: 4px !important; .highlight-todo.djs-shape .djs-visual > :nth-child(1) {
fill-opacity: 0.2 !important; fill: orange !important;
} stroke: orange !important;
.highlight-todo.djs-shape .djs-visual > :nth-child(1) { stroke-dasharray: 4px !important;
fill: orange !important; fill-opacity: 0.2 !important;
stroke: orange !important; }
stroke-dasharray: 4px !important; .overlays-div {
fill-opacity: 0.2 !important; font-size: 10px;
} color: red;
.overlays-div { width: 100px;
font-size: 10px; top: -20px !important;
color: red;
width: 100px;
top: -20px !important;
}
} }
} }
</style> }
</style>

18
ruoyi-ui/src/views/flowable/task/myProcess/initSpaceTaskDrawer.vue
View File

@ -49,14 +49,26 @@
<el-form-item label="审批事项"> <el-form-item label="审批事项">
{{ title }} {{ title }}
</el-form-item> </el-form-item>
<el-form-item label="审批内容" prop="files" v-if="options.flowKey!='flow_xmglzdl_qjsp' && options.flowKey!='flow_aql_sxkj'"> <el-form-item
label="审批内容"
prop="files"
v-if="
options.flowKey != 'flow_xmglzdl_qjsp' && options.flowKey != 'flow_aql_sxkj'
"
>
<FileUpload <FileUpload
@input="fileInput" @input="fileInput"
:limit="9" :limit="9"
:fileType="['pdf', 'png', 'jpg', 'jpeg', 'doc', 'docx', 'xls', 'xlsx']" :fileType="['pdf', 'png', 'jpg', 'jpeg']"
/> />
</el-form-item> </el-form-item>
<el-form-item label="申请说明" prop="remark" v-if="options.flowKey!='flow_xmglzdl_qjsp' && options.flowKey!='flow_aql_sxkj'"> <el-form-item
label="申请说明"
prop="remark"
v-if="
options.flowKey != 'flow_xmglzdl_qjsp' && options.flowKey != 'flow_aql_sxkj'
"
>
<el-input <el-input
type="textarea" type="textarea"
v-model="form.remark" v-model="form.remark"

8
ruoyi-ui/src/views/flowable/task/myProcess/initTaskDrawer.vue
View File

@ -32,12 +32,12 @@
:disabled="disPro" :disabled="disPro"
@change="projectChage" @change="projectChage"
> >
<el-option <el-option
v-for="(item,index) in projectOptions" v-for="(item, index) in projectOptions"
:key="index" :key="index"
:label="item.projectName" :label="item.projectName"
:value="item.id" :value="item.id"
> >
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -54,7 +54,7 @@
<FileUpload <FileUpload
@input="fileInput" @input="fileInput"
:limit="9" :limit="9"
:fileType="['pdf', 'png', 'jpg', 'jpeg', 'doc', 'docx', 'xls', 'xlsx']" :fileType="['pdf', 'png', 'jpg', 'jpeg']"
/> />
</el-form-item> </el-form-item>
<el-form-item label="申请说明" prop="remark"> <el-form-item label="申请说明" prop="remark">

792
ruoyi-ui/src/views/flowable/task/todo/detail/approveDrawer.vue
View File

@ -9,121 +9,195 @@
size="80%" size="80%"
> >
<template slot="title"> <template slot="title">
<div>流程详情 【{{ title }}】 - 当前进度【{{ jdtitle }}】<span v-if="showjd"> - 当前节点【{{options.taskName}}】</span></div> <div>
流程详情 【{{ title }}】 - 当前进度【{{ jdtitle }}】<span v-if="showjd">
- 当前节点【{{ options.taskName }}】</span
>
</div>
</template> </template>
<div class="drawer"> <div class="drawer">
<div class="drawerLeft block containers"> <div class="drawerLeft block containers">
<div class="canvas" ref="flowCanvas"></div> <div class="canvas" ref="flowCanvas"></div>
<div class="maskLayer" /> <div class="maskLayer" />
<el-timeline> <el-timeline>
<el-timeline-item <el-timeline-item
v-for="(item,index ) in flowRecordList" 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
ref="form" :model="form" :rules="rules" label-width="100px" v-loading="loading">
<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>
<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" :key="index"
:label="item.name" :icon="setIcon(item)"
:value="item.id" :color="setColor(item)"
> >
</el-option> <p style="font-weight: 700">
</el-select> {{ getSort(index) }}{{ item.taskName }}{{ item.commentResult }}
</el-form-item> </p>
<div style="text-align: center"> <el-card :body-style="{ padding: '6px' }">
<el-button icon="el-icon-s-custom" v-if="false" type="primary" plain size="mini">任务转办</el-button> <el-descriptions class="margin-top" :column="1" size="small" border>
<el-button icon="el-icon-check" type="success" size="mini" @click="handlePass">审批通过</el-button> <el-descriptions-item
<el-button icon="el-icon-back" type="warning" size="mini" @click="handleBack">退回任务</el-button> v-if="item.assigneeName"
<el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回上级</el-button> 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
ref="form"
:model="form"
:rules="rules"
label-width="100px"
v-loading="loading"
>
<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>
<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"
>任务转办</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
>
</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-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>
</el-drawer> </el-drawer>
</div> </div>
@ -134,7 +208,10 @@ 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, returnTask, returnList } from "@/api/flowable/todo";
import {findCommentByProcInsId,findFormDatasByProcInsId} from "@/api/flowable/businessKey"; import {
findCommentByProcInsId,
findFormDatasByProcInsId,
} from "@/api/flowable/businessKey";
export default { export default {
components: {}, components: {},
props: { props: {
@ -150,7 +227,7 @@ export default {
loading: false, loading: false,
// 标题 // 标题
title: "", title: "",
jdtitle:"", jdtitle: "",
// 表单参数 // 表单参数
form: {}, form: {},
// 表单校验 // 表单校验
@ -164,20 +241,21 @@ export default {
}, },
], ],
}, },
queryParams:{ queryParams: {
nickName:null, nickName: null,
phonenumber: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: [], // 回退列表数据 returnTaskList: [], // 回退列表数据
returnTask:false, returnTask: false,
returnTaskBtn:false returnTaskBtn: false,
fileTypes:['pdf','png','jpg','jpeg'],
}; };
}, },
computed: {}, computed: {},
@ -190,21 +268,23 @@ export default {
handlePass() { handlePass() {
this.$refs["form"].validate((valid) => { this.$refs["form"].validate((valid) => {
if (valid) { if (valid) {
this.$confirm('是否确认审批通过当前流程申请?', '提示', { this.$confirm("是否确认审批通过当前流程申请?", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}).then(() => { })
this.loading=true; .then(() => {
complete(this.form).then(res => { this.loading = true;
this.$modal.msgSuccess("任务审批成功"); complete(this.form).then((res) => {
this.loading = false; this.$modal.msgSuccess("任务审批成功");
//关闭并刷新列表 this.loading = false;
this.$refs.drawer.closeDrawer(); //关闭并刷新列表
this.$refs.drawer.closeDrawer();
});
})
.catch(() => {
console.log("取消操作");
}); });
}).catch(() => {
console.log("取消操作");
});
} }
}); });
}, },
@ -212,65 +292,69 @@ export default {
handleReject() { handleReject() {
this.$refs["form"].validate((valid) => { this.$refs["form"].validate((valid) => {
if (valid) { if (valid) {
this.$confirm('是否确认审批驳回当前流程申请?', '提示', { this.$confirm("是否确认审批驳回当前流程申请?", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}).then(() => { })
this.loading=true; .then(() => {
rejectTask(this.form).then(res => { this.loading = true;
this.$modal.msgSuccess("任务驳回成功"); rejectTask(this.form).then((res) => {
this.loading = false; this.$modal.msgSuccess("任务驳回成功");
//关闭并刷新列表 this.loading = false;
this.$refs.drawer.closeDrawer(); //关闭并刷新列表
this.$refs.drawer.closeDrawer();
});
})
.catch(() => {
console.log("取消操作");
}); });
}).catch(() => {
console.log("取消操作");
});
} }
}); });
}, },
/** 退回任务 */ /** 退回任务 */
handleBack(){ handleBack() {
if(!this.returnTask){ if (!this.returnTask) {
this.returnTask=true; this.returnTask = true;
this.$modal.msgWarning("请选择退回节点"); this.$modal.msgWarning("请选择退回节点");
return; return;
} }
this.$refs["form"].validate((valid) => { this.$refs["form"].validate((valid) => {
if (valid) { if (valid) {
if(!this.form.targetKey){ if (!this.form.targetKey) {
this.$modal.msgWarning("请选择退回节点"); this.$modal.msgWarning("请选择退回节点");
return; return;
} }
this.$confirm('是否确认退回当前流程申请?', '提示', { this.$confirm("是否确认退回当前流程申请?", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}).then(() => { })
this.loading=true; .then(() => {
returnTask(this.form).then(res => { this.loading = true;
this.$modal.msgSuccess("任务退回成功"); returnTask(this.form).then((res) => {
this.loading = false; this.$modal.msgSuccess("任务退回成功");
//关闭并刷新列表 this.loading = false;
this.$refs.drawer.closeDrawer(); //关闭并刷新列表
this.$refs.drawer.closeDrawer();
});
})
.catch(() => {
console.log("取消操作");
}); });
}).catch(() => {
console.log("取消操作");
});
} }
}); });
}, },
initReturnList(){ initReturnList() {
returnList(this.form).then(res => { returnList(this.form).then((res) => {
this.returnTaskList = res.data; this.returnTaskList = res.data;
//退回节点>1时，可显示退回按钮 //退回节点>1时，可显示退回按钮
if(res.data.length>1){ if (res.data.length > 1) {
this.returnTaskBtn=true; this.returnTaskBtn = true;
} }
}) });
}, },
initFormDate(){ initFormDate() {
this.form.taskId = this.options.taskId; this.form.taskId = this.options.taskId;
this.form.taskName = this.options.taskName; this.form.taskName = this.options.taskName;
this.form.userId = store.getters.userId; this.form.userId = store.getters.userId;
@ -278,16 +362,15 @@ export default {
this.form.procInsId = this.options.procInsId; this.form.procInsId = this.options.procInsId;
this.form.instanceId = this.options.procInsId; this.form.instanceId = this.options.procInsId;
this.form.executionId = this.options.procInsId; this.form.executionId = this.options.procInsId;
this.returnTask=false; this.returnTask = false;
this.returnTaskBtn=false; this.returnTaskBtn = false;
this.initReturnList(); this.initReturnList();
}, },
setIcon(row) { setIcon(row) {
if (row.endTime) { if (row.endTime) {
if(row.commentResult=="驳回") if (row.commentResult == "驳回") {
{
return "el-icon-close"; return "el-icon-close";
}else{ } else {
return "el-icon-check"; return "el-icon-check";
} }
} else { } else {
@ -296,10 +379,9 @@ export default {
}, },
setColor(row) { setColor(row) {
if (row.endTime) { if (row.endTime) {
if(row.commentResult=="驳回") if (row.commentResult == "驳回") {
{
return "#f56c6c"; return "#f56c6c";
}else{ } else {
return "#2bc418"; return "#2bc418";
} }
} else { } else {
@ -325,19 +407,21 @@ export default {
this.showjd = false; this.showjd = false;
this.form = {}; this.form = {};
this.initFormDate(); this.initFormDate();
if(options.finishTime==null){ if (options.finishTime == null) {
this.jdtitle="进行中"; this.jdtitle = "进行中";
this.showjd=true; this.showjd = true;
}else if(options.finishTime!=null && options.assigneeId==null){ } else if (options.finishTime != null && options.assigneeId == null) {
this.jdtitle="已撤销"; this.jdtitle = "已撤销";
}else{ } else {
this.jdtitle="已完成"; this.jdtitle = "已完成";
} }
this.getFlowRecordList(options.procInsId, options.deployId); this.getFlowRecordList(options.procInsId, options.deployId);
this.getFormDatasList(options.procInsId, options.deployId); this.getFormDatasList(options.procInsId, options.deployId);
flowXmlAndNode({ procInsId:options.procInsId, deployId: options.deployId }).then((res) => { flowXmlAndNode({ procInsId: options.procInsId, deployId: options.deployId }).then(
this.initFlowImage(res.data); (res) => {
}); this.initFlowImage(res.data);
}
);
}, },
async initFlowImage(data) { async initFlowImage(data) {
const self = this; const self = this;
@ -349,8 +433,8 @@ export default {
await self.bpmnViewer.importXML(data.xmlData); await self.bpmnViewer.importXML(data.xmlData);
// 自适应 // 自适应
self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto"); self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
if (data.nodeData !==undefined && data.nodeData.length > 0 ) { if (data.nodeData !== undefined && data.nodeData.length > 0) {
self.fillColor(data.nodeData) self.fillColor(data.nodeData);
} }
} catch (err) { } catch (err) {
console.error(err.message, err.warnings); console.error(err.message, err.warnings);
@ -365,13 +449,15 @@ export default {
// }).catch(res => { // }).catch(res => {
// this.$message.error("数据异常，请联系管理员..."); // this.$message.error("数据异常，请联系管理员...");
// }) // })
const that = this const that = this;
const params = {procInsId: procInsId} const params = { procInsId: procInsId };
findCommentByProcInsId(params).then(res => { findCommentByProcInsId(params)
that.flowRecordList = res.data; .then((res) => {
}).catch(res => { that.flowRecordList = res.data;
this.$message.error("数据异常，请联系管理员..."); })
}) .catch((res) => {
this.$message.error("数据异常，请联系管理员...");
});
}, },
/** 流程表单数据 */ /** 流程表单数据 */
getFormDatasList(procInsId, deployId) { getFormDatasList(procInsId, deployId) {
@ -382,131 +468,170 @@ export default {
// }).catch(res => { // }).catch(res => {
// this.$message.error("数据异常，请联系管理员..."); // this.$message.error("数据异常，请联系管理员...");
// }) // })
const that = this const that = this;
const params = {procInsId: procInsId} const params = { procInsId: procInsId };
findFormDatasByProcInsId(params).then(res => { findFormDatasByProcInsId(params)
this.initData = res.data; .then((res) => {
this.initData.files = res.data.files.split(','); this.initData = res.data;
}).catch(res => { this.initData.files = res.data.files.split(",");
this.$message.error("数据异常，请联系管理员..."); })
}) .catch((res) => {
this.$message.error("数据异常，请联系管理员...");
});
}, },
// 设置高亮颜色的 // 设置高亮颜色的
fillColor(nodeData) { fillColor(nodeData) {
const canvas = this.bpmnViewer.get('canvas') const canvas = this.bpmnViewer.get("canvas");
this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => { this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach((n) => {
const completeTask = nodeData.find(m => m.key === n.id) const completeTask = nodeData.find((m) => m.key === n.id);
const todoTask = nodeData.find(m => !m.completed) const todoTask = nodeData.find((m) => !m.completed);
const endTask = nodeData[nodeData.length - 1] const endTask = nodeData[nodeData.length - 1];
if (n.$type === 'bpmn:UserTask') { if (n.$type === "bpmn:UserTask") {
if (completeTask) { if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') canvas.addMarker(
n.outgoing?.forEach(nn => { n.id,
const targetTask = nodeData.find(m => m.key === nn.targetRef.id) completeTask.completed ? "highlight" : "highlight-todo"
);
n.outgoing?.forEach((nn) => {
const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
if (targetTask) { if (targetTask) {
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){ if (
canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo') todoTask &&
canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo') completeTask.key === todoTask.key &&
}else { !todoTask.completed
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo') ) {
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo') 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') { else if (n.$type === "bpmn:ExclusiveGateway") {
if (completeTask) { if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') canvas.addMarker(
n.outgoing?.forEach(nn => { n.id,
const targetTask = nodeData.find(m => m.key === nn.targetRef.id) completeTask.completed ? "highlight" : "highlight-todo"
);
n.outgoing?.forEach((nn) => {
const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
if (targetTask) { if (targetTask) {
canvas.addMarker(
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo') nn.id,
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo') targetTask.completed ? "highlight" : "highlight-todo"
);
canvas.addMarker(
nn.targetRef.id,
targetTask.completed ? "highlight" : "highlight-todo"
);
} }
});
})
} }
} }
// 并行网关 // 并行网关
else if (n.$type === 'bpmn:ParallelGateway') { else if (n.$type === "bpmn:ParallelGateway") {
if (completeTask) { if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') canvas.addMarker(
n.outgoing?.forEach(nn => { n.id,
const targetTask = nodeData.find(m => m.key === nn.targetRef.id) completeTask.completed ? "highlight" : "highlight-todo"
);
n.outgoing?.forEach((nn) => {
const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
if (targetTask) { if (targetTask) {
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo') canvas.addMarker(
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo') nn.id,
targetTask.completed ? "highlight" : "highlight-todo"
);
canvas.addMarker(
nn.targetRef.id,
targetTask.completed ? "highlight" : "highlight-todo"
);
} }
}) });
} }
} } else if (n.$type === "bpmn:StartEvent") {
else if (n.$type === 'bpmn:StartEvent') { n.outgoing.forEach((nn) => {
n.outgoing.forEach(nn => { const completeTask = nodeData.find((m) => m.key === nn.targetRef.id);
const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
if (completeTask) { if (completeTask) {
canvas.addMarker(nn.id, 'highlight') canvas.addMarker(nn.id, "highlight");
canvas.addMarker(n.id, 'highlight') canvas.addMarker(n.id, "highlight");
return return;
} }
}) });
} } else if (n.$type === "bpmn:EndEvent") {
else if (n.$type === 'bpmn:EndEvent') {
if (endTask.key === n.id && endTask.completed) { if (endTask.key === n.id && endTask.completed) {
canvas.addMarker(n.id, 'highlight') canvas.addMarker(n.id, "highlight");
return return;
} }
} }
}) });
}, },
getDurationDate(val){ getDurationDate(val) {
// 计算出相差天数 // 计算出相差天数
let days = Math.floor(val / (24 * 3600 * 1000)) let days = Math.floor(val / (24 * 3600 * 1000));
// 计算出小时数 // 计算出小时数
let leave1 = val % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数 let leave1 = val % (24 * 3600 * 1000); // 计算天数后剩余的毫秒数
let hours = Math.floor(leave1 / (3600 * 1000)) let hours = Math.floor(leave1 / (3600 * 1000));
// 计算相差分钟数 // 计算相差分钟数
let leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数 let leave2 = leave1 % (3600 * 1000); // 计算小时数后剩余的毫秒数
let minutes = Math.floor(leave2 / (60 * 1000)) let minutes = Math.floor(leave2 / (60 * 1000));
// 计算相差秒数 // 计算相差秒数
let leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数 let leave3 = leave2 % (60 * 1000); // 计算分钟数后剩余的毫秒数
let seconds = Math.round(leave3 / 1000) let seconds = Math.round(leave3 / 1000);
if(days>0){ if (days > 0) {
if(days<10) days = "0"+days; if (days < 10) days = "0" + days;
if(hours<10) hours = "0"+hours; if (hours < 10) hours = "0" + hours;
if(minutes<10) minutes = "0"+minutes; if (minutes < 10) minutes = "0" + minutes;
if(seconds<10) seconds = "0"+seconds; if (seconds < 10) seconds = "0" + seconds;
return days + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒'; return days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
} }
if(hours>0){ if (hours > 0) {
if(hours<10) hours = "0"+hours; if (hours < 10) hours = "0" + hours;
if(minutes<10) minutes = "0"+minutes; if (minutes < 10) minutes = "0" + minutes;
if(seconds<10) seconds = "0"+seconds; if (seconds < 10) seconds = "0" + seconds;
return hours + '小时' + minutes + '分钟' + seconds + '秒'; return hours + "小时" + minutes + "分钟" + seconds + "秒";
} }
if(minutes>0){ if (minutes > 0) {
if(minutes<10) minutes = "0"+minutes; if (minutes < 10) minutes = "0" + minutes;
if(seconds<10) seconds = "0"+seconds; if (seconds < 10) seconds = "0" + seconds;
return minutes + '分钟' + seconds + '秒'; return minutes + "分钟" + seconds + "秒";
} }
if(seconds>0){ if (seconds > 0) {
if(seconds<10) seconds = "0"+seconds; if (seconds < 10) seconds = "0" + seconds;
return seconds + '秒'; return seconds + "秒";
} }
}, },
handledownload(url){ handledownload(url) {
this.$download.resource(url); let fileType = url.split(".");
if(fileTypes.indexOf(fileType)>-1){
window.open(process.env.VUE_APP_BASE_API+url);
}else{
this.$download.resource(url);
}
}, },
getDeleteReason(val){ getDeleteReason(val) {
val = val.replace("Change activity to ",""); val = val.replace("Change activity to ", "");
let flowRecordList = this.flowRecordList; let flowRecordList = this.flowRecordList;
for(let i=0;i<flowRecordList.length;i++){ for (let i = 0; i < flowRecordList.length; i++) {
if(flowRecordList[i].taskDefKey==val){ if (flowRecordList[i].taskDefKey == val) {
console.log(i); console.log(i);
return "驳回至"+flowRecordList[i].taskName; return "驳回至" + flowRecordList[i].taskName;
} }
} }
}, },
@ -514,44 +639,43 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.app-approveDrawer{ .app-approveDrawer {
.drawer { .drawer {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
padding-bottom: 20px; padding-bottom: 20px;
.drawerLeft { .drawerLeft {
width: 60%; width: 60%;
min-width: 280px; min-width: 280px;
height: 100%; height: 100%;
float: left; float: left;
border-right: 1px solid #dcdfe6; border-right: 1px solid #dcdfe6;
overflow-y: scroll; overflow-y: scroll;
padding-right: 20px; padding-right: 20px;
.bjs-powered-by { .bjs-powered-by {
display: none !important; display: none !important;
}
} .maskLayer {
.maskLayer { width: 100%;
width: 100%; height: 90px;
height: 90px; position: absolute;
position: absolute; z-index: 9999;
z-index: 9999; top: 77px;
top: 77px; }
} }
} .drawerRight {
.drawerRight { width: 40%;
width: 40%; min-width: 400px;
min-width: 400px; height: 100%;
height: 100%; float: left;
float: left; padding-left: 20px;
padding-left: 20px; }
} }
} .containers {
.containers { width: 100%;
width: 100%; height: 150px;
height: 150px;
.canvas { .canvas {
width: 100%; width: 100%;
height: 100px; height: 100px;
@ -565,12 +689,12 @@ export default {
.load { .load {
margin-right: 10px; margin-right: 10px;
} }
.el-form-item__label{ .el-form-item__label {
font-size: 13px; font-size: 13px;
} }
.djs-palette{ .djs-palette {
left: 0px!important; left: 0px !important;
top: 0px; top: 0px;
border-top: none; border-top: none;
} }
@ -615,12 +739,12 @@ export default {
} }
} }
.page-warning { .page-warning {
padding: 8px 16px; padding: 8px 16px;
background-color: #f0f9eb; background-color: #f0f9eb;
border-radius: 4px; border-radius: 4px;
border-left: 5px solid #67C23A; border-left: 5px solid #67c23a;
margin: 20px 0; margin: 20px 0;
font-size: 13px; font-size: 13px;
margin-top: 30px; margin-top: 30px;
} }
</style> </style>

750
ruoyi-ui/src/views/flowable/task/todo/detail/approveLeaveDrawer.vue
View File

@ -9,59 +9,100 @@
size="80%" size="80%"
> >
<template slot="title"> <template slot="title">
<div>流程详情 【{{ title }}】 - 当前进度【{{ jdtitle }}】<span v-if="showjd"> - 当前节点【{{options.taskName}}】</span></div> <div>
流程详情 【{{ title }}】 - 当前进度【{{ jdtitle }}】<span v-if="showjd">
- 当前节点【{{ options.taskName }}】</span
>
</div>
</template> </template>
<div class="drawer"> <div class="drawer">
<div class="drawerLeft block containers"> <div class="drawerLeft block containers">
<div class="canvas" ref="flowCanvas"></div> <div class="canvas" ref="flowCanvas"></div>
<div class="maskLayer" /> <div class="maskLayer" />
<el-timeline> <el-timeline>
<el-timeline-item <el-timeline-item
v-for="(item,index ) in flowRecordList" v-for="(item, index) in flowRecordList"
:key="index" :key="index"
:icon="setIcon(item)" :icon="setIcon(item)"
:color="setColor(item)" :color="setColor(item)"
> >
<p style="font-weight: 700"> {{ getSort(index) }}{{item.taskName}}{{item.commentResult}}</p> <p style="font-weight: 700">
<el-card :body-style="{ padding: '6px' }"> {{ getSort(index) }}{{ item.taskName }}{{ item.commentResult }}
<el-descriptions class="margin-top" :column="1" size="small" border> </p>
<el-descriptions-item v-if="item.assigneeName" label-class-name="my-label" :labelStyle="labelStyle"> <el-card :body-style="{ padding: '6px' }">
<template slot="label"><i class="el-icon-user"></i>办理人</template> <el-descriptions class="margin-top" :column="1" size="small" border>
{{item.assigneeName}} <el-descriptions-item
<el-tag type="info" size="mini">{{item.deptName}}</el-tag> v-if="item.assigneeName"
</el-descriptions-item> label-class-name="my-label"
<el-descriptions-item v-if="item.candidate" label-class-name="my-label" :labelStyle="labelStyle"> :labelStyle="labelStyle"
<template slot="label"><i class="el-icon-user"></i>候选办理</template> >
{{item.candidate}} <template slot="label"><i class="el-icon-user"></i>办理人</template>
</el-descriptions-item> {{ item.assigneeName }}
<el-descriptions-item v-if="item.deleteReason" label-class-name="my-label" :labelStyle="labelStyle"> <el-tag type="info" size="mini">{{ item.deptName }}</el-tag>
<template slot="label"><i class="el-icon-user"></i>驳回节点</template> </el-descriptions-item>
{{getDeleteReason(item.deleteReason)}} <el-descriptions-item
</el-descriptions-item> v-if="item.candidate"
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle"> label-class-name="my-label"
<template slot="label"><i class="el-icon-date"></i>接收时间</template> :labelStyle="labelStyle"
{{item.startTime}} >
</el-descriptions-item> <template slot="label"><i class="el-icon-user"></i>候选办理</template>
<el-descriptions-item v-if="item.endTime" label-class-name="my-label" :labelStyle="labelStyle"> {{ item.candidate }}
<template slot="label"><i class="el-icon-date"></i>处理时间</template> </el-descriptions-item>
{{item.endTime}} <el-descriptions-item
</el-descriptions-item> v-if="item.deleteReason"
<el-descriptions-item v-if="item.duration" label-class-name="my-label" :labelStyle="labelStyle"> label-class-name="my-label"
<template slot="label"><i class="el-icon-time"></i>处理耗时</template> :labelStyle="labelStyle"
{{getDurationDate(item.duration)}} >
</el-descriptions-item> <template slot="label"><i class="el-icon-user"></i>驳回节点</template>
<el-descriptions-item v-if="item.message" label-class-name="my-label" :labelStyle="labelStyle"> {{ getDeleteReason(item.deleteReason) }}
<template slot="label"><i class="el-icon-tickets"></i>处理意见</template> </el-descriptions-item>
{{item.message}} <el-descriptions-item
</el-descriptions-item> label-class-name="my-label"
</el-descriptions> :labelStyle="labelStyle"
</el-card> >
</el-timeline-item> <template slot="label"><i class="el-icon-date"></i>接收时间</template>
</el-timeline> {{ item.startTime }}
</div> </el-descriptions-item>
<div class="drawerRight"> <el-descriptions-item
<el-card class="box-card"> v-if="item.endTime"
<el-descriptions class="margin-top" :title="title" :column="1" size="medium" border> 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"> <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
<template slot="label"> <template slot="label">
<i class="el-icon-map-location"></i> <i class="el-icon-map-location"></i>
@ -109,54 +150,97 @@
<i class="el-icon-tickets"></i> <i class="el-icon-tickets"></i>
请假时间 请假时间
</template> </template>
共 {{initData.day}} 天 共 {{ initData.day }} 天
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle"> <el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
<template slot="label"> <template slot="label">
<i class="el-icon-chat-dot-square"></i> <i class="el-icon-chat-dot-square"></i>
请假事由 请假事由
</template> </template>
{{initData.remark}} {{ initData.remark }}
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
</el-card> </el-card>
<el-form ref="form" :model="form" :rules="rules" label-width="100px" v-loading="loading" style="margin-top: 30px;"> <el-form
<el-form-item label="审批意见" prop="comment"> ref="form"
<el-input :model="form"
type="textarea" :rules="rules"
v-model="form.comment" label-width="100px"
placeholder="请输入审批意见（最多500字）" v-loading="loading"
rows="5" style="margin-top: 30px"
/>
</el-form-item>
<el-form-item label="退回节点" v-if="returnTask">
<el-select
v-model="form.targetKey"
placeholder="请选择退回节点"
style="width: 100%"
> >
<el-option <el-form-item label="审批意见" prop="comment">
v-for="(item, index) in returnTaskList" <el-input
:key="index" type="textarea"
:label="item.name" v-model="form.comment"
:value="item.id" placeholder="请输入审批意见（最多500字）"
> rows="5"
</el-option> />
</el-select> </el-form-item>
</el-form-item> <el-form-item label="退回节点" v-if="returnTask">
<div style="text-align: center"> <el-select
<el-button icon="el-icon-s-custom" v-if="false" type="primary" plain size="mini" @click="handleAssign">任务转办</el-button> v-model="form.targetKey"
<el-button icon="el-icon-check" type="success" size="mini" @click="handlePass">审批通过</el-button> placeholder="请选择退回节点"
<el-button icon="el-icon-back" v-if="returnTaskBtn" type="warning" size="mini" @click="handleBack">退回任务</el-button> style="width: 100%"
<el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回上级</el-button> >
<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-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>
</el-drawer> </el-drawer>
</div> </div>
@ -167,7 +251,10 @@ 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, returnTask, returnList } from "@/api/flowable/todo";
import {findCommentByProcInsId,findFormDatasByProcInsId} from "@/api/flowable/businessKey"; import {
findCommentByProcInsId,
findFormDatasByProcInsId,
} from "@/api/flowable/businessKey";
export default { export default {
components: {}, components: {},
props: { props: {
@ -183,7 +270,7 @@ export default {
loading: false, loading: false,
// 标题 // 标题
title: "", title: "",
jdtitle:"", jdtitle: "",
// 表单参数 // 表单参数
form: {}, form: {},
// 表单校验 // 表单校验
@ -197,20 +284,20 @@ export default {
}, },
], ],
}, },
queryParams:{ queryParams: {
nickName:null, nickName: null,
phonenumber: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: [], // 回退列表数据 returnTaskList: [], // 回退列表数据
returnTask:false, returnTask: false,
returnTaskBtn:false returnTaskBtn: false,
}; };
}, },
computed: {}, computed: {},
@ -223,21 +310,23 @@ export default {
handlePass() { handlePass() {
this.$refs["form"].validate((valid) => { this.$refs["form"].validate((valid) => {
if (valid) { if (valid) {
this.$confirm('是否确认审批通过当前流程申请?', '提示', { this.$confirm("是否确认审批通过当前流程申请?", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}).then(() => { })
this.loading=true; .then(() => {
complete(this.form).then(res => { this.loading = true;
this.$modal.msgSuccess("任务审批成功"); complete(this.form).then((res) => {
this.loading = false; this.$modal.msgSuccess("任务审批成功");
//关闭并刷新列表 this.loading = false;
this.$refs.drawer.closeDrawer(); //关闭并刷新列表
this.$refs.drawer.closeDrawer();
});
})
.catch(() => {
console.log("取消操作");
}); });
}).catch(() => {
console.log("取消操作");
});
} }
}); });
}, },
@ -245,65 +334,69 @@ export default {
handleReject() { handleReject() {
this.$refs["form"].validate((valid) => { this.$refs["form"].validate((valid) => {
if (valid) { if (valid) {
this.$confirm('是否确认审批驳回当前流程申请?', '提示', { this.$confirm("是否确认审批驳回当前流程申请?", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}).then(() => { })
this.loading=true; .then(() => {
rejectTask(this.form).then(res => { this.loading = true;
this.$modal.msgSuccess("任务驳回成功"); rejectTask(this.form).then((res) => {
this.loading = false; this.$modal.msgSuccess("任务驳回成功");
//关闭并刷新列表 this.loading = false;
this.$refs.drawer.closeDrawer(); //关闭并刷新列表
this.$refs.drawer.closeDrawer();
});
})
.catch(() => {
console.log("取消操作");
}); });
}).catch(() => {
console.log("取消操作");
});
} }
}); });
}, },
/** 退回任务 */ /** 退回任务 */
handleBack(){ handleBack() {
if(!this.returnTask){ if (!this.returnTask) {
this.returnTask=true; this.returnTask = true;
this.$modal.msgWarning("请选择退回节点"); this.$modal.msgWarning("请选择退回节点");
return; return;
} }
this.$refs["form"].validate((valid) => { this.$refs["form"].validate((valid) => {
if (valid) { if (valid) {
if(!this.form.targetKey){ if (!this.form.targetKey) {
this.$modal.msgWarning("请选择退回节点"); this.$modal.msgWarning("请选择退回节点");
return; return;
} }
this.$confirm('是否确认退回当前流程申请?', '提示', { this.$confirm("是否确认退回当前流程申请?", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}).then(() => { })
this.loading=true; .then(() => {
returnTask(this.form).then(res => { this.loading = true;
this.$modal.msgSuccess("任务退回成功"); returnTask(this.form).then((res) => {
this.loading = false; this.$modal.msgSuccess("任务退回成功");
//关闭并刷新列表 this.loading = false;
this.$refs.drawer.closeDrawer(); //关闭并刷新列表
this.$refs.drawer.closeDrawer();
});
})
.catch(() => {
console.log("取消操作");
}); });
}).catch(() => {
console.log("取消操作");
});
} }
}); });
}, },
initReturnList(){ initReturnList() {
returnList(this.form).then(res => { returnList(this.form).then((res) => {
this.returnTaskList = res.data; this.returnTaskList = res.data;
//退回节点>1时，可显示退回按钮 //退回节点>1时，可显示退回按钮
if(res.data.length>1){ if (res.data.length > 1) {
this.returnTaskBtn=true; this.returnTaskBtn = true;
} }
}) });
}, },
initFormDate(){ initFormDate() {
this.form.taskId = this.options.taskId; this.form.taskId = this.options.taskId;
this.form.taskName = this.options.taskName; this.form.taskName = this.options.taskName;
this.form.userId = store.getters.userId; this.form.userId = store.getters.userId;
@ -311,16 +404,15 @@ export default {
this.form.procInsId = this.options.procInsId; this.form.procInsId = this.options.procInsId;
this.form.instanceId = this.options.procInsId; this.form.instanceId = this.options.procInsId;
this.form.executionId = this.options.procInsId; this.form.executionId = this.options.procInsId;
this.returnTask=false; this.returnTask = false;
this.returnTaskBtn=false; this.returnTaskBtn = false;
this.initReturnList(); this.initReturnList();
}, },
setIcon(row) { setIcon(row) {
if (row.endTime) { if (row.endTime) {
if(row.commentResult=="驳回") if (row.commentResult == "驳回") {
{
return "el-icon-close"; return "el-icon-close";
}else{ } else {
return "el-icon-check"; return "el-icon-check";
} }
} else { } else {
@ -329,10 +421,9 @@ export default {
}, },
setColor(row) { setColor(row) {
if (row.endTime) { if (row.endTime) {
if(row.commentResult=="驳回") if (row.commentResult == "驳回") {
{
return "#f56c6c"; return "#f56c6c";
}else{ } else {
return "#2bc418"; return "#2bc418";
} }
} else { } else {
@ -358,19 +449,21 @@ export default {
this.showjd = false; this.showjd = false;
this.form = {}; this.form = {};
this.initFormDate(); this.initFormDate();
if(options.finishTime==null){ if (options.finishTime == null) {
this.jdtitle="进行中"; this.jdtitle = "进行中";
this.showjd=true; this.showjd = true;
}else if(options.finishTime!=null && options.assigneeId==null){ } else if (options.finishTime != null && options.assigneeId == null) {
this.jdtitle="已撤销"; this.jdtitle = "已撤销";
}else{ } else {
this.jdtitle="已完成"; this.jdtitle = "已完成";
} }
this.getFlowRecordList(options.procInsId, options.deployId); this.getFlowRecordList(options.procInsId, options.deployId);
this.getFormDatasList(options.procInsId, options.deployId); this.getFormDatasList(options.procInsId, options.deployId);
flowXmlAndNode({ procInsId:options.procInsId, deployId: options.deployId }).then((res) => { flowXmlAndNode({ procInsId: options.procInsId, deployId: options.deployId }).then(
this.initFlowImage(res.data); (res) => {
}); this.initFlowImage(res.data);
}
);
}, },
async initFlowImage(data) { async initFlowImage(data) {
const self = this; const self = this;
@ -382,8 +475,8 @@ export default {
await self.bpmnViewer.importXML(data.xmlData); await self.bpmnViewer.importXML(data.xmlData);
// 自适应 // 自适应
self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto"); self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
if (data.nodeData !==undefined && data.nodeData.length > 0 ) { if (data.nodeData !== undefined && data.nodeData.length > 0) {
self.fillColor(data.nodeData) self.fillColor(data.nodeData);
} }
} catch (err) { } catch (err) {
console.error(err.message, err.warnings); console.error(err.message, err.warnings);
@ -398,13 +491,15 @@ export default {
// }).catch(res => { // }).catch(res => {
// this.$message.error("数据异常，请联系管理员..."); // this.$message.error("数据异常，请联系管理员...");
// }) // })
const that = this const that = this;
const params = {procInsId: procInsId} const params = { procInsId: procInsId };
findCommentByProcInsId(params).then(res => { findCommentByProcInsId(params)
that.flowRecordList = res.data; .then((res) => {
}).catch(res => { that.flowRecordList = res.data;
this.$message.error("数据异常，请联系管理员..."); })
}) .catch((res) => {
this.$message.error("数据异常，请联系管理员...");
});
}, },
/** 流程表单数据 */ /** 流程表单数据 */
getFormDatasList(procInsId, deployId) { getFormDatasList(procInsId, deployId) {
@ -415,130 +510,164 @@ export default {
// }).catch(res => { // }).catch(res => {
// this.$message.error("数据异常，请联系管理员..."); // this.$message.error("数据异常，请联系管理员...");
// }) // })
const that = this const that = this;
const params = {procInsId: procInsId} const params = { procInsId: procInsId };
findFormDatasByProcInsId(params).then(res => { findFormDatasByProcInsId(params)
this.initData = res.data; .then((res) => {
}).catch(res => { this.initData = res.data;
this.$message.error("数据异常，请联系管理员..."); })
}) .catch((res) => {
this.$message.error("数据异常，请联系管理员...");
});
}, },
// 设置高亮颜色的 // 设置高亮颜色的
fillColor(nodeData) { fillColor(nodeData) {
const canvas = this.bpmnViewer.get('canvas') const canvas = this.bpmnViewer.get("canvas");
this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => { this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach((n) => {
const completeTask = nodeData.find(m => m.key === n.id) const completeTask = nodeData.find((m) => m.key === n.id);
const todoTask = nodeData.find(m => !m.completed) const todoTask = nodeData.find((m) => !m.completed);
const endTask = nodeData[nodeData.length - 1] const endTask = nodeData[nodeData.length - 1];
if (n.$type === 'bpmn:UserTask') { if (n.$type === "bpmn:UserTask") {
if (completeTask) { if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') canvas.addMarker(
n.outgoing?.forEach(nn => { n.id,
const targetTask = nodeData.find(m => m.key === nn.targetRef.id) completeTask.completed ? "highlight" : "highlight-todo"
);
n.outgoing?.forEach((nn) => {
const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
if (targetTask) { if (targetTask) {
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){ if (
canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo') todoTask &&
canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo') completeTask.key === todoTask.key &&
}else { !todoTask.completed
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo') ) {
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo') 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') { else if (n.$type === "bpmn:ExclusiveGateway") {
if (completeTask) { if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') canvas.addMarker(
n.outgoing?.forEach(nn => { n.id,
const targetTask = nodeData.find(m => m.key === nn.targetRef.id) completeTask.completed ? "highlight" : "highlight-todo"
);
n.outgoing?.forEach((nn) => {
const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
if (targetTask) { if (targetTask) {
canvas.addMarker(
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo') nn.id,
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo') targetTask.completed ? "highlight" : "highlight-todo"
);
canvas.addMarker(
nn.targetRef.id,
targetTask.completed ? "highlight" : "highlight-todo"
);
} }
});
})
} }
} }
// 并行网关 // 并行网关
else if (n.$type === 'bpmn:ParallelGateway') { else if (n.$type === "bpmn:ParallelGateway") {
if (completeTask) { if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') canvas.addMarker(
n.outgoing?.forEach(nn => { n.id,
const targetTask = nodeData.find(m => m.key === nn.targetRef.id) completeTask.completed ? "highlight" : "highlight-todo"
);
n.outgoing?.forEach((nn) => {
const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
if (targetTask) { if (targetTask) {
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo') canvas.addMarker(
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo') nn.id,
targetTask.completed ? "highlight" : "highlight-todo"
);
canvas.addMarker(
nn.targetRef.id,
targetTask.completed ? "highlight" : "highlight-todo"
);
} }
}) });
} }
} } else if (n.$type === "bpmn:StartEvent") {
else if (n.$type === 'bpmn:StartEvent') { n.outgoing.forEach((nn) => {
n.outgoing.forEach(nn => { const completeTask = nodeData.find((m) => m.key === nn.targetRef.id);
const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
if (completeTask) { if (completeTask) {
canvas.addMarker(nn.id, 'highlight') canvas.addMarker(nn.id, "highlight");
canvas.addMarker(n.id, 'highlight') canvas.addMarker(n.id, "highlight");
return return;
} }
}) });
} } else if (n.$type === "bpmn:EndEvent") {
else if (n.$type === 'bpmn:EndEvent') {
if (endTask.key === n.id && endTask.completed) { if (endTask.key === n.id && endTask.completed) {
canvas.addMarker(n.id, 'highlight') canvas.addMarker(n.id, "highlight");
return return;
} }
} }
}) });
}, },
getDurationDate(val){ getDurationDate(val) {
// 计算出相差天数 // 计算出相差天数
let days = Math.floor(val / (24 * 3600 * 1000)) let days = Math.floor(val / (24 * 3600 * 1000));
// 计算出小时数 // 计算出小时数
let leave1 = val % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数 let leave1 = val % (24 * 3600 * 1000); // 计算天数后剩余的毫秒数
let hours = Math.floor(leave1 / (3600 * 1000)) let hours = Math.floor(leave1 / (3600 * 1000));
// 计算相差分钟数 // 计算相差分钟数
let leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数 let leave2 = leave1 % (3600 * 1000); // 计算小时数后剩余的毫秒数
let minutes = Math.floor(leave2 / (60 * 1000)) let minutes = Math.floor(leave2 / (60 * 1000));
// 计算相差秒数 // 计算相差秒数
let leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数 let leave3 = leave2 % (60 * 1000); // 计算分钟数后剩余的毫秒数
let seconds = Math.round(leave3 / 1000) let seconds = Math.round(leave3 / 1000);
if(days>0){ if (days > 0) {
if(days<10) days = "0"+days; if (days < 10) days = "0" + days;
if(hours<10) hours = "0"+hours; if (hours < 10) hours = "0" + hours;
if(minutes<10) minutes = "0"+minutes; if (minutes < 10) minutes = "0" + minutes;
if(seconds<10) seconds = "0"+seconds; if (seconds < 10) seconds = "0" + seconds;
return days + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒'; return days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
} }
if(hours>0){ if (hours > 0) {
if(hours<10) hours = "0"+hours; if (hours < 10) hours = "0" + hours;
if(minutes<10) minutes = "0"+minutes; if (minutes < 10) minutes = "0" + minutes;
if(seconds<10) seconds = "0"+seconds; if (seconds < 10) seconds = "0" + seconds;
return hours + '小时' + minutes + '分钟' + seconds + '秒'; return hours + "小时" + minutes + "分钟" + seconds + "秒";
} }
if(minutes>0){ if (minutes > 0) {
if(minutes<10) minutes = "0"+minutes; if (minutes < 10) minutes = "0" + minutes;
if(seconds<10) seconds = "0"+seconds; if (seconds < 10) seconds = "0" + seconds;
return minutes + '分钟' + seconds + '秒'; return minutes + "分钟" + seconds + "秒";
} }
if(seconds>0){ if (seconds > 0) {
if(seconds<10) seconds = "0"+seconds; if (seconds < 10) seconds = "0" + seconds;
return seconds + '秒'; return seconds + "秒";
} }
}, },
handledownload(url){ handledownload(url) {
this.$download.resource(url); this.$download.resource(url);
}, },
getDeleteReason(val){ getDeleteReason(val) {
val = val.replace("Change activity to ",""); val = val.replace("Change activity to ", "");
let flowRecordList = this.flowRecordList; let flowRecordList = this.flowRecordList;
for(let i=0;i<flowRecordList.length;i++){ for (let i = 0; i < flowRecordList.length; i++) {
if(flowRecordList[i].taskDefKey==val){ if (flowRecordList[i].taskDefKey == val) {
console.log(i); console.log(i);
return "驳回至"+flowRecordList[i].taskName; return "驳回至" + flowRecordList[i].taskName;
} }
} }
}, },
@ -546,44 +675,43 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.app-approveDrawer{ .app-approveDrawer {
.drawer { .drawer {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
padding-bottom: 20px; padding-bottom: 20px;
.drawerLeft { .drawerLeft {
width: 60%; width: 60%;
min-width: 280px; min-width: 280px;
height: 100%; height: 100%;
float: left; float: left;
border-right: 1px solid #dcdfe6; border-right: 1px solid #dcdfe6;
overflow-y: scroll; overflow-y: scroll;
padding-right: 20px; padding-right: 20px;
.bjs-powered-by { .bjs-powered-by {
display: none !important; display: none !important;
}
} .maskLayer {
.maskLayer { width: 100%;
width: 100%; height: 90px;
height: 90px; position: absolute;
position: absolute; z-index: 9999;
z-index: 9999; top: 77px;
top: 77px; }
} }
} .drawerRight {
.drawerRight { width: 40%;
width: 40%; min-width: 400px;
min-width: 400px; height: 100%;
height: 100%; float: left;
float: left; padding-left: 20px;
padding-left: 20px; }
} }
} .containers {
.containers { width: 100%;
width: 100%; height: 150px;
height: 150px;
.canvas { .canvas {
width: 100%; width: 100%;
height: 100px; height: 100px;
@ -597,12 +725,12 @@ export default {
.load { .load {
margin-right: 10px; margin-right: 10px;
} }
.el-form-item__label{ .el-form-item__label {
font-size: 13px; font-size: 13px;
} }
.djs-palette{ .djs-palette {
left: 0px!important; left: 0px !important;
top: 0px; top: 0px;
border-top: none; border-top: none;
} }
@ -647,12 +775,12 @@ export default {
} }
} }
.page-warning { .page-warning {
padding: 8px 16px; padding: 8px 16px;
background-color: #f0f9eb; background-color: #f0f9eb;
border-radius: 4px; border-radius: 4px;
border-left: 5px solid #67C23A; border-left: 5px solid #67c23a;
margin: 20px 0; margin: 20px 0;
font-size: 13px; font-size: 13px;
margin-top: 30px; margin-top: 30px;
} }
</style> </style>

15
ruoyi-ui/src/views/project/surProjectSpecial/index.vue
View File

@ -128,7 +128,8 @@
<el-table <el-table
v-loading="loading" v-loading="loading"
:data="surProjectSpecialList" :data="surProjectSpecialList"
@selection-change="handleSelectionChange" stripe @selection-change="handleSelectionChange"
stripe
> >
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<el-table-column <el-table-column
@ -259,7 +260,14 @@
/> />
</el-tabs> </el-tabs>
<!-- 添加或修改项目特种人员对话框 --> <!-- 添加或修改项目特种人员对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false"> <el-dialog
:title="title"
:visible.sync="open"
width="500px"
append-to-body
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="项目名称" prop="projectName"> <el-form-item label="项目名称" prop="projectName">
<el-input v-model="form.projectName" placeholder="请输入项目名称" disabled /> <el-input v-model="form.projectName" placeholder="请输入项目名称" disabled />
@ -622,7 +630,8 @@ export default {
}, },
/** 下载证书 */ /** 下载证书 */
handledownload(row) { handledownload(row) {
this.$download.resource(row.credentialFile); window.open(process.env.VUE_APP_BASE_API + row.credentialFile);
//this.$download.resource(row.credentialFile);
}, },
}, },
}; };

3
ruoyi-ui/src/views/project/surProjectSpecial/surProjectSpecialDrawer.vue
View File

@ -585,7 +585,8 @@ export default {
}, },
/** 下载证书 */ /** 下载证书 */
handledownload(row) { handledownload(row) {
this.$download.resource(row.credentialFile); window.open(process.env.VUE_APP_BASE_API+row.credentialFile);
//this.$download.resource(row.credentialFile);
}, },
}, },
}; };

9
ruoyi-wechat/src/main/java/com/ruoyi/web/userLogin/service/impl/WechatUserLoginServiceImpl.java
View File

@ -4,6 +4,7 @@ import cn.hutool.http.HttpUtil;
import com.alibaba.fastjson.JSONObject; import com.alibaba.fastjson.JSONObject;
import com.ruoyi.common.core.domain.entity.SysDept; import com.ruoyi.common.core.domain.entity.SysDept;
import com.ruoyi.common.core.domain.entity.SysUser; import com.ruoyi.common.core.domain.entity.SysUser;
import com.ruoyi.common.core.redis.RedisCache;
import com.ruoyi.common.core.text.Convert; import com.ruoyi.common.core.text.Convert;
import com.ruoyi.common.enums.DeptTypeEnum; import com.ruoyi.common.enums.DeptTypeEnum;
import com.ruoyi.common.enums.SysRoleEnum; import com.ruoyi.common.enums.SysRoleEnum;
@ -25,6 +26,7 @@ import java.util.ArrayList;
import java.util.HashMap; import java.util.HashMap;
import java.util.List; import java.util.List;
import java.util.Map; import java.util.Map;
import java.util.concurrent.TimeUnit;
/** /**
* @version : V1.0 * @version : V1.0
@ -45,6 +47,9 @@ public class WechatUserLoginServiceImpl implements IWechatUserLoginService {
appInfo.put("wx9997d071b4996f23","5bcc9ca17b31133d93a025871fc5021d"); appInfo.put("wx9997d071b4996f23","5bcc9ca17b31133d93a025871fc5021d");
} }
@Autowired
private RedisCache redisCache;
@Autowired @Autowired
private ISysUserService userService; private ISysUserService userService;
@ -125,6 +130,7 @@ public class WechatUserLoginServiceImpl implements IWechatUserLoginService {
map.put("userId", Convert.toStr(userData.get("user_id"))); map.put("userId", Convert.toStr(userData.get("user_id")));
map.put("nickname",userData.get("nick_name")); map.put("nickname",userData.get("nick_name"));
map.put("openId",openId); map.put("openId",openId);
map.put("unionid",redisCache.getCacheObject("openid-unionid"+openId));
//验证手机号码是否绑定 //验证手机号码是否绑定
int count = wechatUserLoginMapper.checkBindByOpenId(openId); int count = wechatUserLoginMapper.checkBindByOpenId(openId);
if(count > 0){ if(count > 0){
@ -176,7 +182,10 @@ public class WechatUserLoginServiceImpl implements IWechatUserLoginService {
String resultStr = HttpUtil.get(url); String resultStr = HttpUtil.get(url);
JSONObject json = JSONObject.parseObject(resultStr); JSONObject json = JSONObject.parseObject(resultStr);
//删除参数session_key，否则小程序检测关键参数暴露，提示整改 //删除参数session_key，否则小程序检测关键参数暴露，提示整改
String key = "openid-unionid"+json.get("openid");
redisCache.setCacheObject(key,json.get("unionid"),24, TimeUnit.HOURS);
json.remove("session_key"); json.remove("session_key");
return json; return json;
} }

6
ruoyi-wechat/src/main/resources/application.yml
View File

@ -15,12 +15,16 @@ user:
# Spring配置 # Spring配置
spring: spring:
# 微信资源验证访问
web:
resources:
static-locations: classpath:/wxstatic/
# 资源信息 # 资源信息
messages: messages:
# 国际化资源文件路径 # 国际化资源文件路径
basename: i18n/messages basename: i18n/messages
profiles: profiles:
active: druid active: prod
# 文件上传 # 文件上传
servlet: servlet:
multipart: multipart:

4
ruoyi-wechat/src/main/resources/mapper/WechatUserLoginMapper.xml
View File

@ -35,6 +35,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
<if test="userId != null and userId != ''">userId,</if> <if test="userId != null and userId != ''">userId,</if>
<if test="loginName != null and loginName != ''">loginName,</if> <if test="loginName != null and loginName != ''">loginName,</if>
<if test="nickname != null and nickname != ''">nickname,</if> <if test="nickname != null and nickname != ''">nickname,</if>
<if test="unionid != null and unionid != ''">unionid,</if>
creatTime creatTime
) values ) values
( (
@ -42,13 +43,14 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
<if test="userId != null and userId != ''">#{userId},</if> <if test="userId != null and userId != ''">#{userId},</if>
<if test="loginName != null and loginName != ''">#{loginName},</if> <if test="loginName != null and loginName != ''">#{loginName},</if>
<if test="nickname != null and nickname != ''">#{nickname},</if> <if test="nickname != null and nickname != ''">#{nickname},</if>
<if test="unionid != null and unionid != ''">#{unionid},</if>
now() now()
) )
</insert> </insert>
<!--更新用户openid--> <!--更新用户openid-->
<update id="updateUserOpenId" parameterType="String"> <update id="updateUserOpenId" parameterType="String">
update sys_user_openid set userId=#{userId},loginName=#{loginName},nickname=#{nickname} where openId =#{openId} and isDel = 0 update sys_user_openid set userId=#{userId},loginName=#{loginName},nickname=#{nickname},unionid=#{unionid} where openId =#{openId} and isDel = 0
</update> </update>
<!--根据电话查询用户id--> <!--根据电话查询用户id-->

1
ruoyi-wechat/src/main/resources/wxstatic/oQUTTivnSQ.txt 100644
View File

@ -0,0 +1 @@
29aef62cd1316f1635063c5b86a3ffee