提交代码

main
姜玉琦 2024-02-25 11:06:26 +08:00
parent 764983e7d0
commit 47aed608a6
8 changed files with 636 additions and 16 deletions

View File

@ -90,7 +90,7 @@ export default {
toggleSideBar() { toggleSideBar() {
this.$store.dispatch('app/toggleSideBar'); this.$store.dispatch('app/toggleSideBar');
//tips //tips
this.$store.dispatch('settingAwaitNum'); this.$store.dispatch('initMyTaskNum');
}, },
async logout() { async logout() {
this.$confirm('确定注销并退出系统吗?', '提示', { this.$confirm('确定注销并退出系统吗?', '提示', {

View File

@ -56,7 +56,7 @@ export default {
}, },
mounted() { mounted() {
//tips //tips
this.$store.dispatch('settingAwaitNum'); this.$store.dispatch('initMyTaskNum');
}, },
methods: { methods: {
handleClickOutside() { handleClickOutside() {

View File

@ -1,19 +1,13 @@
import { findMyTask } from "@/api/flowable/businessKey"; import { findMyTask } from "@/api/flowable/businessKey";
const flowtask = { const flowtask = {
state: { state: {},
awaitTaskNum:0
},
mutations: { mutations: {},
SET_AWAIT_TASK: (state, number) => {
state.awaitTaskNum = number
}
},
actions: { actions: {
// 设置代办任务 // 设置代办任务
settingAwaitNum({ commit }) { initMyTaskNum({ commit }) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
//查询当前登录人的代办任务数量 //查询当前登录人的代办任务数量
findMyTask({}).then(response => { findMyTask({}).then(response => {

View File

@ -371,7 +371,7 @@ export default {
_this.loading=true; _this.loading=true;
revokeProcess(params).then(res => { revokeProcess(params).then(res => {
// //
_this.$store.dispatch('settingAwaitNum'); _this.$store.dispatch('initMyTaskNum');
_this.$modal.msgSuccess("任务撤回成功"); _this.$modal.msgSuccess("任务撤回成功");
_this.loading = false; _this.loading = false;
// //

View File

@ -215,7 +215,7 @@
INITIATOR:this.form.INITIATOR INITIATOR:this.form.INITIATOR
} }
complete(this.form).then(res => { complete(this.form).then(res => {
this.$store.dispatch('settingAwaitNum'); this.$store.dispatch('initMyTaskNum');
this.$modal.msgSuccess("任务提交成功"); this.$modal.msgSuccess("任务提交成功");
this.loading = false; this.loading = false;
// //

View File

@ -0,0 +1,626 @@
<template>
<div class="app-approveDrawer">
<el-drawer
v-if="onOpen"
:visible.sync="onOpen"
ref="drawer"
direction="rtl"
@close="closeCallBack"
size="80%"
>
<template slot="title">
<div>流程详情 {{ title }} - 当前进度{{ jdtitle }}<span v-if="showjd"> - {{options.taskName}}</span></div>
</template>
<div class="drawer">
<div class="drawerLeft block containers">
<div class="canvas" ref="flowCanvas"></div>
<div class="maskLayer" />
<el-timeline>
<el-timeline-item
v-for="(item,index ) in flowRecordList"
:key="index"
:icon="setIcon(item)"
:color="setColor(item)"
>
<p style="font-weight: 700"> {{ getSort(index) }}{{item.taskName}}{{item.commentResult}}</p>
<el-card :body-style="{ padding: '6px' }">
<el-descriptions class="margin-top" :column="1" size="small" border>
<el-descriptions-item v-if="item.assigneeName" label-class-name="my-label" :labelStyle="labelStyle">
<template slot="label"><i class="el-icon-user"></i>办理人</template>
{{item.assigneeName}}
<el-tag type="info" size="mini">{{item.deptName}}</el-tag>
</el-descriptions-item>
<el-descriptions-item v-if="item.candidate" label-class-name="my-label" :labelStyle="labelStyle">
<template slot="label"><i class="el-icon-user"></i>候选办理</template>
{{item.candidate}}
</el-descriptions-item>
<el-descriptions-item v-if="item.deleteReason" label-class-name="my-label" :labelStyle="labelStyle">
<template slot="label"><i class="el-icon-user"></i>驳回节点</template>
{{getDeleteReason(item.deleteReason)}}
</el-descriptions-item>
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
<template slot="label"><i class="el-icon-date"></i>接收时间</template>
{{item.startTime}}
</el-descriptions-item>
<el-descriptions-item v-if="item.endTime" label-class-name="my-label" :labelStyle="labelStyle">
<template slot="label"><i class="el-icon-date"></i>处理时间</template>
{{item.endTime}}
</el-descriptions-item>
<el-descriptions-item v-if="item.duration" label-class-name="my-label" :labelStyle="labelStyle">
<template slot="label"><i class="el-icon-time"></i>处理耗时</template>
{{getDurationDate(item.duration)}}
</el-descriptions-item>
<el-descriptions-item v-if="item.message" label-class-name="my-label" :labelStyle="labelStyle">
<template slot="label"><i class="el-icon-tickets"></i>处理意见</template>
{{item.message}}
</el-descriptions-item>
</el-descriptions>
</el-card>
</el-timeline-item>
</el-timeline>
</div>
<div class="drawerRight">
<el-form
ref="form" :model="form" :rules="rules" label-width="100px" v-loading="loading">
<el-form-item label="所属项目">
{{ initData.projectName }}
</el-form-item>
<el-form-item label="发起单位">
{{ options.startDeptName }}
</el-form-item>
<el-form-item label="发起人">
{{ options.startUserName }}
</el-form-item>
<el-form-item label="审批事项">
{{ title }}
</el-form-item>
<el-form-item label="审批内容">
<div v-for="(file,index ) in initData.files" :key="index">
<el-button
size="mini"
type="text"
icon="el-icon-paperclip"
@click="handledownload(file)"
>{{file.substring(file.lastIndexOf('/')+1)}}</el-button
>
</div>
</el-form-item>
<el-form-item label="申请说明">
{{initData.remark}}
</el-form-item>
<el-form-item label="审批意见" prop="comment">
<el-input
type="textarea"
v-model="form.comment"
placeholder="请输入审批意见最多500字"
rows="5"
/>
</el-form-item>
<el-form-item label="退回节点" v-if="returnTask">
<el-select
v-model="form.targetKey"
placeholder="请选择退回节点"
style="width: 100%"
>
<el-option
v-for="(item, index) in returnTaskList"
:key="index"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<div style="text-align: center">
<el-button icon="el-icon-s-custom" v-if="false" type="primary" plain size="mini"></el-button>
<el-button icon="el-icon-check" type="success" size="mini" @click="handlePass"></el-button>
<el-button icon="el-icon-back" type="warning" size="mini" @click="handleBack">退</el-button>
<el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject"></el-button>
</div>
</el-form>
<div class="page-warning">
<p><strong style="color: #67C23A;">审批通过</strong> 操作后代表您对当前任务满意任务进入下一阶段</p>
<p><strong style="color: #E6A23C;">退回任务</strong> 操作后代表您对当前任务不满意任务进入您选择的阶段或者直接退回给申请人重新申请</p>
<p><strong style="color: #F56C6C;">驳回上级</strong> 操作后代表您对当前任务不满意任务退回到上一阶段继续处理</p>
</div>
</div>
</div>
</el-drawer>
</div>
</template>
<script>
import store from "@/store";
import { flowXmlAndNode } from "@/api/flowable/definition";
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
import { complete, rejectTask, returnTask, returnList } from "@/api/flowable/todo";
import {findCommentByProcInsId,findFormDatasByProcInsId} from "@/api/flowable/businessKey";
export default {
components: {},
props: {
closeCallBack: {
type: Function,
},
},
data() {
return {
//
onOpen: false,
//
loading: false,
//
title: "",
jdtitle:"",
//
form: {},
//
rules: {
comment: [
{ required: true, message: "请输入审批意见", trigger: "blur" },
{
max: 500,
message: "审批意见最多输入500字",
trigger: "blur",
},
],
},
queryParams:{
nickName:null,
phonenumber:null,
},
bpmnViewer: null,
options: {},
flowRecordList: [],
showjd:false,
//label
labelStyle: { width: "180px" },
initData:{},
returnTaskList: [], // 退
returnTask:false,
returnTaskBtn:false
};
},
computed: {},
watch: {},
created() {},
mounted() {},
beforeDestroy() {},
methods: {
/** 通过任务 */
handlePass() {
this.$refs["form"].validate((valid) => {
if (valid) {
this.$confirm('是否确认审批通过当前流程申请?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.loading=true;
complete(this.form).then(res => {
this.$modal.msgSuccess("任务审批成功");
this.loading = false;
//
this.$refs.drawer.closeDrawer();
});
}).catch(() => {
console.log("取消操作");
});
}
});
},
/** 驳回任务 */
handleReject() {
this.$refs["form"].validate((valid) => {
if (valid) {
this.$confirm('是否确认审批驳回当前流程申请?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.loading=true;
rejectTask(this.form).then(res => {
this.$modal.msgSuccess("任务驳回成功");
this.loading = false;
//
this.$refs.drawer.closeDrawer();
});
}).catch(() => {
console.log("取消操作");
});
}
});
},
/** 退回任务 */
handleBack(){
if(!this.returnTask){
this.returnTask=true;
this.$modal.msgWarning("请选择退回节点");
return;
}
this.$refs["form"].validate((valid) => {
if (valid) {
if(!this.form.targetKey){
this.$modal.msgWarning("请选择退回节点");
return;
}
this.$confirm('是否确认退回当前流程申请?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.loading=true;
returnTask(this.form).then(res => {
this.$modal.msgSuccess("任务退回成功");
this.loading = false;
//
this.$refs.drawer.closeDrawer();
});
}).catch(() => {
console.log("取消操作");
});
}
});
},
initReturnList(){
returnList(this.form).then(res => {
this.returnTaskList = res.data;
//退>1退
if(res.data.length>1){
this.returnTaskBtn=true;
}
})
},
initFormDate(){
this.form.taskId = this.options.taskId;
this.form.taskName = this.options.taskName;
this.form.userId = store.getters.userId;
this.form.deployId = this.options.deployId;
this.form.procInsId = this.options.procInsId;
this.form.instanceId = this.options.procInsId;
this.form.executionId = this.options.procInsId;
this.returnTask=false;
this.returnTaskBtn=false;
this.initReturnList();
},
setIcon(row) {
if (row.endTime) {
if(row.commentResult=="驳回")
{
return "el-icon-close";
}else{
return "el-icon-check";
}
} else {
return "el-icon-time";
}
},
setColor(row) {
if (row.endTime) {
if(row.commentResult=="驳回")
{
return "#f56c6c";
}else{
return "#2bc418";
}
} else {
return "#b3bdbb";
}
},
getSort(i) {
let num = this.flowRecordList.length - i;
if (num < 10) {
num = "0" + num;
}
return num + ". ";
},
doCanel() {
this.onOpen = false;
},
show(options) {
this.options = options;
this.title = options.procDefName;
this.deptName = options.startDeptName;
this.nickName = options.startUserName;
this.onOpen = true;
this.showjd = false;
this.form = {};
this.initFormDate();
if(options.finishTime==null){
this.jdtitle="进行中";
this.showjd=true;
}else if(options.finishTime!=null && options.assigneeId==null){
this.jdtitle="已撤销";
}else{
this.jdtitle="已完成";
}
this.getFlowRecordList(options.procInsId, options.deployId);
this.getFormDatasList(options.procInsId, options.deployId);
flowXmlAndNode({ procInsId:options.procInsId, deployId: options.deployId }).then((res) => {
this.initFlowImage(res.data);
});
},
async initFlowImage(data) {
const self = this;
try {
self.bpmnViewer = new BpmnViewer({
container: this.$refs.flowCanvas,
height: "90px",
});
await self.bpmnViewer.importXML(data.xmlData);
//
self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
if (data.nodeData !==undefined && data.nodeData.length > 0 ) {
self.fillColor(data.nodeData)
}
} catch (err) {
console.error(err.message, err.warnings);
}
},
/** 流程流转记录 */
getFlowRecordList(procInsId, deployId) {
// const that = this
// const params = {procInsId: procInsId, deployId: deployId}
// flowRecord(params).then(res => {
// that.flowRecordList = res.data.flowList;
// }).catch(res => {
// this.$message.error("...");
// })
const that = this
const params = {procInsId: procInsId}
findCommentByProcInsId(params).then(res => {
that.flowRecordList = res.data;
}).catch(res => {
this.$message.error("数据异常,请联系管理员...");
})
},
/** 流程表单数据 */
getFormDatasList(procInsId, deployId) {
// const that = this
// const params = {procInsId: procInsId, deployId: deployId}
// flowRecord(params).then(res => {
// that.flowRecordList = res.data.flowList;
// }).catch(res => {
// this.$message.error("...");
// })
const that = this
const params = {procInsId: procInsId}
findFormDatasByProcInsId(params).then(res => {
this.initData = res.data;
this.initData.files = res.data.files.split(',');
}).catch(res => {
this.$message.error("数据异常,请联系管理员...");
})
},
//
fillColor(nodeData) {
const canvas = this.bpmnViewer.get('canvas')
this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
const completeTask = nodeData.find(m => m.key === n.id)
const todoTask = nodeData.find(m => !m.completed)
const endTask = nodeData[nodeData.length - 1]
if (n.$type === 'bpmn:UserTask') {
if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
n.outgoing?.forEach(nn => {
const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
if (targetTask) {
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
}else {
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
}
}
})
}
}
//
else if (n.$type === 'bpmn:ExclusiveGateway') {
if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
n.outgoing?.forEach(nn => {
const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
if (targetTask) {
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
}
})
}
}
//
else if (n.$type === 'bpmn:ParallelGateway') {
if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
n.outgoing?.forEach(nn => {
const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
if (targetTask) {
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
}
})
}
}
else if (n.$type === 'bpmn:StartEvent') {
n.outgoing.forEach(nn => {
const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
if (completeTask) {
canvas.addMarker(nn.id, 'highlight')
canvas.addMarker(n.id, 'highlight')
return
}
})
}
else if (n.$type === 'bpmn:EndEvent') {
if (endTask.key === n.id && endTask.completed) {
canvas.addMarker(n.id, 'highlight')
return
}
}
})
},
getDurationDate(val){
//
let days = Math.floor(val / (24 * 3600 * 1000))
//
let leave1 = val % (24 * 3600 * 1000) //
let hours = Math.floor(leave1 / (3600 * 1000))
//
let leave2 = leave1 % (3600 * 1000) //
let minutes = Math.floor(leave2 / (60 * 1000))
//
let leave3 = leave2 % (60 * 1000) //
let seconds = Math.round(leave3 / 1000)
if(days>0){
if(days<10) days = "0"+days;
if(hours<10) hours = "0"+hours;
if(minutes<10) minutes = "0"+minutes;
if(seconds<10) seconds = "0"+seconds;
return days + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒';
}
if(hours>0){
if(hours<10) hours = "0"+hours;
if(minutes<10) minutes = "0"+minutes;
if(seconds<10) seconds = "0"+seconds;
return hours + '小时' + minutes + '分钟' + seconds + '秒';
}
if(minutes>0){
if(minutes<10) minutes = "0"+minutes;
if(seconds<10) seconds = "0"+seconds;
return minutes + '分钟' + seconds + '秒';
}
if(seconds>0){
if(seconds<10) seconds = "0"+seconds;
return seconds + '秒';
}
},
handledownload(url){
this.$download.resource(url);
},
getDeleteReason(val){
val = val.replace("Change activity to ","");
let flowRecordList = this.flowRecordList;
for(let i=0;i<flowRecordList.length;i++){
if(flowRecordList[i].taskDefKey==val){
console.log(i);
return "驳回至"+flowRecordList[i].taskName;
}
}
},
},
};
</script>
<style lang="scss">
.app-approveDrawer{
.drawer {
width: 100%;
height: 100%;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
.drawerLeft {
width: 60%;
min-width: 280px;
height: 100%;
float: left;
border-right: 1px solid #dcdfe6;
overflow-y: scroll;
padding-right: 20px;
.bjs-powered-by {
display: none !important;
}
.maskLayer {
width: 100%;
height: 90px;
position: absolute;
z-index: 9999;
top: 77px;
}
}
.drawerRight {
width: 40%;
min-width: 400px;
height: 100%;
float: left;
padding-left: 20px;
}
}
.containers {
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;
}
}
}
.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;
}
</style>

View File

@ -210,7 +210,7 @@ export default {
this.queryParams.params["endDate"] = this.daterangeCheckTime[1]; this.queryParams.params["endDate"] = this.daterangeCheckTime[1];
} }
// //
this.$store.dispatch('settingAwaitNum'); this.$store.dispatch('initMyTaskNum');
myAwaitFlowTaskList(this.queryParams).then((response) => { myAwaitFlowTaskList(this.queryParams).then((response) => {
this.todoList = response.data.records; this.todoList = response.data.records;
this.total = response.data.total; this.total = response.data.total;

View File

@ -35,8 +35,8 @@ module.exports = {
proxy: { proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy // detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: { [process.env.VUE_APP_BASE_API]: {
//target: `http://localhost:8080${process.env.VUE_APP_BASE_API}`, target: `http://localhost:8080${process.env.VUE_APP_BASE_API}`,
target: `http://49.235.181.228${process.env.VUE_APP_BASE_API}`, //target: `http://49.235.181.228${process.env.VUE_APP_BASE_API}`,
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '' ['^' + process.env.VUE_APP_BASE_API]: ''