zhgdyunapp/pages/projectEnd/qualityManage/taskList.vue

<template>
  <view class="taskList">
    <headers class="fixedheader" :themeType="true" :showBack="true">
      <view class="headerName">
        检查任务
      </view>
    </headers>
    <scroll-view class="smallHeight" :style="{ 'padding-top': statusBarHeight + 45 + 'px' }" scroll-y>
      <view class="task-list">
        <view class="task-info flex">
          <view class="info-item b-right">
            <text>{{statisticsData.rectifyNum}}</text>
            待整改
          </view>
          <view class="info-item  b-right">
            <text>{{statisticsData.reviewNum}}</text>
            待审核
          </view>
          <view class="info-item">
            <text>{{statisticsData.closeNum}}</text>
            已闭合
          </view>
        </view>

        <view class="task-item" v-for="(item, index) in dataList" :key="index">
          <view @click="junpPage(item)">
            <view class="task-title">{{item.itemName}}</view>
            <view class="task-num" v-if="item.count.inspectNum > 0">整改单数量：{{item.count.inspectNum}}</view>
            <view class="task-people" v-if="item.count.inspectNum > 0">检查人：{{item.userlist.join("、")}}</view>
          </view>
          <view class="task-btn" @click="addExamine(item)" v-if="item.count.inspectNum == 0">开始检查</view>
          <view class="task-btn" @click="addExamine(item)" v-if="item.count.inspectNum > 0">再次检查</view>
          <view class="task-status"
            :class="{'status1': item.count.inspectNum > 0, 'status3': item.count.inspectNum == 0}">
            {{ item.count.inspectNum == 0 ? "未检查" : "已检查"}}
          </view>
        </view>
      </view>

    </scroll-view>
  </view>
</template>

<script>
  import headers from '../../../components/headers/headers.vue'
  export default {
    data() {
      return {
        statusBarHeight: 0,
        taskId: "",
        userId: "",
        dataList: [],
        statisticsData: {
          closeNum: 0,
          rectifyNum: 0,
          reviewNum: 0
        },
        loadStatus: 'more',
        isLoadMore: false,
        pageNo: 1,
        pageSize: 10
      }
    },
    onShow() {
      this.dataList = []
      this.pageNo = 1
      this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
      this.userId = JSON.parse(uni.getStorageSync('userInfo')).userId
      this.queryList()
      this.queryStatisticsNum()
    },
    onLoad(val) {

      this.taskId = val.id
      this.userId = JSON.parse(uni.getStorageSync('userInfo')).userId
      // this.queryList()
      this.queryStatisticsNum()
    },
    onReachBottom() {
      console.log(1)
      if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
        this.isLoadMore = true
        this.pageNo += 1
        this.queryList()
      }
    },
    onPullDownRefresh() {
      console.log(2)
      this.pageNo = 1
      this.dataList = []
      this.queryList()
    },
    methods: {
      junpPage(val) {
        console.log(val)
        if (val.count.inspectNum > 0) {
          uni.navigateTo({
            url: './dangerList?type=4&itemId=' + val.id
          })
        }
      },
      addExamine(val) {
        console.log(val);
        if (uni.getStorageSync('dangerData')) {
          uni.removeStorageSync('dangerData');
        }
        if (uni.getStorageSync('detailData')) {
          uni.removeStorageSync('detailData');
        }
        uni.navigateTo({
          // url: './addExamine?type=1&taskId=' + this.taskId + '&itemId=' + val.id
          url: './addIssue?type=add' + '&itemId=' + val.id + '&taskId=' + val.taskId
        })
      },
      queryList() {
        let data = {
          taskId: this.taskId,
          inspectUser: this.userId,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
        let _this = this
        this.sendRequest({
          url: 'xmgl/inspectTaskItemRecord/list',
          method: 'post',
          data: data,
          success: (res) => {
            // this.dataList = res.result.records
            this.dataList = this.dataList.concat(res.result.records)
            if (res.result.records.length < this.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
              this.isLoadMore = true
              this.loadStatus = 'nomore'
            } else {
              this.isLoadMore = false
              // that.loadStatus='more'
            }
            uni.stopPullDownRefresh()
            console.log(res.result)
          }
        })
      },
      queryStatisticsNum() {
        let data = {
          taskId: this.taskId
        }
        let _this = this
        this.sendRequest({
          url: 'xmgl/hiddenDangerInspectRecord/selectInspectTaskCount',
          method: 'post',
          data: data,
          success: (res) => {
            this.statisticsData = res.result
            console.log(res.result)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .taskList {
    background: #F6F6F6;
    // height: 100%;
    min-height: 100%;

    .fixedheader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 2;
    }

    .smallHeight {
      height: 100%;
      box-sizing: border-box;
    }

    .flex {
      display: flex;
    }

    .task-list {
      padding: 26rpx;

      .task-info {
        background: #fff;
        background: #fff;
        height: 144rpx;
        margin-bottom: 24rpx;
        align-items: center;
        box-shadow: 0 16rpx 20rpx #E8E8E8;
        background: url("../../../static/safeMange/safe_bg.png") no-repeat center;
        background-size: 100% 100%;

        .info-item {
          flex: 1;
          text-align: center;

          uni-text {
            display: block;
            color: #E26C0E;
            font-weight: 600;
            margin-bottom: 6rpx;
          }
        }

        .b-right {
          border-right: 1px solid rgba(244, 150, 0, 0.1);
        }
      }

      .task-item {
        background: #fff;
        border-radius: 10rpx;
        padding: 30rpx 28rpx 34rpx 42rpx;
        box-shadow: 4rpx 16rpx 20rpx #E8E8E8;
        position: relative;
        font-size: 26rpx;
        color: #6A6E7A;
        margin-bottom: 24rpx;

        .task-title {
          font-size: 32rpx;
          color: #000;
        }

        .task-num {
          margin-top: 12rpx;
          margin-bottom: 6rpx;
        }

        .task-btn {
          width: 170rpx;
          height: 64rpx;
          background: #127FEC;
          color: #fff;
          line-height: 64rpx;
          text-align: center;
          margin-top: 24rpx;
          border-radius: 32rpx;
        }

        .task-status {
          position: absolute;
          right: 28rpx;
          bottom: 32rpx;
          padding: 4rpx 14rpx;
          font-size: 24rpx;
          border-radius: 22rpx;
        }

        .status1 {
          color: #FF711E;
          background: linear-gradient(to right, rgba(255, 133, 30, 0.2), rgba(255, 133, 30, 0.01));
        }

        .status2 {
          color: #67B2FD;
          background: linear-gradient(to right, rgba(103, 178, 253, 0.2), rgba(103, 178, 253, 0.01));
        }

        .status3 {
          color: #fff;
          background: #CBCBCB;
        }
      }
    }
  }
</style>