<template>
|
<div class="app-container">
|
<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}">全部事项（{{detailData.statistics.totalTaskNum}}）</div>
|
<div @click="changeTab(2, 'todo')" :class="{'item-warm': true, 'all-color': true, 'active': 2 === selectTabId}">代办事项（{{detailData.statistics.todoTaskNum}}）</div>
|
<div @click="changeTab(3, 'current')" :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}">剩余事项（{{detailData.statistics.totalTaskNum}}）</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
|
:data="taskList"
|
border
|
style="width: 100%">
|
<el-table-column
|
prop="taskName"
|
label="任务名称"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="procDefName"
|
label="流程名称"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="startUserName"
|
label="发起人"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="startDeptName"
|
label="发起单位"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="assigneeDeptName"
|
label="处理单位"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="assigneeName"
|
label="实际处理人"
|
>
|
</el-table-column>
|
<el-table-column
|
fixed="right"
|
label="操作"
|
width="100">
|
<template slot-scope="scope">
|
<el-button @click="goToProcessDetail(scope.row)" type="text" size="small">查看</el-button>
|
<el-button @click="goToDo(scope.row)" type="text" size="small">办理</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div>
|
<el-pagination
|
v-if="total > pageSize"
|
:page-size="pageSize"
|
:current-page="pageNum"
|
:total="total"
|
layout="total, prev, pager, next"
|
@current-change="getList"
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {getProjectProcessDetail} from "@/api/projectProcess/projectProcess";
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
projectId: null,
|
processId: null,
|
detailData: {},
|
selectTabId: 2,
|
taskList: [],
|
total: 0,
|
pageSize: 5,
|
pageNum: 1,
|
queryParams: {
|
taskName: ''
|
}
|
}
|
},
|
mounted() {
|
this.projectId = this.$route.query.projectId
|
this.processId = this.$route.query.processId
|
this.getProjectProcessInfo()
|
},
|
methods: {
|
goToDo(row) {
|
// TODO 这里的判断条件根据实际情况设置
|
if (this.$auth.hasRole('admin')) {
|
console.log("zhe")
|
this.$router.push({
|
path: '/flowable/task/todo/detail/index',
|
query: {
|
taskName: row.procDefName,
|
startUser: row.startUserName,
|
deployId: row.deployId,
|
taskId: row.taskId,
|
procInsId: row.procInsId,
|
executionId: row.executionId
|
}
|
})
|
} else {
|
this.$router.push({
|
path: '/flowable/task/myProcess/send/index',
|
query: {
|
deployId: row.deployId,
|
procDefId: row.procDefId,
|
processName: row.procDefName,
|
taskId: row.taskId
|
}
|
})
|
}
|
},
|
goToProcessDetail(row) {
|
this.$router.push({ path: '/flowable/task/myProcess/detail/index',
|
query: {
|
procInsId: row.procInsId,
|
deployId: row.deployId,
|
taskId: row.taskId
|
}})
|
},
|
getList() {
|
// 获取任务列表
|
},
|
// 查询详情
|
getProjectProcessInfo() {
|
getProjectProcessDetail(this.projectId, this.processId).then(res => {
|
this.detailData = res.data
|
this.taskList = res.taskList
|
})
|
},
|
changeTab(id, event) {
|
this.selectTabId = id
|
}
|
}
|
}
|
</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>
|
