dvcp_v2_wxcp_app/library/apps/AppWorkTask/AppWorkTask.vue

<template>
  <div class="AppWorkTask">
    <AiTopFixed>
      <u-tabs :list="tabs" height="88" bar-width="136" :current="index" @change="change"></u-tabs>
    </AiTopFixed>
    <div class="list-data" v-if="list.length">
      <div class="card" v-for="(item,index) in list" :key="index" @click="handleClick(item)">
        <header>{{item.taskTitle}}</header>
        <u-gap height="24"></u-gap>
        <u-row>
          <text>任务类型：</text>
          <text>{{$dict.getLabel("workTaskType",item.type)}}</text>
        </u-row>
        <u-gap height="8"></u-gap>
        <u-row>
          <text>截止时间：</text>
          <text>{{item.lastTime}}</text>
        </u-row>
        <u-gap height="8"></u-gap>
        <u-row>
          <text>剩余时间：</text>
          <text :style="{color:item.isOverTime==1?'#FF4466':'#1365DD'}">{{item.overTimeStatus}}</text>
        </u-row>
        <u-gap height="24"></u-gap>
        <span>已完成{{item.percent}}%</span>
        <u-gap height="16"></u-gap>
        <div class="progress">
          <div class="active" :style="{width: item.percent + '%'}"></div>
        </div>
        <img :src="$cdn + tag(item.status)" alt="">
      </div>
    </div>
    <AiEmpty v-else></AiEmpty>
    <AiAdd @add="add" />
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    appName: '工作任务',
    data() {
      return {
        index: 0,
        current: 1,
        list: [],
        status: "加载更多",
        userSelect: false,
      }
    },

    computed: {
      ...mapState(['user']),
      tabs() {
        return [
          {name: "我执行的"},
          {name: "我完成的"},
          {name: "我发起的"},
          {name: "我督办的"},
          {name: "抄送我的"},
        ]
      },
    },

    created() {
      this.$dict.load("workTaskType").then(() => {
        this.getList()
      })
      uni.$on('getList', () => {
        this.current = 1
        this.getList()
      })
    },

    onShow() {
      document.title = '工作任务'
      uni.pageScrollTo({
        duration: 0,
        scrollTop: 0
      })
      this.current = 1
      this.getList()
    },

    methods: {
      tag(status) {
        return {
          "0": "common/1jxz.png",
          "1": "common/1ywc.png",
          "2": "common/1ygb.png"
        }[status]
      },
      handleClick(item) {
        uni.navigateTo({
          url: "./detail?id=" + item.id + "&taskCode=" + item.taskCode + "&isMine=" + this.index
        })
      },
      add() {
        uni.navigateTo({
          url: "./create"
        })
      },

      change(e) {
        this.index = e
        this.current = 1
        this.getList()

      },

      map(index) {
        return {
          "0": {
            taskRole: 1,
            status: 0,
          },
          "1": {
            taskRole: 1,
            status: 1,
          },
          "2": {
            taskRole: 0,
          },
          "3": {
            taskRole: 2,
          },
          "4": {
            taskRole: 3,
          }
        }[index]
      },

      getList() {
        this.$http.post("/app/appworktaskinfo/list", null, {
          params: {
            ...this.map(this.index),
            size: 10,
            current: this.current
          }
        }).then(res => {
          if (res && res.data) {
            if (this.current > 1 && this.current > res.data.pages) {
              this.status = "已经到底啦"
            }
            this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
          }
        })
      }
    },

    onReachBottom() {
      this.current = this.current + 1;
      this.getList()
    }
  }
</script>

<style lang="scss" scoped>
  .AppWorkTask {
    min-height: 100%;
    background-color: #F5F5F5;
    padding-bottom: 32px;

    ::v-deep .content {
      padding: 0;
    }

    .list-data {
      box-sizing: border-box;
      padding: 32px 32px 0 32px;

      .card {
        background: #FFFFFF;
        border-radius: 8px;
        box-sizing: border-box;
        padding: 32px;
        position: relative;
        margin-bottom: 32px;

        & > header {
          font-size: 32px;
          font-weight: 600;
          color: #333333;
        }

        & > .u-row {
          text {
            font-size: 30px;
            color: #999999;
            line-height: 42px;
          }
        }

        & > span {
          font-size: 26px;
          color: #649EFD;
        }

        .progress {
          width: 100%;
          height: 4px;
          background: #F0F1F2;
          border-radius: 2px;
          position: relative;

          .active {
            position: absolute;
            left: 0;
            top: 0;
            height: 4px;
            background: #639EFD;
            border-radius: 2px;
          }
        }

        & > img {
          width: 112px;
          height: 112px;
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }
  }
</style>