xps-web_qhpt-v5/src/views/system/task/components/TaskList.vue

<template>
  <div class="content-container">
    <el-row class="tool-bar">
      <el-col :span="12" class="left">
        <div class="content-title">
          {{ title }}
        </div>
      </el-col>
      <el-col :span="12" class="right">
        <el-input v-model="conditions.keywords" class="search-input" placeholder="请输入内容">
          <el-button slot="append" icon="el-icon-search" @click="getData()" />
        </el-input>
      </el-col>
    </el-row>

    <el-row class="content-body">
      <el-table v-loading="listLoading" border :data="dataList" fit style="width: 100%;">
        <el-table-column type="index" label="序号" header-align="right" align="right" width="60" />

        <el-table-column prop="taskTitle" label="任务名称" header-align="left" align="left" />

        <el-table-column prop="taskPriority" label="优先级" header-align="center" align="center" width="100">
          <template v-slot="{row}">
            <span v-if="row.taskPriority===0"><el-tag type="info" effect="plain" color="rgb(38 69 90)">未知</el-tag></span>
            <span v-if="row.taskPriority===1"><el-tag type="success" effect="plain" color="rgb(38 69 90)">较低</el-tag></span>
            <span v-if="row.taskPriority===2"><el-tag type="success" effect="plain" color="rgb(38 69 90)">普通</el-tag></span>
            <span v-if="row.taskPriority===3"><el-tag type="warning" effect="plain" color="rgb(38 69 90)">紧急</el-tag></span>
            <span v-if="row.taskPriority===4"><el-tag type="danger" effect="plain" color="rgb(38 69 90)">非常紧急</el-tag></span>
          </template>
        </el-table-column>

        <el-table-column prop="taskCatTitle" label="分类" header-align="center" align="center" width="100" />

        <el-table-column prop="accountName" label="当前执行人员" header-align="center" align="center" width="120">
          <template v-slot="{row}">
            <el-popover v-if="row.status===0" trigger="hover" placement="top">
              <p>部门: {{ row.curGroupName }}</p>
              <p>岗位: {{ row.curPositionName }}</p>
              <div slot="reference" class="name-wrapper">
                <i class="el-icon-user" /> {{ row.curAccountName }}
              </div>
            </el-popover>
            <span v-else>-</span>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="当前关卡" header-align="center" align="center" width="100">
          <template v-slot="{row}">
            <span v-if="row.status===0"><el-tag type="success" effect="plain" color="rgb(38 69 90)">{{ row.curActivityTitle }}</el-tag></span>
            <span v-else>-</span>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="状态" header-align="center" align="center" width="100">
          <template v-slot="{row}">
            <span v-if="row.status===0"><el-tag type="warning" effect="plain" color="rgb(38 69 90)">{{ row.status|taskStatusFilter }}</el-tag></span>
            <span v-if="row.status===1"><el-tag type="success" effect="plain" color="rgb(38 69 90)">{{ row.status|taskStatusFilter }}</el-tag></span>
            <span v-if="row.status===-1"><el-tag type="danger" effect="plain" color="rgb(38 69 90)">{{ row.status|taskStatusFilter }}</el-tag></span>
          </template>
        </el-table-column>

        <el-table-column prop="expectedEndTime" label="截止时间" header-align="center" align="center" width="160">
          <template v-slot="{row}">
            <i class="el-icon-time" />
            <span style="margin-left: 5px">{{ row.expectedEndTime }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" header-align="center" align="center" width="210">
          <template v-slot="{row}">
            <el-button type="primary" size="mini" @click="handleDetail(row)">详情</el-button>

            <template v-if="row.status===0 && row.curAccountId===userData.userId">
              <el-button type="warning" size="mini" @click="handleTask(row)">处理</el-button>
              <el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
            </template>

          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <div class="pagination-container">
      <pagination v-show="total>0" :total="total" :page.sync="conditions.page" :limit.sync="conditions.limit" @pagination="getData" />
    </div>

    <handle-task ref="handle" title="处理任务" @formSuccess="formSuccess" />
    <launch-task ref="submit" title="提交任务" @formSuccess="formSuccess" />
    <TaskTransfer ref="TaskTransfer" />
    <to-do-details ref="TodoTaskDetail" title="任务详情" />
  </div>
</template>

<script>
import HandleTask from '@/views/system/todo/activity/handle'
import LaunchTask from '@/views/system/todo/activity/launch'
import TaskTransfer from './TaskTransfer'
import ToDoDetails from '@/views/system/todo/details'
import { getTaskByPage, deleteTaskById } from '@/api/system/taskApi'
import { cancelWorkflow } from '@/api/system/wfApi'
import { taskType, taskPriority, taskStatus } from '@/utils'
import { Pagination } from '@/components'
import { mapGetters } from 'vuex'

export default {
  name: 'Index',
  components: { Pagination, TaskTransfer, LaunchTask, HandleTask, ToDoDetails },
  filters: {
    taskTypeFilter(val) {
      return taskType(val)
    },
    taskPriorityFilter(val) {
      return taskPriority(val)
    },
    taskStatusFilter(val) {
      return taskStatus(val)
    }
  },
  props: {},
  data() {
    return {
      title: '我的待处理任务',
      dataList: [],
      total: 0,
      listLoading: false,
      conditions: {
        page: 1,
        limit: 10,
        keywords: '',
        status: undefined,
        launchAccountId: undefined,
        curAccountId: undefined,
        handleAccountId: undefined,
        startDate: undefined,
        endDate: undefined,
        handleGroupId: undefined
      },
      action: 'MyWaiting'
    }
  },
  computed: {
    ...mapGetters([
      'userData'
    ])
  },
  mounted() {
    this.loadData('MyWaiting')
  },
  methods: {

    // 重置查询条件
    resetConditions() {
      this.conditions.keywords = ''
      this.conditions.status = undefined
      this.conditions.curAccountId = undefined
      this.conditions.launchAccountId = undefined
      this.conditions.handleAccountId = undefined
      this.conditions.handleGroupId = undefined
    },

    // 加载数据
    loadData(action) {
      this.action = action
      const groupId = this.userData.groupId
      const userId = this.userData.userId
      switch (action) {
        case 'MyCreated':
          this.title = '我发起的任务'
          this.resetConditions()
          this.conditions.launchAccountId = userId
          break

        case 'MyWaiting':
          this.title = '我的待处理任务'
          this.resetConditions()
          this.conditions.status = 0
          this.conditions.curAccountId = userId
          break

        case 'MyCompleted':
          this.title = '我完成的任务'
          this.resetConditions()
          this.conditions.status = 1 // 完成
          this.conditions.handleAccountId = userId
          break

        case 'MyCanceled':
          this.title = '我撤消的任务'
          this.resetConditions()
          this.conditions.launchAccountId = userId
          this.conditions.status = -1
          break

        case 'GroupWaiting':
          this.title = '部门待处理的任务'
          this.resetConditions()
          this.conditions.handleGroupId = groupId
          this.conditions.status = 0
          break

        case 'GroupCompleted':
          this.title = '部完成的任务'
          this.resetConditions()
          this.conditions.handleGroupId = groupId
          this.conditions.status = 1
          break

        case 'GroupCanceled':
          this.title = '部门撤消的任务'
          this.resetConditions()
          this.conditions.handleGroupId = groupId
          this.conditions.status = -1
          break
      }
      this.getData()
    },

    // Fetch Data
    getData() {
      this.listLoading = true
      getTaskByPage(this.conditions).then((resp) => {
        const { code, data, total, msg } = resp
        this.listLoading = false
        if (code === 0) {
          this.total = total
          this.dataList = data
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    // 流程处理
    handleTask(data) {
      const { curActivityCode, taskId } = data
      this.$refs[curActivityCode].showModel(taskId)
    },

    // 撤消流程
    handleCancel(data) {
      const { taskId, wfInsId } = data
      this.listLoading = true
      cancelWorkflow(wfInsId).then((resp) => {
        this.listLoading = false
        const { code, msg } = resp
        if (code === 0) {
          this.handleCancelTask(taskId)
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    // 撤消任务
    handleDelete(data) {
      const { taskId } = data
      this.listLoading = true
      deleteTaskById(taskId).then((resp) => {
        this.listLoading = false
        const { code, msg } = resp
        if (code === 0) {
          this.getData()
          this.$message.success(msg)
          this.$emit('actionUpdate')
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    // Show Detail
    handleDetail(data) {
      const { taskId } = data
      this.$refs['TodoTaskDetail'].showView(taskId)
    },

    // 回调处理
    formSuccess() {
      console.log('formSuccess')
      this.getData()
      this.$emit('actionUpdate')
    },

    // 预览图片
    previewList(photos) {
      if (Array.isArray(photos)) {
        const list = photos.map((item) => {
          return item
        })
        return list
      }
      return [photos]
    }
  }
}
</script>
<style lang="scss" scoped>
.content-container{
  margin: 10px 10px 10px 0;
  height: calc(100vh - 90px);
}
</style>