分角色展示项目计划，实现不同角色的功能

luohairen

2024-12-05 673ed0ce6809aecc7b1bdb1c8bb5f6018047105f

 src/views/projectProcess/detail/index.vue

@@ -1,5 +1,5 @@
<template>
  <div class="app-container">
  <div class="app-container" v-loading.fullscreen.lock="loading">
    <div class="top">
      <div class="project-title">
        <h2>项目名称：{{detailData.projectName}}</h2>
@@ -16,10 +16,10 @@
      </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(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>
@@ -37,6 +37,7 @@
    </div>
    <div class="table">
      <el-table
        v-loading="tableLoading"
        :data="taskList"
        border
        style="width: 100%">
@@ -46,28 +47,33 @@
         >
        </el-table-column>
        <el-table-column
          prop="procDefName"
          prop="processName"
          label="流程名称"
         >
        </el-table-column>
        <el-table-column
          prop="startUserName"
          prop="promoterName"
          label="发起人"
        >
        </el-table-column>
        <el-table-column
          prop="startDeptName"
          prop="promoterUnitName"
          label="发起单位"
        >
        </el-table-column>
        <el-table-column
          prop="assigneeDeptName"
          prop="handlerUnitName"
          label="处理单位"
        >
        </el-table-column>
        <el-table-column
          prop="assigneeName"
          prop="handlerName"
          label="实际处理人"
        >
        </el-table-column>
        <el-table-column
          prop="taskStatus"
          label="任务状态"
        >
        </el-table-column>
        <el-table-column
@@ -75,16 +81,16 @@
          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>
            <el-button v-if="scope.row.taskStatus !== '未开始'" @click="goToProcessDetail(scope.row)" type="text" size="small">查看</el-button>
            <el-button v-if="scope.row.taskStatus === '待办'" @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"
          v-if="total > queryParams.pageSize"
          :page-size="queryParams.pageSize"
          :current-page="queryParams.currentPage"
          :total="total"
          layout="total, prev, pager, next"
          @current-change="getList"
@@ -95,28 +101,32 @@
</template>

<script>
import {getProjectProcessDetail} from "@/api/projectProcess/projectProcess";
import {getProjectProcessDetail, getProjectProcessDetailTaskList} from "@/api/projectProcess/projectProcess";

export default {
  name: "index",
  data() {
    return {
      projectId: null,
      processId: null,
      loading: false,
      tableLoading: false,
      detailData: {},
      selectTabId: 2,
      taskList: [],
      total: 0,
      pageSize: 5,
      pageNum: 1,
      selectTabId: 2,
      queryParams: {
        taskName: ''
        taskName: '',
        taskType: 'todo',
        pageSize: 5,
        currentPage: 1,
        projectId: null,
        processDefId: null,
      }
    }
  },
  mounted() {
    this.projectId = this.$route.query.projectId
    this.processId = this.$route.query.processId
    this.queryParams.projectId = this.$route.query.projectId
    this.queryParams.processDefId = this.$route.query.processDefId
    this.loading = true
    this.getProjectProcessInfo()
  },
  methods: {
@@ -127,11 +137,11 @@
        this.$router.push({
          path: '/flowable/task/todo/detail/index',
          query: {
            taskName: row.procDefName,
            startUser: row.startUserName,
            taskName: row.taskName,
            startUser: row.promoterName,
            deployId: row.deployId,
            taskId: row.taskId,
            procInsId: row.procInsId,
            procInsId: row.processInsId,
            executionId: row.executionId
          }
        })
@@ -140,7 +150,7 @@
          path: '/flowable/task/myProcess/send/index',
          query: {
            deployId: row.deployId,
            procDefId: row.procDefId,
            procDefId: row.processDefId,
            processName: row.taskName,
            taskId: row.taskId
          }
@@ -150,23 +160,36 @@
    goToProcessDetail(row) {
      this.$router.push({ path: '/flowable/task/myProcess/detail/index',
        query: {
          procInsId: row.procInsId,
          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.projectId, this.processId).then(res => {
      getProjectProcessDetail(this.queryParams.projectId, this.queryParams.processDefId).then(res => {
        this.detailData = res.data
        this.taskList = res.taskList
        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()
      }

    }
  }
}