laws_chery_client/src/views/dashboard/modules/ToDoTaskCard.vue

<template>
  <div class="todo-wrapper">
    <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>
            <div class="content-item-img">
              <img :src="require('@/assets/image/icon/todo.png')" alt="todo">
            </div>
            <p class="content-item-text">{{ item.prcName }}</p>
          </a-tooltip>
        </div>
      </div>
      <a-list :data-source="[]" v-else></a-list>
    </a-spin>
  </div>
</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/NewRegulationIntroductionProcess'
          break
        // 标准解读流程
        case '2':
          path = '/workCenter/StandardInterpretationProcess'
          break
        // 法规符合性排查流程
        case '3':
          path = '/workCenter/RegulatoryComplianceCheckProcess'
          break
        // 市场清单发布流程
        case '4':
          path = '/workCenter/MarketListReleaseProcess'
          break
        // 如果都没找到不用跳转
        default:
          return
      }
      this.$router.push({
        path: path,
        query: {
          projectId: record.projectId,
          taskName: record.taskName,
          taskId: record.taskId, // 任务id
          processInstanceId: record.processInstanceId, // 流程实例id，必须传人员信息右侧表格查询需要用
          countersignFlag: record.countersignFlag, // 是否会签
          nodeId: record.nodeId // 节点的id
        }
      })
    },
    // 更多:跳转待办
    handleMore () {
      this.$router.push({
        path: '/workCenter/processCenter/processCenter'
      })
    }
  }
}
</script>

<style lang="less" scoped>
@size: 48px;
.todo-wrapper {
  padding: 24px;
  background-color: white;

  /deep/ .ant-spin-container,
  /deep/ .ant-spin-nested-loading,
  /deep/ .ant-card-body {
    height: 100%;
  }
}
.content-wrapper {
  height: calc(100% - 30px - 12px);
  margin-top: 12px;
  overflow-y: auto;

  .content-item {
    cursor: pointer;
    font-family: PingFang SC, PingFang SC, sans-serif;
    font-weight: 400;
    color: #1D2129;
    position: relative;
    font-size: 16px;
    line-height: @size;
    height: @size;
    border-radius: 10px;
    border: 1px solid #EAEAEA;
    margin-bottom: 8px;
    padding-left: @size;

    .content-item-img {
      border: 1px solid #EAEAEA;
      border-radius: 10px;
      position: absolute;
      width: @size;
      height: @size;
      left: -1px;
      top: -1px;
      font-size: 0;
      img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
        height: 50%;
      }
    }
    .content-item-text {
      margin: 0 12px;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
@media screen and (max-width: 1366px) {
  @size: 40px;
  .todo-card {
    height: calc(100vh - 424px);
  }
  .content-wrapper {
    //height: calc(100vh - 506px);

    .content-item {
      font-size: 14px;
      line-height: @size;
      height: @size;
      padding-left: @size;

      .content-item-img {
        width: @size;
        height: @size;
      }

      .content-item-text {
        margin: 0 12px;
      }
    }
  }
}
</style>