提交代码
姜玉琦
parent
1b8fb5fac3
commit
509eb22d28
|
|
@ -113,7 +113,7 @@ public class SecurityConfig extends WebSecurityConfigurerAdapter
|
|||
// 对于登录login 注册register 验证码captchaImage 允许匿名访问
|
||||
.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()
|
||||
// 除上面外的所有请求全部需要鉴权认证
|
||||
.anyRequest().authenticated()
|
||||
|
|
|
|||
|
|
@ -8,93 +8,126 @@
|
|||
size="80%"
|
||||
>
|
||||
<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>
|
||||
<div class="drawer">
|
||||
<div class="drawerLeft">
|
||||
<div class="block containers">
|
||||
<div class="canvas" ref="flowCanvas"></div>
|
||||
<div class="maskLayer" />
|
||||
</div>
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(item,index ) in flowRecordList"
|
||||
:key="index"
|
||||
:icon="setIcon(item)"
|
||||
:color="setColor(item)"
|
||||
>
|
||||
<p style="font-weight: 700"> {{ getSort(index) }}{{item.taskName}}{{item.commentResult}}</p>
|
||||
<el-card :body-style="{ padding: '6px' }">
|
||||
<el-descriptions class="margin-top" :column="1" size="small" border>
|
||||
<el-descriptions-item v-if="item.assigneeName" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-user"></i>办理人</template>
|
||||
{{item.assigneeName}}
|
||||
<el-tag type="info" size="mini">{{item.deptName}}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.candidate" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-user"></i>候选办理</template>
|
||||
{{item.candidate}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.deleteReason" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-user"></i>驳回节点</template>
|
||||
{{getDeleteReason(item.deleteReason)}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-date"></i>接收时间</template>
|
||||
{{item.startTime}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.endTime" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-date"></i>处理时间</template>
|
||||
{{item.endTime}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.duration" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-time"></i>处理耗时</template>
|
||||
{{getDurationDate(item.duration)}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.message" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-tickets"></i>处理意见</template>
|
||||
{{item.message}}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<div class="drawerRight">
|
||||
<el-form
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="所属项目">
|
||||
{{ initData.projectName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="发起单位">
|
||||
{{ options.startDeptName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="发起人">
|
||||
{{ options.startUserName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="审批事项">
|
||||
{{ title }}
|
||||
</el-form-item>
|
||||
<el-form-item label="审批内容">
|
||||
<div v-for="(file,index ) in initData.files" :key="index">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-paperclip"
|
||||
@click="handledownload(file)"
|
||||
>{{file.substring(file.lastIndexOf('/')+1)}}</el-button
|
||||
>
|
||||
<div class="drawerLeft">
|
||||
<div class="block containers">
|
||||
<div class="canvas" ref="flowCanvas"></div>
|
||||
<div class="maskLayer" />
|
||||
</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>
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(item, index) in flowRecordList"
|
||||
:key="index"
|
||||
:icon="setIcon(item)"
|
||||
:color="setColor(item)"
|
||||
>
|
||||
<p style="font-weight: 700">
|
||||
{{ getSort(index) }}{{ item.taskName }}{{ item.commentResult }}
|
||||
</p>
|
||||
<el-card :body-style="{ padding: '6px' }">
|
||||
<el-descriptions class="margin-top" :column="1" size="small" border>
|
||||
<el-descriptions-item
|
||||
v-if="item.assigneeName"
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"><i class="el-icon-user"></i>办理人</template>
|
||||
{{ item.assigneeName }}
|
||||
<el-tag type="info" size="mini">{{ item.deptName }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
v-if="item.candidate"
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"><i class="el-icon-user"></i>候选办理</template>
|
||||
{{ item.candidate }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
v-if="item.deleteReason"
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"><i class="el-icon-user"></i>驳回节点</template>
|
||||
{{ getDeleteReason(item.deleteReason) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"><i class="el-icon-date"></i>接收时间</template>
|
||||
{{ item.startTime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
v-if="item.endTime"
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"><i class="el-icon-date"></i>处理时间</template>
|
||||
{{ item.endTime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
v-if="item.duration"
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"><i class="el-icon-time"></i>处理耗时</template>
|
||||
{{ getDurationDate(item.duration) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
v-if="item.message"
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"
|
||||
><i class="el-icon-tickets"></i>处理意见</template
|
||||
>
|
||||
{{ item.message }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<div class="drawerRight">
|
||||
<el-form label-width="100px">
|
||||
<el-form-item label="所属项目">
|
||||
{{ initData.projectName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="发起单位">
|
||||
{{ options.startDeptName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="发起人">
|
||||
{{ options.startUserName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="审批事项">
|
||||
{{ title }}
|
||||
</el-form-item>
|
||||
<el-form-item label="审批内容">
|
||||
<div v-for="(file, index) in initData.files" :key="index">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-paperclip"
|
||||
@click="handledownload(file)"
|
||||
>{{ file.substring(file.lastIndexOf("/") + 1) }}</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请说明">
|
||||
{{ initData.remark }}
|
||||
</el-form-item>
|
||||
<div style="text-align: center">
|
||||
<el-button type="danger" @click="doCanel">关 闭</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
|
|
@ -103,11 +136,13 @@
|
|||
<script>
|
||||
import { flowXmlAndNode } from "@/api/flowable/definition";
|
||||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||||
import {findCommentByProcInsId,findFormDatasByProcInsId} from "@/api/flowable/businessKey";
|
||||
import {
|
||||
findCommentByProcInsId,
|
||||
findFormDatasByProcInsId,
|
||||
} from "@/api/flowable/businessKey";
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
// 抽屉层
|
||||
|
|
@ -116,7 +151,7 @@ export default {
|
|||
loading: false,
|
||||
// 标题
|
||||
title: "",
|
||||
jdtitle:"",
|
||||
jdtitle: "",
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
|
|
@ -124,10 +159,10 @@ export default {
|
|||
bpmnViewer: null,
|
||||
options: {},
|
||||
flowRecordList: [],
|
||||
showjd:false,
|
||||
showjd: false,
|
||||
//label样式
|
||||
labelStyle: { width: "180px" },
|
||||
initData:{}
|
||||
initData: {},
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
|
|
@ -138,10 +173,9 @@ export default {
|
|||
methods: {
|
||||
setIcon(row) {
|
||||
if (row.endTime) {
|
||||
if(row.commentResult=="驳回")
|
||||
{
|
||||
if (row.commentResult == "驳回") {
|
||||
return "el-icon-close";
|
||||
}else{
|
||||
} else {
|
||||
return "el-icon-check";
|
||||
}
|
||||
} else {
|
||||
|
|
@ -150,10 +184,9 @@ export default {
|
|||
},
|
||||
setColor(row) {
|
||||
if (row.endTime) {
|
||||
if(row.commentResult=="驳回")
|
||||
{
|
||||
if (row.commentResult == "驳回") {
|
||||
return "#f56c6c";
|
||||
}else{
|
||||
} else {
|
||||
return "#2bc418";
|
||||
}
|
||||
} else {
|
||||
|
|
@ -178,19 +211,21 @@ export default {
|
|||
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="已完成";
|
||||
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);
|
||||
});
|
||||
flowXmlAndNode({ procInsId: options.procInsId, deployId: options.deployId }).then(
|
||||
(res) => {
|
||||
this.initFlowImage(res.data);
|
||||
}
|
||||
);
|
||||
},
|
||||
async initFlowImage(data) {
|
||||
const self = this;
|
||||
|
|
@ -202,8 +237,8 @@ export default {
|
|||
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)
|
||||
if (data.nodeData !== undefined && data.nodeData.length > 0) {
|
||||
self.fillColor(data.nodeData);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err.message, err.warnings);
|
||||
|
|
@ -218,13 +253,15 @@ export default {
|
|||
// }).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("数据异常，请联系管理员...");
|
||||
})
|
||||
const that = this;
|
||||
const params = { procInsId: procInsId };
|
||||
findCommentByProcInsId(params)
|
||||
.then((res) => {
|
||||
that.flowRecordList = res.data;
|
||||
})
|
||||
.catch((res) => {
|
||||
this.$message.error("数据异常，请联系管理员...");
|
||||
});
|
||||
},
|
||||
/** 流程表单数据 */
|
||||
getFormDatasList(procInsId, deployId) {
|
||||
|
|
@ -235,175 +272,213 @@ export default {
|
|||
// }).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("数据异常，请联系管理员...");
|
||||
})
|
||||
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') {
|
||||
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)
|
||||
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')
|
||||
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') {
|
||||
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)
|
||||
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')
|
||||
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') {
|
||||
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)
|
||||
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')
|
||||
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)
|
||||
} 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
|
||||
canvas.addMarker(nn.id, "highlight");
|
||||
canvas.addMarker(n.id, "highlight");
|
||||
return;
|
||||
}
|
||||
})
|
||||
}
|
||||
else if (n.$type === 'bpmn:EndEvent') {
|
||||
});
|
||||
} else if (n.$type === "bpmn:EndEvent") {
|
||||
if (endTask.key === n.id && endTask.completed) {
|
||||
canvas.addMarker(n.id, 'highlight')
|
||||
return
|
||||
canvas.addMarker(n.id, "highlight");
|
||||
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 hours = Math.floor(leave1 / (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 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 + '秒';
|
||||
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 (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 (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 + '秒';
|
||||
if (seconds > 0) {
|
||||
if (seconds < 10) seconds = "0" + seconds;
|
||||
return seconds + "秒";
|
||||
}
|
||||
},
|
||||
handledownload(url){
|
||||
this.$download.resource(url);
|
||||
handledownload(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){
|
||||
val = val.replace("Change activity to ","");
|
||||
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;
|
||||
for (let i = 0; i < flowRecordList.length; i++) {
|
||||
if (flowRecordList[i].taskDefKey == val) {
|
||||
return "驳回至" + flowRecordList[i].taskName;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.app-detailDrawer{
|
||||
.app-detailDrawer {
|
||||
.drawer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
.drawerLeft {
|
||||
width: 60%;
|
||||
min-width: 280px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
overflow-y: scroll;
|
||||
padding-right: 20px;
|
||||
.bjs-powered-by {
|
||||
display: none !important;
|
||||
|
||||
}
|
||||
.maskLayer {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 77px;
|
||||
}
|
||||
}
|
||||
.drawerRight {
|
||||
width: 40%;
|
||||
min-width: 400px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
.containers {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
.drawerLeft {
|
||||
width: 60%;
|
||||
min-width: 280px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
overflow-y: scroll;
|
||||
padding-right: 20px;
|
||||
.bjs-powered-by {
|
||||
display: none !important;
|
||||
}
|
||||
.maskLayer {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 77px;
|
||||
}
|
||||
}
|
||||
.drawerRight {
|
||||
width: 40%;
|
||||
min-width: 400px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
.containers {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
|
|
@ -417,12 +492,12 @@ export default {
|
|||
.load {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-form-item__label{
|
||||
.el-form-item__label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.djs-palette{
|
||||
left: 0px!important;
|
||||
.djs-palette {
|
||||
left: 0px !important;
|
||||
top: 0px;
|
||||
border-top: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,68 +1,109 @@
|
|||
<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="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)"
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<template slot="label"><i class="el-icon-user"></i>办理人</template>
|
||||
{{ item.assigneeName }}
|
||||
<el-tag type="info" size="mini">{{ item.deptName }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
v-if="item.candidate"
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"><i class="el-icon-user"></i>候选办理</template>
|
||||
{{ item.candidate }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
v-if="item.deleteReason"
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"><i class="el-icon-user"></i>驳回节点</template>
|
||||
{{ getDeleteReason(item.deleteReason) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"><i class="el-icon-date"></i>接收时间</template>
|
||||
{{ item.startTime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
v-if="item.endTime"
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"><i class="el-icon-date"></i>处理时间</template>
|
||||
{{ item.endTime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
v-if="item.duration"
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"><i class="el-icon-time"></i>处理耗时</template>
|
||||
{{ getDurationDate(item.duration) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
v-if="item.message"
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"
|
||||
><i class="el-icon-tickets"></i>处理意见</template
|
||||
>
|
||||
{{ item.message }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<div class="drawerRight">
|
||||
<el-card class="box-card">
|
||||
<el-descriptions class="margin-top" :title="title" :column="1" size="medium" border>
|
||||
<el-card class="box-card">
|
||||
<el-descriptions
|
||||
class="margin-top"
|
||||
:title="title"
|
||||
:column="1"
|
||||
size="medium"
|
||||
border
|
||||
>
|
||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label">
|
||||
<i class="el-icon-map-location"></i>
|
||||
|
|
@ -110,390 +151,426 @@
|
|||
<i class="el-icon-tickets"></i>
|
||||
请假时间
|
||||
</template>
|
||||
共 {{initData.day}} 天
|
||||
共 {{ initData.day }} 天
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label">
|
||||
<i class="el-icon-chat-dot-square"></i>
|
||||
请假事由
|
||||
</template>
|
||||
{{initData.remark}}
|
||||
{{ initData.remark }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
<div style="text-align: center;margin-top: 30px;">
|
||||
<el-button type="danger" @click="doCanel">关 闭</el-button>
|
||||
<div style="text-align: center; margin-top: 30px">
|
||||
<el-button type="danger" @click="doCanel">关 闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { flowXmlAndNode } from "@/api/flowable/definition";
|
||||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||||
import {findCommentByProcInsId,findFormDatasByProcInsId} from "@/api/flowable/businessKey";
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 抽屉层
|
||||
onOpen: false,
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
// 标题
|
||||
title: "",
|
||||
jdtitle:"",
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {},
|
||||
bpmnViewer: null,
|
||||
options: {},
|
||||
flowRecordList: [],
|
||||
showjd:false,
|
||||
//label样式
|
||||
labelStyle: { width: "180px" },
|
||||
initData:{}
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
setIcon(row) {
|
||||
if (row.endTime) {
|
||||
if(row.commentResult=="驳回")
|
||||
{
|
||||
return "el-icon-close";
|
||||
}else{
|
||||
return "el-icon-check";
|
||||
}
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { flowXmlAndNode } from "@/api/flowable/definition";
|
||||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||||
import {
|
||||
findCommentByProcInsId,
|
||||
findFormDatasByProcInsId,
|
||||
} from "@/api/flowable/businessKey";
|
||||
export default {
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
// 抽屉层
|
||||
onOpen: false,
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
// 标题
|
||||
title: "",
|
||||
jdtitle: "",
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {},
|
||||
bpmnViewer: null,
|
||||
options: {},
|
||||
flowRecordList: [],
|
||||
showjd: false,
|
||||
//label样式
|
||||
labelStyle: { width: "180px" },
|
||||
initData: {},
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
setIcon(row) {
|
||||
if (row.endTime) {
|
||||
if (row.commentResult == "驳回") {
|
||||
return "el-icon-close";
|
||||
} else {
|
||||
return "el-icon-time";
|
||||
return "el-icon-check";
|
||||
}
|
||||
},
|
||||
setColor(row) {
|
||||
if (row.endTime) {
|
||||
if(row.commentResult=="驳回")
|
||||
{
|
||||
return "#f56c6c";
|
||||
}else{
|
||||
return "#2bc418";
|
||||
}
|
||||
} else {
|
||||
return "el-icon-time";
|
||||
}
|
||||
},
|
||||
setColor(row) {
|
||||
if (row.endTime) {
|
||||
if (row.commentResult == "驳回") {
|
||||
return "#f56c6c";
|
||||
} else {
|
||||
return "#b3bdbb";
|
||||
return "#2bc418";
|
||||
}
|
||||
},
|
||||
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) => {
|
||||
} 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",
|
||||
});
|
||||
},
|
||||
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);
|
||||
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);
|
||||
}
|
||||
},
|
||||
/** 流程流转记录 */
|
||||
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 => {
|
||||
} 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 => {
|
||||
.catch((res) => {
|
||||
this.$message.error("数据异常，请联系管理员...");
|
||||
});
|
||||
},
|
||||
/** 流程表单数据 */
|
||||
getFormDatasList(procInsId, deployId) {
|
||||
// const that = this
|
||||
// const params = {procInsId: procInsId, deployId: deployId}
|
||||
// flowRecord(params).then(res => {
|
||||
// that.flowRecordList = res.data.flowList;
|
||||
// }).catch(res => {
|
||||
// this.$message.error("数据异常，请联系管理员...");
|
||||
// })
|
||||
const that = this;
|
||||
const params = { procInsId: procInsId };
|
||||
findFormDatasByProcInsId(params)
|
||||
.then((res) => {
|
||||
this.initData = res.data;
|
||||
}).catch(res => {
|
||||
})
|
||||
.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')
|
||||
}
|
||||
});
|
||||
},
|
||||
// 设置高亮颜色的
|
||||
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
|
||||
}
|
||||
// 排他网关
|
||||
else if (n.$type === "bpmn:ExclusiveGateway") {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(
|
||||
n.id,
|
||||
completeTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
n.outgoing?.forEach((nn) => {
|
||||
const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
|
||||
if (targetTask) {
|
||||
canvas.addMarker(
|
||||
nn.id,
|
||||
targetTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
canvas.addMarker(
|
||||
nn.targetRef.id,
|
||||
targetTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// 并行网关
|
||||
else if (n.$type === "bpmn:ParallelGateway") {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(
|
||||
n.id,
|
||||
completeTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
n.outgoing?.forEach((nn) => {
|
||||
const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
|
||||
if (targetTask) {
|
||||
canvas.addMarker(
|
||||
nn.id,
|
||||
targetTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
canvas.addMarker(
|
||||
nn.targetRef.id,
|
||||
targetTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (n.$type === "bpmn:StartEvent") {
|
||||
n.outgoing.forEach((nn) => {
|
||||
const completeTask = nodeData.find((m) => m.key === nn.targetRef.id);
|
||||
if (completeTask) {
|
||||
canvas.addMarker(nn.id, "highlight");
|
||||
canvas.addMarker(n.id, "highlight");
|
||||
return;
|
||||
}
|
||||
});
|
||||
} else if (n.$type === "bpmn:EndEvent") {
|
||||
if (endTask.key === n.id && endTask.completed) {
|
||||
canvas.addMarker(n.id, "highlight");
|
||||
return;
|
||||
}
|
||||
})
|
||||
},
|
||||
getDurationDate(val){
|
||||
// 计算出相差天数
|
||||
let days = Math.floor(val / (24 * 3600 * 1000))
|
||||
// 计算出小时数
|
||||
let leave1 = val % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
|
||||
let hours = Math.floor(leave1 / (3600 * 1000))
|
||||
// 计算相差分钟数
|
||||
let leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
|
||||
let minutes = Math.floor(leave2 / (60 * 1000))
|
||||
// 计算相差秒数
|
||||
let leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
|
||||
let seconds = Math.round(leave3 / 1000)
|
||||
if(days>0){
|
||||
if(days<10) days = "0"+days;
|
||||
if(hours<10) hours = "0"+hours;
|
||||
if(minutes<10) minutes = "0"+minutes;
|
||||
if(seconds<10) seconds = "0"+seconds;
|
||||
return days + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒';
|
||||
}
|
||||
if(hours>0){
|
||||
if(hours<10) hours = "0"+hours;
|
||||
if(minutes<10) minutes = "0"+minutes;
|
||||
if(seconds<10) seconds = "0"+seconds;
|
||||
return hours + '小时' + minutes + '分钟' + seconds + '秒';
|
||||
}
|
||||
if(minutes>0){
|
||||
if(minutes<10) minutes = "0"+minutes;
|
||||
if(seconds<10) seconds = "0"+seconds;
|
||||
return minutes + '分钟' + seconds + '秒';
|
||||
}
|
||||
if(seconds>0){
|
||||
if(seconds<10) seconds = "0"+seconds;
|
||||
return seconds + '秒';
|
||||
}
|
||||
},
|
||||
handledownload(url){
|
||||
this.$download.resource(url);
|
||||
},
|
||||
getDeleteReason(val){
|
||||
val = val.replace("Change activity to ","");
|
||||
let flowRecordList = this.flowRecordList;
|
||||
for(let i=0;i<flowRecordList.length;i++){
|
||||
if(flowRecordList[i].taskDefKey==val){
|
||||
return "驳回至"+flowRecordList[i].taskName;
|
||||
}
|
||||
});
|
||||
},
|
||||
getDurationDate(val) {
|
||||
// 计算出相差天数
|
||||
let days = Math.floor(val / (24 * 3600 * 1000));
|
||||
// 计算出小时数
|
||||
let leave1 = val % (24 * 3600 * 1000); // 计算天数后剩余的毫秒数
|
||||
let hours = Math.floor(leave1 / (3600 * 1000));
|
||||
// 计算相差分钟数
|
||||
let leave2 = leave1 % (3600 * 1000); // 计算小时数后剩余的毫秒数
|
||||
let minutes = Math.floor(leave2 / (60 * 1000));
|
||||
// 计算相差秒数
|
||||
let leave3 = leave2 % (60 * 1000); // 计算分钟数后剩余的毫秒数
|
||||
let seconds = Math.round(leave3 / 1000);
|
||||
if (days > 0) {
|
||||
if (days < 10) days = "0" + days;
|
||||
if (hours < 10) hours = "0" + hours;
|
||||
if (minutes < 10) minutes = "0" + minutes;
|
||||
if (seconds < 10) seconds = "0" + seconds;
|
||||
return days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
|
||||
}
|
||||
if (hours > 0) {
|
||||
if (hours < 10) hours = "0" + hours;
|
||||
if (minutes < 10) minutes = "0" + minutes;
|
||||
if (seconds < 10) seconds = "0" + seconds;
|
||||
return hours + "小时" + minutes + "分钟" + seconds + "秒";
|
||||
}
|
||||
if (minutes > 0) {
|
||||
if (minutes < 10) minutes = "0" + minutes;
|
||||
if (seconds < 10) seconds = "0" + seconds;
|
||||
return minutes + "分钟" + seconds + "秒";
|
||||
}
|
||||
if (seconds > 0) {
|
||||
if (seconds < 10) seconds = "0" + seconds;
|
||||
return seconds + "秒";
|
||||
}
|
||||
},
|
||||
handledownload(url) {
|
||||
this.$download.resource(url);
|
||||
},
|
||||
getDeleteReason(val) {
|
||||
val = val.replace("Change activity to ", "");
|
||||
let flowRecordList = this.flowRecordList;
|
||||
for (let i = 0; i < flowRecordList.length; i++) {
|
||||
if (flowRecordList[i].taskDefKey == val) {
|
||||
return "驳回至" + flowRecordList[i].taskName;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.app-detailDrawer{
|
||||
.drawer {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.app-detailDrawer {
|
||||
.drawer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 20px;
|
||||
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;
|
||||
}
|
||||
width: 60%;
|
||||
min-width: 280px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
overflow-y: scroll;
|
||||
padding-right: 20px;
|
||||
.bjs-powered-by {
|
||||
display: none !important;
|
||||
}
|
||||
.maskLayer {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 77px;
|
||||
}
|
||||
}
|
||||
.drawerRight {
|
||||
width: 40%;
|
||||
min-width: 400px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
.containers {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
.panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
width: 300px;
|
||||
}
|
||||
.load {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-form-item__label{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.djs-palette{
|
||||
left: 0px!important;
|
||||
top: 0px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.djs-container svg {
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.highlight.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: green !important;
|
||||
stroke: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.highlight.djs-shape .djs-visual > :nth-child(2) {
|
||||
fill: green !important;
|
||||
}
|
||||
.highlight.djs-shape .djs-visual > path {
|
||||
fill: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
stroke: green !important;
|
||||
}
|
||||
.highlight.djs-connection > .djs-visual > path {
|
||||
stroke: green !important;
|
||||
}
|
||||
.highlight-todo.djs-connection > .djs-visual > path {
|
||||
stroke: orange !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: orange !important;
|
||||
stroke: orange !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.overlays-div {
|
||||
font-size: 10px;
|
||||
color: red;
|
||||
width: 100px;
|
||||
top: -20px !important;
|
||||
}
|
||||
.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>
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,184 +1,189 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-drawer
|
||||
v-if="onOpen"
|
||||
:visible.sync="onOpen"
|
||||
ref="drawer"
|
||||
direction="rtl"
|
||||
size="60%"
|
||||
@close="closeCallBack"
|
||||
<div class="app-container">
|
||||
<el-drawer
|
||||
v-if="onOpen"
|
||||
:visible.sync="onOpen"
|
||||
ref="drawer"
|
||||
direction="rtl"
|
||||
size="60%"
|
||||
@close="closeCallBack"
|
||||
>
|
||||
<template slot="title">
|
||||
<div>工程管理 【{{ title }}】</div>
|
||||
</template>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
label-width="120px"
|
||||
style="padding-right: 35px"
|
||||
>
|
||||
<template slot="title">
|
||||
<div>工程管理 【{{ title }}】</div>
|
||||
</template>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
label-width="120px"
|
||||
style="padding-right: 35px"
|
||||
>
|
||||
<div class="block containers">
|
||||
<div class="canvas" ref="flowCanvas"></div>
|
||||
<div class="maskLayer" />
|
||||
</div>
|
||||
<el-form-item label="所属项目" prop="businessKey">
|
||||
<el-select
|
||||
v-model="form.businessKey"
|
||||
placeholder="请选择所属项目"
|
||||
style="width: 100%"
|
||||
filterable
|
||||
:disabled="disPro"
|
||||
@change="projectChage"
|
||||
>
|
||||
<div class="block containers">
|
||||
<div class="canvas" ref="flowCanvas"></div>
|
||||
<div class="maskLayer" />
|
||||
</div>
|
||||
<el-form-item label="所属项目" prop="businessKey">
|
||||
<el-select
|
||||
v-model="form.businessKey"
|
||||
placeholder="请选择所属项目"
|
||||
style="width: 100%"
|
||||
filterable
|
||||
:disabled="disPro"
|
||||
@change="projectChage"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item,index) in projectOptions"
|
||||
:key="index"
|
||||
:label="item.projectName"
|
||||
:value="item.id"
|
||||
v-for="(item, index) in projectOptions"
|
||||
:key="index"
|
||||
:label="item.projectName"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="发起单位">
|
||||
{{ deptName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="发起人">
|
||||
{{ nickName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="审批事项">
|
||||
{{ title }}
|
||||
</el-form-item>
|
||||
<el-form-item label="审批内容" prop="files">
|
||||
<FileUpload
|
||||
@input="fileInput"
|
||||
:limit="9"
|
||||
v-model="form.files"
|
||||
:fileType="['pdf', 'png', 'jpg', 'jpeg', 'doc', 'docx', 'xls', 'xlsx']"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请说明" prop="remark">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="form.remark"
|
||||
placeholder="请输入申请说明"
|
||||
rows="5"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div style="text-align: center">
|
||||
<el-button type="primary" @click="submitForm">提交流程</el-button>
|
||||
<el-button @click="doCanel">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from "@/store";
|
||||
import { definitionStart, flowXmlAndNode } from "@/api/flowable/definition";
|
||||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||||
import { findFormDatasByProcInsId } from "@/api/flowable/businessKey";
|
||||
import { complete, getNextFlowNodeByStart } from "@/api/flowable/todo";
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
closeCallBack: {
|
||||
type: Function,
|
||||
},
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="发起单位">
|
||||
{{ deptName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="发起人">
|
||||
{{ nickName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="审批事项">
|
||||
{{ title }}
|
||||
</el-form-item>
|
||||
<el-form-item label="审批内容" prop="files">
|
||||
<FileUpload
|
||||
@input="fileInput"
|
||||
:limit="9"
|
||||
v-model="form.files"
|
||||
:fileType="['pdf', 'png', 'jpg', 'jpeg']"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请说明" prop="remark">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="form.remark"
|
||||
placeholder="请输入申请说明"
|
||||
rows="5"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div style="text-align: center">
|
||||
<el-button type="primary" @click="submitForm">提交流程</el-button>
|
||||
<el-button @click="doCanel">取 消</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from "@/store";
|
||||
import { definitionStart, flowXmlAndNode } from "@/api/flowable/definition";
|
||||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||||
import { findFormDatasByProcInsId } from "@/api/flowable/businessKey";
|
||||
import { complete, getNextFlowNodeByStart } from "@/api/flowable/todo";
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
closeCallBack: {
|
||||
type: Function,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 抽屉层
|
||||
onOpen: false,
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
// 标题
|
||||
title: "",
|
||||
// 表单参数
|
||||
form: {
|
||||
businessKey: "",
|
||||
projectName: "",
|
||||
files: "",
|
||||
remark: "",
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
businessKey: [{ required: true, message: "请选择所属项目", trigger: "blur" }],
|
||||
files: [{ required: true, message: "请上传申请内容", trigger: "blur" }],
|
||||
remark: [
|
||||
{ required: false, message: "请输入申请说明", trigger: "blur" },
|
||||
{
|
||||
max: 500,
|
||||
message: "申请说明最多输入500字",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
projectOptions: null,
|
||||
deptName: null,
|
||||
nickName: null,
|
||||
disPro: false,
|
||||
bpmnViewer: null,
|
||||
options: {},
|
||||
taskTitle: null,
|
||||
taskOpen: false,
|
||||
daterangeMarksTime: [],
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
watch: {},
|
||||
created() {},
|
||||
mounted() {},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
// 项目选择
|
||||
projectChage(val) {
|
||||
let projectName = "";
|
||||
this.projectOptions.forEach((item) => {
|
||||
if ((item.id = val)) {
|
||||
projectName = item.projectName;
|
||||
return;
|
||||
}
|
||||
});
|
||||
this.form.projectName = projectName;
|
||||
},
|
||||
doCanel() {
|
||||
this.onOpen = false;
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 抽屉层
|
||||
onOpen: false,
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
// 标题
|
||||
title: "",
|
||||
// 表单参数
|
||||
form: {
|
||||
businessKey: "",
|
||||
projectName: "",
|
||||
files: "",
|
||||
remark: "",
|
||||
},
|
||||
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);
|
||||
});
|
||||
// 表单校验
|
||||
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",
|
||||
},
|
||||
],
|
||||
},
|
||||
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);
|
||||
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;
|
||||
}
|
||||
},
|
||||
/** 流程表单数据 */
|
||||
initFormDate(procInsId, deployId) {
|
||||
this.projectOptions=[{id:this.options.businessKey,projectName:this.options.businessKeyName}];
|
||||
const params = {procInsId: procInsId}
|
||||
findFormDatasByProcInsId(params).then(res => {
|
||||
});
|
||||
this.form.projectName = projectName;
|
||||
},
|
||||
doCanel() {
|
||||
this.onOpen = false;
|
||||
},
|
||||
show(options) {
|
||||
this.options = options;
|
||||
this.onOpen = true;
|
||||
this.title = options.procDefName;
|
||||
this.initFormDate(options.procInsId);
|
||||
flowXmlAndNode({ procInsId: options.procInsId, deployId: options.deployId }).then(
|
||||
(res) => {
|
||||
this.initFlowImage(res.data);
|
||||
}
|
||||
);
|
||||
},
|
||||
async initFlowImage(data) {
|
||||
const self = this;
|
||||
try {
|
||||
self.bpmnViewer = new BpmnViewer({
|
||||
container: this.$refs.flowCanvas,
|
||||
height: "150px",
|
||||
});
|
||||
await self.bpmnViewer.importXML(data.xmlData);
|
||||
// 自适应
|
||||
self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
|
||||
if (data.nodeData !== undefined && data.nodeData.length > 0) {
|
||||
self.fillColor(data.nodeData);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err.message, err.warnings);
|
||||
}
|
||||
},
|
||||
/** 流程表单数据 */
|
||||
initFormDate(procInsId, deployId) {
|
||||
this.projectOptions = [
|
||||
{ id: this.options.businessKey, projectName: this.options.businessKeyName },
|
||||
];
|
||||
const params = { procInsId: procInsId };
|
||||
findFormDatasByProcInsId(params)
|
||||
.then((res) => {
|
||||
this.form = res.data;
|
||||
this.deptName = this.options.startDeptName;
|
||||
this.nickName = this.options.startUserName;
|
||||
|
|
@ -188,192 +193,224 @@
|
|||
this.form.assignee = store.getters.name;
|
||||
this.form.procInsId = this.options.procInsId;
|
||||
this.form.instanceId = this.options.procInsId;
|
||||
}).catch(res => {
|
||||
this.$message.error("数据异常，请联系管理员...");
|
||||
})
|
||||
},
|
||||
fileInput(files) {
|
||||
let fileUrls = "";
|
||||
if (files.length > 0) {
|
||||
fileUrls = "";
|
||||
files.forEach((item) => {
|
||||
fileUrls += "," + item.url;
|
||||
.catch((res) => {
|
||||
this.$message.error("数据异常，请联系管理员...");
|
||||
});
|
||||
},
|
||||
fileInput(files) {
|
||||
let fileUrls = "";
|
||||
if (files.length > 0) {
|
||||
fileUrls = "";
|
||||
files.forEach((item) => {
|
||||
fileUrls += "," + item.url;
|
||||
});
|
||||
fileUrls = fileUrls.substring(1);
|
||||
}
|
||||
this.form.files = fileUrls;
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
this.form.variables = {
|
||||
businessKey: this.form.businessKey,
|
||||
projectName: this.form.projectName,
|
||||
files: this.form.files,
|
||||
remark: this.form.remark,
|
||||
INITIATOR: this.form.INITIATOR,
|
||||
};
|
||||
complete(this.form).then((res) => {
|
||||
this.$store.dispatch("settingAwaitNum");
|
||||
this.$modal.msgSuccess("任务提交成功");
|
||||
this.loading = false;
|
||||
//关闭并刷新列表
|
||||
this.$refs.drawer.closeDrawer();
|
||||
});
|
||||
fileUrls = fileUrls.substring(1);
|
||||
}
|
||||
this.form.files = fileUrls;
|
||||
},
|
||||
submitForm() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
this.form.variables={
|
||||
businessKey:this.form.businessKey,
|
||||
projectName:this.form.projectName,
|
||||
files:this.form.files,
|
||||
remark:this.form.remark,
|
||||
INITIATOR:this.form.INITIATOR
|
||||
}
|
||||
complete(this.form).then(res => {
|
||||
this.$store.dispatch('settingAwaitNum');
|
||||
this.$modal.msgSuccess("任务提交成功");
|
||||
this.loading = false;
|
||||
//关闭并刷新列表
|
||||
this.$refs.drawer.closeDrawer();
|
||||
});
|
||||
},
|
||||
// 设置高亮颜色的
|
||||
fillColor(nodeData) {
|
||||
const canvas = this.bpmnViewer.get("canvas");
|
||||
this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach((n) => {
|
||||
const completeTask = nodeData.find((m) => m.key === n.id);
|
||||
const todoTask = nodeData.find((m) => !m.completed);
|
||||
const endTask = nodeData[nodeData.length - 1];
|
||||
if (n.$type === "bpmn:UserTask") {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(
|
||||
n.id,
|
||||
completeTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
n.outgoing?.forEach((nn) => {
|
||||
const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
|
||||
if (targetTask) {
|
||||
if (
|
||||
todoTask &&
|
||||
completeTask.key === todoTask.key &&
|
||||
!todoTask.completed
|
||||
) {
|
||||
canvas.addMarker(
|
||||
nn.id,
|
||||
todoTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
canvas.addMarker(
|
||||
nn.targetRef.id,
|
||||
todoTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
} else {
|
||||
canvas.addMarker(
|
||||
nn.id,
|
||||
targetTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
canvas.addMarker(
|
||||
nn.targetRef.id,
|
||||
targetTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 设置高亮颜色的
|
||||
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: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:EndEvent') {
|
||||
if (endTask.key === n.id && endTask.completed) {
|
||||
canvas.addMarker(n.id, 'highlight')
|
||||
return
|
||||
}
|
||||
// 并行网关
|
||||
else if (n.$type === "bpmn:ParallelGateway") {
|
||||
if (completeTask) {
|
||||
canvas.addMarker(
|
||||
n.id,
|
||||
completeTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
n.outgoing?.forEach((nn) => {
|
||||
const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
|
||||
if (targetTask) {
|
||||
canvas.addMarker(
|
||||
nn.id,
|
||||
targetTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
canvas.addMarker(
|
||||
nn.targetRef.id,
|
||||
targetTask.completed ? "highlight" : "highlight-todo"
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
} else if (n.$type === "bpmn:StartEvent") {
|
||||
n.outgoing.forEach((nn) => {
|
||||
const completeTask = nodeData.find((m) => m.key === nn.targetRef.id);
|
||||
if (completeTask) {
|
||||
canvas.addMarker(nn.id, "highlight");
|
||||
canvas.addMarker(n.id, "highlight");
|
||||
return;
|
||||
}
|
||||
});
|
||||
} else if (n.$type === "bpmn:EndEvent") {
|
||||
if (endTask.key === n.id && endTask.completed) {
|
||||
canvas.addMarker(n.id, "highlight");
|
||||
return;
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.bjs-powered-by {
|
||||
display: none !important;
|
||||
}
|
||||
.maskLayer {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.bjs-powered-by {
|
||||
display: none !important;
|
||||
}
|
||||
.maskLayer {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 66px;
|
||||
}
|
||||
.app-container {
|
||||
.containers {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 66px;
|
||||
}
|
||||
.app-container{
|
||||
.containers {
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
}
|
||||
.panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
width: 300px;
|
||||
}
|
||||
.load {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-form-item__label{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.djs-palette{
|
||||
left: 0px!important;
|
||||
top: 0px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.djs-container svg {
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.highlight.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: green !important;
|
||||
stroke: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.highlight.djs-shape .djs-visual > :nth-child(2) {
|
||||
fill: green !important;
|
||||
}
|
||||
.highlight.djs-shape .djs-visual > path {
|
||||
fill: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
stroke: green !important;
|
||||
}
|
||||
.highlight.djs-connection > .djs-visual > path {
|
||||
stroke: green !important;
|
||||
}
|
||||
.highlight-todo.djs-connection > .djs-visual > path {
|
||||
stroke: orange !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: orange !important;
|
||||
stroke: orange !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
.overlays-div {
|
||||
font-size: 10px;
|
||||
color: red;
|
||||
width: 100px;
|
||||
top: -20px !important;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -49,14 +49,26 @@
|
|||
<el-form-item label="审批事项">
|
||||
{{ title }}
|
||||
</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
|
||||
@input="fileInput"
|
||||
:limit="9"
|
||||
:fileType="['pdf', 'png', 'jpg', 'jpeg', 'doc', 'docx', 'xls', 'xlsx']"
|
||||
:fileType="['pdf', 'png', 'jpg', 'jpeg']"
|
||||
/>
|
||||
</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
|
||||
type="textarea"
|
||||
v-model="form.remark"
|
||||
|
|
|
|||
|
|
@ -32,12 +32,12 @@
|
|||
:disabled="disPro"
|
||||
@change="projectChage"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item,index) in projectOptions"
|
||||
<el-option
|
||||
v-for="(item, index) in projectOptions"
|
||||
:key="index"
|
||||
:label="item.projectName"
|
||||
:value="item.id"
|
||||
>
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<FileUpload
|
||||
@input="fileInput"
|
||||
:limit="9"
|
||||
:fileType="['pdf', 'png', 'jpg', 'jpeg', 'doc', 'docx', 'xls', 'xlsx']"
|
||||
:fileType="['pdf', 'png', 'jpg', 'jpeg']"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="申请说明" prop="remark">
|
||||
|
|
|
|||
|
|
@ -9,121 +9,195 @@
|
|||
size="80%"
|
||||
>
|
||||
<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>
|
||||
<div class="drawer">
|
||||
<div class="drawerLeft block containers">
|
||||
<div class="canvas" ref="flowCanvas"></div>
|
||||
<div class="maskLayer" />
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(item,index ) in flowRecordList"
|
||||
:key="index"
|
||||
:icon="setIcon(item)"
|
||||
:color="setColor(item)"
|
||||
>
|
||||
<p style="font-weight: 700"> {{ getSort(index) }}{{item.taskName}}{{item.commentResult}}</p>
|
||||
<el-card :body-style="{ padding: '6px' }">
|
||||
<el-descriptions class="margin-top" :column="1" size="small" border>
|
||||
<el-descriptions-item v-if="item.assigneeName" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-user"></i>办理人</template>
|
||||
{{item.assigneeName}}
|
||||
<el-tag type="info" size="mini">{{item.deptName}}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.candidate" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-user"></i>候选办理</template>
|
||||
{{item.candidate}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.deleteReason" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-user"></i>驳回节点</template>
|
||||
{{getDeleteReason(item.deleteReason)}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-date"></i>接收时间</template>
|
||||
{{item.startTime}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.endTime" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-date"></i>处理时间</template>
|
||||
{{item.endTime}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.duration" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-time"></i>处理耗时</template>
|
||||
{{getDurationDate(item.duration)}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.message" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-tickets"></i>处理意见</template>
|
||||
{{item.message}}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<div class="drawerRight">
|
||||
<el-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"
|
||||
<div class="drawerLeft block containers">
|
||||
<div class="canvas" ref="flowCanvas"></div>
|
||||
<div class="maskLayer" />
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(item, index) in flowRecordList"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
:icon="setIcon(item)"
|
||||
:color="setColor(item)"
|
||||
>
|
||||
</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>
|
||||
<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"
|
||||
: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>
|
||||
</el-form>
|
||||
<div class="page-warning">
|
||||
<p><strong style="color: #67C23A;">“审批通过”</strong> 操作后，代表您对当前任务满意，任务进入下一阶段。</p>
|
||||
<p><strong style="color: #E6A23C;">“退回任务”</strong> 操作后，代表您对当前任务不满意，任务进入您选择的阶段，或者直接退回给申请人重新申请。</p>
|
||||
<p><strong style="color: #F56C6C;">“驳回上级”</strong> 操作后，代表您对当前任务不满意，任务退回到上一阶段继续处理。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
|
|
@ -134,7 +208,10 @@ import store from "@/store";
|
|||
import { flowXmlAndNode } from "@/api/flowable/definition";
|
||||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||||
import { complete, rejectTask, returnTask, returnList } from "@/api/flowable/todo";
|
||||
import {findCommentByProcInsId,findFormDatasByProcInsId} from "@/api/flowable/businessKey";
|
||||
import {
|
||||
findCommentByProcInsId,
|
||||
findFormDatasByProcInsId,
|
||||
} from "@/api/flowable/businessKey";
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
|
|
@ -150,7 +227,7 @@ export default {
|
|||
loading: false,
|
||||
// 标题
|
||||
title: "",
|
||||
jdtitle:"",
|
||||
jdtitle: "",
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
|
|
@ -164,20 +241,21 @@ export default {
|
|||
},
|
||||
],
|
||||
},
|
||||
queryParams:{
|
||||
nickName:null,
|
||||
phonenumber:null,
|
||||
queryParams: {
|
||||
nickName: null,
|
||||
phonenumber: null,
|
||||
},
|
||||
bpmnViewer: null,
|
||||
options: {},
|
||||
flowRecordList: [],
|
||||
showjd:false,
|
||||
showjd: false,
|
||||
//label样式
|
||||
labelStyle: { width: "180px" },
|
||||
initData:{},
|
||||
returnTaskList: [], // 回退列表数据
|
||||
returnTask:false,
|
||||
returnTaskBtn:false
|
||||
initData: {},
|
||||
returnTaskList: [], // 回退列表数据
|
||||
returnTask: false,
|
||||
returnTaskBtn: false,
|
||||
fileTypes:['pdf','png','jpg','jpeg'],
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
|
|
@ -190,21 +268,23 @@ export default {
|
|||
handlePass() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$confirm('是否确认审批通过当前流程申请?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.loading=true;
|
||||
complete(this.form).then(res => {
|
||||
this.$modal.msgSuccess("任务审批成功");
|
||||
this.loading = false;
|
||||
//关闭并刷新列表
|
||||
this.$refs.drawer.closeDrawer();
|
||||
this.$confirm("是否确认审批通过当前流程申请?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
this.loading = true;
|
||||
complete(this.form).then((res) => {
|
||||
this.$modal.msgSuccess("任务审批成功");
|
||||
this.loading = false;
|
||||
//关闭并刷新列表
|
||||
this.$refs.drawer.closeDrawer();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
console.log("取消操作");
|
||||
});
|
||||
}).catch(() => {
|
||||
console.log("取消操作");
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -212,65 +292,69 @@ export default {
|
|||
handleReject() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$confirm('是否确认审批驳回当前流程申请?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.loading=true;
|
||||
rejectTask(this.form).then(res => {
|
||||
this.$modal.msgSuccess("任务驳回成功");
|
||||
this.loading = false;
|
||||
//关闭并刷新列表
|
||||
this.$refs.drawer.closeDrawer();
|
||||
this.$confirm("是否确认审批驳回当前流程申请?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
this.loading = true;
|
||||
rejectTask(this.form).then((res) => {
|
||||
this.$modal.msgSuccess("任务驳回成功");
|
||||
this.loading = false;
|
||||
//关闭并刷新列表
|
||||
this.$refs.drawer.closeDrawer();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
console.log("取消操作");
|
||||
});
|
||||
}).catch(() => {
|
||||
console.log("取消操作");
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 退回任务 */
|
||||
handleBack(){
|
||||
if(!this.returnTask){
|
||||
this.returnTask=true;
|
||||
handleBack() {
|
||||
if (!this.returnTask) {
|
||||
this.returnTask = true;
|
||||
this.$modal.msgWarning("请选择退回节点");
|
||||
return;
|
||||
}
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
if(!this.form.targetKey){
|
||||
if (!this.form.targetKey) {
|
||||
this.$modal.msgWarning("请选择退回节点");
|
||||
return;
|
||||
}
|
||||
this.$confirm('是否确认退回当前流程申请?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.loading=true;
|
||||
returnTask(this.form).then(res => {
|
||||
this.$modal.msgSuccess("任务退回成功");
|
||||
this.loading = false;
|
||||
//关闭并刷新列表
|
||||
this.$refs.drawer.closeDrawer();
|
||||
this.$confirm("是否确认退回当前流程申请?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
this.loading = true;
|
||||
returnTask(this.form).then((res) => {
|
||||
this.$modal.msgSuccess("任务退回成功");
|
||||
this.loading = false;
|
||||
//关闭并刷新列表
|
||||
this.$refs.drawer.closeDrawer();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
console.log("取消操作");
|
||||
});
|
||||
}).catch(() => {
|
||||
console.log("取消操作");
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
initReturnList(){
|
||||
returnList(this.form).then(res => {
|
||||
initReturnList() {
|
||||
returnList(this.form).then((res) => {
|
||||
this.returnTaskList = res.data;
|
||||
//退回节点>1时，可显示退回按钮
|
||||
if(res.data.length>1){
|
||||
this.returnTaskBtn=true;
|
||||
if (res.data.length > 1) {
|
||||
this.returnTaskBtn = true;
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
initFormDate(){
|
||||
initFormDate() {
|
||||
this.form.taskId = this.options.taskId;
|
||||
this.form.taskName = this.options.taskName;
|
||||
this.form.userId = store.getters.userId;
|
||||
|
|
@ -278,16 +362,15 @@ export default {
|
|||
this.form.procInsId = this.options.procInsId;
|
||||
this.form.instanceId = this.options.procInsId;
|
||||
this.form.executionId = this.options.procInsId;
|
||||
this.returnTask=false;
|
||||
this.returnTaskBtn=false;
|
||||
this.returnTask = false;
|
||||
this.returnTaskBtn = false;
|
||||
this.initReturnList();
|
||||
},
|
||||
setIcon(row) {
|
||||
if (row.endTime) {
|
||||
if(row.commentResult=="驳回")
|
||||
{
|
||||
if (row.commentResult == "驳回") {
|
||||
return "el-icon-close";
|
||||
}else{
|
||||
} else {
|
||||
return "el-icon-check";
|
||||
}
|
||||
} else {
|
||||
|
|
@ -296,10 +379,9 @@ export default {
|
|||
},
|
||||
setColor(row) {
|
||||
if (row.endTime) {
|
||||
if(row.commentResult=="驳回")
|
||||
{
|
||||
if (row.commentResult == "驳回") {
|
||||
return "#f56c6c";
|
||||
}else{
|
||||
} else {
|
||||
return "#2bc418";
|
||||
}
|
||||
} else {
|
||||
|
|
@ -325,19 +407,21 @@ export default {
|
|||
this.showjd = false;
|
||||
this.form = {};
|
||||
this.initFormDate();
|
||||
if(options.finishTime==null){
|
||||
this.jdtitle="进行中";
|
||||
this.showjd=true;
|
||||
}else if(options.finishTime!=null && options.assigneeId==null){
|
||||
this.jdtitle="已撤销";
|
||||
}else{
|
||||
this.jdtitle="已完成";
|
||||
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);
|
||||
});
|
||||
flowXmlAndNode({ procInsId: options.procInsId, deployId: options.deployId }).then(
|
||||
(res) => {
|
||||
this.initFlowImage(res.data);
|
||||
}
|
||||
);
|
||||
},
|
||||
async initFlowImage(data) {
|
||||
const self = this;
|
||||
|
|
@ -349,8 +433,8 @@ export default {
|
|||
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)
|
||||
if (data.nodeData !== undefined && data.nodeData.length > 0) {
|
||||
self.fillColor(data.nodeData);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err.message, err.warnings);
|
||||
|
|
@ -365,13 +449,15 @@ export default {
|
|||
// }).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("数据异常，请联系管理员...");
|
||||
})
|
||||
const that = this;
|
||||
const params = { procInsId: procInsId };
|
||||
findCommentByProcInsId(params)
|
||||
.then((res) => {
|
||||
that.flowRecordList = res.data;
|
||||
})
|
||||
.catch((res) => {
|
||||
this.$message.error("数据异常，请联系管理员...");
|
||||
});
|
||||
},
|
||||
/** 流程表单数据 */
|
||||
getFormDatasList(procInsId, deployId) {
|
||||
|
|
@ -382,131 +468,170 @@ export default {
|
|||
// }).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("数据异常，请联系管理员...");
|
||||
})
|
||||
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') {
|
||||
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)
|
||||
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')
|
||||
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') {
|
||||
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)
|
||||
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')
|
||||
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') {
|
||||
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)
|
||||
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')
|
||||
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)
|
||||
} 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
|
||||
canvas.addMarker(nn.id, "highlight");
|
||||
canvas.addMarker(n.id, "highlight");
|
||||
return;
|
||||
}
|
||||
})
|
||||
}
|
||||
else if (n.$type === 'bpmn:EndEvent') {
|
||||
});
|
||||
} else if (n.$type === "bpmn:EndEvent") {
|
||||
if (endTask.key === n.id && endTask.completed) {
|
||||
canvas.addMarker(n.id, 'highlight')
|
||||
return
|
||||
canvas.addMarker(n.id, "highlight");
|
||||
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 hours = Math.floor(leave1 / (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 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 + '秒';
|
||||
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 (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 (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 + '秒';
|
||||
if (seconds > 0) {
|
||||
if (seconds < 10) seconds = "0" + seconds;
|
||||
return seconds + "秒";
|
||||
}
|
||||
},
|
||||
handledownload(url){
|
||||
this.$download.resource(url);
|
||||
handledownload(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){
|
||||
val = val.replace("Change activity to ","");
|
||||
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){
|
||||
for (let i = 0; i < flowRecordList.length; i++) {
|
||||
if (flowRecordList[i].taskDefKey == val) {
|
||||
console.log(i);
|
||||
return "驳回至"+flowRecordList[i].taskName;
|
||||
return "驳回至" + flowRecordList[i].taskName;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -514,44 +639,43 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.app-approveDrawer{
|
||||
.app-approveDrawer {
|
||||
.drawer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
.drawerLeft {
|
||||
width: 60%;
|
||||
min-width: 280px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
overflow-y: scroll;
|
||||
padding-right: 20px;
|
||||
.bjs-powered-by {
|
||||
display: none !important;
|
||||
|
||||
}
|
||||
.maskLayer {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 77px;
|
||||
}
|
||||
}
|
||||
.drawerRight {
|
||||
width: 40%;
|
||||
min-width: 400px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
.containers {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
.drawerLeft {
|
||||
width: 60%;
|
||||
min-width: 280px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
overflow-y: scroll;
|
||||
padding-right: 20px;
|
||||
.bjs-powered-by {
|
||||
display: none !important;
|
||||
}
|
||||
.maskLayer {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 77px;
|
||||
}
|
||||
}
|
||||
.drawerRight {
|
||||
width: 40%;
|
||||
min-width: 400px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
.containers {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
|
|
@ -565,12 +689,12 @@ export default {
|
|||
.load {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-form-item__label{
|
||||
.el-form-item__label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.djs-palette{
|
||||
left: 0px!important;
|
||||
.djs-palette {
|
||||
left: 0px !important;
|
||||
top: 0px;
|
||||
border-top: none;
|
||||
}
|
||||
|
|
@ -615,12 +739,12 @@ export default {
|
|||
}
|
||||
}
|
||||
.page-warning {
|
||||
padding: 8px 16px;
|
||||
background-color: #f0f9eb;
|
||||
border-radius: 4px;
|
||||
border-left: 5px solid #67C23A;
|
||||
margin: 20px 0;
|
||||
font-size: 13px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
padding: 8px 16px;
|
||||
background-color: #f0f9eb;
|
||||
border-radius: 4px;
|
||||
border-left: 5px solid #67c23a;
|
||||
margin: 20px 0;
|
||||
font-size: 13px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,59 +9,100 @@
|
|||
size="80%"
|
||||
>
|
||||
<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>
|
||||
<div class="drawer">
|
||||
<div class="drawerLeft block containers">
|
||||
<div class="canvas" ref="flowCanvas"></div>
|
||||
<div class="maskLayer" />
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(item,index ) in flowRecordList"
|
||||
:key="index"
|
||||
:icon="setIcon(item)"
|
||||
:color="setColor(item)"
|
||||
>
|
||||
<p style="font-weight: 700"> {{ getSort(index) }}{{item.taskName}}{{item.commentResult}}</p>
|
||||
<el-card :body-style="{ padding: '6px' }">
|
||||
<el-descriptions class="margin-top" :column="1" size="small" border>
|
||||
<el-descriptions-item v-if="item.assigneeName" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-user"></i>办理人</template>
|
||||
{{item.assigneeName}}
|
||||
<el-tag type="info" size="mini">{{item.deptName}}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.candidate" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-user"></i>候选办理</template>
|
||||
{{item.candidate}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.deleteReason" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-user"></i>驳回节点</template>
|
||||
{{getDeleteReason(item.deleteReason)}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-date"></i>接收时间</template>
|
||||
{{item.startTime}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.endTime" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-date"></i>处理时间</template>
|
||||
{{item.endTime}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.duration" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-time"></i>处理耗时</template>
|
||||
{{getDurationDate(item.duration)}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.message" label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label"><i class="el-icon-tickets"></i>处理意见</template>
|
||||
{{item.message}}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<div class="drawerRight">
|
||||
<el-card class="box-card">
|
||||
<el-descriptions class="margin-top" :title="title" :column="1" size="medium" border>
|
||||
<div class="drawerLeft block containers">
|
||||
<div class="canvas" ref="flowCanvas"></div>
|
||||
<div class="maskLayer" />
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
v-for="(item, index) in flowRecordList"
|
||||
:key="index"
|
||||
:icon="setIcon(item)"
|
||||
:color="setColor(item)"
|
||||
>
|
||||
<p style="font-weight: 700">
|
||||
{{ getSort(index) }}{{ item.taskName }}{{ item.commentResult }}
|
||||
</p>
|
||||
<el-card :body-style="{ padding: '6px' }">
|
||||
<el-descriptions class="margin-top" :column="1" size="small" border>
|
||||
<el-descriptions-item
|
||||
v-if="item.assigneeName"
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"><i class="el-icon-user"></i>办理人</template>
|
||||
{{ item.assigneeName }}
|
||||
<el-tag type="info" size="mini">{{ item.deptName }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
v-if="item.candidate"
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"><i class="el-icon-user"></i>候选办理</template>
|
||||
{{ item.candidate }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
v-if="item.deleteReason"
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"><i class="el-icon-user"></i>驳回节点</template>
|
||||
{{ getDeleteReason(item.deleteReason) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"><i class="el-icon-date"></i>接收时间</template>
|
||||
{{ item.startTime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
v-if="item.endTime"
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"><i class="el-icon-date"></i>处理时间</template>
|
||||
{{ item.endTime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
v-if="item.duration"
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"><i class="el-icon-time"></i>处理耗时</template>
|
||||
{{ getDurationDate(item.duration) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
v-if="item.message"
|
||||
label-class-name="my-label"
|
||||
:labelStyle="labelStyle"
|
||||
>
|
||||
<template slot="label"
|
||||
><i class="el-icon-tickets"></i>处理意见</template
|
||||
>
|
||||
{{ item.message }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<div class="drawerRight">
|
||||
<el-card class="box-card">
|
||||
<el-descriptions
|
||||
class="margin-top"
|
||||
:title="title"
|
||||
:column="1"
|
||||
size="medium"
|
||||
border
|
||||
>
|
||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label">
|
||||
<i class="el-icon-map-location"></i>
|
||||
|
|
@ -109,54 +150,97 @@
|
|||
<i class="el-icon-tickets"></i>
|
||||
请假时间
|
||||
</template>
|
||||
共 {{initData.day}} 天
|
||||
共 {{ initData.day }} 天
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
||||
<template slot="label">
|
||||
<i class="el-icon-chat-dot-square"></i>
|
||||
请假事由
|
||||
</template>
|
||||
{{initData.remark}}
|
||||
{{ initData.remark }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px" v-loading="loading" style="margin-top: 30px;">
|
||||
<el-form-item label="审批意见" prop="comment">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="form.comment"
|
||||
placeholder="请输入审批意见（最多500字）"
|
||||
rows="5"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="退回节点" v-if="returnTask">
|
||||
<el-select
|
||||
v-model="form.targetKey"
|
||||
placeholder="请选择退回节点"
|
||||
style="width: 100%"
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
v-loading="loading"
|
||||
style="margin-top: 30px"
|
||||
>
|
||||
<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>
|
||||
<el-form-item label="审批意见" prop="comment">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="form.comment"
|
||||
placeholder="请输入审批意见（最多500字）"
|
||||
rows="5"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="退回节点" v-if="returnTask">
|
||||
<el-select
|
||||
v-model="form.targetKey"
|
||||
placeholder="请选择退回节点"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in returnTaskList"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div style="text-align: center">
|
||||
<el-button
|
||||
icon="el-icon-s-custom"
|
||||
v-if="false"
|
||||
type="primary"
|
||||
plain
|
||||
size="mini"
|
||||
@click="handleAssign"
|
||||
>任务转办</el-button
|
||||
>
|
||||
<el-button
|
||||
icon="el-icon-check"
|
||||
type="success"
|
||||
size="mini"
|
||||
@click="handlePass"
|
||||
>审批通过</el-button
|
||||
>
|
||||
<el-button
|
||||
icon="el-icon-back"
|
||||
v-if="returnTaskBtn"
|
||||
type="warning"
|
||||
size="mini"
|
||||
@click="handleBack"
|
||||
>退回任务</el-button
|
||||
>
|
||||
<el-button
|
||||
icon="el-icon-circle-close"
|
||||
type="danger"
|
||||
size="mini"
|
||||
@click="handleReject"
|
||||
>驳回上级</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="page-warning">
|
||||
<p>
|
||||
<strong style="color: #67c23a">“审批通过”</strong>
|
||||
操作后，代表您对当前任务满意，任务进入下一阶段。
|
||||
</p>
|
||||
<p>
|
||||
<strong style="color: #e6a23c">“退回任务”</strong>
|
||||
操作后，代表您对当前任务不满意，任务进入您选择的阶段，或者直接退回给申请人重新申请。
|
||||
</p>
|
||||
<p>
|
||||
<strong style="color: #f56c6c">“驳回上级”</strong>
|
||||
操作后，代表您对当前任务不满意，任务退回到上一阶段继续处理。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<div class="page-warning">
|
||||
<p><strong style="color: #67C23A;">“审批通过”</strong> 操作后，代表您对当前任务满意，任务进入下一阶段。</p>
|
||||
<p><strong style="color: #E6A23C;">“退回任务”</strong> 操作后，代表您对当前任务不满意，任务进入您选择的阶段，或者直接退回给申请人重新申请。</p>
|
||||
<p><strong style="color: #F56C6C;">“驳回上级”</strong> 操作后，代表您对当前任务不满意，任务退回到上一阶段继续处理。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
|
|
@ -167,7 +251,10 @@ import store from "@/store";
|
|||
import { flowXmlAndNode } from "@/api/flowable/definition";
|
||||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||||
import { complete, rejectTask, returnTask, returnList } from "@/api/flowable/todo";
|
||||
import {findCommentByProcInsId,findFormDatasByProcInsId} from "@/api/flowable/businessKey";
|
||||
import {
|
||||
findCommentByProcInsId,
|
||||
findFormDatasByProcInsId,
|
||||
} from "@/api/flowable/businessKey";
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
|
|
@ -183,7 +270,7 @@ export default {
|
|||
loading: false,
|
||||
// 标题
|
||||
title: "",
|
||||
jdtitle:"",
|
||||
jdtitle: "",
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
|
|
@ -197,20 +284,20 @@ export default {
|
|||
},
|
||||
],
|
||||
},
|
||||
queryParams:{
|
||||
nickName:null,
|
||||
phonenumber:null,
|
||||
queryParams: {
|
||||
nickName: null,
|
||||
phonenumber: null,
|
||||
},
|
||||
bpmnViewer: null,
|
||||
options: {},
|
||||
flowRecordList: [],
|
||||
showjd:false,
|
||||
showjd: false,
|
||||
//label样式
|
||||
labelStyle: { width: "180px" },
|
||||
initData:{},
|
||||
returnTaskList: [], // 回退列表数据
|
||||
returnTask:false,
|
||||
returnTaskBtn:false
|
||||
initData: {},
|
||||
returnTaskList: [], // 回退列表数据
|
||||
returnTask: false,
|
||||
returnTaskBtn: false,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
|
|
@ -223,21 +310,23 @@ export default {
|
|||
handlePass() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$confirm('是否确认审批通过当前流程申请?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.loading=true;
|
||||
complete(this.form).then(res => {
|
||||
this.$modal.msgSuccess("任务审批成功");
|
||||
this.loading = false;
|
||||
//关闭并刷新列表
|
||||
this.$refs.drawer.closeDrawer();
|
||||
this.$confirm("是否确认审批通过当前流程申请?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
this.loading = true;
|
||||
complete(this.form).then((res) => {
|
||||
this.$modal.msgSuccess("任务审批成功");
|
||||
this.loading = false;
|
||||
//关闭并刷新列表
|
||||
this.$refs.drawer.closeDrawer();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
console.log("取消操作");
|
||||
});
|
||||
}).catch(() => {
|
||||
console.log("取消操作");
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -245,65 +334,69 @@ export default {
|
|||
handleReject() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$confirm('是否确认审批驳回当前流程申请?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.loading=true;
|
||||
rejectTask(this.form).then(res => {
|
||||
this.$modal.msgSuccess("任务驳回成功");
|
||||
this.loading = false;
|
||||
//关闭并刷新列表
|
||||
this.$refs.drawer.closeDrawer();
|
||||
this.$confirm("是否确认审批驳回当前流程申请?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
this.loading = true;
|
||||
rejectTask(this.form).then((res) => {
|
||||
this.$modal.msgSuccess("任务驳回成功");
|
||||
this.loading = false;
|
||||
//关闭并刷新列表
|
||||
this.$refs.drawer.closeDrawer();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
console.log("取消操作");
|
||||
});
|
||||
}).catch(() => {
|
||||
console.log("取消操作");
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 退回任务 */
|
||||
handleBack(){
|
||||
if(!this.returnTask){
|
||||
this.returnTask=true;
|
||||
handleBack() {
|
||||
if (!this.returnTask) {
|
||||
this.returnTask = true;
|
||||
this.$modal.msgWarning("请选择退回节点");
|
||||
return;
|
||||
}
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
if(!this.form.targetKey){
|
||||
if (!this.form.targetKey) {
|
||||
this.$modal.msgWarning("请选择退回节点");
|
||||
return;
|
||||
}
|
||||
this.$confirm('是否确认退回当前流程申请?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.loading=true;
|
||||
returnTask(this.form).then(res => {
|
||||
this.$modal.msgSuccess("任务退回成功");
|
||||
this.loading = false;
|
||||
//关闭并刷新列表
|
||||
this.$refs.drawer.closeDrawer();
|
||||
this.$confirm("是否确认退回当前流程申请?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
this.loading = true;
|
||||
returnTask(this.form).then((res) => {
|
||||
this.$modal.msgSuccess("任务退回成功");
|
||||
this.loading = false;
|
||||
//关闭并刷新列表
|
||||
this.$refs.drawer.closeDrawer();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
console.log("取消操作");
|
||||
});
|
||||
}).catch(() => {
|
||||
console.log("取消操作");
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
initReturnList(){
|
||||
returnList(this.form).then(res => {
|
||||
initReturnList() {
|
||||
returnList(this.form).then((res) => {
|
||||
this.returnTaskList = res.data;
|
||||
//退回节点>1时，可显示退回按钮
|
||||
if(res.data.length>1){
|
||||
this.returnTaskBtn=true;
|
||||
if (res.data.length > 1) {
|
||||
this.returnTaskBtn = true;
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
initFormDate(){
|
||||
initFormDate() {
|
||||
this.form.taskId = this.options.taskId;
|
||||
this.form.taskName = this.options.taskName;
|
||||
this.form.userId = store.getters.userId;
|
||||
|
|
@ -311,16 +404,15 @@ export default {
|
|||
this.form.procInsId = this.options.procInsId;
|
||||
this.form.instanceId = this.options.procInsId;
|
||||
this.form.executionId = this.options.procInsId;
|
||||
this.returnTask=false;
|
||||
this.returnTaskBtn=false;
|
||||
this.returnTask = false;
|
||||
this.returnTaskBtn = false;
|
||||
this.initReturnList();
|
||||
},
|
||||
setIcon(row) {
|
||||
if (row.endTime) {
|
||||
if(row.commentResult=="驳回")
|
||||
{
|
||||
if (row.commentResult == "驳回") {
|
||||
return "el-icon-close";
|
||||
}else{
|
||||
} else {
|
||||
return "el-icon-check";
|
||||
}
|
||||
} else {
|
||||
|
|
@ -329,10 +421,9 @@ export default {
|
|||
},
|
||||
setColor(row) {
|
||||
if (row.endTime) {
|
||||
if(row.commentResult=="驳回")
|
||||
{
|
||||
if (row.commentResult == "驳回") {
|
||||
return "#f56c6c";
|
||||
}else{
|
||||
} else {
|
||||
return "#2bc418";
|
||||
}
|
||||
} else {
|
||||
|
|
@ -358,19 +449,21 @@ export default {
|
|||
this.showjd = false;
|
||||
this.form = {};
|
||||
this.initFormDate();
|
||||
if(options.finishTime==null){
|
||||
this.jdtitle="进行中";
|
||||
this.showjd=true;
|
||||
}else if(options.finishTime!=null && options.assigneeId==null){
|
||||
this.jdtitle="已撤销";
|
||||
}else{
|
||||
this.jdtitle="已完成";
|
||||
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);
|
||||
});
|
||||
flowXmlAndNode({ procInsId: options.procInsId, deployId: options.deployId }).then(
|
||||
(res) => {
|
||||
this.initFlowImage(res.data);
|
||||
}
|
||||
);
|
||||
},
|
||||
async initFlowImage(data) {
|
||||
const self = this;
|
||||
|
|
@ -382,8 +475,8 @@ export default {
|
|||
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)
|
||||
if (data.nodeData !== undefined && data.nodeData.length > 0) {
|
||||
self.fillColor(data.nodeData);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err.message, err.warnings);
|
||||
|
|
@ -398,13 +491,15 @@ export default {
|
|||
// }).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("数据异常，请联系管理员...");
|
||||
})
|
||||
const that = this;
|
||||
const params = { procInsId: procInsId };
|
||||
findCommentByProcInsId(params)
|
||||
.then((res) => {
|
||||
that.flowRecordList = res.data;
|
||||
})
|
||||
.catch((res) => {
|
||||
this.$message.error("数据异常，请联系管理员...");
|
||||
});
|
||||
},
|
||||
/** 流程表单数据 */
|
||||
getFormDatasList(procInsId, deployId) {
|
||||
|
|
@ -415,130 +510,164 @@ export default {
|
|||
// }).catch(res => {
|
||||
// this.$message.error("数据异常，请联系管理员...");
|
||||
// })
|
||||
const that = this
|
||||
const params = {procInsId: procInsId}
|
||||
findFormDatasByProcInsId(params).then(res => {
|
||||
this.initData = res.data;
|
||||
}).catch(res => {
|
||||
this.$message.error("数据异常，请联系管理员...");
|
||||
})
|
||||
const that = this;
|
||||
const params = { procInsId: procInsId };
|
||||
findFormDatasByProcInsId(params)
|
||||
.then((res) => {
|
||||
this.initData = res.data;
|
||||
})
|
||||
.catch((res) => {
|
||||
this.$message.error("数据异常，请联系管理员...");
|
||||
});
|
||||
},
|
||||
// 设置高亮颜色的
|
||||
fillColor(nodeData) {
|
||||
const canvas = this.bpmnViewer.get('canvas')
|
||||
this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
|
||||
const completeTask = nodeData.find(m => m.key === n.id)
|
||||
const todoTask = nodeData.find(m => !m.completed)
|
||||
const endTask = nodeData[nodeData.length - 1]
|
||||
if (n.$type === 'bpmn:UserTask') {
|
||||
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)
|
||||
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')
|
||||
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') {
|
||||
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)
|
||||
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')
|
||||
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') {
|
||||
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)
|
||||
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')
|
||||
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)
|
||||
} 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
|
||||
canvas.addMarker(nn.id, "highlight");
|
||||
canvas.addMarker(n.id, "highlight");
|
||||
return;
|
||||
}
|
||||
})
|
||||
}
|
||||
else if (n.$type === 'bpmn:EndEvent') {
|
||||
});
|
||||
} else if (n.$type === "bpmn:EndEvent") {
|
||||
if (endTask.key === n.id && endTask.completed) {
|
||||
canvas.addMarker(n.id, 'highlight')
|
||||
return
|
||||
canvas.addMarker(n.id, "highlight");
|
||||
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 hours = Math.floor(leave1 / (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 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 + '秒';
|
||||
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 (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 (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 + '秒';
|
||||
if (seconds > 0) {
|
||||
if (seconds < 10) seconds = "0" + seconds;
|
||||
return seconds + "秒";
|
||||
}
|
||||
},
|
||||
handledownload(url){
|
||||
handledownload(url) {
|
||||
this.$download.resource(url);
|
||||
},
|
||||
getDeleteReason(val){
|
||||
val = val.replace("Change activity to ","");
|
||||
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){
|
||||
for (let i = 0; i < flowRecordList.length; i++) {
|
||||
if (flowRecordList[i].taskDefKey == val) {
|
||||
console.log(i);
|
||||
return "驳回至"+flowRecordList[i].taskName;
|
||||
return "驳回至" + flowRecordList[i].taskName;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -546,44 +675,43 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.app-approveDrawer{
|
||||
.app-approveDrawer {
|
||||
.drawer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
.drawerLeft {
|
||||
width: 60%;
|
||||
min-width: 280px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
overflow-y: scroll;
|
||||
padding-right: 20px;
|
||||
.bjs-powered-by {
|
||||
display: none !important;
|
||||
|
||||
}
|
||||
.maskLayer {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 77px;
|
||||
}
|
||||
}
|
||||
.drawerRight {
|
||||
width: 40%;
|
||||
min-width: 400px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
.containers {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
.drawerLeft {
|
||||
width: 60%;
|
||||
min-width: 280px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
overflow-y: scroll;
|
||||
padding-right: 20px;
|
||||
.bjs-powered-by {
|
||||
display: none !important;
|
||||
}
|
||||
.maskLayer {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 77px;
|
||||
}
|
||||
}
|
||||
.drawerRight {
|
||||
width: 40%;
|
||||
min-width: 400px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
.containers {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
.canvas {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
|
|
@ -597,12 +725,12 @@ export default {
|
|||
.load {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-form-item__label{
|
||||
.el-form-item__label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.djs-palette{
|
||||
left: 0px!important;
|
||||
.djs-palette {
|
||||
left: 0px !important;
|
||||
top: 0px;
|
||||
border-top: none;
|
||||
}
|
||||
|
|
@ -647,12 +775,12 @@ export default {
|
|||
}
|
||||
}
|
||||
.page-warning {
|
||||
padding: 8px 16px;
|
||||
background-color: #f0f9eb;
|
||||
border-radius: 4px;
|
||||
border-left: 5px solid #67C23A;
|
||||
margin: 20px 0;
|
||||
font-size: 13px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
padding: 8px 16px;
|
||||
background-color: #f0f9eb;
|
||||
border-radius: 4px;
|
||||
border-left: 5px solid #67c23a;
|
||||
margin: 20px 0;
|
||||
font-size: 13px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -128,7 +128,8 @@
|
|||
<el-table
|
||||
v-loading="loading"
|
||||
:data="surProjectSpecialList"
|
||||
@selection-change="handleSelectionChange" stripe
|
||||
@selection-change="handleSelectionChange"
|
||||
stripe
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column
|
||||
|
|
@ -259,7 +260,14 @@
|
|||
/>
|
||||
</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-item label="项目名称" prop="projectName">
|
||||
<el-input v-model="form.projectName" placeholder="请输入项目名称" disabled />
|
||||
|
|
@ -622,7 +630,8 @@ export default {
|
|||
},
|
||||
/** 下载证书 */
|
||||
handledownload(row) {
|
||||
this.$download.resource(row.credentialFile);
|
||||
window.open(process.env.VUE_APP_BASE_API + row.credentialFile);
|
||||
//this.$download.resource(row.credentialFile);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -585,7 +585,8 @@ export default {
|
|||
},
|
||||
/** 下载证书 */
|
||||
handledownload(row) {
|
||||
this.$download.resource(row.credentialFile);
|
||||
window.open(process.env.VUE_APP_BASE_API+row.credentialFile);
|
||||
//this.$download.resource(row.credentialFile);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import cn.hutool.http.HttpUtil;
|
|||
import com.alibaba.fastjson.JSONObject;
|
||||
import com.ruoyi.common.core.domain.entity.SysDept;
|
||||
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.enums.DeptTypeEnum;
|
||||
import com.ruoyi.common.enums.SysRoleEnum;
|
||||
|
|
@ -25,6 +26,7 @@ import java.util.ArrayList;
|
|||
import java.util.HashMap;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.concurrent.TimeUnit;
|
||||
|
||||
/**
|
||||
* @version : V1.0
|
||||
|
|
@ -45,6 +47,9 @@ public class WechatUserLoginServiceImpl implements IWechatUserLoginService {
|
|||
appInfo.put("wx9997d071b4996f23","5bcc9ca17b31133d93a025871fc5021d");
|
||||
}
|
||||
|
||||
@Autowired
|
||||
private RedisCache redisCache;
|
||||
|
||||
@Autowired
|
||||
private ISysUserService userService;
|
||||
|
||||
|
|
@ -125,6 +130,7 @@ public class WechatUserLoginServiceImpl implements IWechatUserLoginService {
|
|||
map.put("userId", Convert.toStr(userData.get("user_id")));
|
||||
map.put("nickname",userData.get("nick_name"));
|
||||
map.put("openId",openId);
|
||||
map.put("unionid",redisCache.getCacheObject("openid-unionid"+openId));
|
||||
//验证手机号码是否绑定
|
||||
int count = wechatUserLoginMapper.checkBindByOpenId(openId);
|
||||
if(count > 0){
|
||||
|
|
@ -176,7 +182,10 @@ public class WechatUserLoginServiceImpl implements IWechatUserLoginService {
|
|||
String resultStr = HttpUtil.get(url);
|
||||
JSONObject json = JSONObject.parseObject(resultStr);
|
||||
//删除参数session_key，否则小程序检测关键参数暴露，提示整改
|
||||
String key = "openid-unionid"+json.get("openid");
|
||||
redisCache.setCacheObject(key,json.get("unionid"),24, TimeUnit.HOURS);
|
||||
json.remove("session_key");
|
||||
|
||||
return json;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,12 +15,16 @@ user:
|
|||
|
||||
# Spring配置
|
||||
spring:
|
||||
# 微信资源验证访问
|
||||
web:
|
||||
resources:
|
||||
static-locations: classpath:/wxstatic/
|
||||
# 资源信息
|
||||
messages:
|
||||
# 国际化资源文件路径
|
||||
basename: i18n/messages
|
||||
profiles:
|
||||
active: druid
|
||||
active: prod
|
||||
# 文件上传
|
||||
servlet:
|
||||
multipart:
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
|||
<if test="userId != null and userId != ''">userId,</if>
|
||||
<if test="loginName != null and loginName != ''">loginName,</if>
|
||||
<if test="nickname != null and nickname != ''">nickname,</if>
|
||||
<if test="unionid != null and unionid != ''">unionid,</if>
|
||||
creatTime
|
||||
) values
|
||||
(
|
||||
|
|
@ -42,13 +43,14 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
|
|||
<if test="userId != null and userId != ''">#{userId},</if>
|
||||
<if test="loginName != null and loginName != ''">#{loginName},</if>
|
||||
<if test="nickname != null and nickname != ''">#{nickname},</if>
|
||||
<if test="unionid != null and unionid != ''">#{unionid},</if>
|
||||
now()
|
||||
)
|
||||
</insert>
|
||||
|
||||
<!--更新用户openid-->
|
||||
<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>
|
||||
|
||||
<!--根据电话查询用户id-->
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
29aef62cd1316f1635063c5b86a3ffee
|
||||
Loading…
Reference in New Issue