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

提交

main
姜玉琦 2024-02-27 03:25:36 +08:00
parent 8f66f73e52
commit 4dc7cf73a8
2 changed files with 546 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

649
yanzhu-ui/src/views/flowable/task/todo/detail/approveDrawer.vue
View File

@ -6,53 +6,88 @@
ref="drawer" ref="drawer"
direction="rtl" direction="rtl"
@close="closeCallBack" @close="closeCallBack"
size="80%" size="70%"
> >
<template slot="title"> <template slot="title">
<div>流程详情 【{{ title }}】 - 当前进度【{{ jdtitle }}】<span v-if="showjd"> - 当前节点【{{options.taskName}}】</span></div> <div>
流程详情 【{{ title }}】 - 当前进度【{{ jdtitle }}】<span v-if="showjd">
- 当前节点【{{ options.taskName }}】</span
>
</div>
</template> </template>
<div class="drawer"> <div class="drawer">
<div class="drawerLeft block containers"> <div class="drawerLeft block containers">
<div class="canvas" ref="flowCanvas"></div> <div class="canvas" ref="flowCanvas"></div>
<div class="maskLayer" /> <div class="maskLayer" />
<el-timeline> <el-timeline style="padding-left: 0px !important">
<el-timeline-item <el-timeline-item
v-for="(item,index ) in flowRecordList" v-for="(item, index) in flowRecordList"
:key="index" :key="index"
:icon="setIcon(item)" :icon="setIcon(item)"
:color="setColor(item)" :color="setColor(item)"
> >
<p style="font-weight: 700"> {{ getSort(index) }}{{item.taskName}}{{item.commentResult}}</p> <p style="font-weight: 700">
{{ getSort(index) }}{{ item.taskName }}{{ item.commentResult }}
</p>
<el-card :body-style="{ padding: '6px' }"> <el-card :body-style="{ padding: '6px' }">
<el-descriptions class="margin-top" :column="1" size="small" border> <el-descriptions class="margin-top" :column="1" size="small" border>
<el-descriptions-item v-if="item.assigneeName" label-class-name="my-label" :labelStyle="labelStyle"> <el-descriptions-item
v-if="item.assigneeName"
label-class-name="my-label"
:labelStyle="labelStyle"
>
<template slot="label"><i class="el-icon-user"></i>办理人</template> <template slot="label"><i class="el-icon-user"></i>办理人</template>
{{item.assigneeName}} {{ item.assigneeName }}
<el-tag type="info" size="mini">{{item.deptName}}</el-tag> <el-tag type="info" size="mini">{{ item.deptName }}</el-tag>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item v-if="item.candidate" label-class-name="my-label" :labelStyle="labelStyle"> <el-descriptions-item
v-if="item.candidate"
label-class-name="my-label"
:labelStyle="labelStyle"
>
<template slot="label"><i class="el-icon-user"></i>候选办理</template> <template slot="label"><i class="el-icon-user"></i>候选办理</template>
{{item.candidate}} {{ item.candidate }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item v-if="item.deleteReason" label-class-name="my-label" :labelStyle="labelStyle"> <el-descriptions-item
v-if="item.deleteReason"
label-class-name="my-label"
:labelStyle="labelStyle"
>
<template slot="label"><i class="el-icon-user"></i>驳回节点</template> <template slot="label"><i class="el-icon-user"></i>驳回节点</template>
{{getDeleteReason(item.deleteReason)}} {{ getDeleteReason(item.deleteReason) }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle"> <el-descriptions-item
label-class-name="my-label"
:labelStyle="labelStyle"
>
<template slot="label"><i class="el-icon-date"></i>接收时间</template> <template slot="label"><i class="el-icon-date"></i>接收时间</template>
{{item.startTime}} {{ item.startTime }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item v-if="item.endTime" label-class-name="my-label" :labelStyle="labelStyle"> <el-descriptions-item
v-if="item.endTime"
label-class-name="my-label"
:labelStyle="labelStyle"
>
<template slot="label"><i class="el-icon-date"></i>处理时间</template> <template slot="label"><i class="el-icon-date"></i>处理时间</template>
{{item.endTime}} {{ item.endTime }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item v-if="item.duration" label-class-name="my-label" :labelStyle="labelStyle"> <el-descriptions-item
v-if="item.duration"
label-class-name="my-label"
:labelStyle="labelStyle"
>
<template slot="label"><i class="el-icon-time"></i>处理耗时</template> <template slot="label"><i class="el-icon-time"></i>处理耗时</template>
{{getDurationDate(item.duration)}} {{ getDurationDate(item.duration) }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item v-if="item.message" label-class-name="my-label" :labelStyle="labelStyle"> <el-descriptions-item
<template slot="label"><i class="el-icon-tickets"></i>处理意见</template> v-if="item.message"
{{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-item>
</el-descriptions> </el-descriptions>
</el-card> </el-card>
@ -61,33 +96,89 @@
</div> </div>
<div class="drawerRight"> <div class="drawerRight">
<el-form <el-form
ref="form" :model="form" :rules="rules" label-width="100px" v-loading="loading"> ref="form"
<el-form-item label="所属项目"> :model="form"
{{ initData.projectName }} :rules="rules"
label-width="100px"
v-loading="loading"
>
<el-form-item label="项目单位">
{{ initData.parProjName }}
</el-form-item> </el-form-item>
<el-form-item label="发起单位"> <el-form-item label="项目名称">
{{ options.startDeptName }} {{ initData.projName }}
</el-form-item> </el-form-item>
<el-form-item label="发起人"> <el-form-item label="申请类型">
{{ options.startUserName }}
</el-form-item>
<el-form-item label="审批事项">
{{ title }} {{ title }}
</el-form-item> </el-form-item>
<el-form-item label="审批内容"> <el-form-item label="申请人">
<div v-for="(file,index ) in initData.files" :key="index"> <label
>{{ initData.createBy }}
<el-tag type="info" size="mini">{{
initData.createByDeptName
}}</el-tag></label
>
</el-form-item>
<el-form-item label="申请原因">
{{ initData.applyReason }}
</el-form-item>
<el-form-item label="申请附件" v-if="initData.applyFiles">
<div v-for="(file, index) in initData.applyFiles.split(',')" :key="index">
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
icon="el-icon-paperclip" icon="el-icon-paperclip"
@click="handledownload(file)" @click="handledownload(file)"
>{{file.substring(file.lastIndexOf('/')+1)}}</el-button >{{ file.substring(file.lastIndexOf("/") + 1) }}</el-button
> >
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="申请说明"> <el-form-item label="申请时间">
{{initData.remark}} {{ options.createTime }}
</el-form-item> </el-form-item>
<el-form-item label="使用时间" v-if="initData.useTime">
{{ parseTime(initData.useTime, "{y}-{m}-{d} {h}:{i}") }}
</el-form-item>
<el-divider content-position="left">申请明细信息</el-divider>
<el-table
ref="proProjectApplyDetail"
:data="initData.proProjectApplyDetailList"
>
<el-table-column
label="序号"
width="50"
type="index"
align="center"
></el-table-column>
<el-table-column label="申请明细" align="left">
<template slot-scope="scope">
<el-breadcrumb separator=">">
<el-breadcrumb-item>{{ scope.row.typeName }}</el-breadcrumb-item>
<el-breadcrumb-item class="assetsName">{{
scope.row.assetsName
}}</el-breadcrumb-item>
</el-breadcrumb>
</template>
</el-table-column>
<el-table-column
label="申请规格"
prop="assetsVersion"
width="180"
align="center"
v-if="showAssetsVersion"
></el-table-column>
<el-table-column label="申请数量" prop="number" width="180" align="center">
<template slot-scope="scope">
<label>{{ scope.row.number }} {{ scope.row.assetsUnit }}</label>
</template>
</el-table-column>
<el-table-column
label="使用说明"
prop="useReason"
align="center"
></el-table-column>
</el-table>
<el-divider content-position="left">申请办理信息</el-divider>
<el-form-item label="审批意见" prop="comment"> <el-form-item label="审批意见" prop="comment">
<el-input <el-input
type="textarea" type="textarea"
@ -112,17 +203,66 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<div style="text-align: center"> <div style="text-align: center">
<el-button icon="el-icon-s-custom" v-if="false" type="primary" plain size="mini">任务转办</el-button> <el-button
<el-button icon="el-icon-check" type="success" size="mini" @click="handlePass">审批通过</el-button> icon="el-icon-s-custom"
<el-button icon="el-icon-back" type="warning" size="mini" @click="handleBack">退回任务</el-button> plain
<el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回上级</el-button> size="mini"
>任务委派</el-button
>
<el-button
icon="el-icon-position"
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> </div>
</el-form> </el-form>
<div class="page-warning"> <div class="page-warning">
<p><strong style="color: #67C23A;">“审批通过”</strong> 操作后，代表您对当前任务满意，任务进入下一阶段。</p> <p>
<p><strong style="color: #E6A23C;">“退回任务”</strong> 操作后，代表您对当前任务不满意，任务进入您选择的阶段，或者直接退回给申请人重新申请。</p> <strong style="color: #606266">“任务委派”</strong>
<p><strong style="color: #F56C6C;">“驳回上级”</strong> 操作后，代表您对当前任务不满意，任务退回到上一阶段继续处理。</p> 操作后，由指定人跟进处理，处理完成后继续由您进行审批。
</p>
<p>
<strong style="color: #a3d3ff">“任务转办”</strong>
操作后，任务由指定人进行处理。
</p>
<p>
<strong style="color: #67c23a">“审批通过”</strong>
操作后，代表您对当前任务满意，任务进入下一阶段。
</p>
<p>
<strong style="color: #e6a23c">“退回任务”</strong>
操作后，代表您对当前任务不满意，任务进入您选择的阶段或退回给申请人重新申请。
</p>
<p>
<strong style="color: #f56c6c">“驳回上级”</strong>
操作后，代表您对当前任务不满意，任务退回到上一阶段继续处理。
</p>
</div> </div>
<!--占位使用...-->
<div style="width:100%;height:2px;"></div>
</div> </div>
</div> </div>
</el-drawer> </el-drawer>
@ -134,7 +274,9 @@ import store from "@/store";
import { flowXmlAndNode } from "@/api/flowable/definition"; import { flowXmlAndNode } from "@/api/flowable/definition";
import { CustomViewer as BpmnViewer } from "@/components/customBpmn"; import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
import { complete, rejectTask, returnTask, returnList } from "@/api/flowable/todo"; import { complete, rejectTask, returnTask, returnList } from "@/api/flowable/todo";
import {findCommentByProcInsId,findFormDatasByProcInsId} from "@/api/flowable/businessKey"; import { findCommentByProcInsId } from "@/api/flowable/businessKey";
import { getProjectApply } from "@/api/project/projectApply";
export default { export default {
components: {}, components: {},
props: { props: {
@ -150,7 +292,7 @@ export default {
loading: false, loading: false,
// 标题 // 标题
title: "", title: "",
jdtitle:"", jdtitle: "",
// 表单参数 // 表单参数
form: {}, form: {},
// 表单校验 // 表单校验
@ -164,20 +306,17 @@ export default {
}, },
], ],
}, },
queryParams:{
nickName:null,
phonenumber:null,
},
bpmnViewer: null, bpmnViewer: null,
options: {}, options: {},
flowRecordList: [], flowRecordList: [],
showjd:false, showjd: false,
//label样式 //label样式
labelStyle: { width: "180px" }, labelStyle: { width: "160px" },
initData:{}, initData: {},
returnTaskList: [], // 回退列表数据 returnTaskList: [], // 回退列表数据
returnTask:false, returnTask: false,
returnTaskBtn:false returnTaskBtn: false,
showAssetsVersion: false,
}; };
}, },
computed: {}, computed: {},
@ -190,19 +329,21 @@ export default {
handlePass() { handlePass() {
this.$refs["form"].validate((valid) => { this.$refs["form"].validate((valid) => {
if (valid) { if (valid) {
this.$confirm('是否确认审批通过当前流程申请?', '提示', { this.$confirm("是否确认审批通过当前流程申请?", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}).then(() => { })
this.loading=true; .then(() => {
complete(this.form).then(res => { this.loading = true;
complete(this.form).then((res) => {
this.$modal.msgSuccess("任务审批成功"); this.$modal.msgSuccess("任务审批成功");
this.loading = false; this.loading = false;
//关闭并刷新列表 //关闭并刷新列表
this.$refs.drawer.closeDrawer(); this.$refs.drawer.closeDrawer();
}); });
}).catch(() => { })
.catch(() => {
console.log("取消操作"); console.log("取消操作");
}); });
} }
@ -212,82 +353,86 @@ export default {
handleReject() { handleReject() {
this.$refs["form"].validate((valid) => { this.$refs["form"].validate((valid) => {
if (valid) { if (valid) {
this.$confirm('是否确认审批驳回当前流程申请?', '提示', { this.$confirm("是否确认审批驳回当前流程申请?", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}).then(() => { })
this.loading=true; .then(() => {
rejectTask(this.form).then(res => { this.loading = true;
rejectTask(this.form).then((res) => {
this.$modal.msgSuccess("任务驳回成功"); this.$modal.msgSuccess("任务驳回成功");
this.loading = false; this.loading = false;
//关闭并刷新列表 //关闭并刷新列表
this.$refs.drawer.closeDrawer(); this.$refs.drawer.closeDrawer();
}); });
}).catch(() => { })
.catch(() => {
console.log("取消操作"); console.log("取消操作");
}); });
} }
}); });
}, },
/** 退回任务 */ /** 退回任务 */
handleBack(){ handleBack() {
if(!this.returnTask){ if (!this.returnTask) {
this.returnTask=true; this.returnTask = true;
this.$modal.msgWarning("请选择退回节点"); this.$modal.msgWarning("请选择退回节点");
return; return;
} }
this.$refs["form"].validate((valid) => { this.$refs["form"].validate((valid) => {
if (valid) { if (valid) {
if(!this.form.targetKey){ if (!this.form.targetKey) {
this.$modal.msgWarning("请选择退回节点"); this.$modal.msgWarning("请选择退回节点");
return; return;
} }
this.$confirm('是否确认退回当前流程申请?', '提示', { this.$confirm("是否确认退回当前流程申请?", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}).then(() => { })
this.loading=true; .then(() => {
returnTask(this.form).then(res => { this.loading = true;
returnTask(this.form).then((res) => {
this.$modal.msgSuccess("任务退回成功"); this.$modal.msgSuccess("任务退回成功");
this.loading = false; this.loading = false;
//关闭并刷新列表 //关闭并刷新列表
this.$refs.drawer.closeDrawer(); this.$refs.drawer.closeDrawer();
}); });
}).catch(() => { })
.catch(() => {
console.log("取消操作"); console.log("取消操作");
}); });
} }
}); });
}, },
initReturnList(){ initReturnList() {
returnList(this.form).then(res => { returnList(this.form).then((res) => {
this.returnTaskList = res.data; this.returnTaskList = res.data;
//退回节点>1时，可显示退回按钮 //退回节点>1时，可显示退回按钮
if(res.data.length>1){ if (res.data.length > 1) {
this.returnTaskBtn=true; this.returnTaskBtn = true;
} }
}) });
}, },
initFormDate(){ initFormDate() {
this.form.taskId = this.options.taskId; let formData = {
this.form.taskName = this.options.taskName; taskId: this.options.taskId,
this.form.userId = store.getters.userId; procInsId: this.options.procInsId,
this.form.deployId = this.options.deployId; instanceId: this.options.procInsId,
this.form.procInsId = this.options.procInsId; deployId: this.options.deployId,
this.form.instanceId = this.options.procInsId; executionId: this.options.procInsId,
this.form.executionId = this.options.procInsId; };
this.returnTask=false; this.form = formData;
this.returnTaskBtn=false; this.returnTask = false;
this.returnTaskBtn = false;
this.initReturnList(); this.initReturnList();
}, },
setIcon(row) { setIcon(row) {
if (row.endTime) { if (row.endTime) {
if(row.commentResult=="驳回") if (row.commentResult == "驳回") {
{
return "el-icon-close"; return "el-icon-close";
}else{ } else {
return "el-icon-check"; return "el-icon-check";
} }
} else { } else {
@ -296,10 +441,9 @@ export default {
}, },
setColor(row) { setColor(row) {
if (row.endTime) { if (row.endTime) {
if(row.commentResult=="驳回") if (row.commentResult == "驳回") {
{
return "#f56c6c"; return "#f56c6c";
}else{ } else {
return "#2bc418"; return "#2bc418";
} }
} else { } else {
@ -318,26 +462,33 @@ export default {
}, },
show(options) { show(options) {
this.options = options; this.options = options;
//物资设备类需要输入规格
if (options.category == 1) {
this.showAssetsVersion = true;
} else {
this.showAssetsVersion = false;
}
this.title = options.procDefName; this.title = options.procDefName;
this.deptName = options.startDeptName; this.deptName = options.startDeptName;
this.nickName = options.startUserName; this.nickName = options.startUserName;
this.onOpen = true; this.onOpen = true;
this.showjd = false; this.showjd = false;
this.form = {};
this.initFormDate(); this.initFormDate();
if(options.finishTime==null){ if (options.finishTime == null) {
this.jdtitle="进行中"; this.jdtitle = "进行中";
this.showjd=true; this.showjd = true;
}else if(options.finishTime!=null && options.assigneeId==null){ } else if (options.finishTime != null && options.assigneeId == null) {
this.jdtitle="已撤销"; this.jdtitle = "已撤销";
}else{ } else {
this.jdtitle="已完成"; this.jdtitle = "已完成";
} }
this.getFlowRecordList(options.procInsId, options.deployId); this.getFlowRecordList(options.procInsId, options.deployId);
this.getFormDatasList(options.procInsId, options.deployId); this.getFormDatasList(options.businessKey);
flowXmlAndNode({ procInsId:options.procInsId, deployId: options.deployId }).then((res) => { flowXmlAndNode({ procInsId: options.procInsId, deployId: options.deployId }).then(
(res) => {
this.initFlowImage(res.data); this.initFlowImage(res.data);
}); }
);
}, },
async initFlowImage(data) { async initFlowImage(data) {
const self = this; const self = this;
@ -349,8 +500,8 @@ export default {
await self.bpmnViewer.importXML(data.xmlData); await self.bpmnViewer.importXML(data.xmlData);
// 自适应 // 自适应
self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto"); self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
if (data.nodeData !==undefined && data.nodeData.length > 0 ) { if (data.nodeData !== undefined && data.nodeData.length > 0) {
self.fillColor(data.nodeData) self.fillColor(data.nodeData);
} }
} catch (err) { } catch (err) {
console.error(err.message, err.warnings); console.error(err.message, err.warnings);
@ -365,148 +516,178 @@ export default {
// }).catch(res => { // }).catch(res => {
// this.$message.error("数据异常，请联系管理员..."); // this.$message.error("数据异常，请联系管理员...");
// }) // })
const that = this const that = this;
const params = {procInsId: procInsId} const params = { procInsId: procInsId };
findCommentByProcInsId(params).then(res => { findCommentByProcInsId(params)
.then((res) => {
that.flowRecordList = res.data; that.flowRecordList = res.data;
}).catch(res => {
this.$message.error("数据异常，请联系管理员...");
}) })
.catch((res) => {
this.$message.error("数据异常，请联系管理员...");
});
}, },
/** 流程表单数据 */ /** 流程表单数据 */
getFormDatasList(procInsId, deployId) { getFormDatasList(businessKey) {
// const that = this getProjectApply(businessKey)
// const params = {procInsId: procInsId, deployId: deployId} .then((res) => {
// flowRecord(params).then(res => { if (res.code == 200) {
// 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 = res.data;
this.initData.files = res.data.files.split(','); } else {
}).catch(res => {
this.$message.error("数据异常，请联系管理员..."); this.$message.error("数据异常，请联系管理员...");
}
}) })
.catch((res) => {
this.$message.error("数据异常，请联系管理员...");
});
}, },
// 设置高亮颜色的 // 设置高亮颜色的
fillColor(nodeData) { fillColor(nodeData) {
const canvas = this.bpmnViewer.get('canvas') const canvas = this.bpmnViewer.get("canvas");
this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => { this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach((n) => {
const completeTask = nodeData.find(m => m.key === n.id) const completeTask = nodeData.find((m) => m.key === n.id);
const todoTask = nodeData.find(m => !m.completed) const todoTask = nodeData.find((m) => !m.completed);
const endTask = nodeData[nodeData.length - 1] const endTask = nodeData[nodeData.length - 1];
if (n.$type === 'bpmn:UserTask') { if (n.$type === "bpmn:UserTask") {
if (completeTask) { if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') canvas.addMarker(
n.outgoing?.forEach(nn => { n.id,
const targetTask = nodeData.find(m => m.key === nn.targetRef.id) completeTask.completed ? "highlight" : "highlight-todo"
);
n.outgoing?.forEach((nn) => {
const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
if (targetTask) { if (targetTask) {
if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){ if (
canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo') todoTask &&
canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo') completeTask.key === todoTask.key &&
}else { !todoTask.completed
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo') ) {
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo') canvas.addMarker(
nn.id,
todoTask.completed ? "highlight" : "highlight-todo"
);
canvas.addMarker(
nn.targetRef.id,
todoTask.completed ? "highlight" : "highlight-todo"
);
} else {
canvas.addMarker(
nn.id,
targetTask.completed ? "highlight" : "highlight-todo"
);
canvas.addMarker(
nn.targetRef.id,
targetTask.completed ? "highlight" : "highlight-todo"
);
} }
} }
}) });
} }
} }
// 排他网关 // 排他网关
else if (n.$type === 'bpmn:ExclusiveGateway') { else if (n.$type === "bpmn:ExclusiveGateway") {
if (completeTask) { if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') canvas.addMarker(
n.outgoing?.forEach(nn => { n.id,
const targetTask = nodeData.find(m => m.key === nn.targetRef.id) completeTask.completed ? "highlight" : "highlight-todo"
);
n.outgoing?.forEach((nn) => {
const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
if (targetTask) { if (targetTask) {
canvas.addMarker(
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo') nn.id,
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo') targetTask.completed ? "highlight" : "highlight-todo"
);
canvas.addMarker(
nn.targetRef.id,
targetTask.completed ? "highlight" : "highlight-todo"
);
} }
});
})
} }
} }
// 并行网关 // 并行网关
else if (n.$type === 'bpmn:ParallelGateway') { else if (n.$type === "bpmn:ParallelGateway") {
if (completeTask) { if (completeTask) {
canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo') canvas.addMarker(
n.outgoing?.forEach(nn => { n.id,
const targetTask = nodeData.find(m => m.key === nn.targetRef.id) completeTask.completed ? "highlight" : "highlight-todo"
);
n.outgoing?.forEach((nn) => {
const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
if (targetTask) { if (targetTask) {
canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo') canvas.addMarker(
canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo') nn.id,
targetTask.completed ? "highlight" : "highlight-todo"
);
canvas.addMarker(
nn.targetRef.id,
targetTask.completed ? "highlight" : "highlight-todo"
);
} }
}) });
} }
} } else if (n.$type === "bpmn:StartEvent") {
else if (n.$type === 'bpmn:StartEvent') { n.outgoing.forEach((nn) => {
n.outgoing.forEach(nn => { const completeTask = nodeData.find((m) => m.key === nn.targetRef.id);
const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
if (completeTask) { if (completeTask) {
canvas.addMarker(nn.id, 'highlight') canvas.addMarker(nn.id, "highlight");
canvas.addMarker(n.id, 'highlight') canvas.addMarker(n.id, "highlight");
return return;
} }
}) });
} } else if (n.$type === "bpmn:EndEvent") {
else if (n.$type === 'bpmn:EndEvent') {
if (endTask.key === n.id && endTask.completed) { if (endTask.key === n.id && endTask.completed) {
canvas.addMarker(n.id, 'highlight') canvas.addMarker(n.id, "highlight");
return return;
} }
} }
}) });
}, },
getDurationDate(val){ getDurationDate(val) {
// 计算出相差天数 // 计算出相差天数
let days = Math.floor(val / (24 * 3600 * 1000)) let days = Math.floor(val / (24 * 3600 * 1000));
// 计算出小时数 // 计算出小时数
let leave1 = val % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数 let leave1 = val % (24 * 3600 * 1000); // 计算天数后剩余的毫秒数
let hours = Math.floor(leave1 / (3600 * 1000)) let hours = Math.floor(leave1 / (3600 * 1000));
// 计算相差分钟数 // 计算相差分钟数
let leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数 let leave2 = leave1 % (3600 * 1000); // 计算小时数后剩余的毫秒数
let minutes = Math.floor(leave2 / (60 * 1000)) let minutes = Math.floor(leave2 / (60 * 1000));
// 计算相差秒数 // 计算相差秒数
let leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数 let leave3 = leave2 % (60 * 1000); // 计算分钟数后剩余的毫秒数
let seconds = Math.round(leave3 / 1000) let seconds = Math.round(leave3 / 1000);
if(days>0){ if (days > 0) {
if(days<10) days = "0"+days; if (days < 10) days = "0" + days;
if(hours<10) hours = "0"+hours; if (hours < 10) hours = "0" + hours;
if(minutes<10) minutes = "0"+minutes; if (minutes < 10) minutes = "0" + minutes;
if(seconds<10) seconds = "0"+seconds; if (seconds < 10) seconds = "0" + seconds;
return days + '天' + hours + '小时' + minutes + '分钟' + seconds + '秒'; return days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
} }
if(hours>0){ if (hours > 0) {
if(hours<10) hours = "0"+hours; if (hours < 10) hours = "0" + hours;
if(minutes<10) minutes = "0"+minutes; if (minutes < 10) minutes = "0" + minutes;
if(seconds<10) seconds = "0"+seconds; if (seconds < 10) seconds = "0" + seconds;
return hours + '小时' + minutes + '分钟' + seconds + '秒'; return hours + "小时" + minutes + "分钟" + seconds + "秒";
} }
if(minutes>0){ if (minutes > 0) {
if(minutes<10) minutes = "0"+minutes; if (minutes < 10) minutes = "0" + minutes;
if(seconds<10) seconds = "0"+seconds; if (seconds < 10) seconds = "0" + seconds;
return minutes + '分钟' + seconds + '秒'; return minutes + "分钟" + seconds + "秒";
} }
if(seconds>0){ if (seconds > 0) {
if(seconds<10) seconds = "0"+seconds; if (seconds < 10) seconds = "0" + seconds;
return seconds + '秒'; return seconds + "秒";
} }
}, },
handledownload(url){ handledownload(url) {
this.$download.resource(url); this.$download.resource(url);
}, },
getDeleteReason(val){ getDeleteReason(val) {
val = val.replace("Change activity to ",""); val = val.replace("Change activity to ", "");
let flowRecordList = this.flowRecordList; let flowRecordList = this.flowRecordList;
for(let i=0;i<flowRecordList.length;i++){ for (let i = 0; i < flowRecordList.length; i++) {
if(flowRecordList[i].taskDefKey==val){ if (flowRecordList[i].taskDefKey == val) {
console.log(i); console.log(i);
return "驳回至"+flowRecordList[i].taskName; return "驳回至" + flowRecordList[i].taskName;
} }
} }
}, },
@ -514,7 +695,7 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.app-approveDrawer{ .app-approveDrawer {
.drawer { .drawer {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -522,7 +703,7 @@ export default {
padding-right: 20px; padding-right: 20px;
padding-bottom: 20px; padding-bottom: 20px;
.drawerLeft { .drawerLeft {
width: 60%; width: 50%;
min-width: 280px; min-width: 280px;
height: 100%; height: 100%;
float: left; float: left;
@ -531,27 +712,26 @@ export default {
padding-right: 20px; padding-right: 20px;
.bjs-powered-by { .bjs-powered-by {
display: none !important; display: none !important;
}
} .maskLayer {
.maskLayer {
width: 100%; width: 100%;
height: 100px; height: 100px;
position: absolute; position: absolute;
z-index: 9999; z-index: 9999;
top: 77px; top: 77px;
} }
} }
.drawerRight { .drawerRight {
width: 40%; width: 50%;
min-width: 400px; min-width: 400px;
height: 100%; height: 100%;
float: left; float: left;
padding-left: 20px; padding-left: 20px;
} }
} }
.containers { .containers {
width: 100%; width: 100%;
height: 150px; height: 100px;
.canvas { .canvas {
width: 100%; width: 100%;
height: 100px; height: 100px;
@ -565,18 +745,18 @@ export default {
.load { .load {
margin-right: 10px; margin-right: 10px;
} }
.el-form-item__label{ .el-form-item__label {
font-size: 13px; font-size: 13px;
} }
.djs-palette{ .djs-palette {
left: 0px!important; left: 0px !important;
top: 0px; top: 0px;
border-top: none; border-top: none;
} }
.djs-container svg { .djs-container svg {
min-height: 150px; min-height: 100px;
} }
.highlight.djs-shape .djs-visual > :nth-child(1) { .highlight.djs-shape .djs-visual > :nth-child(1) {
@ -618,9 +798,16 @@ export default {
padding: 8px 16px; padding: 8px 16px;
background-color: #f0f9eb; background-color: #f0f9eb;
border-radius: 4px; border-radius: 4px;
border-left: 5px solid #67C23A; border-left: 5px solid #67c23a;
margin: 20px 0;
font-size: 13px; font-size: 13px;
margin-top: 30px; margin: 20px 0;
}
.assetsName .el-breadcrumb__inner {
font-weight: 800 !important;
color: #409eff !important;
}
.el-divider .el-divider__text {
color: #000000;
font-weight: 600;
} }
</style> </style>

10
yanzhu-ui/src/views/flowable/task/todo/index.vue
View File

@ -137,7 +137,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="接收时间" align="center" prop="createTime" width="160" /> <el-table-column label="接收时间" align="center" prop="createTime" width="160" />
<el-table-column label="处理耗时" align="center" prop="duration" width="150"> <el-table-column label="办理耗时" align="center" prop="duration" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
{{getDurationDate(scope.row.duration)}} {{getDurationDate(scope.row.duration)}}
</template> </template>
@ -250,11 +250,11 @@ export default {
}, },
// 跳转到处理页面 // 跳转到处理页面
handleProcess(row) { handleProcess(row) {
//if (row.taskName == "提交申请") { if (row.taskName == "提交申请") {
this.$refs.editTaskDrawer.show(row); this.$refs.editTaskDrawer.show(row);
//} else { } else {
// this.$refs.approveDrawer.show(row); this.$refs.approveDrawer.show(row);
//} }
}, },
// 取消按钮 // 取消按钮
cancel() { cancel() {