laws-sinotruk-client/src/views/dashboard/modules/ToDoTaskCard.vue

<template>
  <a-card :bordered="false">
    <a-spin :spinning="loading">
      <div class="top-wrapper">
        <p class="left-p"><i class="iconfont icon-calendar left-icon"></i>{{ $t('dashboard.todoTask.todoTask') }}</p>
        <p class="right-p" @click="handleMore">{{ $t('dashboard.todoTask.more') }}<i class="iconfont icon-right"></i></p>
      </div>
      <div class="content-wrapper" v-if="dataSource.length > 0">
        <div class="content-item" v-for="item in dataSource" :key="item.id" @click="handleToDetail(item)">
          <a-tooltip placement="top">
            <template slot="title">{{item.prcName}}</template>
            <p>{{ item.prcName }}</p>
          </a-tooltip>
        </div>
      </div>
      <a-list :data-source="[]" v-else></a-list>
    </a-spin>
  </a-card>
</template>

<script>
import { getTodoList } from '@api/dashboard'

export default {
  name: 'ToDoTaskCard',
  data () {
    return {
      loading: false,
      // 数据
      dataSource: []
    }
  },
  created () {
    this.getTodoTask()
  },
  methods: {
    // 获取待办任务
    getTodoTask () {
      this.loading = true
      getTodoList().then(res => {
        if (res.success) {
          this.dataSource = res.result.records || []
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 跳转待办详情
    handleToDetail (record) {
      let path = ''
      // 跳转到对应流程页面
      switch (record.prcType + '') {
        // 标准法规入库/变更流程
        case '1':
          path = '/workCenter/StandardEntryOrChangeProcess'
          break
        // 标准征求意见流程
        case '2':
          path = '/workCenter/StandardConsultationProcess'
          break
        // 项目合规评估流程
        case '3':
          path = '/workCenter/ProjectComplianceEvaluationProcess'
          break
        // 未符合项跟踪流程
        case '4':
          path = '/workCenter/NoMatchTrackingProcess'
          break
        // 法规采购流程
        case '6':
          path = '/workCenter/StandardProcurementProcess'
          break
        // 企标立项、变更计划
        case '7':
          path = '/workCenter/enterpriseStandardInitChange/planApprovalChangeFlow'
          break
        // 年度制修订计划（各部门主动上报）
        case '8':
          path = '/workCenter/annualRevisionPlanActivelyReport/revisionPlanActivelyReportFlow'
          break
        // 年度制修订计划（标准化发起）
        case '9':
          path = '/workCenter/annualRevisionPlanStandardizationInit/revisionPlanStandardizationInitFlow'
          break
        // 企标制修订流程
        case '10':
          path = '/workCenter/enterpriseStandardRevision/enterpriseStandardRevisionFlow'
          break
        // 企标更改流程
        case '11':
          path = '/workCenter/enterpriseStandardChange/enterpriseStandardChangeFlow'
          break
        // 企标复审流程
        case '12':
          path = '/workCenter/enterpriseStandardRecheck/enterpriseStandardRecheckFlow'
          break
        // 企标废止流程
        case '13':
          path = '/workCenter/enterpriseStandardAnnul/enterpriseStandardAnnulFlow'
          break
        // 企标封存流程
        case '14':
          path = '/workCenter/enterpriseStandardSealSave/enterpriseStandardSealSaveFlow'
          break
        // 已封存企标启用流程
        case '15':
          path = '/workCenter/enterpriseStandardStartUse/enterpriseStandardStartUseFlow'
          break
        // 企标稽查计划
        case '16':
          path = '/workCenter/EnterpriseStandardInspectionPlan'
          break
        // 企标稽查流程
        case '17':
          path = '/workCenter/EnterpriseStandardInspectionProcess'
          break
        // 稽查延期申请流程
        case '18':
          path = '/workCenter/InspectionExtensionRequestProcess'
          break
        // 企标稽查整改
        case '19':
          path = '/workCenter/EnterpriseStandardInspectionRectification'
          break
        // 权限申请流程
        case '20':
          path = '/workCenter/PermissionApplicationProcess'
          break
        // 标准宣贯流程
        case '21':
          path = '/workCenter/StandardPromotionProcess'
          break
        // 会后管理流程
        case '22':
          path = '/workCenter/PostMeetingManageProcess'
          break
        // 如果都没找到不用跳转
        default:
          return
      }
      this.$router.push({
        path: path,
        query: {
          projectId: record.projectId,
          taskName: record.taskName,
          taskId: record.taskId, // 任务id
          processInstanceId: record.processInstanceId, // 流程实例id，必须传人员信息右侧表格查询需要用
          nodeId: record.nodeId // 节点的id
        }
      })
    },
    // 更多:跳转待办
    handleMore () {
      this.$router.push({
        path: '/workCenter/processCenter/processCenter'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.content-wrapper {
  margin-top: 10px;
  height: calc(100vh - 346px - 200px);
  overflow-y: auto;

  .content-item {
    cursor: pointer;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: PingFang SC, PingFang SC, sans-serif;
    font-weight: 400;
    color: #1D2129;
    position: relative;
    font-size: 16px;
    line-height: 48px;
    height: 48px;
    border-bottom: 1px solid #E5E6EB;
    text-indent: 18px;
  }
  .content-item::before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: block;
    content: '';
    background-color: #86909C;
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
}
@media screen and (max-width: 1366px) {
 .content-wrapper {
    height: calc(100vh - 306px - 200px);

   .content-item {
     line-height: 40px;
     height: 40px;
     font-size: 14px;
   }
  }
}
</style>