分析追溯

gaoluyang

2025-09-24 752b14d2caa47ccceac328f79389fbf5e2e62ce4

 src/pages/inspectionUpload/components/qrCodeFormDia.vue

@@ -42,36 +42,15 @@
          
          <u-form-item label="附件" prop="storageBlobDTO" labelWidth="80">
            <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>
              <ImageUpload
                v-model="form.storageBlobDTO"
                :limit="10"
                :fileSize="50"
                :fileType="['jpg', 'jpeg', 'png', 'mp4', 'mov']"
                :maxVideoDuration="60"
                :statusType="0"
                @update:modelValue="handleStorageBlobUpdate"
              />
            </view>
          </u-form-item>
          
@@ -102,9 +81,10 @@
</template>

<script setup>
import { reactive, ref, onMounted, nextTick } from 'vue'
import { reactive, ref, onMounted, onUnmounted, nextTick } from 'vue'
import { addOrEditQrCodeRecord } from '@/api/inspectionUpload/index.js'
import useUserStore from '@/store/modules/user.ts'
import ImageUpload from '@/components/imageUpload/index.vue'

const emit = defineEmits(['closeDia'])

@@ -113,6 +93,9 @@
const userStore = useUserStore()
const userInfo = ref({})
const locationLoading = ref(false)

// 请求取消标志
let isRequestCancelled = false

// 获取当前时间
function getCurrentDateTime() {
@@ -149,125 +132,50 @@
onMounted(async () => {
  try {
    const res = await userStore.getInfo()
    // 检查组件是否还存在
    if (!isRequestCancelled && userInfo.value !== undefined) {
    userInfo.value = res.user
    form.scannerName = userInfo.value.nickName
    form.scannerId = userInfo.value.userId
    form.scanTime = getCurrentDateTime()
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
})

// 文件上传处理
const afterRead = (event) => {
  const { file } = event
  console.log('文件选择:', 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) => {
      console.log('拍照成功:', res)
      const tempFilePath = res.tempFilePaths[0]
      
      const fileItem = {
        url: tempFilePath,
        name: `照片_${Date.now()}.jpg`,
        status: 'success',
        type: 'image/jpeg'
      }
      
      form.storageBlobDTO.push(fileItem)
      
      uni.showToast({
        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'
      })
    }
  })
}

// 删除文件
const deleteFile = (event) => {
  const { index } = event
  form.storageBlobDTO.splice(index, 1)
// 处理storageBlobDTO数据更新
const handleStorageBlobUpdate = (value) => {
  form.storageBlobDTO = value || []
}

// 获取当前位置
const getCurrentLocation = () => {
  // 检查组件是否还存在
  if (isRequestCancelled) return
  
  locationLoading.value = true
  uni.showLoading({ title: '获取位置中...' })
  
  uni.getLocation({
    type: 'gcj02',
    success: (res) => {
      // 检查组件是否还存在
      if (isRequestCancelled) {
        uni.hideLoading()
        return
      }
      
      // 使用逆地理编码获取地址信息
      uni.request({
        url: `https://restapi.amap.com/v3/geocode/regeo?key=c120a5dc69a9f61839f7763e6057005f&location=${res.longitude},${res.latitude}&radius=1000&extensions=all`,
        success: (geoRes) => {
          // 检查组件是否还存在
          if (isRequestCancelled) {
            uni.hideLoading()
            return
          }
          
          uni.hideLoading()
          locationLoading.value = false
          
@@ -303,6 +211,12 @@
          }
        },
        fail: (err) => {
          // 检查组件是否还存在
          if (isRequestCancelled) {
            uni.hideLoading()
            return
          }
          
          uni.hideLoading()
          locationLoading.value = false
          console.error('逆地理编码失败:', err)
@@ -318,6 +232,12 @@
      })
    },
    fail: (err) => {
      // 检查组件是否还存在
      if (isRequestCancelled) {
        uni.hideLoading()
        return
      }
      
      uni.hideLoading()
      locationLoading.value = false
      uni.showToast({
@@ -335,15 +255,11 @@
// 打开弹框
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.qrCodeId = row.qrCodeId
  form.storageBlobDTO = []
  
  console.log('弹框打开后状态:', dialogVisitable.value)
  console.log('弹框表单数据:', form)
  
  // 强制更新视图
@@ -354,6 +270,9 @@
// 提交表单
const submitForm = async () => {
  try {
    // 检查组件是否还存在
    if (isRequestCancelled) return
    
    console.log('开始提交表单，当前表单数据:', form)
    
    // 表单验证
@@ -389,15 +308,27 @@
      scannerName: form.scannerName,
      scannerId: form.scannerId,
      scanTime: form.scanTime,
      storageBlobDTO: form.storageBlobDTO,
      storageBlobDTO: form.storageBlobDTO.map(file => ({
        id: file.id, // 添加id字段
        url: file.url,
        bucketFilename: file.bucketFilename || file.name,
        downloadUrl: file.downloadUrl || file.url,
        type: 0,
        size: file.size,
        createTime: file.createTime || new Date().getTime()
      })),
      qrCode: {
        id: form.qrCodeId || form.qrCode.id
        id: form.qrCodeId
      }
    }
    
    console.log('准备提交的数据:', submitData)
    
    const response = await addOrEditQrCodeRecord(submitData)
    
    // 检查组件是否还存在
    if (isRequestCancelled) return
    
    console.log('提交响应:', response)
    
    uni.showToast({
@@ -407,6 +338,9 @@
    
    cancel()
  } catch (error) {
    // 检查组件是否还存在
    if (isRequestCancelled) return
    
    console.error('提交失败:', error)
    
    // 显示更详细的错误信息
@@ -430,6 +364,25 @@
  dialogVisitable.value = false
  emit('closeDia')
}

// 组件销毁时的清理
onUnmounted(() => {
  // 设置取消标志，阻止后续的异步操作
  isRequestCancelled = true
  
  // 清理状态
  if (locationLoading.value) {
    locationLoading.value = false
  }
  
  // 关闭弹窗
  if (dialogVisitable.value) {
    dialogVisitable.value = false
  }
  
  // 隐藏可能显示的加载提示
  uni.hideLoading()
})

defineExpose({ openDialog })
</script>
@@ -491,12 +444,5 @@

.upload-container {
  width: 100%;
}

.upload-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
  gap: 10px;
}
</style>