<template>
|
<div class="app-container">
|
<div v-loading="loading">
|
<div class="top">
|
<div class="project-title">
|
<h2>项目名称：{{detailData.projectName}}</h2>
|
</div>
|
<div class="project-info">
|
<div class="project-info-item">流程名称：{{queryParams.processName}}</div>
|
<div class="project-info-item">项目代码：{{detailData.projectCode}}</div>
|
<div class="project-info-item">
|
<div style="color: black">
|
<div>中预资金</div>
|
<div>市重点项目</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="search-warp">
|
<div @click="changeTab(1, 'all')" :class="{'item-warm': true, 'all-color': true, 'active': 1 === selectTabId}">全部事项<span v-if="detailData && detailData.statistics">（{{detailData.statistics.totalTaskNum}}）</span></div>
|
<div @click="changeTab(2, 'todo')" :class="{'item-warm': true, 'todo-color': true, 'active': 2 === selectTabId}">待办事项<span v-if="detailData && detailData.statistics">（{{detailData.statistics.todoTaskNum}}）</span></div>
|
<div @click="changeTab(4, 'remaining')" :class="{'item-warm': true, 'remaining-color': true, 'active': 4 === selectTabId}">剩余事项<span v-if="detailData && detailData.statistics">（{{detailData.statistics.remainingTaskNum}}）</span></div>
|
<div @click="changeTab(5, 'timely')" :class="{'item-warm': true, 'timely-color': true, 'active': 5 === selectTabId}">按时完成<span v-if="detailData && detailData.statistics">（{{detailData.statistics.timelyFinishedTaskNum}}）</span></div>
|
<div @click="changeTab(6, 'overtime')" :class="{'item-warm': true, 'overtime-color': true, 'active': 6 === selectTabId}">超时事项<span v-if="detailData && detailData.statistics">（{{detailData.statistics.overtimeTaskNum}}）</span></div>
|
<div @click="changeTab(3, 'wait')" :class="{'item-warm': true, 'wait-color': true, 'active': 3 === selectTabId}">容缺事项<span v-if="detailData && detailData.statistics">（{{detailData.statistics.waitTaskNum}}）</span></div>
|
<div @click="changeTab(7, 'jump')" :class="{'item-warm': true, 'willOvertime-color': true, 'active': 7 === selectTabId}">跳过事项<span v-if="detailData && detailData.statistics">（{{detailData.statistics.jumpTaskNum}}）</span></div>
|
<div @click="changeTab(8, 'urge')" :class="{'item-warm': true, 'urge-color': true, 'active': 8 === selectTabId}">督办事项（0）</div>
|
</div>
|
<div style="display: flex;justify-content: center;align-items: center;margin-top: 20px; position: relative">
|
<el-form :inline="true" :model="queryParams" class="demo-form-inline">
|
<el-form-item label="任务名称">
|
<el-input v-model="queryParams.taskName" clearable @clear="search" placeholder="任务名称"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="search">查询</el-button>
|
</el-form-item>
|
</el-form>
|
<div style="position: absolute; right: 0; top: 0">
|
<el-button @click="openProcessImg" v-loading="imgLoading" type="primary">流程图</el-button>
|
<el-button @click="openRecord" type="info" v-loading="recordLoading">流程日志</el-button>
|
</div>
|
</div>
|
<div class="table">
|
<el-table
|
v-loading="tableLoading"
|
:data="taskList"
|
border
|
style="width: 100%">
|
<el-table-column
|
prop="taskName"
|
label="任务名称"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="promoterUnitName"
|
label="责任单位"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="promoterName"
|
label="责任人及联系电话"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="handlerUnitName"
|
label="处理单位"
|
:formatter="unitFormatter"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="handlerName"
|
label="处理人及联系电话"
|
:formatter="candidateFormatter"
|
>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="taskStatus"
|
label="任务状态"
|
>
|
</el-table-column>
|
<el-table-column
|
fixed="right"
|
label="操作"
|
align="center"
|
width="140">
|
<template slot-scope="scope">
|
<el-button v-if="scope.row.taskStatus !== '未开始'" @click="goToProcessDetail(scope.row)" type="text" size="small">查看</el-button>
|
<el-button v-if="showHandle(scope.row)" @click="goToDo(scope.row)" type="text" size="small">办理</el-button>
|
<el-button v-if = "scope.row.taskStatus === '待办'" @click="openSupervise(scope.row)" type="text" size="small">督办</el-button>
|
<el-button v-show = "scope.row.taskStatus === '已完成' || scope.row.taskStatus === '跳过' || scope.row.taskStatus === '容缺'" v-hasPermi="['task:edit']" @click="openEditTask(scope.row)" type="text" size="small">修改</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="table" style="margin-top: 15px">
|
<el-pagination
|
@size-change="sizeChange"
|
@current-change="pageChange"
|
:current-page.sync="queryParams.currentPage"
|
:page-sizes="[5, 10, 20]"
|
:page-size="100"
|
layout="sizes, prev, pager, next"
|
:total="total">
|
</el-pagination>
|
</div>
|
</div>
|
|
<el-dialog
|
:title="`${this.queryParams.processName}：流程图`"
|
:visible.sync="processImgShow"
|
:fullscreen="true"
|
:close-on-click-modal="false"
|
:destroy-on-close="true"
|
>
|
<div>
|
<bpmn-viewer :flowData="flowData" :procInsId="queryParams.processInsId"/>
|
</div>
|
</el-dialog>
|
|
<el-drawer
|
:title="`${this.queryParams.processName}：流程日志`"
|
:visible.sync="processRecordShow"
|
direction="ltr"
|
:modal="false"
|
size="800px"
|
>
|
<log-view style="padding: 10px 20px" :log-list="logList"/>
|
</el-drawer>
|
|
<el-dialog :visible.sync="superviseShow" width="1000px" title="督办" append-to-body>
|
<el-form ref="superviseForm" :model="superviseForm" :rules="superviseRules" label-width="80px">
|
<el-form-item label="督办内容" prop="content">
|
<el-input type="textarea" v-model="superviseForm.content"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="superviseShow = false">取 消</el-button>
|
<el-button type="primary" @click="submitSupervise">确 定</el-button>
|
</div>
|
</el-dialog>
|
|
<edit-task :task-id="editTaskId" :open="editTaskOpen" @close="editTaskOpen = false; editTaskId = ''"/>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getProjectProcessDetail,
|
getProjectProcessDetailTaskList,
|
getTaskIsAuditing, taskSupervise
|
} from "@/api/projectProcess/projectProcess";
|
import {flowXmlAndNode} from "@/api/flowable/definition";
|
import BpmnViewer from '@/components/Process/viewer';
|
import LogView from "@/views/projectProcess/components/LogView";
|
import EditTask from "@/views/projectProcess/components/EditTask";
|
import {flowRecord} from "@/api/flowable/finished";
|
import {editProject} from "@/api/projectEngineering/projectInfo";
|
import {getProjectProcessLog} from "@/api/flowLog/flowLog";
|
|
export default {
|
name: "Detail",
|
components: {
|
BpmnViewer,
|
LogView,
|
EditTask
|
},
|
data() {
|
return {
|
editTaskId: '',
|
editTaskOpen: false,
|
logList: [], // 流程日志
|
processRecordShow: false, // 流转记录显示
|
flowRecordList: [], // 流程流转数据
|
recordLoading: false, // 流转记录加载
|
// 模型xml数据
|
flowData: {},
|
processImgShow: false, // 流程图显示
|
imgLoading: false, // 流程图加载
|
loading: false,
|
superviseShow: false,
|
tableLoading: false,
|
detailData: {},
|
taskList: [],
|
total: 0,
|
selectTabId: 2,
|
superviseForm: {
|
taskId: null,
|
projectId: null,
|
processInsId: null,
|
receiverIds: null,
|
receiverType: null,
|
superviseType: null,
|
content: '',
|
},
|
queryParams: {
|
taskName: '',
|
taskType: 'todo',
|
pageSize: 5,
|
currentPage: 1,
|
projectId: null,
|
processDefId: null,
|
processInsId: null,
|
deployId: null,
|
processName: '' // 流程名称
|
},
|
superviseRules: {
|
content: [{required: true, message: '督办内容不能为空', trigger: 'blur'}]
|
}
|
}
|
},
|
mounted() {
|
console.log(this.$route.query, "参数")
|
let params = JSON.parse(sessionStorage.getItem("projectProDetail"))
|
console.log(params, "参数")
|
if (!params || ! params.projectId) {
|
this.queryParams.projectId = this.$route.query.projectId
|
this.queryParams.processDefId = this.$route.query.processDefId
|
this.queryParams.processInsId = this.$route.query.processInsId
|
this.queryParams.deployId = this.$route.query.deployId
|
this.queryParams.processName = this.$route.query.processName
|
if (this.$route.query.selectTabId) {
|
this.selectTabId = parseInt(this.$route.query.selectTabId)
|
}
|
sessionStorage.setItem("projectProDetail", JSON.stringify(this.queryParams))
|
} else {
|
this.queryParams = params
|
}
|
this.loading = true
|
this.changeTab(this.selectTabId, this.transEventType(this.selectTabId))
|
this.getProjectProcessInfo()
|
},
|
methods: {
|
// 打开编辑任务
|
openEditTask(row) {
|
this.editTaskOpen = true
|
this.editTaskId = row.taskId
|
},
|
transEventType(selectTabId) {
|
if (selectTabId == 1) {
|
return "all"
|
} else if (selectTabId == 2) {
|
return "todo"
|
} else if (selectTabId == 3) {
|
return "wait"
|
} else if (selectTabId == 4) {
|
return "remaining"
|
} else if (selectTabId == 5) {
|
return "timely"
|
} else if (selectTabId == 6) {
|
return "overtime"
|
} else if (selectTabId == 7) {
|
return "jump"
|
} else if (selectTabId == 8) {
|
return "urge"
|
}
|
},
|
submitSupervise() {
|
this.$refs["superviseForm"].validate(valid => {
|
if (valid) {
|
taskSupervise(this.superviseForm).then((res) => {
|
this.superviseShow = false;
|
this.$message.success("操作成功");
|
})
|
}
|
});
|
},
|
openSupervise(row){
|
this.superviseForm.content ='';
|
this.superviseForm.taskId = row.taskId;
|
this.superviseForm.projectId = this.$route.query.projectId;
|
this.superviseForm.processInsId = row.processInsId;
|
this.superviseForm.superviseType = "SUPERVISE";
|
this.superviseForm.receiverType = row.handlerType;
|
if (row.handlerType === 'USER') {
|
this.superviseForm.receiverIds = row.handlerId;
|
} else if (row.handlerType === 'DEPT') {
|
this.superviseForm.receiverIds = row.handlerUnitId;
|
} else if (row.handlerType === 'ROLE') {
|
this.superviseForm.receiverIds = row.handlerUnitId;
|
}
|
this.superviseShow = true
|
},
|
setIcon(val) {
|
if (val) {
|
return "el-icon-check";
|
} else {
|
return "el-icon-time";
|
}
|
},
|
setColor(val) {
|
if (val) {
|
return "#2bc418";
|
} else {
|
return "#b3bdbb";
|
}
|
},
|
openRecord() {
|
this.getFlowLogList(this.queryParams.processInsId);
|
},
|
openProcessImg() {
|
this.imgLoading = true
|
flowXmlAndNode({processInsId:this.queryParams.processInsId,deployId:this.queryParams.deployId}).then(res => {
|
this.imgLoading = false
|
this.processImgShow = true
|
this.$nextTick(() => {
|
this.flowData = res.data;
|
})
|
})
|
},
|
/** 流程流转记录 */
|
getFlowRecordList(procInsId) {
|
const params = {procInsId: procInsId}
|
this.recordLoading = true
|
flowRecord(params).then(res => {
|
this.flowRecordList = res.data.flowList;
|
this.recordLoading = false
|
this.processRecordShow = true
|
})
|
},
|
getFlowLogList(procInsId) {
|
const params = {processInsId: procInsId, projectId: this.queryParams.projectId}
|
this.recordLoading = true
|
getProjectProcessLog(params).then(res => {
|
this.logList = res.data;
|
this.recordLoading = false
|
this.processRecordShow = true
|
})
|
},
|
unitFormatter(row) {
|
if (row.taskStatus != '已完成' && row.taskStatus != '跳过' && row.taskStatus != '超时已完成') {
|
return null
|
}
|
return row.handlerUnitName.join("、")
|
},
|
candidateFormatter(row) {
|
if (row.taskStatus != '已完成' && row.taskStatus != '跳过' && row.taskStatus != '超时已完成') {
|
return null
|
}
|
return row.handlerName.join("、")
|
// if (row.handlerType === 'USER') {
|
// return row.handlerName.join('、')
|
// } else if (row.handlerType === 'DEPT') {
|
// return row.handlerUnitName.join('、')
|
// } else if (row.handlerType === 'ROLE') {
|
// return row.handlerUnitName.join('、')
|
// }
|
},
|
finalFinishedFormatter(row) {
|
// 不是已完成的状态没有实际处理人，已完成的状态只有一个人
|
if (row.taskStatus !== '已完成') {
|
return null
|
} else {
|
return row.actualHandlerUserName
|
}
|
},
|
showHandle(row) {
|
if (row.taskStatus === '待办' || row.taskStatus === '挂起' || row.taskStatus === '容缺' || row.taskStatus === '超时未完成') {
|
if (row.handlerType === "USER") {
|
return row.handlerId.indexOf(this.$store.state.user.id) !== -1
|
} else if (row.handlerType === "DEPT") {
|
return row.handlerUnitId.indexOf(this.$store.state.user.deptId) !== -1 || row.handlerUnitId.some(id => this.$store.state.user.childDeptIds.indexOf(id) !== -1)
|
} else if (row.handlerType === "ROLE") {
|
return row.handlerUnitId.some(roleId => this.$store.state.user.roleIds.indexOf(roleId) !== -1)
|
}
|
} else {
|
return false
|
}
|
},
|
goToDo(row) {
|
if (row.taskStatus === '容缺') {
|
this.$router.push({
|
path: '/flowable/task/myProcess/send/index',
|
query: {
|
deployId: row.deployId,
|
procDefId: row.processDefId,
|
procInsId: row.processInsId,
|
processName: row.taskName,
|
flowName: this.queryParams.processName,
|
projectName: this.detailData.projectName,
|
taskId: row.taskId,
|
showAuditing: false,
|
projectId: this.queryParams.projectId,
|
isWait: true,
|
goBackParams: this.queryParams
|
}
|
})
|
} else {
|
// 查询该任务是否配置了需要审批
|
let params = {
|
processDefId: row.processDefId,
|
taskId: row.taskId
|
}
|
getTaskIsAuditing(params).then(res => {
|
console.log("row",row)
|
this.$router.push({
|
path: '/flowable/task/myProcess/send/index',
|
query: {
|
deployId: row.deployId,
|
procDefId: row.processDefId,
|
procInsId: row.processInsId,
|
processName: row.taskName,
|
flowName: this.queryParams.processName,
|
projectName: this.detailData.projectName,
|
taskId: row.taskId,
|
showAuditing: res.data,
|
projectId: this.queryParams.projectId,
|
isWait: false,
|
goBackParams: this.queryParams
|
}
|
})
|
})
|
}
|
},
|
goToProcessDetail(row) {
|
this.$router.push({ path: '/flowable/task/myProcess/detail/index',
|
query: {
|
projectName: this.detailData.projectName,
|
flowName: this.queryParams.processName,
|
taskName: row.taskName,
|
procInsId: row.processInsId,
|
deployId: row.deployId,
|
taskId: row.taskId,
|
projectId: this.queryParams.projectId,
|
goBackParams: this.queryParams
|
}})
|
},
|
search() {
|
this.queryParams.currentPage = 1;
|
this.tableLoading = true
|
this.getList()
|
},
|
sizeChange(pageSize) {
|
this.tableLoading = true
|
this.queryParams.pageSize = pageSize;
|
this.getList()
|
},
|
pageChange(pageNum) {
|
this.tableLoading = true
|
this.queryParams.currentPage = pageNum;
|
this.getList()
|
},
|
getList() {
|
this.tableLoading = true
|
// 获取任务列表
|
getProjectProcessDetailTaskList(this.queryParams).then(res => {
|
this.tableLoading =false
|
this.taskList = res.data
|
this.total = res.total
|
})
|
},
|
isProject(id) {
|
const numericPattern = /^\d+(\.\d+)?$/;
|
return numericPattern.test(id)
|
},
|
// 查询详情
|
getProjectProcessInfo() {
|
const projectType = this.isProject(this.queryParams.projectId) ? "PROJECT" : "ENGINEERING"
|
const param = {
|
projectId: this.queryParams.projectId,
|
processDefId: this.queryParams.processDefId,
|
projectType: projectType
|
}
|
getProjectProcessDetail(param).then(res => {
|
this.detailData = res.data
|
this.loading = false
|
})
|
},
|
changeTab(id, event) {
|
this.selectTabId = id
|
this.queryParams.taskType = event
|
this.queryParams.currentPage = 1;
|
this.getList()
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.project-title {
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
}
|
.project-info {
|
display: flex;
|
color: #a9a8a8;
|
}
|
.project-info-item {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.search-warp {
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
margin-top: 20px;
|
}
|
|
.item-warm {
|
width: 134px;
|
height: 60px;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
border-radius: 20px;
|
margin: 0 20px;
|
transition: transform 0.3s ease; /* 添加过渡效果 */
|
}
|
.item-warm:hover {
|
cursor: pointer;
|
transform: translateY(-10px);
|
}
|
.all-color {
|
background-color: rgb(180, 253, 255);
|
}
|
.todo-color {
|
background-color: rgb(66, 174, 243);
|
}
|
|
.current-color {
|
background-color: rgb(127, 131, 247);
|
color: white;
|
}
|
.remaining-color {
|
background-color: rgb(164, 173, 179);
|
color: white;
|
}
|
.timely-color {
|
background-color: rgb(85, 248, 106);
|
}
|
.overtime-color {
|
background-color: #e8e866;
|
}
|
|
.wait-color {
|
background-color: orange;
|
}
|
|
.willOvertime-color {
|
background-color: rgb(204, 247, 131);
|
}
|
.urge-color {
|
background-color: red;
|
color: white;
|
}
|
.active {
|
transform: translateY(-10px);
|
}
|
|
.table {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
</style>
|
