business_tms_program 0.0.0

package/src/pages/device/list.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { isCheckStatusEnum } from '@/dict/device'
+import { queryDevicePageList } from '@/api/device'
+import { throttle } from 'lodash-es';
+import DropMenu from '@/components/DropMenu.vue'
+import Skeleton from '@/components/Skeleton.vue';
+import LoadingView from '@/components/Loading.vue';
+import Empty from '@/components/Empty.vue';
+defineOptions({
+  name: "deviceList"
+});
+const selectedValue = ref('customerCode')
+const options = [
+  { value: 'customerCode', name: '客户名称' },
+  { value: 'deviceCode', name: '设备编号' },
+]
+const state = reactive({ 
+  itemDatas: [] as any[],
+  current: 1,
+  size: 10,
+  loadMore: false,
+  hasMore: true,
+  screenHeight: uni.getSystemInfoSync().windowHeight,
+  triggerRatio: 0.3, // 设置触发比例为屏幕高度的30%
+  loadingTop: false, // 顶部下拉刷新
+  customerCode: '',
+  searchValue: '', // 搜索框的值
+  hasSearch: false, // 是否有搜索过
+});
+const loadData = async (page?: number) => {
+  if (state.loadMore) return;
+  state.loadMore = true;
+    const { records, current }  = await queryDevicePageList({
+      size: state.size,
+      current: page || state.current,
+      [selectedValue.value]: state.searchValue, // 动态查询字段
+    }); 
+    state.loadMore = false;
+    if (!records) {
+      return
+    }
+    const newData = records.map((item) => {
+      return { ...item, show: true };
+    });
+       if (page === 1) {
+      state.itemDatas = newData;
+    } else {
+      state.itemDatas = [...state.itemDatas,...newData];
+    }
+    state.current = current;
+    state.hasMore = records.length > 0;
+    if (!state.hasSearch) {
+      state.hasSearch = true;
+    }
+}
+// 滚动到底部加载更多
+const onScrollToLower = throttle(() => {
+  if (!state.loadMore && state.hasMore) {
+    state.current++;
+    nextTick(() => {
+      loadData(state.current);
+    })
+  }
+}, 500);
+const handleSearchInput = (e: any) => {
+  state.searchValue = e.detail.value;
+  loadData(1); // 刷新数据 
+}
+const toDeviceDetail = (item: any) => {
+  uni.navigateTo({ url: `/pages/device/detail?deviceCode=${item.deviceCode}` })
+}
+const toSearchList = () => {
+  uni.navigateTo({ url: `/pages/device/searchList`}) 
+}
+onMounted(async () => {
+  loadData(1);
+  uni.$on('deviceList-updated', () => {
+    loadData(1); // 刷新数据
+  });
+})
+</script>
+
+<template>
+  <view class="content">
+    <view class="header">
+      <DropMenu v-model="selectedValue" :options="options" />
+      <view class="input-wrapper">
+        <view class="search-input" @click="toSearchList">搜索</view>
+        <image class="uni-icon" src="/static/img/search.png">
+      </image>
+      </view>
+    </view>
+      <view class="skeleton-box" v-if="!state.hasSearch">
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+      </view>
+       <scroll-view
+          v-else
+          class="scroll-view"
+          scroll-y
+          style="height: 100vh;"
+          bounces
+          show-scrollbar
+          scroll-with-animation
+          @scrolltolower="onScrollToLower"
+          :lower-threshold="`${state.screenHeight * state.triggerRatio}`"
+        >
+        <view class="scroll-box">
+          <view class="record-box"
+            v-for="item in state.itemDatas"
+            :key="item.deviceCode"
+            @click="toDeviceDetail(item)"
+            >
+            <view class="img"></view>
+            <view class="info">
+              <view class="inlineBox">
+                <view class="code">{{item.deviceCode}}</view>
+                <view class="status"
+                  :class="{'unCheck': item.isCheckStatus === isCheckStatusEnum.NO}">
+                  {{item.isCheckStatus === isCheckStatusEnum.YES ? '已验收' : '未验收'}}
+                </view>
+              </view>
+              <view class="contact">客户：{{item.customerName}}</view>
+            </view>
+          </view>
+          <Empty v-if="state.itemDatas.length === 0 && state.hasSearch" />
+         <LoadingView v-if="state.loadMore" class="loading-indicator" :size="50"></LoadingView>
+         <view v-if="state.itemDatas.length > 0 && !state.hasMore" class="noMore">没有更多数据了</view>
+         </view>
+        </scroll-view>
+  </view>
+</template>
+<style scoped lang="less">
+.content {
+  background-color: #F5F5F5;
+  min-height: 100vh;  
+}
+.header {
+  padding: 8rpx 12rpx; 
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  position: relative;
+  .input-wrapper{
+    flex: 1;
+    margin-left: 4rpx;
+    padding: 0 24rpx;
+    background: rgba(0,0,0,0.04);
+    border-radius: 8rpx;
+    display: flex;
+    align-items: center;
+  }
+      .search-input {
+        flex: 1;
+        margin-right: 12rpx;
+        font-size: 24rpx;
+        padding: 12rpx 0 12rpx 0;
+        text-align: right;
+        color: rgba(0,0,0,0.4);
+      }
+      .uni-icon {
+        width: 36rpx;
+        height: 36rpx;
+      }
+}
+.scroll-box {
+  padding: 16rpx 32rpx;
+  box-sizing: border-box;
+}
+.record-box{
+  display: flex;
+  margin-bottom: 16rpx;
+  padding: 36rpx;
+  background: #FFFFFF;
+  border-radius: 16rpx;
+  .img{
+    margin-right: 16rpx;
+    width: 96rpx;
+    height: 96rpx;
+    background: #E8E8E8;
+    border-radius: 8rpx;
+  }
+  .inlineBox{
+    display: flex;
+    margin-bottom: 6rpx; 
+    .code{
+      margin-right: 16rpx;
+      font-weight: bold;
+      font-size: 32rpx;
+      color: #000000;
+      line-height: 38rpx;
+    }
+    .status{
+      padding: 6rpx 16rpx 8rpx 16rpx;
+      font-weight: 400;
+      font-size: 24rpx;
+      color: #1D6FE9;
+      line-height: 34rpx;
+      border-radius: 24rpx;
+      background: rgba(29,111,233,0.1);
+      border: 1rpx solid #1D6FE9;
+    }
+    .unCheck {
+      color: #F5894E;
+      border: 1rpx solid #F5894E;
+      background: rgba(245,137,78,0.1);
+    }
+  }
+  .contact{
+    font-size: 28rpx;
+    color: rgba(0,0,0, 0.6);
+    line-height: 40rpx;
+  }
+}
+</style>