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>
        <text @click="showFilterPopup" class="filter-btn">筛选</text> <!-- 筛选按钮放在这里 -->
      </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>

    <!-- 筛选弹窗 -->
    <u-popup :show="showPopup" @close="closeFilterPopup" mode="right" >
      <view class="filter-popup">
        <view class="popup-header">
          <text>时间筛选</text>
        </view>
        <view style="width: 95%; margin: 50px auto;">
          <uni-datetime-picker v-model="queryParams.reportTime" type="daterange" />
        </view>
        <view class="popup-footer">
          <u-button type="primary" @click="applyFilter">应用筛选</u-button>
          <u-button type="default" @click="clearTime">清除时间</u-button>
        </view>
      </view>
    </u-popup>

    <u-datetime-picker
        :show="showStarTime"
        v-model="queryParams.reportTime[0]"
        mode="date"
        @cancel="showStarTime = false"
        @confirm="selectStartTime"
    ></u-datetime-picker>

    <u-datetime-picker
        :show="showEndTime"
        v-model="queryParams.reportTime[1]"
        mode="date"
        @cancel="showEndTime = false"
        @confirm="selectEndTime"
    ></u-datetime-picker>
  </view>
</template>

<script>
import headersVue from '../../../components/header/headers.vue';
import config from "@/config";
import {formatDate, 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
        })
      }
    },

    // 筛选
    // 搜索
    search() {
      this.reportList = [];
      this.queryParams.pageNo = 1;
      this.getReportList();
    },
    // 打开筛选弹窗
    showFilterPopup() {
      this.showPopup = true;
    },
    // 关闭筛选弹窗
    closeFilterPopup() {
      this.showPopup = false;
    },
    // 应用筛选
    applyFilter() {
      this.closeFilterPopup();
      this.search();
    },
    // 清除时间
    clearTime() {
      this.showPopup = false;
      this.queryParams.reportTime = ['', ''];
      this.reportTimeStr = [];
      this.search();
    },
    selectStartTime() {
      //加延时器
      this.$nextTick(() => {
        this.queryParams.reportTime[0] = formatDate(this.queryParams.reportTime[0]);
        this.reportTimeStr[0] = this.queryParams.reportTime[0]
        this.showStarTime = false;
      });

    },
    selectEndTime() {
      this.$nextTick(() => {
        this.queryParams.reportTime[1] = formatDate(this.queryParams.reportTime[1]);
        this.reportTimeStr[1] = this.queryParams.reportTime[1]
        this.showEndTime = false;
      });
    },
  }

}
</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;
  display: flex;
  align-items: center;
}

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

.filter-btn {
  font-size: 28rpx;
  color: #427FFE;
  margin-left: 20rpx;
  cursor: pointer;
}

.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;
}

.filter-popup {
  padding: 20rpx;
  width: 450rpx;
  max-width: 90%;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
  margin-top: 70rpx;
}

.popup-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}
</style>