<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>
|
