<template>
|
<view class="app-container">
|
<!-- 页面头部 -->
|
<PageHeader title="巡检上传" @back="goBack"/>
|
<view class="card-container">
|
<!-- 标签页 -->
|
<u-tabs
|
:list="tabs"
|
:current="activeTabIndex"
|
@change="handleTabChange"
|
:scrollable="false"
|
lineWidth="30"
|
lineColor="#2979ff"
|
:activeStyle="{
|
color: '#2979ff',
|
fontWeight: 'bold'
|
}"
|
/>
|
<view>
|
<!-- 扫码模块 -->
|
<view v-if="activeTab === 'qrCode'" class="scan-section">
|
<view class="scan-controls">
|
<u-button
|
type="primary"
|
:loading="scanLoading"
|
@click="toggleScan"
|
>
|
{{ scanButtonText }}
|
</u-button>
|
</view>
|
|
<!-- 状态提示 -->
|
<view class="status-info">
|
<u-alert
|
v-if="cameraError"
|
:title="cameraError"
|
type="error"
|
:show-icon="true"
|
:closable="true"
|
@close="cameraError = null"
|
/>
|
<view v-if="isScanning" class="scanning-text">
|
<u-loading-icon mode="spinner" :color="statusColor" />
|
<text>正在扫描二维码...</text>
|
</view>
|
</view>
|
</view>
|
<view>
|
<!-- 加载状态 -->
|
<view v-if="tableLoading" class="loading-container">
|
<u-loading-icon text="加载中..." />
|
</view>
|
|
<!-- 生产巡检列表 -->
|
<view v-else-if="activeTab !== 'qrCode' && tableData.length > 0" class="list-container">
|
<view v-for="(item, index) in tableData" :key="index" class="list-item">
|
<view class="item-content">
|
<view class="item-row">
|
<text class="item-label">巡检任务名称：</text>
|
<text class="item-value">{{ item.taskName || '-' }}</text>
|
</view>
|
<view class="item-row">
|
<text class="item-label">地点：</text>
|
<text class="item-value">{{ item.inspectionLocation || '-' }}</text>
|
</view>
|
<view class="item-row">
|
<text class="item-label">备注：</text>
|
<text class="item-value">{{ item.remarks || '-' }}</text>
|
</view>
|
<view class="item-row">
|
<text class="item-label">执行巡检人：</text>
|
<text class="item-value">{{ item.inspector || '-' }}</text>
|
</view>
|
</view>
|
<view class="item-actions">
|
<u-button type="primary" size="small" @click="handleAdd(item)">上传</u-button>
|
</view>
|
</view>
|
</view>
|
|
<!-- 现场巡检列表 -->
|
<view v-else-if="activeTab === 'qrCode' && tableData.length > 0" class="list-container">
|
<view v-for="(item, index) in tableData" :key="index" class="list-item">
|
<view class="item-content">
|
<view class="item-row">
|
<text class="item-label">设备名称：</text>
|
<text class="item-value">{{ item.deviceName || '-' }}</text>
|
</view>
|
<view class="item-row">
|
<text class="item-label">所在位置描述：</text>
|
<text class="item-value">{{ item.location || '-' }}</text>
|
</view>
|
<view class="item-row">
|
<text class="item-label">巡检人：</text>
|
<text class="item-value">{{ item.scanner || '-' }}</text>
|
</view>
|
<view class="item-row">
|
<text class="item-label">巡检时间：</text>
|
<text class="item-value">{{ item.scanTime || '-' }}</text>
|
</view>
|
</view>
|
<view class="item-actions">
|
<u-button type="primary" size="small" @click="viewFile(item)">查看附件</u-button>
|
</view>
|
</view>
|
</view>
|
|
<!-- 空数据 -->
|
<view v-else-if="!tableLoading && tableData.length === 0" class="no-data">
|
<text>暂无数据</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<form-dia ref="formDia" @closeDia="handleQuery"></form-dia>
|
<qr-code-form-dia ref="qrCodeFormDia" @closeDia="handleQuery"></qr-code-form-dia>
|
<view-qr-code-files ref="viewQrCodeFiles"></view-qr-code-files>
|
</view>
|
</template>
|
|
<script setup>
|
import { onMounted, ref, reactive, computed, nextTick } from "vue";
|
import FormDia from "@/pages/inspectionUpload/components/formDia.vue";
|
import { useToast } from '@/utils/uviewplus';
|
import QrCodeFormDia from "@/pages/inspectionUpload/components/qrCodeFormDia.vue";
|
import { qrCodeList, qrCodeScanRecordList } from "@/api/inspectionUpload/index.js";
|
import { inspectionTaskList } from "@/api/inspectionManagement/index.js";
|
import ViewQrCodeFiles from "@/components/imageUpload/viewQrCodeFiles.vue";
|
|
const { showToast } = useToast();
|
|
const formDia = ref();
|
const qrCodeFormDia = ref();
|
const viewQrCodeFiles = ref();
|
|
// 当前标签
|
const activeTab = ref("task");
|
const activeTabIndex = ref(0);
|
const tabName = ref("task");
|
|
// 标签页数据
|
const tabs = reactive([
|
{ name: "生产巡检", value: "task" },
|
{ name: "现场巡检", value: "qrCode" },
|
]);
|
|
|
// 表格数据
|
const tableData = ref([]);
|
const tableLoading = ref(false);
|
|
// 扫码相关状态
|
const isScanning = ref(false);
|
const scanLoading = ref(false);
|
const cameraError = ref(null);
|
|
const statusColor = computed(() => {
|
return isScanning.value ? '#67C23A' : '#F56C6C';
|
});
|
|
// 生命周期管理
|
onMounted(async () => {
|
handleTabChange({ index: 0 });
|
});
|
|
// 标签页切换
|
const handleTabChange = (e) => {
|
const index = typeof e === 'object' && e.index !== undefined ? e.index : e;
|
const selectedTab = tabs[index];
|
if (selectedTab) {
|
activeTab.value = selectedTab.value;
|
activeTabIndex.value = index;
|
tabName.value = selectedTab.value;
|
tableData.value = [];
|
getList();
|
}
|
};
|
|
// 点击查询
|
const handleQuery = () => {
|
getList();
|
};
|
|
// 获取列表数据
|
const getList = () => {
|
tableLoading.value = true;
|
if (tabName.value === "task") {
|
inspectionTaskList({ size: -1, current: -1 }).then(res => {
|
tableLoading.value = false;
|
tableData.value = res.data.records || [];
|
}).catch(err => {
|
tableLoading.value = false;
|
showToast('获取数据失败', 'error');
|
});
|
} else {
|
qrCodeScanRecordList({ size: -1, current: -1 }).then(res => {
|
tableLoading.value = false;
|
// 处理数据，格式化字段
|
tableData.value = (res.data.records || []).map(item => ({
|
...item,
|
deviceName: item.qrCode?.deviceName || '-',
|
location: item.qrCode?.location || '-'
|
}));
|
}).catch(err => {
|
tableLoading.value = false;
|
showToast('获取数据失败', 'error');
|
});
|
}
|
};
|
|
// 上传
|
const handleAdd = (row) => {
|
console.log('handleAdd 被调用', row);
|
console.log('formDia.value:', formDia.value);
|
|
if (!formDia.value) {
|
showToast('组件未初始化', 'error');
|
return;
|
}
|
|
nextTick(() => {
|
if (formDia.value && formDia.value.openDialog) {
|
formDia.value.openDialog(row);
|
} else {
|
console.error('formDia.value.openDialog 不存在');
|
showToast('打开弹窗失败', 'error');
|
}
|
});
|
};
|
|
// 查看附件
|
const viewFile = (row) => {
|
nextTick(() => {
|
viewQrCodeFiles.value?.openDialog(row);
|
});
|
};
|
|
// 扫码按钮文本
|
const scanButtonText = computed(() => {
|
if (scanLoading.value) return '正在初始化...';
|
return isScanning.value ? '停止扫码' : '开始扫码';
|
});
|
|
// 切换扫码状态
|
const toggleScan = async () => {
|
if (isScanning.value) {
|
stopScan();
|
} else {
|
startScan();
|
}
|
};
|
|
// 开始扫码
|
const startScan = () => {
|
if (isScanning.value) {
|
showToast('正在扫描中，请稍候...', 'warning');
|
return;
|
}
|
|
scanLoading.value = true;
|
|
// 调用uni-app的扫码API
|
uni.scanCode({
|
scanType: ['qrCode', 'barCode'],
|
success: (res) => {
|
scanLoading.value = false;
|
handleScanSuccess(res.result);
|
},
|
fail: (err) => {
|
scanLoading.value = false;
|
console.error('扫码失败:', err);
|
cameraError.value = '扫码失败，请重试';
|
setTimeout(() => {
|
cameraError.value = null;
|
}, 3000);
|
}
|
});
|
};
|
|
// 扫描成功处理
|
const handleScanSuccess = async (result) => {
|
try {
|
if (!result) {
|
showToast('扫码结果为空', 'warning');
|
return;
|
}
|
|
showToast('识别成功', 'success');
|
|
// 解析二维码数据
|
let qrData;
|
try {
|
qrData = JSON.parse(result);
|
} catch (e) {
|
// 如果不是JSON格式，直接使用原始数据
|
qrData = { data: result };
|
}
|
|
callBackendAPI(qrData);
|
} catch (error) {
|
showToast(error.message || '处理扫码结果失败', 'error');
|
}
|
};
|
|
// 调用后端API
|
const callBackendAPI = (result) => {
|
nextTick(() => {
|
qrCodeFormDia.value?.openDialog(result);
|
});
|
};
|
|
// 停止扫码
|
const stopScan = () => {
|
isScanning.value = false;
|
scanLoading.value = false;
|
};
|
// 返回上一页
|
const goBack = () => {
|
uni.navigateBack();
|
};
|
</script>
|
|
<style scoped>
|
.app-container {
|
padding: 20rpx;
|
background-color: #f5f5f5;
|
min-height: 100vh;
|
}
|
|
.card-container {
|
background-color: #fff;
|
border-radius: 16rpx;
|
padding: 20rpx;
|
}
|
|
.scan-section {
|
margin: 20rpx 0;
|
}
|
|
.scan-controls {
|
display: flex;
|
justify-content: center;
|
margin-bottom: 20rpx;
|
}
|
|
.status-info {
|
margin-top: 32rpx;
|
text-align: center;
|
}
|
|
.scanning-text {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #2979ff;
|
margin-top: 16rpx;
|
font-size: 28rpx;
|
}
|
|
.scanning-text text {
|
margin-left: 10rpx;
|
}
|
|
.loading-container {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 40rpx 0;
|
}
|
|
.list-container {
|
margin-top: 20rpx;
|
}
|
|
.list-item {
|
background-color: #fff;
|
border-radius: 16rpx;
|
padding: 24rpx;
|
margin-bottom: 20rpx;
|
border: 1px solid #f0f0f0;
|
}
|
|
.item-content {
|
margin-bottom: 20rpx;
|
}
|
|
.item-row {
|
display: flex;
|
margin-bottom: 16rpx;
|
font-size: 28rpx;
|
line-height: 40rpx;
|
}
|
|
.item-row:last-child {
|
margin-bottom: 0;
|
}
|
|
.item-label {
|
color: #666;
|
width: 200rpx;
|
flex-shrink: 0;
|
}
|
|
.item-value {
|
color: #333;
|
flex: 1;
|
word-break: break-all;
|
}
|
|
.item-actions {
|
display: flex;
|
justify-content: flex-end;
|
padding-top: 20rpx;
|
border-top: 1px solid #f0f0f0;
|
}
|
|
.no-data {
|
text-align: center;
|
padding: 80rpx 0;
|
color: #999;
|
font-size: 28rpx;
|
}
|
|
/* 移动端优化 */
|
@media (max-width: 768px) {
|
.app-container {
|
padding: 10rpx;
|
}
|
}
|
</style>
|
