usky-web-mobile/src/pages/mine/setting/funReport/funReport.vue

<template>
  <view class="">
    <!-- 筛选框start -->
    <view style="height: 98rpx"></view>
    <view class="ding">
      <!-- <calendar></calendar> -->
      <view class="example-body">
        <uni-datetime-picker
          v-model="datetimerange"
          type="daterange"
          start-placeholder="请选择开始时间"
          end-placeholder="请选择结束时间"
          start="2000-3-20 12:00:00"
          end="2025-10-20 20:00:00"
          rangeSeparator="至"
        />
      </view>
    </view>
    <!-- 筛选框end -->
    <view class="site-items" style="margin-top: 0; height: calc(100vh - 286rpx)">
      <view class="cu-list menu-avatar">
        <view
          class="cu-item"
          :class="modalName == 'move-box-' + index ? 'move-cur' : ''"
          v-for="(item, index) in funcReport"
          :key="index"
          @touchstart="ListTouchStartCange"
          @touchmove="ListTouchMove"
          @touchend="ListTouchEnd"
          :data-target="'move-box-' + index"
        >
          <view class="cu-avatar round lg">
            <image class="image-bg" src="@/static/images/setting/funcList.png" />
          </view>
          <view class="content">
            <view class="pro-title">
              <view class="cut">{{ item.report_name }}</view>
            </view>
            <view class="pro-des">
              <view class="text-cut">
                {{ item.remarks }}
              </view>
            </view>
            <view class="pro-date">{{ item.add_time }}</view>
          </view>
          <view class="nav-right num">
            <view class="text-grey">
              <text class="icon iconfont margin-right-sm margin-left-lg">&#xe629;</text>
            </view>
          </view>
          <view class="move">
            <view class="bg-grey" @click.stop="editItem(item)">编辑</view>
            <view class="bg-red" @click.stop="deleteItem(item)">删除</view>
          </view>
        </view>
      </view>
      <view v-if="!funcReport.length && authListRes == 1" class="text-center margin-top"> 暂无数据</view>
      <view v-show="isLoadMore && pages > 1" style="padding-bottom: 60px">
        <uni-load-more :status="loadStatus"></uni-load-more>
      </view>

      <view style="padding-bottom: 60px"></view>
    </view>

    <!-- 新增按钮start -->
    <view style="width: 100%; position: fixed; bottom: 0px; right: 0px; height: 64px; background: #fff">
      <view class="plus">
        <image src="@/static/images/setting/plus.png" style="width: 100rpx; height: 100rpx" @tap="goAddPage()"></image>
      </view>
    </view>

    <!-- 新增按钮end -->
  </view>
</template>

<script setup>
import json from "@/static/js/json.js";
import { onLoad, onShow, onHide, onLaunch, onReachBottom, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, toRefs, watchEffect } from "vue";

import useStore from "@/store/modules/user";
import xunJianStore from "@/store/modules/xunJian";

import { del, index } from "@/api/setting/funReport.js";

const funcReport = ref([]);
const modalName = ref(null);
const getData = ref([]);
const dwtype = ref(0);
const datetimerange = ref(["", ""]);

const listTouchStart = ref(0);
const listTouchDirection = ref(null);

const flag = ref(false);

const authListRes = ref(0);

const pages = ref(1);
const size = ref(12);
const loadStatus = ref("loading"); //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
const isLoadMore = ref(false); //是否加载中
const deleteStatus = ref(false);

function loadData() {
  getDeviceList({
    company_code: uni.getStorageSync("selectedCode"),
    start_time: datetimerange.value[0],
    end_time: datetimerange.value[1],
    pages: pages.value,
    size: size.value,
  });
}

// 设备类型数据请求
function getDeviceList(params = {}) {
  index(params).then((res) => {
    if (deleteStatus.value) {
      funcReport.value = [];
      deleteStatus.value = false;
    }
    authListRes.value = 1;

    if (res.data.totalcount) {
      funcReport = res.data;
      if (res.data.length < size.value) {
        //判断接口返回数据量小于请求数据量，则表示此为最后一页

        isLoadMore.value = true;
        loadStatus.value = "nomore";
      } else {
        isLoadMore.value = false;
      }
    } else {
      isLoadMore.value = true;
      loadStatus.value = "nomore";
    }
  });
}

//编辑
function editItem(item) {
  uni.redirectTo({
    url: "/pages/setting/funReport/funcAdd/funcAdd?id=" + item.id + "",
  });
}

//删除
function deleteItem(item) {
  let deleteT = 0;
  deleteStatus.value = true;
  uni.showModal({
    title: "确认删除吗？",
    content: "",
    success: function (result) {
      if (result.confirm) {
        del({
          id: item.id,
        }).then((res) => {
          if (!res.flag) {
            alert("删除失败");
            return;
          }
          getDeviceList({ company_code: uni.getStorageSync("selectedCode") });
        });
      } else if (result.cancel) {
        console.log("用户点击取消");
      }
    }.bind(this),
  });
}

// 新增
function goAddPage(type) {
  uni.redirectTo({
    url: "/pages/setting/funReport/funcAdd/funcAdd",
    success: (res) => {},
    fail: () => {},
    complete: () => {},
  });
}

// ListTouch触摸开始
function ListTouchStartCange(e) {
  listTouchStart.value = e.touches[0].pageX;
}

// ListTouch计算方向
function ListTouchMove(e) {
  listTouchDirection.value = e.touches[0].pageX - listTouchStart.value < -80 ? "left" : "right";
}

// ListTouch计算滚动
function ListTouchEnd(e) {
  if (listTouchDirection.value == "left") {
    modalName.value = e.currentTarget.dataset.target;
  } else {
    modalName.value = null;
  }
  listTouchDirection.value = null;
}

function datetimerangeChage() {
  funcReport.value = [];
  pages.value = 1;
  authListRes.value = [];
  loadData();
}

watchEffect(() => {
  datetimerangeChage();
});

onLoad((option) => {
  dwtype.value = option.dwtype;
  loadData();
});

onReachBottom(() => {
  //上拉触底函数
  if (!isLoadMore.value) {
    //此处判断，上锁，防止重复请求
    isLoadMore.value = true;
    pages.value += 1;
    loadData();
  }
});

onNavigationBarButtonTap((e) => {
  console.log(e);
  uni.navigateTo({
    url: "./common/export/index?dwtype=" + dwtype.value,
  });
});
</script>

<style lang="scss">
.cu-item {
  height: 180rpx !important;
}
.plus {
  position: fixed;
  bottom: 3px;
  right: 3px;
}
</style>