| | |
| | | <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"> |
| | |
| | | |
| | | <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"; |
| | |
| | | }); |
| | | }; |
| | | |
| | | // 删除文件 |
| | | 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> |