巡检上传

gaoluyang

2025-09-26 2d10745e4832904e2ab39c413cf7670c6f9408b9

 src/pages/inspectionUpload/index.vue

@@ -11,7 +11,6 @@
          v-for="(item, index) in taskTableData" 
          :key="index"
          class="task-item"
          @click="handleAdd(item)"
        >
          <view class="task-header">
            <view class="task-info">
@@ -22,30 +21,35 @@
              <u-button 
                type="primary" 
                size="small"
                @click.stop="handleAdd(item)"
                :customStyle="{
                  borderRadius: '15px',
                  height: '30px',
                  fontSize: '12px'
                }"
              >
                上传
              </u-button>
              <u-button 
                type="info" 
                size="small"
                @click.stop="startScanForTask(item)"
                :customStyle="{
                  borderRadius: '15px',
                  height: '30px',
                  fontSize: '12px',
                  marginRight: '8px'
                }"
              >
                扫码上传
              </u-button>
              <u-button 
                type="success" 
                size="small"
                @click.stop="viewAttachments(item)"
                :customStyle="{
                  borderRadius: '15px',
                  height: '30px',
                  fontSize: '12px'
                }"
              >
                扫码
                查看附件
              </u-button>
            </view>
          </view>
          <view class="task-details">
            <view class="detail-item">
              <text class="detail-label">任务ID</text>
              <text class="detail-value">{{ item.taskId || item.id }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">备注</text>
              <text class="detail-value">{{ item.remarks || '无' }}</text>
@@ -62,6 +66,7 @@
      <view v-if="taskTableData.length === 0" class="no-data">
        <text>暂无数据</text>
      </view>
      
    </view>
    
    <!-- 扫码区域 - 全局弹窗 -->
@@ -107,21 +112,237 @@
      </view>
    </view>
    
    <!-- 弹窗组件 -->
    <form-dia ref="formDia" @closeDia="handleQuery"></form-dia>
    <!-- 图片上传弹窗 - 原生实现 -->
    <view v-if="showUploadDialog" class="custom-modal-overlay" @click="closeUploadDialog">
      <view class="custom-modal-container" @click.stop>
        <view class="upload-popup-content">
          <view class="upload-popup-header">
            <text class="upload-popup-title">上传巡检记录</text>
          </view>
          
            <view class="upload-popup-body">
              <!-- 分类标签页 -->
              <view class="upload-tabs">
                <view 
                  class="tab-item"
                  :class="{ active: currentUploadType === 'before' }"
                  @click="switchUploadType('before')"
                >
                  生产前
                </view>
                <view 
                  class="tab-item"
                  :class="{ active: currentUploadType === 'after' }"
                  @click="switchUploadType('after')"
                >
                  生产中
                </view>
                <view 
                  class="tab-item"
                  :class="{ active: currentUploadType === 'issue' }"
                  @click="switchUploadType('issue')"
                >
                  生产后
                </view>
              </view>
              
              <!-- 当前分类的上传区域 -->
              <view class="simple-upload-area">
                <view class="upload-buttons">
                  <u-button 
                    type="primary" 
                    @click="chooseImage"
                    :loading="uploading"
                    :disabled="getCurrentFiles().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="chooseVideo"
                    :loading="uploading"
                    :disabled="getCurrentFiles().length >= uploadConfig.limit"
                    :customStyle="{ flex: 1 }"
                  >
                    <u-icon name="video" size="18" color="#fff" style="margin-right: 5px;"></u-icon>
                    {{ 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="getCurrentFiles().length > 0" class="file-list">
                  <view 
                    v-for="(file, index) in getCurrentFiles()" 
                    :key="index"
                    class="file-item"
                  >
                    <view class="file-preview-container">
                      <image 
                        v-if="file.type === 'image'"
                        :src="file.url || file.tempFilePath || file.path" 
                        class="file-preview"
                        mode="aspectFill"
                      />
                      <view v-else class="video-preview">
                        <u-icon name="video" size="24" color="#409eff"></u-icon>
                        <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="getCurrentFiles().length === 0" class="empty-state">
                  <text>请选择要上传的{{ getUploadTypeText() }}图片或视频</text>
                </view>
                
                <!-- 统计信息 -->
                <view class="upload-summary">
                  <text class="summary-text">
                    生产前: {{ beforeModelValue.length }}个文件 | 
                    生产中: {{ afterModelValue.length }}个文件 | 
                    生产后: {{ issueModelValue.length }}个文件
                  </text>
                </view>
              </view>
            </view>
          
          <view class="upload-popup-footer">
            <u-button @click="closeUploadDialog" :customStyle="{ marginRight: '10px' }">取消</u-button>
            <u-button type="primary" @click="submitUpload">提交</u-button>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 查看附件弹窗 -->
    <view v-if="showAttachmentDialog" class="custom-modal-overlay" @click="closeAttachmentDialog">
      <view class="custom-modal-container" @click.stop>
        <view class="attachment-popup-content">
          <view class="attachment-popup-header">
            <text class="attachment-popup-title">查看附件 - {{ currentViewTask?.taskName }}</text>
            <view class="close-btn-attachment" @click="closeAttachmentDialog">
              <u-icon name="close" size="16" color="#666"></u-icon>
            </view>
          </view>
          
          <view class="attachment-popup-body">
            <!-- 分类标签页 -->
            <view class="attachment-tabs">
              <view 
                class="tab-item"
                :class="{ active: currentViewType === 'before' }"
                @click="switchViewType('before')"
              >
                生产前 ({{ getAttachmentsByType(0).length }})
              </view>
              <view 
                class="tab-item"
                :class="{ active: currentViewType === 'after' }"
                @click="switchViewType('after')"
              >
                生产中 ({{ getAttachmentsByType(1).length }})
              </view>
              <view 
                class="tab-item"
                :class="{ active: currentViewType === 'issue' }"
                @click="switchViewType('issue')"
              >
                生产后 ({{ getAttachmentsByType(2).length }})
              </view>
            </view>
            
            <!-- 当前分类的附件列表 -->
            <view class="attachment-content">
              <view v-if="getCurrentViewAttachments().length > 0" class="attachment-list">
                <view 
                  v-for="(file, index) in getCurrentViewAttachments()" 
                  :key="index"
                  class="attachment-item"
                  @click="previewAttachment(file)"
                >
                  <view class="attachment-preview-container">
                    <image 
                      v-if="file.type === 'image' || isImageFile(file)"
                      :src="file.url || file.downloadUrl" 
                      class="attachment-preview"
                      mode="aspectFill"
                    />
                    <view v-else class="attachment-video-preview">
                      <u-icon name="video" size="24" color="#409eff"></u-icon>
                      <text class="video-text">视频</text>
                    </view>
                  </view>
                  
                  <view class="attachment-info">
                    <text class="attachment-name">{{ file.originalFilename || file.bucketFilename || file.name || '附件' }}</text>
                    <text class="attachment-size">{{ formatFileSize(file.byteSize || file.size) }}</text>
                  </view>
                </view>
              </view>
              
              <view v-else class="attachment-empty">
                <text>该分类暂无附件</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 视频预览弹窗 -->
    <view v-if="showVideoDialog" class="video-modal-overlay" @click="closeVideoPreview">
      <view class="video-modal-container" @click.stop>
        <view class="video-modal-header">
          <text class="video-modal-title">{{ currentVideoFile?.originalFilename || '视频预览' }}</text>
          <view class="close-btn-video" @click="closeVideoPreview">
            <u-icon name="close" size="16" color="#fff"></u-icon>
          </view>
        </view>
        <view class="video-modal-body">
          <video 
            v-if="currentVideoFile"
            :src="currentVideoFile.url || currentVideoFile.downloadUrl"
            class="video-player"
            controls
            autoplay
            @error="handleVideoError"
          ></video>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, onUnmounted, ref, nextTick } from 'vue'
import { onMounted, onUnmounted, ref, nextTick, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import PageHeader from '@/components/PageHeader.vue'
import FormDia from './components/formDia.vue'
import { getLedgerById } from '@/api/equipmentManagement/ledger.js'
import {inspectionTaskList} from "@/api/inspectionManagement";
import {inspectionTaskList, uploadInspectionTask} from "@/api/inspectionManagement";
import { getToken } from "@/utils/auth";

// 组件引用
const formDia = ref()
// 组件引用已移除

// 加载提示方法
const showLoadingToast = (message) => {
@@ -139,6 +360,64 @@

// 当前扫描的任务
const currentScanningTask = ref(null)
const infoData = ref(null);

// 上传相关状态
const showUploadDialog = ref(false)
const uploadFiles = ref([]) // 保留用于兼容性
const uploadStatusType = ref(0)
const uploading = ref(false)
const uploadProgress = ref(0)
const number = ref(0)
const uploadList = ref([])

// 三个分类的上传状态
const beforeModelValue = ref([]) // 生产前
const afterModelValue = ref([])  // 生产中
const issueModelValue = ref([])  // 生产后

// 当前激活的上传类型
const currentUploadType = ref('before') // 'before', 'after', 'issue'

// 查看附件相关状态
const showAttachmentDialog = ref(false)
const currentViewTask = ref(null)
const currentViewType = ref('before') // 'before', 'after', 'issue'
const attachmentList = ref([]) // 当前查看任务的附件列表

// 视频预览相关状态
const showVideoDialog = ref(false)
const currentVideoFile = ref(null)

// 上传配置
const uploadConfig = {
  action: "/common/minioUploads",
  limit: 10,
  fileSize: 50, // MB
  fileType: ['jpg', 'jpeg', 'png', 'mp4', 'mov'],
  maxVideoDuration: 60 // 秒
}

// 计算上传URL
const uploadFileUrl = computed(() => {
  let baseUrl = '';
  
  if (process.env.VUE_APP_BASE_API) {
    baseUrl = process.env.VUE_APP_BASE_API;
  } else if (process.env.NODE_ENV === 'development') {
    baseUrl = 'http://192.168.1.147:9036';
  } else {
    baseUrl = 'http://192.168.1.147:9036';
  }
  
  return baseUrl + uploadConfig.action;
})

// 计算请求头
const headers = computed(() => {
  const token = getToken();
  return token ? { Authorization: "Bearer " + token } : {};
})

// 请求取消标志，用于取消正在进行的请求
let isRequestCancelled = false
@@ -168,6 +447,11 @@
  // 停止扫码
  if (isScanning.value) {
    isScanning.value = false
  }
  
  // 关闭上传弹窗
  if (showUploadDialog.value) {
    showUploadDialog.value = false
  }
})

@@ -239,29 +523,12 @@
  })
}


// 上传
const handleAdd = (row) => {
  nextTick(() => {
    // 检查组件是否还存在
    if (formDia.value && formDia.value.openDialog) {
      formDia.value.openDialog(row)
    } else {
      console.error('上传组件引用不存在')
      uni.showToast({
        title: '组件未准备好',
        icon: 'error'
      })
    }
  })
}

// 为指定任务开始扫码
const startScanForTask = async (task) => {
  try {
    // 记录当前扫描的任务
    currentScanningTask.value = task
    console.log('为任务开始扫码:', task.taskName)
    console.log('为任务开始扫码，任务ID:', task.taskId || task.id, '任务名称:', task.taskName)
    
    // 显示扫描界面
    isScanning.value = true
@@ -269,7 +536,9 @@
    // 使用uniapp的扫码API
    uni.scanCode({
      success: (res) => {
        console.log('扫码成功:', res)
        console.log('=== 扫码API成功回调 ===')
        console.log('扫码结果:', res)
        console.log('当前扫描任务:', currentScanningTask.value)
        handleScanSuccess(res)
      },
      fail: (err) => {
@@ -280,13 +549,8 @@
        })
        // 关闭扫描界面
        isScanning.value = false
      },
      complete: () => {
        // 扫码完成后关闭扫描界面
        setTimeout(() => {
          isScanning.value = false
        }, 1000)
      }
      // 移除complete回调，避免干扰弹窗显示
    })
  } catch (e) {
    console.error('启动扫码失败:', e)
@@ -310,98 +574,257 @@
    console.log('处理扫码结果:', result)
    console.log('当前关联任务:', currentScanningTask.value?.taskName)
    
    // 解析二维码数据，提取deviceId
    let deviceId = ''
    
    // 检查是否是URL格式
    if (result.result.includes('deviceId=')) {
      // 从URL中提取deviceId
      const url = result.result
      const match = url.match(/deviceId=(\d+)/)
      if (match && match[1]) {
        deviceId = match[1]
        console.log('从URL中提取到deviceId:', deviceId)
      }
    } else {
      // 尝试解析JSON格式
      try {
        const qrData = JSON.parse(result.result)
        console.log('解析的二维码数据:', qrData)
        deviceId = qrData.deviceId || qrData.qrCodeId || ''
      } catch (e) {
        // 如果不是JSON格式，直接使用结果
        deviceId = result.result
      }
    }
    
    if (!deviceId) {
      uni.showToast({
        title: '未识别到设备ID',
        icon: 'error'
      })
      isScanning.value = false
      return
    }
    
    // 获取当前任务的taskId
    const currentTaskId = currentScanningTask.value?.taskId || currentScanningTask.value?.id
    console.log('当前任务ID:', currentTaskId, '扫码设备ID:', deviceId)
    
    // 对比deviceId和taskId
    if (deviceId === currentTaskId.toString()) {
      console.log('=== 设备ID匹配成功 ===')
    uni.showToast({
      title: '识别成功',
      icon: 'success'
    })
    
    // 解析二维码数据
    let qrData
    let deviceId = ''
      console.log('准备打开上传弹窗，当前任务:', currentScanningTask.value)
    
    try {
      qrData = JSON.parse(result.result)
      console.log('解析的二维码数据:', qrData)
      deviceId = qrData.deviceId || qrData.qrCodeId
    } catch (e) {
      // 如果不是JSON格式，尝试从URL中提取deviceId
      const url = result.result
      // 先关闭扫描界面
      isScanning.value = false
      console.log('扫描界面已关闭')
      
      if (url.includes('deviceId=')) {
        // 从URL中提取deviceId
        const match = url.match(/deviceId=(\d+)/)
        if (match && match[1]) {
          deviceId = match[1]
        }
      }
      
      qrData = { 
        deviceName: deviceId ? `设备${deviceId}` : result.result, 
        location: '',
        qrCodeId: deviceId // 使用提取的deviceId或原始结果
      }
    }
    
    // 如果有设备ID，尝试从API获取真实的设备名称
    if (deviceId) {
      try {
        console.log('正在查询设备信息，设备ID:', deviceId)
        const response = await getLedgerById(deviceId)
        console.log('设备信息查询结果:', response)
        
        if (response.code === 200 && response.data) {
          qrData.deviceName = response.data.deviceName || `设备${deviceId}`
          qrData.location = response.data.storageLocation || ''
          console.log('获取到设备名称:', qrData.deviceName)
      // 延迟打开上传弹窗，确保扫描界面完全关闭
      setTimeout(() => {
        console.log('延迟打开上传弹窗')
        openUploadDialog(currentScanningTask.value)
      }, 300)
        } else {
          console.warn('设备信息查询失败，使用默认名称')
          qrData.deviceName = qrData.deviceName || `设备${deviceId}`
        }
      } catch (apiError) {
        console.error('查询设备信息失败:', apiError)
        // API调用失败时使用默认名称
        qrData.deviceName = qrData.deviceName || `设备${deviceId}`
      }
    }
    
    // 确保数据完整性
    if (!qrData.deviceName) {
      qrData.deviceName = result.result
    }
    if (!qrData.qrCodeId) {
      qrData.qrCodeId = deviceId || result.result
    }
    
    // 将扫码数据与任务关联
    if (currentScanningTask.value) {
      // 关联任务信息
      const taskData = {
        ...currentScanningTask.value,
        qrCodeData: qrData
      }
      
      // 打开上传弹窗，传递关联后的任务数据
      nextTick(() => {
        if (formDia.value && formDia.value.openDialog) {
          formDia.value.openDialog(taskData)
        } else {
          console.error('上传组件引用不存在')
          uni.showToast({
            title: '组件未准备好',
        title: '请扫描正确的设备',
            icon: 'error'
          })
      console.warn('设备ID不匹配，期望:', currentTaskId, '实际:', deviceId)
      
      // 关闭扫描界面
      isScanning.value = false
        }
      })
    }
    
  } catch (error) {
    console.error('处理扫码结果失败:', error)
    uni.showToast({
      title: error.message || '数据解析失败',
      icon: 'error'
    })
  } finally {
    // 关闭扫描界面
    isScanning.value = false
  }
}

// 打开上传弹窗
const openUploadDialog = (task) => {
  console.log('=== 开始打开上传弹窗 ===')
  console.log('传入的任务:', task)
  console.log('任务名称:', task?.taskName || '未知任务')
  console.log('当前showUploadDialog状态(调用前):', showUploadDialog.value)
  
  // 设置任务信息到infoData
  if (task) {
    infoData.value = {
      ...task,
      taskId: task.taskId || task.id,
      storageBlobDTO: [] // 初始化文件列表
    };
    console.log('设置infoData:', infoData.value);
  }
  
  // 设置上传状态类型（可以根据任务类型设置不同的状态）
  uploadStatusType.value = 0 // 默认状态
  
  // 清空之前的文件
  uploadFiles.value = []
  
  // 显示上传弹窗
  showUploadDialog.value = true
  
  console.log('当前showUploadDialog状态(设置后):', showUploadDialog.value)
  console.log('=== 上传弹窗设置完成 ===')
  
  // 延迟检查状态
  setTimeout(() => {
    console.log('延迟检查showUploadDialog状态:', showUploadDialog.value)
  }, 100)
}

// 关闭上传弹窗
const closeUploadDialog = () => {
  showUploadDialog.value = false
  uploadFiles.value = []
  // 清理三个分类的数据
  beforeModelValue.value = []
  afterModelValue.value = []
  issueModelValue.value = []
  currentUploadType.value = 'before'
  infoData.value = null // 清理任务数据
  console.log('上传弹窗已关闭，数据已清理')
}

// 切换上传类型
const switchUploadType = (type) => {
  currentUploadType.value = type
  console.log('切换到上传类型:', type)
}

// 获取当前分类的文件列表
const getCurrentFiles = () => {
  switch (currentUploadType.value) {
    case 'before':
      return beforeModelValue.value
    case 'after':
      return afterModelValue.value
    case 'issue':
      return issueModelValue.value
    default:
      return []
  }
}

// 获取上传类型文本
const getUploadTypeText = () => {
  switch (currentUploadType.value) {
    case 'before':
      return '生产前'
    case 'after':
      return '生产中'
    case 'issue':
      return '生产后'
    default:
      return ''
  }
}

// 处理上传文件更新
const handleUploadUpdate = (files) => {
  uploadFiles.value = files
  console.log('上传文件更新:', files)
}

// 提交上传
const submitUpload = async () => {
  try {
    // 检查是否有任何文件上传
    const totalFiles = beforeModelValue.value.length + afterModelValue.value.length + issueModelValue.value.length;
    if (totalFiles === 0) {
      uni.showToast({
        title: '请先上传文件',
        icon: 'none'
      })
      return
    }

    // 显示提交中的加载提示
    showLoadingToast('提交中...')

    // 按照您的逻辑合并所有分类的文件
    let arr = [];
    if (beforeModelValue.value.length > 0) {
      arr.push(...beforeModelValue.value);
    }
    if (afterModelValue.value.length > 0) {
      arr.push(...afterModelValue.value);
    }
    if (issueModelValue.value.length > 0) {
      arr.push(...issueModelValue.value);
    }
    
    // 提交数据
    infoData.value.storageBlobDTO = arr;
    
    console.log('准备提交巡检任务数据:', infoData.value);
    console.log('合并的文件列表:', arr);
    console.log('生产前文件(type=0):', beforeModelValue.value.length, beforeModelValue.value);
    console.log('生产中文件(type=1):', afterModelValue.value.length, afterModelValue.value);
    console.log('生产后文件(type=2):', issueModelValue.value.length, issueModelValue.value);
    
    const result = await uploadInspectionTask({...infoData.value});
    
    console.log('巡检任务提交结果:', result);
    
    // 检查提交结果
    if (result && (result.code === 200 || result.success)) {
      // 提交成功
      closeToast(); // 关闭加载提示
      
      uni.showToast({
        title: '提交成功',
        icon: 'success'
      })
      
      // 关闭弹窗
      closeUploadDialog()
      
      // 刷新列表
      setTimeout(() => {
        getList()
      }, 500)
      
    } else {
      // 提交失败
      closeToast();
      uni.showToast({
        title: result?.msg || result?.message || '提交失败',
        icon: 'error'
      })
    }
    
  } catch (error) {
    console.error('提交上传失败:', error)
    closeToast(); // 关闭加载提示
    
    let errorMessage = '提交失败';
    if (error.message) {
      errorMessage = error.message;
    } else if (error.msg) {
      errorMessage = error.msg;
    } else if (typeof error === 'string') {
      errorMessage = error;
    }
    
    uni.showToast({
      title: errorMessage,
      icon: 'error'
    })
  }
}

@@ -410,120 +833,636 @@
  console.error('摄像头错误:', error)
  cameraError.value = '摄像头访问失败，请检查权限设置'
}

// 扫码事件处理
const handleScanCode = (result) => {
  console.log('扫码结果:', result)
  handleScanSuccess(result)
}

// 查看附件
const viewAttachments = async (task) => {
  try {
    console.log('查看附件，任务:', task)
    currentViewTask.value = task
    currentViewType.value = 'before'
    
    // 解析新的数据结构
    attachmentList.value = []
    
    // 生产前附件 (type=0)
    if (task.beforeProduction && Array.isArray(task.beforeProduction)) {
      const beforeFiles = task.beforeProduction.map(file => ({
        ...file,
        type: 0 // 确保type为0
      }))
      attachmentList.value.push(...beforeFiles)
    }
    
    // 生产中附件 (type=1) 
    if (task.afterProduction && Array.isArray(task.afterProduction)) {
      const afterFiles = task.afterProduction.map(file => ({
        ...file,
        type: 1 // 确保type为1
      }))
      attachmentList.value.push(...afterFiles)
    }
    
    // 生产后附件 (type=2)
    if (task.productionIssues && Array.isArray(task.productionIssues)) {
      const issueFiles = task.productionIssues.map(file => ({
        ...file,
        type: 2 // 确保type为2
      }))
      attachmentList.value.push(...issueFiles)
    }
    
    console.log('解析后的附件列表:', attachmentList.value)
    console.log('生产前附件:', task.beforeProduction?.length || 0)
    console.log('生产中附件:', task.afterProduction?.length || 0)
    console.log('生产后附件:', task.productionIssues?.length || 0)
    
    showAttachmentDialog.value = true
    
  } catch (error) {
    console.error('获取附件列表失败:', error)
    uni.showToast({
      title: '获取附件失败',
      icon: 'error'
    })
  }
}

// 关闭附件查看弹窗
const closeAttachmentDialog = () => {
  showAttachmentDialog.value = false
  currentViewTask.value = null
  attachmentList.value = []
  currentViewType.value = 'before'
}

// 切换查看类型
const switchViewType = (type) => {
  currentViewType.value = type
  console.log('切换查看类型到:', type)
}

// 根据type获取对应分类的附件
const getAttachmentsByType = (typeValue) => {
  return attachmentList.value.filter(file => file.type === typeValue) || []
}

// 获取当前查看类型的附件
const getCurrentViewAttachments = () => {
  switch (currentViewType.value) {
    case 'before':
      return getAttachmentsByType(0)
    case 'after':
      return getAttachmentsByType(1)
    case 'issue':
      return getAttachmentsByType(2)
    default:
      return []
  }
}

// 判断是否为图片文件
const isImageFile = (file) => {
  // 检查contentType字段
  if (file.contentType && file.contentType.startsWith('image/')) {
    return true
  }
  
  // 检查原有的type字段
  if (file.type === 'image') return true
  
  // 检查文件扩展名
  const name = file.bucketFilename || file.originalFilename || file.name || ''
  const ext = name.split('.').pop()?.toLowerCase()
  return ['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)
}

// 预览附件
const previewAttachment = (file) => {
  if (isImageFile(file)) {
    // 预览图片
    const imageUrls = getCurrentViewAttachments()
      .filter(f => isImageFile(f))
      .map(f => f.url || f.downloadUrl)
    
    uni.previewImage({
      urls: imageUrls,
      current: file.url || file.downloadUrl
    })
  } else {
    // 预览视频 - 显示视频播放弹窗
    showVideoPreview(file)
  }
}

// 显示视频预览
const showVideoPreview = (file) => {
  currentVideoFile.value = file
  showVideoDialog.value = true
  console.log('播放视频:', file.url || file.downloadUrl)
}

// 关闭视频预览
const closeVideoPreview = () => {
  showVideoDialog.value = false
  currentVideoFile.value = null
}

// 视频播放错误处理
const handleVideoError = (error) => {
  console.error('视频播放错误:', error)
  uni.showToast({
    title: '视频播放失败',
    icon: 'error'
  })
}

// 拍照
const chooseImage = () => {
  if (uploadFiles.value.length >= uploadConfig.limit) {
    uni.showToast({
      title: `最多只能拍摄${uploadConfig.limit}个文件`,
      icon: 'none'
    });
    return;
  }
  
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed', 'original'],
    sourceType: ['camera'],
    success: (res) => {
      try {
        if (!res.tempFilePaths || res.tempFilePaths.length === 0) {
          throw new Error('未获取到图片文件');
        }
        
        const tempFilePath = res.tempFilePaths[0];
        const tempFile = res.tempFiles && res.tempFiles[0] ? res.tempFiles[0] : {};
        
        const file = {
          tempFilePath: tempFilePath,
          path: tempFilePath, // 保持兼容性
          type: 'image',
          name: `photo_${Date.now()}.jpg`,
          size: tempFile.size || 0,
          createTime: new Date().getTime(),
          uid: Date.now() + Math.random()
        };
        
        handleBeforeUpload(file);
      } catch (error) {
        console.error('处理拍照结果失败:', error);
        uni.showToast({
          title: '处理图片失败',
          icon: 'error'
        });
      }
    },
    fail: (err) => {
      console.error('拍照失败:', err);
      uni.showToast({
        title: '拍照失败: ' + (err.errMsg || '未知错误'),
        icon: 'error'
      });
    }
  });
}

// 拍视频
const chooseVideo = () => {
  if (uploadFiles.value.length >= uploadConfig.limit) {
    uni.showToast({
      title: `最多只能拍摄${uploadConfig.limit}个文件`,
      icon: 'none'
    });
    return;
  }
  
  uni.chooseVideo({
    sourceType: ['camera'],
    maxDuration: uploadConfig.maxVideoDuration,
    camera: 'back',
    success: (res) => {
      try {
        if (!res.tempFilePath) {
          throw new Error('未获取到视频文件');
        }
        
        const file = {
          tempFilePath: res.tempFilePath,
          path: res.tempFilePath, // 保持兼容性
          type: 'video',
          name: `video_${Date.now()}.mp4`,
          size: res.size || 0,
          duration: res.duration || 0,
          createTime: new Date().getTime(),
          uid: Date.now() + Math.random()
        };
        
        handleBeforeUpload(file);
      } catch (error) {
        console.error('处理拍视频结果失败:', error);
        uni.showToast({
          title: '处理视频失败',
          icon: 'error'
        });
      }
    },
    fail: (err) => {
      console.error('拍视频失败:', err);
      uni.showToast({
        title: '拍视频失败: ' + (err.errMsg || '未知错误'),
        icon: 'error'
      });
    }
  });
}

// 删除文件
const removeFile = (index) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这个文件吗？',
    success: (res) => {
      if (res.confirm) {
        // 根据当前上传类型删除对应分类的文件
        switch (currentUploadType.value) {
          case 'before':
            beforeModelValue.value.splice(index, 1);
            break;
          case 'after':
            afterModelValue.value.splice(index, 1);
            break;
          case 'issue':
            issueModelValue.value.splice(index, 1);
            break;
        }
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        });
      }
    }
  });
}

// 检查网络连接
const checkNetworkConnection = () => {
  return new Promise((resolve) => {
    uni.getNetworkType({
      success: (res) => {
        if (res.networkType === 'none') {
          resolve(false);
        } else {
          resolve(true);
        }
      },
      fail: () => {
        resolve(false);
      }
    });
  });
}

// 上传前校验
const handleBeforeUpload = async (file) => {
  // 检查网络连接
  const hasNetwork = await checkNetworkConnection();
  if (!hasNetwork) {
    uni.showToast({
      title: '网络连接不可用，请检查网络设置',
      icon: 'none'
    });
    return false;
  }

  // 校验文件大小
  if (uploadConfig.fileSize && file.size) {
    const isLt = file.size / 1024 / 1024 < uploadConfig.fileSize;
    if (!isLt) {
      uni.showToast({
        title: `文件大小不能超过 ${uploadConfig.fileSize} MB!`,
        icon: 'none'
      });
      return false;
    }
  }

  // 校验视频时长
  if (file.type === 'video' && file.duration && file.duration > uploadConfig.maxVideoDuration) {
    uni.showToast({
      title: `视频时长不能超过 ${uploadConfig.maxVideoDuration} 秒!`,
      icon: 'none'
    });
    return false;
  }

  // 校验文件类型
  if (uploadConfig.fileType && Array.isArray(uploadConfig.fileType) && uploadConfig.fileType.length > 0) {
    const fileName = file.name || '';
    const fileExtension = fileName ? fileName.split('.').pop().toLowerCase() : '';
    
    // 根据文件类型确定期望的扩展名
    let expectedTypes = [];
    if (file.type === 'image') {
      expectedTypes = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
    } else if (file.type === 'video') {
      expectedTypes = ['mp4', 'mov', 'avi', 'wmv'];
    }
    
    // 检查文件扩展名是否在允许的类型中
    if (fileExtension && expectedTypes.length > 0) {
      const isAllowed = expectedTypes.some(type => 
        uploadConfig.fileType.includes(type) && type === fileExtension
      );
      
      if (!isAllowed) {
        uni.showToast({
          title: `文件格式不支持，请拍摄 ${expectedTypes.join('/')} 格式的文件`,
          icon: 'none'
        });
        return false;
      }
    }
  }

  // 校验通过，开始上传
  uploadFile(file);
  return true;
}

// 文件上传处理
const uploadFile = (file) => {
  uploading.value = true;
  uploadProgress.value = 0;
  number.value++; // 增加上传计数
  
  // 确保文件路径正确
  const filePath = file.tempFilePath || file.path;
  if (!filePath) {
    handleUploadError('文件路径不存在');
    return;
  }
  
  // 确保token存在
  const token = getToken();
  if (!token) {
    handleUploadError('用户未登录');
    return;
  }
  
  // 准备上传参数
  const uploadParams = {
    url: uploadFileUrl.value,
    filePath: filePath,
    name: 'files',
    formData: {
      type: uploadStatusType.value || 0
    },
    header: {
      'Authorization': `Bearer ${token}`
    }
  };
  
  const uploadTask = uni.uploadFile({
    ...uploadParams,
    success: (res) => {
      try {
        if (res.statusCode === 200) {
          const response = JSON.parse(res.data);
          if (response.code === 200) {
            handleUploadSuccess(response, file);
            uni.showToast({
              title: '上传成功',
              icon: 'success'
            });
          } else {
            handleUploadError(response.msg || '服务器返回错误');
          }
        } else {
          handleUploadError(`服务器错误，状态码: ${res.statusCode}`);
        }
      } catch (e) {
        console.error('解析响应失败:', e);
        console.error('原始响应数据:', res.data);
        handleUploadError('响应数据解析失败: ' + e.message);
      }
    },
    fail: (err) => {
      console.error('上传失败:', err.errMsg || err);
      number.value--; // 上传失败时减少计数
      
      let errorMessage = '上传失败';
      if (err.errMsg) {
        if (err.errMsg.includes('statusCode: null')) {
          errorMessage = '网络连接失败，请检查网络设置';
        } else if (err.errMsg.includes('timeout')) {
          errorMessage = '上传超时，请重试';
        } else if (err.errMsg.includes('fail')) {
          errorMessage = '上传失败，请检查网络连接';
        } else {
          errorMessage = err.errMsg;
        }
      }
      
      handleUploadError(errorMessage);
    },
    complete: () => {
      uploading.value = false;
      uploadProgress.value = 0;
    }
  });
  
  // 监听上传进度
  if (uploadTask && uploadTask.onProgressUpdate) {
    uploadTask.onProgressUpdate((res) => {
      uploadProgress.value = res.progress;
    });
  }
}

// 上传失败处理
const handleUploadError = (message = '上传文件失败', showRetry = true) => {
  if (showRetry) {
    uni.showModal({
      title: '上传失败',
      content: message + '，是否重试？',
      success: (res) => {
        if (res.confirm) {
          // 用户选择重试，这里可以重新触发上传
        }
      }
    });
  } else {
    uni.showToast({
      title: message,
      icon: 'error'
    });
  }
}

// 上传成功回调
const handleUploadSuccess = (res, file) => {
  if (res.code === 200 && res.data && Array.isArray(res.data) && res.data.length > 0) {
    const uploadedFile = res.data[0];
    
    // 根据当前上传类型设置type字段
    let typeValue = 0; // 默认为生产前
    switch (currentUploadType.value) {
      case 'before':
        typeValue = 0;
        break;
      case 'after':
        typeValue = 1;
        break;
      case 'issue':
        typeValue = 2;
        break;
    }
    
    // 确保上传的文件数据完整，包含id和type
    const fileData = {
      ...file,
      id: uploadedFile.id, // 添加服务器返回的id
      url: uploadedFile.url || uploadedFile.downloadUrl,
      bucketFilename: uploadedFile.bucketFilename || file.name,
      downloadUrl: uploadedFile.downloadUrl || uploadedFile.url,
      size: uploadedFile.size || file.size,
      createTime: uploadedFile.createTime || new Date().getTime(),
      type: typeValue // 添加类型字段：0=生产前, 1=生产中, 2=生产后
    };
    
    console.log(`${getUploadTypeText()}文件上传成功，类型值:`, typeValue, '文件数据:', fileData);
    
    uploadList.value.push(fileData);
    uploadedSuccessfully();
  } else {
    number.value--; // 上传失败时减少计数
    handleUploadError(res.msg || '上传失败');
  }
}

// 上传结束处理
const uploadedSuccessfully = () => {
  if (number.value > 0 && uploadList.value.length === number.value) {
    // 根据当前上传类型，将文件添加到对应的分类
    switch (currentUploadType.value) {
      case 'before':
        beforeModelValue.value = [...beforeModelValue.value, ...uploadList.value];
        break;
      case 'after':
        afterModelValue.value = [...afterModelValue.value, ...uploadList.value];
        break;
      case 'issue':
        issueModelValue.value = [...issueModelValue.value, ...uploadList.value];
        break;
    }
    
    // 重置状态
    uploadList.value = [];
    number.value = 0;
    
    console.log(`${getUploadTypeText()}文件上传完成:`, getCurrentFiles());
  }
}

// 格式化文件大小
const formatFileSize = (size) => {
  if (!size) return '';
  if (size < 1024) return size + 'B';
  if (size < 1024 * 1024) return (size / 1024).toFixed(1) + 'KB';
  return (size / (1024 * 1024)).toFixed(1) + 'MB';
}
</script>

<style scoped lang="scss">
// 导入销售模块公共样式
@import '@/styles/sales-common.scss';

// 页面容器样式
<style scoped>
.inspection-upload-page {
  min-height: 100vh;
  background: #f8f9fa;
  position: relative;
  background-color: #f5f5f5;
}

// 列表容器样式
.table-section {
  padding: 20px;
  padding: 15px;
}

// 任务列表样式 - 使用销售台账的样式规范
.task-list {
  .task-item {
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 0 16px;
    
    &:active {
      transform: scale(0.98);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }
  }
}

// 项目头部样式
.task-header {
  padding: 16px 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 12px;
}

.task-item {
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.task-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  align-items: flex-start;
  margin-bottom: 12px;
}

.task-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-name {
  font-size: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  font-weight: 500;
  margin-bottom: 0;
  line-height: 1.4;
}

.task-location {
  font-size: 12px;
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

// 任务操作按钮样式
.task-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
}

// 任务详情样式 - 使用销售台账的详情行样式
.task-details {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
  
  .detail-item {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 8px;
    
    &:last-child {
      margin-bottom: 0;
  align-items: center;
    }
    
    .detail-label {
      font-size: 12px;
      color: #777777;
      min-width: 60px;
      flex-shrink: 0;
  color: #999;
    }
    
    .detail-value {
      font-size: 12px;
      color: #000000;
      text-align: right;
      flex: 1;
      margin-left: 16px;
      line-height: 1.4;
    }
  }
  color: #666;
  font-weight: 500;
}

// 无数据提示样式 - 使用销售台账的样式
.no-data {
  padding: 40px 0;
  text-align: center;
  padding: 40px 20px;
  color: #999;
  background: none;
  margin: 0;
}

.no-data text {
  font-size: 14px;
  color: #999;
}

/* 扫码弹窗样式 */
@@ -533,78 +1472,538 @@
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  justify-content: center;
}

.qr-scan-container {
  width: 100%;
  width: 90vw;
  max-width: 400px;
  background-color: #000;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  padding: 20px;
  position: relative;
}

.scan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.7);
  margin-bottom: 15px;
}

.scan-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  color: #333;
}

.qr-camera {
  width: 100%;
  height: 400px;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
}

.scan-frame-wrapper {
  position: relative;
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scan-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  border: 3px solid #1890ff;
  width: 200px;
  height: 200px;
  border: 2px solid #409eff;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(24, 144, 255, 0.3);
  animation: pulse 2s infinite;
  position: relative;
}

.scan-frame::before,
.scan-frame::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #409eff;
}

.scan-frame::before {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
}

.scan-frame::after {
  bottom: -2px;
  right: -2px;
  border-left: none;
  border-top: none;
}

.scan-tip {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  margin-top: 10px;
  font-size: 14px;
  color: #666;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 5px 15px;
  border-radius: 20px;
}

@keyframes pulse {
  0% { opacity: 0.8; }
  50% { opacity: 0.4; }
  100% { opacity: 0.8; }
/* 自定义模态框样式 */
.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.custom-modal-container {
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 上传弹窗样式 */
.upload-popup-content {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  min-height: 300px;
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.upload-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.upload-popup-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.upload-popup-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.upload-popup-footer {
  display: flex;
  justify-content: flex-end;
  padding: 15px 20px;
  border-top: 1px solid #eee;
  gap: 10px;
}

/* 简化上传组件样式 */
.simple-upload-area {
  padding: 15px;
}

.upload-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.file-list {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.file-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  padding: 8px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  width: calc(50% - 6px);
  min-width: 120px;
}

.file-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.file-preview-container {
  position: relative;
  margin-bottom: 8px;
}

.file-preview {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid #f0f0f0;
}

.video-preview {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid #f0f0f0;
}

.video-text {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.delete-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: #ff4757;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
  transition: all 0.3s ease;
}

.delete-btn:hover {
  background: #ff3742;
  transform: scale(1.1);
}

.file-info {
  text-align: center;
  width: 100%;
}

.file-name {
  font-size: 12px;
  color: #333;
  font-weight: 500;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

.file-size {
  font-size: 10px;
  color: #999;
  margin-top: 2px;
  display: block;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 14px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 2px dashed #ddd;
}

.upload-progress {
  margin: 15px 0;
  padding: 0 10px;
}

/* 上传标签页样式 */
.upload-tabs {
  display: flex;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 15px;
  padding: 4px;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 8px 12px;
  font-size: 14px;
  color: #666;
  border-radius: 6px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.tab-item.active {
  background: #409eff;
  color: #fff;
  font-weight: 500;
}

.tab-item:hover:not(.active) {
  background: #e9ecef;
  color: #333;
}

/* 统计信息样式 */
.upload-summary {
  margin-top: 15px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #409eff;
}

.summary-text {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

/* 查看附件弹窗样式 */
.attachment-popup-content {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  min-height: 400px;
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.attachment-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  background: #f8f9fa;
}

.attachment-popup-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.close-btn-attachment {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close-btn-attachment:hover {
  background: #e9ecef;
  transform: scale(1.1);
}

.attachment-popup-body {
  flex: 1;
  padding: 15px 20px;
  overflow-y: auto;
}

.attachment-tabs {
  display: flex;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 15px;
  padding: 4px;
}

.attachment-content {
  min-height: 200px;
}

.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.attachment-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  padding: 8px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  width: calc(33.33% - 8px);
  min-width: 100px;
  cursor: pointer;
}

.attachment-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.attachment-preview-container {
  margin-bottom: 8px;
}

.attachment-preview {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid #f0f0f0;
}

.attachment-video-preview {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid #f0f0f0;
}

.attachment-info {
  text-align: center;
  width: 100%;
}

.attachment-name {
  font-size: 12px;
  color: #333;
  font-weight: 500;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.attachment-size {
  font-size: 10px;
  color: #999;
  margin-top: 2px;
  display: block;
}

.attachment-empty {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  font-size: 14px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 2px dashed #ddd;
}

/* 视频预览弹窗样式 */
.video-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.video-modal-container {
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.video-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}

.video-modal-title {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}

.close-btn-video {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close-btn-video:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.video-modal-body {
  position: relative;
  background: #000;
}

.video-player {
  width: 100%;
  height: auto;
  max-height: 60vh;
  display: block;
}
</style>