detection-business/pages/manage/workReport/reportList.vue

<template>
  <view class="content">
    <headersVue :titles="titles">
      <u-icon name="arrow-left" color="#fff" size="18"></u-icon>
    </headersVue>
    <view class="top_">
      <view class="search_box">
        <u-search placeholder="请输入汇报人姓名或汇报主题进行搜索" @search="getReportList" @clear="getReportList" :showAction="false" searchIconColor="#427FFE" v-model="queryParams.topicOrUserName"></u-search>
      </view>
    </view>
    <view class="container">
      <view class="c_box" v-for="(item,index) in reportList" :key="index" @click="goDetails(item)">
        <view class="c_ds" style="margin-bottom: 15px;">
          <view class="touxiang_">
            <image :src="baseImageUrl + '/' + item.avatar" mode="" v-if="item.avatar"></image>
            <image src="/static/imgs/yh.png" mode="" v-else></image>
          </view>
          <view class="name_">{{ item.userName}}</view>
          <view class="icon_">{{ item.reportTopic }}</view>
        </view>
        <view class="c_ds">
          <view class="" style="color: #8D90A6;">汇报时间：</view>
          <view class="">{{ formatDateChinese(item.reportTime) }}</view>
        </view>
      </view>
    </view>
    <view style="width: 100%; height: 60px; "></view>

    <view class="bottom_" @click="goDetails()">
      <view class="bottom_box">填写汇报</view>
    </view>
  </view>
</template>

<script>
import headersVue from '../../../components/header/headers.vue';
import config from "@/config";
import {formatDateChinese, formatDateTimeToMinute} from "@/utils/utils";
import request from "@/utils/request";

export default {
  data() {
    return {
      titles: "汇报列表",
      List: [],
      show: false,
      status: 'loading',
      reportList: [],
      showPopup: false, // 控制筛选弹窗显示
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        reportTopic: null,
        reportTime: [],
        createTime: [],
        userName: null,
        servicePackageId: "jiance",
        dictType: 'ins_high_rise',
        topicOrUserName: '',
      },
      showStarTime: false,
      showEndTime: false,
      baseImageUrl: config.baseImageUrl,
      totalPages: 0,
      reportTimeStr: [],
    }
  },
  components: {
    headersVue
  },
  onLoad() {
    this.getReportList();
  },
  onReachBottom() {
    if (this.queryParams.pageNo >= this.totalPages) {
      uni.showToast({
        title: '没有下一页数据',
        icon: 'none'
      })

    } else {
      this.queryParams.pageNo++
      this.getReportList()
    }
  },
  methods: {
    formatDateChinese,
    formatDateTimeToMinute,
    // 获取汇报列表
    getReportList() {
      request({
        url: "/work/report/page",
        method: "GET",
        params: this.queryParams,
      }).then((res) => {
        if (this.queryParams.pageNo != 1) {
          this.reportList = this.reportList.concat(res.data.records);
        } else {
          this.reportList = res.data.records;
        }
        let total = res.total;
        this.totalPages = Math.ceil(total / this.queryParams.pageSize);
      });
    },
    goDetails(data) {
      if (!data) {
        uni.navigateTo({
          url: '/pages/manage/workReport/reportDetals'
        })
      }else {
        console.log('id', data)
        uni.navigateTo({
          url: '/pages/manage/workReport/reportDetals?id=' + data.id
        })
      }
    }
  }

}
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  box-sizing: border-box;
  padding-top: 200rpx;
  background: #f4f5f6;
  height: 100vh;
}

.container {
  box-sizing: border-box;
  padding: 30rpx;
  background: #f4f5f6;
}

.search_box{
  box-sizing: border-box;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #F5F5F5;
}

.top_{
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
  background: #fff;
  padding-bottom: 0px;
}
.c_box {
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 20px;
  margin-bottom: 30rpx;
}

.c_ds {
  display: flex;
  align-items: center;

}

.touxiang_ {
  width: 90rpx;
  height: 90rpx;
  margin-right: 20rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.name_ {
  font-size: 32rpx;
  color: #101A3E;
  margin-right: 20rpx;
}

.icon_ {
  background: #eaf2fe;
  box-sizing: border-box;
  padding: 5rpx 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
  color: #427FFE;
}

.bottom_ {
  width: 100%;
  height: 158rpx;
  background: #FFFFFF;
  box-shadow: 0rpx -1rpx 24rpx 0rpx rgba(0, 0, 0, 0.1);
  border-radius: 15px 15px 0px 0px;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom_box {
  width: 600rpx;
  height: 78rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #fff;
  background: #427FFE;
  border: 2rpx solid #427FFE;
  border-radius: 50px;
  margin: 30rpx;
}
</style>