zhangwencui
2026-07-09 9f1324fb9e73e5b53ac67542227e63cdc0b505ba
src/pages/inspectionUpload/upload.vue
@@ -61,77 +61,18 @@
      <view class="section-card"
            v-if="hasException === true">
        <view class="section-title">巡检照片/视频</view>
        <!-- 当前分类的上传区域 -->
        <view class="upload-area">
          <view class="upload-buttons">
            <u-button type="primary"
                      @click="chooseMedia('image')"
                      :loading="uploading"
                      :disabled="beforeModelValue.length >= uploadConfig.limit"
                      :customStyle="{ marginRight: '10px', flex: 1 }">
              <u-icon name="camera"
                      size="18"
                      color="#fff"
                      style="margin-right: 5px"></u-icon>
              {{ uploading ? '上传中...' : '拍照' }}
            </u-button>
            <u-button type="success"
                      @click="chooseMedia('video')"
                      :loading="uploading"
                      :disabled="beforeModelValue.length >= uploadConfig.limit"
                      :customStyle="{ flex: 1 }">
              <uni-icons type="videocam"
                         size="18"
                         color="#fff"
                         style="margin-right: 5px"></uni-icons>
              {{ uploading ? '上传中...' : '拍视频' }}
            </u-button>
          </view>
          <!-- 上传进度 -->
          <view v-if="uploading"
                class="upload-progress">
            <u-line-progress :percentage="uploadProgress"
                             :showText="true"
                             activeColor="#409eff"></u-line-progress>
          </view>
          <!-- 当前分类的文件列表 -->
          <view v-if="beforeModelValue.length > 0"
                class="file-list">
            <view v-for="(file, index) in beforeModelValue"
                  :key="index"
                  class="file-item">
              <view class="file-preview-container">
                <image v-if="file.type === 'image' || (file.type !== 'video' && !file.type)"
                       :src="file.url || file.tempFilePath || file.path || file.downloadUrl"
                       class="file-preview"
                       mode="aspectFill" />
                <view v-else-if="file.type === 'video'"
                      class="video-preview">
                  <uni-icons type="videocam"
                             size="18"
                             color="#fff"
                             style="margin-right: 5px"></uni-icons>
                  <text class="video-text">视频</text>
                </view>
                <!-- 删除按钮 -->
                <view class="delete-btn"
                      @click="removeFile(index)">
                  <u-icon name="close"
                          size="12"
                          color="#fff"></u-icon>
                </view>
              </view>
              <view class="file-info">
                <text class="file-name">{{ file.bucketFilename || file.name || (file.type === 'image' ? '图片' : '视频') }}</text>
                <text class="file-size">{{ formatFileSize(file.size) }}</text>
              </view>
            </view>
          </view>
          <view v-if="beforeModelValue.length === 0"
                class="empty-state">
            <text>请选择要上传的图片或视频</text>
          </view>
        </view>
        <!-- 使用 PDA 媒体上传组件 -->
        <PdaMediaUpload v-model="beforeModelValue"
                        :action="uploadFileUrl"
                        :limit="uploadConfig.limit"
                        :fileSize="uploadConfig.fileSize"
                        :formData="{ type: 10 }"
                        :allowCamera="true"
                        :allowVideo="true"
                        @update:modelValue="handleFilesUpdate"
                        @choose-media="handleChooseMedia"
                        @uploading="uploading = $event"
                        @progress="uploadProgress = $event" />
        <!-- 统计信息 -->
        <view class="upload-summary">
          <text class="summary-text">
@@ -166,8 +107,9 @@
<script setup>
  import { ref, computed, onMounted } from "vue";
  import { onLoad } from "@dcloudio/uni-app";
  import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
  import PageHeader from "@/components/PageHeader.vue";
  import PdaMediaUpload from "@/components/pda-media-upload/pda-media-upload.vue";
  import { uploadInspectionTask } from "@/api/inspectionManagement";
  import { getToken } from "@/utils/auth";
  import config from "@/config";
@@ -590,10 +532,34 @@
    });
  };
  // 删除文件
  const removeFile = index => {
    beforeModelValue.value.splice(index, 1);
  // 监听文件列表变化(组件内部处理删除,父组件只同步)
  const handleFilesUpdate = files => {
    beforeModelValue.value = files;
  };
  // 监听组件的 choose-media 事件(用于兼容旧逻辑,或者在这里添加自定义操作)
  const handleChooseMedia = type => {
    // 可以在这里添加自定义的前置操作
    console.log("用户选择上传类型:", type);
  };
  // PDA 扫码监听(可选:如果需要通过扫码添加某个标签或信息,在这里处理)
  const handlePdaScan = data => {
    console.log("PDA 扫码结果:", data);
    uni.showToast({
      title: `扫码结果: ${data.code}`,
      icon: "none",
    });
  };
  onShow(() => {
    // 页面显示时,监听 PDA 扫码(如果有需要的话)
    uni.$on("scan_inspection", handlePdaScan);
  });
  onHide(() => {
    uni.$off("scan_inspection");
  });
</script>
<style scoped>