<template>
|
<div class="app-container" v-loading.fullscreen.lock="loading">
|
<div class="top">
|
<div class="project-title">
|
<h2>项目名称：{{detailData.projectName}}</h2>
|
</div>
|
<div class="project-info">
|
<div class="project-info-item"></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="getList">查询</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="processName"
|
label="流程名称"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="promoterName"
|
label="发起人"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="promoterUnitName"
|
label="发起单位"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="handlerUnitName"
|
label="处理单位"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="handlerName"
|
label="实际处理人"
|
>
|
</el-table-column>
|
<el-table-column
|
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
|
v-if="total > queryParams.pageSize"
|
@size-change="getList"
|
@current-change="getList"
|
:current-page.sync="queryParams.currentPage"
|
:page-sizes="[5, 10, 20]"
|
:page-size="100"
|
layout="sizes, prev, pager, next"
|
:total="total">
|
</el-pagination>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getProjectProcessDetail,
|
getProjectProcessDetailTaskList,
|
getTaskIsAuditing
|
} from "@/api/projectProcess/projectProcess";
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
loading: false,
|
tableLoading: false,
|
detailData: {},
|
taskList: [],
|
total: 0,
|
selectTabId: 2,
|
queryParams: {
|
taskName: '',
|
taskType: 'todo',
|
pageSize: 5,
|
currentPage: 1,
|
projectId: null,
|
processDefId: null,
|
}
|
}
|
},
|
mounted() {
|
this.queryParams.projectId = this.$route.query.projectId
|
this.queryParams.processDefId = this.$route.query.processDefId
|
this.loading = true
|
this.getProjectProcessInfo()
|
},
|
methods: {
|
showHandle(row) {
|
console.log(this.$store.state.user, "用户信息")
|
if (row.taskStatus === '待办') {
|
if (row.handlerType === "USER") {
|
return this.$store.state.user.id === row.handlerId
|
} else if (row.handlerType === "DEPT") {
|
return this.$store.state.user.id === row.handlerId
|
} else if (row.handlerType === "ROLE") {
|
return this.$auth.hasRole(row.handlerUnitName)
|
}
|
} else {
|
return false
|
}
|
},
|
goToDo(row) {
|
// TODO 这里的判断条件根据实际情况设置
|
// let params = {
|
// processDefId: row.processDefId,
|
// taskId: row.taskId
|
// }
|
// getTaskIsAuditing(params).then(res => {
|
//
|
// })
|
// if (this.showHandle(row)) {
|
console.log("zhe")
|
this.$router.push({
|
path: '/flowable/task/myProcess/send/index',
|
query: {
|
deployId: row.deployId,
|
procDefId: row.processDefId,
|
processName: row.taskName,
|
taskId: row.taskId
|
}
|
})
|
// } else {
|
// this.$router.push({
|
// path: '/flowable/task/todo/detail/index',
|
// query: {
|
// taskName: row.taskName,
|
// startUser: row.promoterName,
|
// deployId: row.deployId,
|
// taskId: row.taskId,
|
// procInsId: row.processInsId,
|
// executionId: row.executionId
|
// }
|
// })
|
// }
|
},
|
goToProcessDetail(row) {
|
this.$router.push({ path: '/flowable/task/myProcess/detail/index',
|
query: {
|
procInsId: row.processInsId,
|
deployId: row.deployId,
|
taskId: row.taskId
|
}})
|
},
|
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>
|
