From 4b39710e41760807527cba66c248c0939c3427b0 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期六, 20 九月 2025 10:58:38 +0800
Subject: [PATCH] 巡检上传页面
---
src/pages/inspectionUpload/index.vue | 54 +++++++
src/pages/inspectionUpload/components/qrCodeFormDia.vue | 344 ++++++++++++++++++++++++++++++++++++++++++------
2 files changed, 346 insertions(+), 52 deletions(-)
diff --git a/src/pages/inspectionUpload/components/qrCodeFormDia.vue b/src/pages/inspectionUpload/components/qrCodeFormDia.vue
index 07a94cd..3dc83ef 100644
--- a/src/pages/inspectionUpload/components/qrCodeFormDia.vue
+++ b/src/pages/inspectionUpload/components/qrCodeFormDia.vue
@@ -1,6 +1,6 @@
<template>
<u-popup
- v-model="dialogVisitable"
+ :show="dialogVisitable"
mode="center"
:round="10"
:closeable="true"
@@ -26,23 +26,53 @@
<u-input
v-model="form.location"
placeholder="璇疯緭鍏ュ湴鐐�"
- :maxlength="30"
+ :maxlength="100"
:disabled="true"
- />
+ >
+ <template #suffix>
+ <u-icon
+ name="map"
+ @click="getCurrentLocation"
+ class="location-icon"
+ :class="{ 'loading': locationLoading }"
+ />
+ </template>
+ </u-input>
</u-form-item>
<u-form-item label="闄勪欢" prop="storageBlobDTO" labelWidth="80">
- <u-upload
- :fileList="form.storageBlobDTO"
- @afterRead="afterRead"
- @delete="deleteFile"
- name="files"
- multiple
- :maxCount="10"
- :maxSize="1024 * 1024"
- accept="video/*"
- :previewFullImage="true"
- ></u-upload>
+ <view class="upload-container">
+ <u-upload
+ :fileList="form.storageBlobDTO"
+ @afterRead="afterRead"
+ @delete="deleteFile"
+ name="files"
+ multiple
+ :maxCount="10"
+ :maxSize="50 * 1024 * 1024"
+ accept="image/*,video/*"
+ :previewFullImage="true"
+ :camera="true"
+ :gallery="true"
+ ></u-upload>
+ <view class="upload-actions">
+ <u-button
+ type="primary"
+ size="small"
+ @click="chooseImage"
+ :customStyle="{ marginRight: '10px' }"
+ >
+ 鎷嶇収
+ </u-button>
+ <u-button
+ type="success"
+ size="small"
+ @click="chooseVideo"
+ >
+ 褰曞儚
+ </u-button>
+ </view>
+ </view>
</u-form-item>
<u-form-item label="宸℃浜�" prop="scannerName" labelWidth="80">
@@ -72,7 +102,7 @@
</template>
<script setup>
-import { reactive, ref, onMounted } from 'vue'
+import { reactive, ref, onMounted, nextTick } from 'vue'
import { addOrEditQrCodeRecord } from '@/api/inspectionUpload/index.js'
import useUserStore from '@/store/modules/user.ts'
@@ -82,6 +112,7 @@
const formRef = ref(null)
const userStore = useUserStore()
const userInfo = ref({})
+const locationLoading = ref(false)
// 鑾峰彇褰撳墠鏃堕棿
function getCurrentDateTime() {
@@ -130,37 +161,89 @@
// 鏂囦欢涓婁紶澶勭悊
const afterRead = (event) => {
const { file } = event
+ console.log('鏂囦欢閫夋嫨:', file)
- // 涓婁紶鏂囦欢鍒版湇鍔″櫒
- uni.uploadFile({
- url: '/api/upload', // 鏇挎崲涓哄疄闄呯殑涓婁紶鎺ュ彛
- filePath: file.url,
- name: 'file',
+ // 鐩存帴娣诲姞鍒版枃浠跺垪琛紝涓嶄笂浼犲埌鏈嶅姟鍣�
+ const fileItem = {
+ url: file.url,
+ name: file.name || `鏂囦欢_${Date.now()}`,
+ status: 'success',
+ size: file.size || 0,
+ type: file.type || 'image/jpeg'
+ }
+
+ form.storageBlobDTO.push(fileItem)
+
+ uni.showToast({
+ title: '鏂囦欢娣诲姞鎴愬姛',
+ icon: 'success'
+ })
+}
+
+// 鎷嶇収
+const chooseImage = () => {
+ uni.chooseImage({
+ count: 1,
+ sizeType: ['original', 'compressed'],
+ sourceType: ['camera'],
success: (res) => {
- const data = JSON.parse(res.data)
- if (data.code === 200) {
- const fileItem = {
- url: data.data.url,
- name: file.name,
- status: 'success'
- }
-
- form.storageBlobDTO.push(fileItem)
-
- uni.showToast({
- title: '涓婁紶鎴愬姛',
- icon: 'success'
- })
- } else {
- uni.showToast({
- title: '涓婁紶澶辫触',
- icon: 'error'
- })
+ console.log('鎷嶇収鎴愬姛:', res)
+ const tempFilePath = res.tempFilePaths[0]
+
+ const fileItem = {
+ url: tempFilePath,
+ name: `鐓х墖_${Date.now()}.jpg`,
+ status: 'success',
+ type: 'image/jpeg'
}
- },
- fail: () => {
+
+ form.storageBlobDTO.push(fileItem)
+
uni.showToast({
- title: '涓婁紶澶辫触',
+ title: '鎷嶇収鎴愬姛',
+ icon: 'success'
+ })
+ },
+ fail: (err) => {
+ console.error('鎷嶇収澶辫触:', err)
+ uni.showToast({
+ title: '鎷嶇収澶辫触',
+ icon: 'error'
+ })
+ }
+ })
+}
+
+// 褰曞儚
+const chooseVideo = () => {
+ uni.chooseVideo({
+ sourceType: ['camera'],
+ maxDuration: 60, // 鏈�澶�60绉�
+ camera: 'back',
+ success: (res) => {
+ console.log('褰曞儚鎴愬姛:', res)
+ const tempFilePath = res.tempFilePath
+
+ const fileItem = {
+ url: tempFilePath,
+ name: `瑙嗛_${Date.now()}.mp4`,
+ status: 'success',
+ type: 'video/mp4',
+ duration: res.duration,
+ size: res.size
+ }
+
+ form.storageBlobDTO.push(fileItem)
+
+ uni.showToast({
+ title: '褰曞儚鎴愬姛',
+ icon: 'success'
+ })
+ },
+ fail: (err) => {
+ console.error('褰曞儚澶辫触:', err)
+ uni.showToast({
+ title: '褰曞儚澶辫触',
icon: 'error'
})
}
@@ -173,25 +256,149 @@
form.storageBlobDTO.splice(index, 1)
}
+// 鑾峰彇褰撳墠浣嶇疆
+const getCurrentLocation = () => {
+ locationLoading.value = true
+ uni.showLoading({ title: '鑾峰彇浣嶇疆涓�...' })
+
+ uni.getLocation({
+ type: 'gcj02',
+ success: (res) => {
+ // 浣跨敤閫嗗湴鐞嗙紪鐮佽幏鍙栧湴鍧�淇℃伅
+ uni.request({
+ url: `https://restapi.amap.com/v3/geocode/regeo?key=c120a5dc69a9f61839f7763e6057005f&location=${res.longitude},${res.latitude}&radius=1000&extensions=all`,
+ success: (geoRes) => {
+ uni.hideLoading()
+ locationLoading.value = false
+
+ if (geoRes.data.status === '1' && geoRes.data.regeocode) {
+ const regeocode = geoRes.data.regeocode
+ const address = regeocode.formatted_address
+
+ // 浼樺厛鏄剧ず璇︾粏鍦板潃
+ if (address) {
+ form.location = address
+ uni.showToast({
+ title: '浣嶇疆鑾峰彇鎴愬姛',
+ icon: 'success'
+ })
+ } else {
+ // 濡傛灉娌℃湁璇︾粏鍦板潃锛屽皾璇曠粍鍚堝湴鍧�淇℃伅
+ const addressComponent = regeocode.addressComponent
+ const combinedAddress = `${addressComponent.province}${addressComponent.city}${addressComponent.district}${addressComponent.township}`
+ form.location = combinedAddress
+ uni.showToast({
+ title: '浣嶇疆鑾峰彇鎴愬姛',
+ icon: 'success'
+ })
+ }
+ } else {
+ // API璋冪敤鎴愬姛浣嗘病鏈夎繑鍥炲湴鍧�淇℃伅
+ const fallbackAddress = `浣嶇疆: ${res.latitude.toFixed(4)}, ${res.longitude.toFixed(4)}`
+ form.location = fallbackAddress
+ uni.showToast({
+ title: '鑾峰彇鍒颁綅缃紝浣嗗湴鍧�瑙ｆ瀽澶辫触',
+ icon: 'none'
+ })
+ }
+ },
+ fail: (err) => {
+ uni.hideLoading()
+ locationLoading.value = false
+ console.error('閫嗗湴鐞嗙紪鐮佸け璐�:', err)
+
+ // 閫嗗湴鐞嗙紪鐮佸け璐ユ椂锛屾樉绀虹畝鍖栫殑浣嶇疆淇℃伅
+ const fallbackAddress = `浣嶇疆: ${res.latitude.toFixed(4)}, ${res.longitude.toFixed(4)}`
+ form.location = fallbackAddress
+ uni.showToast({
+ title: '浣嶇疆鑾峰彇鎴愬姛锛屼絾鍦板潃瑙ｆ瀽澶辫触',
+ icon: 'none'
+ })
+ }
+ })
+ },
+ fail: (err) => {
+ uni.hideLoading()
+ locationLoading.value = false
+ uni.showToast({
+ title: '鑾峰彇浣嶇疆澶辫触锛岃妫�鏌ュ畾浣嶆潈闄�',
+ icon: 'error'
+ })
+ console.error('鑾峰彇浣嶇疆澶辫触:', err)
+
+ // 澶辫触鏃舵樉绀洪敊璇俊鎭�
+ form.location = '浣嶇疆鑾峰彇澶辫触'
+ }
+ })
+}
+
// 鎵撳紑寮规
const openDialog = async (row) => {
+ console.log('寮规鎺ユ敹鍒扮殑鏁版嵁:', row)
+ console.log('寮规鎵撳紑鍓嶇姸鎬�:', dialogVisitable.value)
+
dialogVisitable.value = true
form.deviceName = row.deviceName || ''
form.location = row.location || ''
form.qrCodeId = row.qrCodeId || row.id || ''
form.storageBlobDTO = []
+
+ console.log('寮规鎵撳紑鍚庣姸鎬�:', dialogVisitable.value)
+ console.log('寮规琛ㄥ崟鏁版嵁:', form)
+
+ // 寮哄埗鏇存柊瑙嗗浘
+ await nextTick()
+ console.log('nextTick鍚庡脊妗嗙姸鎬�:', dialogVisitable.value)
}
// 鎻愪氦琛ㄥ崟
const submitForm = async () => {
try {
+ console.log('寮�濮嬫彁浜よ〃鍗曪紝褰撳墠琛ㄥ崟鏁版嵁:', form)
+
// 琛ㄥ崟楠岃瘉
- const valid = await formRef.value.validate()
- if (!valid) return
+ if (formRef.value) {
+ const valid = await formRef.value.validate()
+ if (!valid) {
+ console.log('琛ㄥ崟楠岃瘉澶辫触')
+ return
+ }
+ }
- form.qrCode.id = form.qrCodeId
+ // 妫�鏌ュ繀濉瓧娈�
+ if (!form.deviceName) {
+ uni.showToast({
+ title: '璇疯緭鍏ヨ澶囧悕绉�',
+ icon: 'error'
+ })
+ return
+ }
- await addOrEditQrCodeRecord({ ...form })
+ if (!form.location) {
+ uni.showToast({
+ title: '璇疯幏鍙栦綅缃俊鎭�',
+ icon: 'error'
+ })
+ return
+ }
+
+ // 鍑嗗鎻愪氦鏁版嵁
+ const submitData = {
+ deviceName: form.deviceName,
+ location: form.location,
+ scannerName: form.scannerName,
+ scannerId: form.scannerId,
+ scanTime: form.scanTime,
+ storageBlobDTO: form.storageBlobDTO,
+ qrCode: {
+ id: form.qrCodeId || form.qrCode.id
+ }
+ }
+
+ console.log('鍑嗗鎻愪氦鐨勬暟鎹�:', submitData)
+
+ const response = await addOrEditQrCodeRecord(submitData)
+ console.log('鎻愪氦鍝嶅簲:', response)
uni.showToast({
title: '鎻愪氦鎴愬姛',
@@ -201,9 +408,19 @@
cancel()
} catch (error) {
console.error('鎻愪氦澶辫触:', error)
+
+ // 鏄剧ず鏇磋缁嗙殑閿欒淇℃伅
+ let errorMessage = '鎻愪氦澶辫触'
+ if (error.response) {
+ errorMessage = error.response.data?.message || `鏈嶅姟鍣ㄩ敊璇�: ${error.response.status}`
+ } else if (error.message) {
+ errorMessage = error.message
+ }
+
uni.showToast({
- title: '鎻愪氦澶辫触',
- icon: 'error'
+ title: errorMessage,
+ icon: 'error',
+ duration: 3000
})
}
}
@@ -251,4 +468,35 @@
border-top: 1px solid #f0f0f0;
background-color: #fafafa;
}
+
+.location-icon {
+ color: #1890ff;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.location-icon:hover {
+ color: #40a9ff;
+}
+
+.location-icon.loading {
+ color: #999;
+ animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
+
+.upload-container {
+ width: 100%;
+}
+
+.upload-actions {
+ display: flex;
+ justify-content: flex-start;
+ margin-top: 10px;
+ gap: 10px;
+}
</style>
diff --git a/src/pages/inspectionUpload/index.vue b/src/pages/inspectionUpload/index.vue
index 5c57b4e..aed4e6e 100644
--- a/src/pages/inspectionUpload/index.vue
+++ b/src/pages/inspectionUpload/index.vue
@@ -317,9 +317,11 @@
const startScan = async () => {
try {
+ scanLoading.value = true
// 浣跨敤uniapp鐨勬壂鐮丄PI
uni.scanCode({
success: (res) => {
+ console.log('鎵爜鎴愬姛:', res)
handleScanSuccess(res)
},
fail: (err) => {
@@ -328,10 +330,14 @@
title: '鎵爜澶辫触',
icon: 'error'
})
+ },
+ complete: () => {
+ scanLoading.value = false
}
})
} catch (e) {
console.error('鍚姩鎵爜澶辫触:', e)
+ scanLoading.value = false
uni.showToast({
title: '鍚姩鎵爜澶辫触',
icon: 'error'
@@ -346,6 +352,8 @@
// 鎵爜鎴愬姛澶勭悊
const handleScanSuccess = async (result) => {
try {
+ console.log('澶勭悊鎵爜缁撴灉:', result)
+
uni.showToast({
title: '璇嗗埆鎴愬姛',
icon: 'success'
@@ -355,12 +363,28 @@
let qrData
try {
qrData = JSON.parse(result.result)
+ console.log('瑙ｆ瀽鐨勪簩缁寸爜鏁版嵁:', qrData)
} catch (e) {
- qrData = { deviceName: result.result, location: '' }
+ // 濡傛灉涓嶆槸JSON鏍煎紡锛岀洿鎺ヤ娇鐢ㄦ壂鐮佺粨鏋滀綔涓鸿澶囧悕绉�
+ qrData = {
+ deviceName: result.result,
+ location: '',
+ qrCodeId: result.result // 娣诲姞浜岀淮鐮両D
+ }
+ console.log('浣跨敤榛樿鏁版嵁鏍煎紡:', qrData)
+ }
+
+ // 纭繚鏁版嵁瀹屾暣鎬�
+ if (!qrData.deviceName) {
+ qrData.deviceName = result.result
+ }
+ if (!qrData.qrCodeId) {
+ qrData.qrCodeId = result.result
}
callBackendAPI(qrData)
} catch (error) {
+ console.error('澶勭悊鎵爜缁撴灉澶辫触:', error)
uni.showToast({
title: error.message || '鏁版嵁瑙ｆ瀽澶辫触',
icon: 'error'
@@ -369,11 +393,33 @@
}
const callBackendAPI = (result) => {
- nextTick(() => {
- qrCodeFormDia.value?.openDialog(result)
- })
+ console.log('鍑嗗鎵撳紑寮规锛屾暟鎹�:', result)
+ console.log('寮规缁勪欢寮曠敤:', qrCodeFormDia.value)
+
+ // 纭繚缁勪欢寮曠敤瀛樺湪
+ if (qrCodeFormDia.value) {
+ console.log('鐩存帴璋冪敤寮规openDialog鏂规硶')
+ qrCodeFormDia.value.openDialog(result)
+ } else {
+ // 濡傛灉缁勪欢寮曠敤涓嶅瓨鍦紝绛夊緟涓嬩竴涓猼ick
+ console.log('缁勪欢寮曠敤涓嶅瓨鍦紝绛夊緟nextTick')
+ nextTick(() => {
+ console.log('nextTick鍚庡脊妗嗙粍浠跺紩鐢�:', qrCodeFormDia.value)
+ if (qrCodeFormDia.value) {
+ console.log('nextTick鍚庤皟鐢ㄥ脊妗唎penDialog鏂规硶')
+ qrCodeFormDia.value.openDialog(result)
+ } else {
+ console.error('寮规缁勪欢寮曠敤涓嶅瓨鍦�')
+ uni.showToast({
+ title: '寮规缁勪欢鏈噯澶囧ソ',
+ icon: 'error'
+ })
+ }
+ })
+ }
}
+
// 鎵爜澶勭悊
const handleScanCode = (result) => {
console.log('鎵爜缁撴灉:', result)
--
Gitblit v1.9.3