<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, 'all-color': true, 'active': 2 === selectTabId}">代办事项<span v-if="detailData && detailData.statistics">（{{detailData.statistics.todoTaskNum}}）</span></div>
|
<div @click="changeTab(3, 'todo')" :class="{'item-warm': true, 'current-color': true, 'active': 3 === selectTabId}">当前环节</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}">按时完成（0）</div>
|
<div @click="changeTab(6, 'overtime')" :class="{'item-warm': true, 'overtime-color': true, 'active': 6 === selectTabId}">超时事项（0）</div>
|
<div @click="changeTab(7, 'willOvertime')" :class="{'item-warm': true, 'willOvertime-color': true, 'active': 7 === selectTabId}">临期事项（0）</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">
|
<el-form :inline="true" :model="queryParams" class="demo-form-inline">
|
<el-form-item label="任务名称">
|
<el-input v-model="queryParams.taskName" placeholder="任务名称"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="search">查询</el-button>
|
</el-form-item>
|
</el-form>
|
</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
|
align="center"
|
prop="handlerType"
|
label="处理方类型"
|
>
|
<template slot-scope="scope">
|
<el-tag v-if="scope.row.handlerType === 'USER'">人员账号</el-tag>
|
<el-tag type="success" v-else-if="scope.row.handlerType === 'DEPT'">单位</el-tag>
|
<el-tag type="info" v-else-if="scope.row.handlerType === 'ROLE'">角色</el-tag>
|
</template>
|
</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
|
prop="handlerName"
|
label="实际处理人"
|
:formatter="finalFinishedFormatter"
|
>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="taskStatus"
|
label="任务状态"
|
>
|
</el-table-column>
|
<el-table-column
|
fixed="right"
|
label="操作"
|
width="100">
|
<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>
|
</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>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getProjectProcessDetail,
|
getProjectProcessDetailTaskList,
|
getTaskIsAuditing
|
} from "@/api/projectProcess/projectProcess";
|
|
export default {
|
name: "Detail",
|
data() {
|
return {
|
loading: false,
|
tableLoading: false,
|
detailData: {},
|
taskList: [],
|
total: 0,
|
selectTabId: 2,
|
queryParams: {
|
taskName: '',
|
taskType: 'todo',
|
pageSize: 5,
|
currentPage: 1,
|
projectId: null,
|
processDefId: null,
|
processName: '' // 流程名称
|
}
|
}
|
},
|
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.processName = this.$route.query.processName
|
sessionStorage.setItem("projectProDetail", JSON.stringify(this.queryParams))
|
} else {
|
this.queryParams = params
|
}
|
this.loading = true
|
this.getProjectProcessInfo()
|
},
|
methods: {
|
unitFormatter(row) {
|
if (row.handlerType === 'USER') {
|
return null;
|
} else if (row.handlerType === 'DEPT') {
|
return row.handlerUnitName.join("、")
|
} else if (row.handlerType === 'ROLE') {
|
return row.handlerUnitName.join('、')
|
}
|
},
|
candidateFormatter(row) {
|
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.handlerName
|
}
|
},
|
showHandle(row) {
|
if (row.taskStatus === '待办') {
|
if (row.handlerType === "USER") {
|
console.log(row.handlerId.indexOf(this.$store.state.user.id) !== -1, "我是不是")
|
return row.handlerId.indexOf(this.$store.state.user.id) !== -1
|
} else if (row.handlerType === "DEPT") {
|
console.log(this.$store.state.user.deptId, "部门id", row.handlerUnitId)
|
return row.handlerUnitId.indexOf(this.$store.state.user.deptId) !== -1
|
// return this.$store.state.user.name === '市发展改革委' || this.$store.state.user.name === '市住建局'
|
} else if (row.handlerType === "ROLE") {
|
return this.$auth.hasRole(row.handlerUnitName)
|
}
|
} else {
|
return false
|
}
|
},
|
goToDo(row) {
|
// 查询该任务是否配置了需要审批
|
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,
|
goBackParams: this.queryParams
|
}
|
})
|
})
|
},
|
goToProcessDetail(row) {
|
this.$router.push({ path: '/flowable/task/myProcess/detail/index',
|
query: {
|
projectName: this.detailData.projectName,
|
flowName: this.queryParams.processName,
|
procInsId: row.processInsId,
|
deployId: row.deployId,
|
taskId: row.taskId,
|
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() {
|
// 获取任务列表
|
getProjectProcessDetailTaskList(this.queryParams).then(res => {
|
this.taskList = res.data
|
this.total = res.total
|
this.tableLoading =false
|
})
|
},
|
// 查询详情
|
getProjectProcessInfo() {
|
getProjectProcessDetail(this.queryParams.projectId, this.queryParams.processDefId).then(res => {
|
this.detailData = res.data
|
this.taskList = res.taskList
|
this.total = res.total
|
this.loading = false
|
})
|
},
|
changeTab(id, event) {
|
this.tableLoading = true
|
let beforeId = this.selectTabId
|
this.selectTabId = id
|
this.queryParams.taskType = event
|
if (beforeId !== id) {
|
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);
|
}
|
|
.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(204, 247, 131);
|
}
|
.overtime-color {
|
background-color: rgb(129, 179, 55);
|
color: white;
|
}
|
.willOvertime-color {
|
background-color: rgb(255, 248, 29);
|
}
|
.urge-color {
|
background-color: rgb(0, 0, 0);
|
color: white;
|
}
|
.active {
|
transform: translateY(-10px);
|
}
|
|
.table {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
</style>
|
