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

<template>
  <view class="container">
    <!-- 顶部导航栏 -->

    <view class="top-heder">
      <view class="t-left" @click="getback()">
        <uni-icons type="left" size="18"></uni-icons>
      </view>
      <view class="t-title">
        <text>汇报列表</text>
      </view>
      <view class="t-you"></view>
    </view>

    <view class="searchContent">
      <view class="t-input">
        <uni-icons type="search" color="#BCBCBC" size="22"></uni-icons>
        <input type="text" v-model="queryParams.topicOrUserName" placeholder="请输入设备名称.....">
      </view>
      <view class="sou" @click="getReportList()">搜索</view>
    </view>

    <!-- 汇报列表 -->
    <view class="report-list">
      <view class="report-item" v-for="(item, index) in reportList" :key="index" @click="goToEditWriteReport(item.id)">
        <image class="avatar" :src="baseImageUrl + '/' + item.avatar"></image>
        <view class="content">
          <view class="top">
            <view class="name">{{ item.userName }}</view>
            <u-tag :text="item.reportTopic" type="primary" size="mini" class="tag"></u-tag>
          </view>
          <view class="report-time">汇报时间：{{ formatDateTimeToMinute(item.reportTime) }}</view>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-btn">
      <u-button type="primary" shape="circle" class="report-btn" @click="goToWriteReport">填写汇报</u-button>
    </view>
  </view>
</template>

<script>
import request from "@/utils/request";
import {formatDate, formatDateTimeToMinute} from "@/utils/utils";
import config from "@/config";

export default {
  data() {
    return {
      reportList: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        reportTopic: null,
        reportTime: [],
        createTime: [],
        userName: null,
        servicePackageId: "jiance",
        topicOrUserName:''
      },
      baseImageUrl: config.baseImageUrl,
      totalPages:0,
    };
  },
  onLoad() {
    this.getReportList();
  },
  onReachBottom() {
    if (this.queryParams.pageNo >= this.totalPages) {
      uni.showToast({
        title: '没有下一页数据',
        icon: 'none'
      })

    } else {
      this.queryParams.pageNo++
      this.getReportList()
    }
  },
  methods: {
    formatDateTimeToMinute,
    formatDate,
    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;
        }
        console.log(this.reportList)
        let total = res.total
        this.totalPages = Math.ceil(total / this.queryParams.pageSize);
      });
    },
    getback() {
      uni.navigateBack({
        delta: 1, // 返回上一页
      });
    },
    goToWriteReport() {
      uni.navigateTo({
        url: "/pages/manage/workReport/workReportAdd?type=add",
      });
    },
    goToEditWriteReport(id) {
      uni.navigateTo({
        url: "/pages/manage/workReport/workReportAdd?type=edit&id=" + id,
      });
    },
  },
};
</script>

<style scoped>
.container {
  background-color: #f5f6fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

/* 列表样式 */
.report-list {
  padding: 20rpx;
}

.report-item {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 10rpx; /* 减少上、下内边距 */
  margin-bottom: 16rpx;
  height: 180rpx; /* 调整高度，使整体紧凑 */
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1px solid #eaeaea;
}

/* 头像 */
.avatar {
  width: 90rpx;
  height: 90rpx;
//border-radius: 50%; margin-right: 20rpx;
  border: 2rpx solid #ddd;
}

/* 内容区 */
.content {
  flex: 1;
  display: flex;
  flex-direction: column; /* 改为垂直排列 */
  justify-content: space-between; /* 保证内容上下分布 */
  margin-left: 20rpx;
}

/* 姓名 + 主题 */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0; /* 调整顶部间距为0 */
}

.name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

/* 主题标签 */
.tag {
  padding: 4rpx 12rpx;
  font-size: 24rpx;
}

/* 汇报时间 */
.report-time {
  font-size: 26rpx;
  color: #999;
  margin-top: 8rpx; /* 保证汇报时间在下面 */
}

/* 底部按钮 */
.bottom-btn {
  position: fixed;
  bottom: 30rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
}

.report-btn {
  font-size: 32rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
}


.top-heder {
  width: 100%;
  height: 68px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 5px 15px;
  margin-top: 2rem;
}

.t-title {
  font-size: 17px;
  font-weight: bold;
  color: #333333;
}

.t-left {
  width: 20%;
  height: 20px;
}

.t-you {
  width: 20%;
  height: 20px;
}

.t-input {
  width: 75%;
  height: 36px;
  background: #F0F0F0;
  border-radius: 50px;
  box-sizing: border-box;
  padding: 0 15px;
  display: flex;
  align-items: center;
}

.sou {
  width: 10%;
  margin-left: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.searchContent {
  display: flex;
  justify-content: center;
}
</style>