587 lines
19 KiB
Vue
587 lines
19 KiB
Vue
<template>
|
|
<div class="app-detailDrawer">
|
|
<el-drawer
|
|
v-if="onOpen"
|
|
:visible.sync="onOpen"
|
|
ref="drawer"
|
|
direction="rtl"
|
|
size="80%"
|
|
>
|
|
<template slot="title">
|
|
<div>
|
|
流程详情 【{{ title }}】 - 当前进度【{{ jdtitle }}】<span v-if="showjd">
|
|
- 当前节点【{{ options.taskName }}】</span
|
|
>
|
|
</div>
|
|
</template>
|
|
<div class="drawer">
|
|
<div class="drawerLeft">
|
|
<div class="block containers">
|
|
<div class="canvas" ref="flowCanvas"></div>
|
|
<div class="maskLayer" />
|
|
</div>
|
|
<el-timeline>
|
|
<el-timeline-item
|
|
v-for="(item, index) in flowRecordList"
|
|
:key="index"
|
|
:icon="setIcon(item)"
|
|
:color="setColor(item)"
|
|
>
|
|
<p style="font-weight: 700">
|
|
{{ getSort(index) }}{{ item.taskName }}{{ item.commentResult }}
|
|
</p>
|
|
<el-card :body-style="{ padding: '6px' }">
|
|
<el-descriptions class="margin-top" :column="1" size="small" border>
|
|
<el-descriptions-item
|
|
v-if="item.assigneeName"
|
|
label-class-name="my-label"
|
|
:labelStyle="labelStyle"
|
|
>
|
|
<template slot="label"><i class="el-icon-user"></i>办理人</template>
|
|
{{ item.assigneeName }}
|
|
<el-tag type="info" size="mini">{{ item.deptName }}</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item
|
|
v-if="item.candidate"
|
|
label-class-name="my-label"
|
|
:labelStyle="labelStyle"
|
|
>
|
|
<template slot="label"><i class="el-icon-user"></i>候选办理</template>
|
|
{{ item.candidate }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item
|
|
v-if="item.deleteReason"
|
|
label-class-name="my-label"
|
|
:labelStyle="labelStyle"
|
|
>
|
|
<template slot="label"><i class="el-icon-user"></i>驳回节点</template>
|
|
{{ getDeleteReason(item.deleteReason) }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item
|
|
label-class-name="my-label"
|
|
:labelStyle="labelStyle"
|
|
>
|
|
<template slot="label"><i class="el-icon-date"></i>接收时间</template>
|
|
{{ item.startTime }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item
|
|
v-if="item.endTime"
|
|
label-class-name="my-label"
|
|
:labelStyle="labelStyle"
|
|
>
|
|
<template slot="label"><i class="el-icon-date"></i>处理时间</template>
|
|
{{ item.endTime }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item
|
|
v-if="item.duration"
|
|
label-class-name="my-label"
|
|
:labelStyle="labelStyle"
|
|
>
|
|
<template slot="label"><i class="el-icon-time"></i>处理耗时</template>
|
|
{{ getDurationDate(item.duration) }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item
|
|
v-if="item.message"
|
|
label-class-name="my-label"
|
|
:labelStyle="labelStyle"
|
|
>
|
|
<template slot="label"
|
|
><i class="el-icon-tickets"></i>处理意见</template
|
|
>
|
|
{{ item.message }}
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-card>
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
</div>
|
|
<div class="drawerRight">
|
|
<el-form label-width="100px">
|
|
<el-form-item label="所属项目">
|
|
{{ initData.projectName }}
|
|
</el-form-item>
|
|
<el-form-item label="发起单位">
|
|
{{ options.startDeptName }}
|
|
</el-form-item>
|
|
<el-form-item label="发起人">
|
|
{{ options.startUserName }}
|
|
</el-form-item>
|
|
<el-form-item label="审批事项">
|
|
{{ title }}
|
|
</el-form-item>
|
|
<el-form-item v-if="initData.subDeptType" label="分包类型">
|
|
<dict-tag
|
|
:options="dict.type.flow_sub_dept_type"
|
|
:value="initData.subDeptType"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item v-if="initData.subDeptScope" label="分包范围">
|
|
<dict-tag
|
|
v-for="scope in initData.subDeptScope.split(',')"
|
|
:options="dict.type.flow_sub_dept_scope"
|
|
:value="scope"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item v-if="initData.subDeptName" label="分包名称">
|
|
{{ initData.subDeptName }}
|
|
</el-form-item>
|
|
<el-form-item v-if="initData.subDeptAptitude" label="分包资质">
|
|
{{ initData.subDeptAptitude }}
|
|
</el-form-item>
|
|
<el-form-item v-if="initData.subDeptChairman" label="法人代表">
|
|
{{ initData.subDeptChairman }}
|
|
</el-form-item>
|
|
<el-form-item v-if="initData.subDeptSafetyCertificate" label="安全证书">
|
|
{{ initData.subDeptSafetyCertificate }}
|
|
</el-form-item>
|
|
<el-form-item v-if="initData.subDeptCustodian" label="项目负责人">
|
|
{{ initData.subDeptCustodian }}
|
|
</el-form-item>
|
|
<el-form-item v-if="initData.subDeptCustodianCardId" label="负责人身份证">
|
|
{{ initData.subDeptCustodianCardId }}
|
|
</el-form-item>
|
|
<el-form-item v-if="initData.subDeptApproachDate" label="进场时间">
|
|
{{ initData.subDeptApproachDate }}
|
|
</el-form-item>
|
|
<el-form-item label="审批内容">
|
|
<div class="el-link_div" v-for="(file, index) in initData.files" :key="index">
|
|
<el-link
|
|
type="primary"
|
|
icon="el-icon-paperclip"
|
|
@click="handledownload(file)"
|
|
>{{ file.substring(file.lastIndexOf("/") + 1) }}</el-link
|
|
>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item v-if="initData.remark" label="申请说明">
|
|
{{ initData.remark }}
|
|
</el-form-item>
|
|
<div style="text-align: center">
|
|
<el-button type="danger" @click="doCanel">关 闭</el-button>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { flowXmlAndNode } from "@/api/flowable/definition";
|
|
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
|
import {
|
|
findCommentByProcInsId,
|
|
findFormDatasByProcInsId,
|
|
} from "@/api/flowable/businessKey";
|
|
export default {
|
|
components: {},
|
|
props: {},
|
|
dicts: ["flow_sub_dept_type", "flow_sub_dept_scope"],
|
|
data() {
|
|
return {
|
|
// 抽屉层
|
|
onOpen: false,
|
|
// 遮罩层
|
|
loading: false,
|
|
// 标题
|
|
title: "",
|
|
jdtitle: "",
|
|
// 表单参数
|
|
form: {},
|
|
// 表单校验
|
|
rules: {},
|
|
bpmnViewer: null,
|
|
options: {},
|
|
flowRecordList: [],
|
|
showjd: false,
|
|
//label样式
|
|
labelStyle: { width: "180px" },
|
|
initData: {},
|
|
fileTypes: ["pdf", "png", "jpg", "jpeg"],
|
|
};
|
|
},
|
|
computed: {},
|
|
watch: {},
|
|
created() {},
|
|
mounted() {},
|
|
beforeDestroy() {},
|
|
methods: {
|
|
setIcon(row) {
|
|
if (row.endTime) {
|
|
if (row.commentResult == "驳回") {
|
|
return "el-icon-close";
|
|
} else {
|
|
return "el-icon-check";
|
|
}
|
|
} else {
|
|
return "el-icon-time";
|
|
}
|
|
},
|
|
setColor(row) {
|
|
if (row.endTime) {
|
|
if (row.commentResult == "驳回") {
|
|
return "#f56c6c";
|
|
} else {
|
|
return "#2bc418";
|
|
}
|
|
} else {
|
|
return "#b3bdbb";
|
|
}
|
|
},
|
|
getSort(i) {
|
|
let num = this.flowRecordList.length - i;
|
|
if (num < 10) {
|
|
num = "0" + num;
|
|
}
|
|
return num + ". ";
|
|
},
|
|
doCanel() {
|
|
this.onOpen = false;
|
|
},
|
|
show(options) {
|
|
this.options = options;
|
|
this.title = options.procDefName;
|
|
this.deptName = options.startDeptName;
|
|
this.nickName = options.startUserName;
|
|
this.onOpen = true;
|
|
this.showjd = false;
|
|
|
|
if (options.finishTime == null) {
|
|
this.jdtitle = "进行中";
|
|
this.showjd = true;
|
|
} else if (options.finishTime != null && options.assigneeId == null) {
|
|
this.jdtitle = "已终止";
|
|
} else {
|
|
this.jdtitle = "已完成";
|
|
}
|
|
this.getFlowRecordList(options.procInsId, options.deployId);
|
|
this.getFormDatasList(options.procInsId, options.deployId);
|
|
flowXmlAndNode({ procInsId: options.procInsId, deployId: options.deployId }).then(
|
|
(res) => {
|
|
this.initFlowImage(res.data);
|
|
}
|
|
);
|
|
},
|
|
async initFlowImage(data) {
|
|
const self = this;
|
|
try {
|
|
self.bpmnViewer = new BpmnViewer({
|
|
container: this.$refs.flowCanvas,
|
|
height: "90px",
|
|
});
|
|
await self.bpmnViewer.importXML(data.xmlData);
|
|
// 自适应
|
|
self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
|
|
if (data.nodeData !== undefined && data.nodeData.length > 0) {
|
|
self.fillColor(data.nodeData);
|
|
}
|
|
} catch (err) {
|
|
console.error(err.message, err.warnings);
|
|
}
|
|
},
|
|
/** 流程流转记录 */
|
|
getFlowRecordList(procInsId, deployId) {
|
|
// const that = this
|
|
// const params = {procInsId: procInsId, deployId: deployId}
|
|
// flowRecord(params).then(res => {
|
|
// that.flowRecordList = res.data.flowList;
|
|
// }).catch(res => {
|
|
// this.$message.error("数据异常，请联系管理员...");
|
|
// })
|
|
const that = this;
|
|
const params = { procInsId: procInsId };
|
|
findCommentByProcInsId(params)
|
|
.then((res) => {
|
|
that.flowRecordList = res.data;
|
|
})
|
|
.catch((res) => {
|
|
this.$message.error("数据异常，请联系管理员...");
|
|
});
|
|
},
|
|
/** 流程表单数据 */
|
|
getFormDatasList(procInsId, deployId) {
|
|
// const that = this
|
|
// const params = {procInsId: procInsId, deployId: deployId}
|
|
// flowRecord(params).then(res => {
|
|
// that.flowRecordList = res.data.flowList;
|
|
// }).catch(res => {
|
|
// this.$message.error("数据异常，请联系管理员...");
|
|
// })
|
|
const that = this;
|
|
const params = { procInsId: procInsId };
|
|
findFormDatasByProcInsId(params)
|
|
.then((res) => {
|
|
this.initData = res.data;
|
|
this.initData.files = res.data.files.split(",");
|
|
})
|
|
.catch((res) => {
|
|
this.$message.error("数据异常，请联系管理员...");
|
|
});
|
|
},
|
|
// 设置高亮颜色的
|
|
fillColor(nodeData) {
|
|
const canvas = this.bpmnViewer.get("canvas");
|
|
this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach((n) => {
|
|
const completeTask = nodeData.find((m) => m.key === n.id);
|
|
const todoTask = nodeData.find((m) => !m.completed);
|
|
const endTask = nodeData[nodeData.length - 1];
|
|
if (n.$type === "bpmn:UserTask") {
|
|
if (completeTask) {
|
|
canvas.addMarker(
|
|
n.id,
|
|
completeTask.completed ? "highlight" : "highlight-todo"
|
|
);
|
|
n.outgoing?.forEach((nn) => {
|
|
const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
|
|
if (targetTask) {
|
|
if (
|
|
todoTask &&
|
|
completeTask.key === todoTask.key &&
|
|
!todoTask.completed
|
|
) {
|
|
canvas.addMarker(
|
|
nn.id,
|
|
todoTask.completed ? "highlight" : "highlight-todo"
|
|
);
|
|
canvas.addMarker(
|
|
nn.targetRef.id,
|
|
todoTask.completed ? "highlight" : "highlight-todo"
|
|
);
|
|
} else {
|
|
canvas.addMarker(
|
|
nn.id,
|
|
targetTask.completed ? "highlight" : "highlight-todo"
|
|
);
|
|
canvas.addMarker(
|
|
nn.targetRef.id,
|
|
targetTask.completed ? "highlight" : "highlight-todo"
|
|
);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
// 排他网关
|
|
else if (n.$type === "bpmn:ExclusiveGateway") {
|
|
if (completeTask) {
|
|
canvas.addMarker(
|
|
n.id,
|
|
completeTask.completed ? "highlight" : "highlight-todo"
|
|
);
|
|
n.outgoing?.forEach((nn) => {
|
|
const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
|
|
if (targetTask) {
|
|
canvas.addMarker(
|
|
nn.id,
|
|
targetTask.completed ? "highlight" : "highlight-todo"
|
|
);
|
|
canvas.addMarker(
|
|
nn.targetRef.id,
|
|
targetTask.completed ? "highlight" : "highlight-todo"
|
|
);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
// 并行网关
|
|
else if (n.$type === "bpmn:ParallelGateway") {
|
|
if (completeTask) {
|
|
canvas.addMarker(
|
|
n.id,
|
|
completeTask.completed ? "highlight" : "highlight-todo"
|
|
);
|
|
n.outgoing?.forEach((nn) => {
|
|
const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
|
|
if (targetTask) {
|
|
canvas.addMarker(
|
|
nn.id,
|
|
targetTask.completed ? "highlight" : "highlight-todo"
|
|
);
|
|
canvas.addMarker(
|
|
nn.targetRef.id,
|
|
targetTask.completed ? "highlight" : "highlight-todo"
|
|
);
|
|
}
|
|
});
|
|
}
|
|
} else if (n.$type === "bpmn:StartEvent") {
|
|
n.outgoing.forEach((nn) => {
|
|
const completeTask = nodeData.find((m) => m.key === nn.targetRef.id);
|
|
if (completeTask) {
|
|
canvas.addMarker(nn.id, "highlight");
|
|
canvas.addMarker(n.id, "highlight");
|
|
return;
|
|
}
|
|
});
|
|
} else if (n.$type === "bpmn:EndEvent") {
|
|
if (endTask.key === n.id && endTask.completed) {
|
|
canvas.addMarker(n.id, "highlight");
|
|
return;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
getDurationDate(val) {
|
|
// 计算出相差天数
|
|
let days = Math.floor(val / (24 * 3600 * 1000));
|
|
// 计算出小时数
|
|
let leave1 = val % (24 * 3600 * 1000); // 计算天数后剩余的毫秒数
|
|
let hours = Math.floor(leave1 / (3600 * 1000));
|
|
// 计算相差分钟数
|
|
let leave2 = leave1 % (3600 * 1000); // 计算小时数后剩余的毫秒数
|
|
let minutes = Math.floor(leave2 / (60 * 1000));
|
|
// 计算相差秒数
|
|
let leave3 = leave2 % (60 * 1000); // 计算分钟数后剩余的毫秒数
|
|
let seconds = Math.round(leave3 / 1000);
|
|
if (days > 0) {
|
|
if (days < 10) days = "0" + days;
|
|
if (hours < 10) hours = "0" + hours;
|
|
if (minutes < 10) minutes = "0" + minutes;
|
|
if (seconds < 10) seconds = "0" + seconds;
|
|
return days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
|
|
}
|
|
if (hours > 0) {
|
|
if (hours < 10) hours = "0" + hours;
|
|
if (minutes < 10) minutes = "0" + minutes;
|
|
if (seconds < 10) seconds = "0" + seconds;
|
|
return hours + "小时" + minutes + "分钟" + seconds + "秒";
|
|
}
|
|
if (minutes > 0) {
|
|
if (minutes < 10) minutes = "0" + minutes;
|
|
if (seconds < 10) seconds = "0" + seconds;
|
|
return minutes + "分钟" + seconds + "秒";
|
|
}
|
|
if (seconds > 0) {
|
|
if (seconds < 10) seconds = "0" + seconds;
|
|
return seconds + "秒";
|
|
}
|
|
},
|
|
handledownload(url) {
|
|
let fileType = url.split(".");
|
|
if (
|
|
this.fileTypes.indexOf(fileType[fileType.length - 1].toLocaleLowerCase()) > -1
|
|
) {
|
|
window.open(process.env.VUE_APP_BASE_API + url);
|
|
} else {
|
|
this.$download.resource(url);
|
|
}
|
|
},
|
|
getDeleteReason(val) {
|
|
val = val.replace("Change activity to ", "");
|
|
let flowRecordList = this.flowRecordList;
|
|
for (let i = 0; i < flowRecordList.length; i++) {
|
|
if (flowRecordList[i].taskDefKey == val) {
|
|
return "驳回至" + flowRecordList[i].taskName;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.app-detailDrawer {
|
|
.drawer {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
padding-bottom: 20px;
|
|
.drawerLeft {
|
|
width: 60%;
|
|
min-width: 280px;
|
|
height: 100%;
|
|
float: left;
|
|
border-right: 1px solid #dcdfe6;
|
|
overflow-y: scroll;
|
|
padding-right: 20px;
|
|
.bjs-powered-by {
|
|
display: none !important;
|
|
}
|
|
.maskLayer {
|
|
width: 100%;
|
|
height: 90px;
|
|
position: absolute;
|
|
z-index: 9999;
|
|
top: 77px;
|
|
}
|
|
}
|
|
.drawerRight {
|
|
width: 40%;
|
|
min-width: 400px;
|
|
height: 100%;
|
|
float: left;
|
|
padding-left: 20px;
|
|
|
|
.el-link_div {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
.containers {
|
|
width: 100%;
|
|
height: 150px;
|
|
.canvas {
|
|
width: 100%;
|
|
height: 100px;
|
|
}
|
|
.panel {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50px;
|
|
width: 300px;
|
|
}
|
|
.load {
|
|
margin-right: 10px;
|
|
}
|
|
.el-form-item__label {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.djs-palette {
|
|
left: 0px !important;
|
|
top: 0px;
|
|
border-top: none;
|
|
}
|
|
|
|
.djs-container svg {
|
|
min-height: 150px;
|
|
}
|
|
|
|
.highlight.djs-shape .djs-visual > :nth-child(1) {
|
|
fill: green !important;
|
|
stroke: green !important;
|
|
fill-opacity: 0.2 !important;
|
|
}
|
|
.highlight.djs-shape .djs-visual > :nth-child(2) {
|
|
fill: green !important;
|
|
}
|
|
.highlight.djs-shape .djs-visual > path {
|
|
fill: green !important;
|
|
fill-opacity: 0.2 !important;
|
|
stroke: green !important;
|
|
}
|
|
.highlight.djs-connection > .djs-visual > path {
|
|
stroke: green !important;
|
|
}
|
|
.highlight-todo.djs-connection > .djs-visual > path {
|
|
stroke: orange !important;
|
|
stroke-dasharray: 4px !important;
|
|
fill-opacity: 0.2 !important;
|
|
}
|
|
.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
|
|
fill: orange !important;
|
|
stroke: orange !important;
|
|
stroke-dasharray: 4px !important;
|
|
fill-opacity: 0.2 !important;
|
|
}
|
|
.overlays-div {
|
|
font-size: 10px;
|
|
color: red;
|
|
width: 100px;
|
|
top: -20px !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|