spring
2025-11-19 af4f45eaa2703ecf991bd10f07f6df179f2677d9
src/pages/routingInspection/index.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,164 @@
<template>
  <view>
    <wd-row>
      <wd-col :span="21">
        <wd-search
          v-model="searchKeyword"
          placeholder="请输入班组名称"
          placeholder-left
          hide-cancel
          @search="handleSearch"
          @clear="handleClear"
        ></wd-search>
      </wd-col>
      <wd-col :span="3">
        <view class="scan_box" @click="openScan">
          <wd-icon name="scan" size="24px" color="#0D867F"></wd-icon>
        </view>
      </wd-col>
    </wd-row>
    <wd-tabs v-model="tab" auto-line-width slidable="always" :map-num="patrolList.length">
      <wd-tab
        v-for="(item, index) in patrolList"
        :key="index"
        :title="`${item.deviceModel}(待检查${item.pendingNum}条)`"
        class="tab_bg"
      >
        <ProductList
          :key="searchKey"
          :api="RoutingInspectionApi.getInspectListByPatrol"
          :ProList="{ ...item, teamName: searchKeyword }"
        />
      </wd-tab>
    </wd-tabs>
    <wd-toast />
  </view>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
import { onShow, onHide } from "@dcloudio/uni-app";
import ProductList from "./list/index.vue";
import { useUserStore } from "@/store/modules/user";
import reportApi from "@/api/work/report";
import { useToast } from "wot-design-uni";
import RoutingInspectionApi from "@/api/routingInspection/routingInspection";
import { useScanCode } from "@/composables/useScanCode";
const userStore = useUserStore();
const userInfo: any = computed(() => userStore.userInfo);
const toast = useToast();
const tab = ref<number>(0);
const patrolList = ref<any[]>([]); // å·¡æ£€è®¾å¤‡åˆ—表数据
const searchKeyword = ref<string>(""); // æœç´¢å…³é”®è¯ï¼ˆç­ç»„名称)
const searchKey = ref<number>(0); // ç”¨äºŽå¼ºåˆ¶åˆ·æ–°åˆ—表
// ä½¿ç”¨æ‰«ç ç®¡ç† composable(全局监听器,不随页面切换关闭)
const { deviceUid, deviceModel, hasScanned, displayText, loadFromCache, enableListener } =
  useScanCode("scanIndex");
const handlePatrolData = (index: number, count: number) => {
  // å¯ä»¥åœ¨è¿™é‡Œæ›´æ–°ç‰¹å®šå·¡æ£€è®¾å¤‡çš„待检查数量
  // ä¾‹å¦‚:patrolList.value[index].pendingNum = count;
};
// å¤„理搜索
const handleSearch = (value: string) => {
  console.log("搜索班组:", value);
  searchKey.value++; // æ›´æ–° key å¼ºåˆ¶åˆ·æ–°åˆ—表
};
// å¤„理清空搜索
const handleClear = () => {
  console.log("清空搜索");
  searchKeyword.value = "";
  searchKey.value++; // æ›´æ–° key å¼ºåˆ¶åˆ·æ–°åˆ—表
};
const openScan = () => {
  console.log("index.vue - ç‚¹å‡»æ‰«ç æŒ‰é’®ï¼ˆå…¨å±€æ‰«ç æ¨¡å¼ï¼Œæ— éœ€æ‰‹åŠ¨è§¦å‘ï¼‰");
  // å…¨å±€æ‰«ç æ¨¡å¼ä¸‹ï¼Œç¡¬ä»¶æ‰«ç ä¼šè‡ªåŠ¨è§¦å‘ï¼Œæ— éœ€æ‰‹åŠ¨è°ƒç”¨
  uni.showToast({
    title: "请使用扫码枪扫描",
    icon: "none",
  });
};
// èŽ·å–å·¡æ£€è®¾å¤‡åˆ—è¡¨
const loadPatrolList = async () => {
  try {
    const { data } = await RoutingInspectionApi.getDeviceInspectListByPatrol({});
    if (data) {
      patrolList.value = data;
    }
  } catch (error) {
    toast.error("获取巡检设备列表失败");
  }
};
onMounted(() => {
  // é¡µé¢åŠ è½½æ—¶èŽ·å–å·¡æ£€è®¾å¤‡åˆ—è¡¨
  loadPatrolList();
  // å¯ç”¨å…¨å±€ç›‘听器
  enableListener();
  console.log("index.vue - onMounted");
});
onShow(() => {
  console.log("========== index.vue - onShow è§¦å‘ ==========");
  // é¡µé¢æ˜¾ç¤ºæ—¶é‡æ–°å¯ç”¨ç›‘听器(确保监听器有效)
  enableListener();
  // åŠ è½½ç¼“å­˜ï¼ˆæ›´æ–°UI显示)
  loadFromCache();
  // æ£€æŸ¥æ˜¯å¦éœ€è¦åˆ·æ–°åˆ—表(只有提交成功后才刷新)
  const needRefresh = uni.getStorageSync("needRefreshInspectionList");
  if (needRefresh) {
    console.log("检测到需要刷新列表,开始刷新...");
    // é‡æ–°åŠ è½½å·¡æ£€è®¾å¤‡åˆ—è¡¨ï¼ˆåˆ·æ–°å¾…æ£€æŸ¥æ•°é‡ï¼‰
    loadPatrolList();
    // å¼ºåˆ¶åˆ·æ–° ProductList ç»„ä»¶
    searchKey.value++;
    // æ¸…除刷新标记
    uni.removeStorageSync("needRefreshInspectionList");
  }
});
</script>
<style lang="scss" scoped>
::v-deep .wd-search__block {
  border-radius: unset;
}
.scan_box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 6px;
  background: #fff;
}
::v-deep .wd-tabs__line {
  background: #0d867f;
}
::v-deep .wd-tabs__nav {
  border-bottom: 1px #dddddd solid;
}
.tab_bg {
  background: #f3f9f8;
}
.icon_box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #e7f4ec99;
  border-radius: 50%;
}
.statistics_box {
  margin: 15px;
}
</style>