设备巡检

yyb

5 天以前 944f8c5c49b1dad9bea2c82f422d9e90d150398c

 src/pages/inspectionUpload/index.vue

@@ -1,51 +1,41 @@
<template>
  <view class="inspection-upload-page">
    <!-- 页面头部 -->
    <PageHeader title="巡检上传"  @back="goBack"/>
    
    <PageHeader title="设备巡检" @back="goBack" />
    <!-- 数据列表 -->
    <view class="table-section">
      <!-- 生产巡检列表 -->
      <view class="task-list">
        <view 
          v-for="(item, index) in taskTableData" 
          :key="index"
          class="task-item"
          @click="handleAdd(item)"
        >
        <view v-for="(item, index) in taskTableData" :key="index" class="task-item">
          <view class="task-header">
            <view class="task-info">
              <text class="task-name">{{ item.taskName }}</text>
              <text class="task-location">{{ item.inspectionLocation }}</text>
            </view>
            <view class="task-actions">
              <u-button 
                type="primary" 
                size="small"
                @click.stop="handleAdd(item)"
                :customStyle="{
              <u-button type="primary" size="small" :disabled="item.inspectionStatus > 0 && item.acceptStatus !== 2"
                @click.stop="startUploadForTask(item)" :customStyle="{
                  borderRadius: '15px',
                  height: '30px',
                  fontSize: '12px'
                }"
              >
                上传
                  fontSize: '12px',
                  marginRight: '8px'
                }">
                巡检
              </u-button>
              <u-button 
                type="info" 
                size="small"
                @click.stop="startScanForTask(item)"
                :customStyle="{
                  borderRadius: '15px',
                  height: '30px',
                  fontSize: '12px'
                }"
              >
                扫码
              <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>
@@ -54,557 +44,1618 @@
              <text class="detail-label">执行人</text>
              <text class="detail-value">{{ item.inspector }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">任务下发日期</text>
              <text class="detail-value">{{ item.dateStr }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">巡检状态</text>
              <view class="detail-value">
                <uni-tag v-if="item.inspectionStatus === 1" text="正常" size="small" type="success" inverted></uni-tag>
                <uni-tag v-else-if="item.inspectionStatus === 2" text="异常" size="small" type="error" inverted></uni-tag>
                <uni-tag v-else text="未巡检" size="small" type="warning" inverted></uni-tag>
              </view>
            </view>
            <view class="detail-item">
              <text class="detail-label">验收状态</text>
              <view class="detail-value">
                <uni-tag v-if="item.acceptStatus === 1" text="已通过" size="small" type="success" inverted></uni-tag>
                <uni-tag v-else-if="item.acceptStatus === 2" text="已退回" size="small" type="error" inverted></uni-tag>
                <uni-tag v-else-if="item.inspectionStatus > 0" text="待验收" size="small" type="warning"
                  inverted></uni-tag>
                <text v-else>--</text>
              </view>
            </view>
          </view>
        </view>
        <uni-load-more :status="loadMoreStatus"></uni-load-more>
      </view>
      
      <!-- 空状态 -->
      <view v-if="taskTableData.length === 0" class="no-data">
      <view v-if="taskTableData?.length === 0" class="no-data">
        <text>暂无数据</text>
      </view>
    </view>
    
    <!-- 扫码区域 - 全局弹窗 -->
    <view v-if="isScanning" class="qr-scan-overlay">
      <view class="qr-scan-container">
        <view class="scan-header">
          <text class="scan-title">扫描二维码</text>
          <u-button 
            type="error" 
            size="small"
            @click.stop="stopScan"
            :customStyle="{
              borderRadius: '15px',
              height: '30px',
              fontSize: '12px'
            }"
          >
            关闭
          </u-button>

    <!-- 巡检弹窗 -->
    <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="exception-section">
              <text class="section-title">设备状态</text>
              <view class="exception-options">
                <view class="exception-option" :class="{ active: hasException === false }"
                  @click="setExceptionStatus(false)">
                  <u-icon name="checkmark-circle" size="20" color="#52c41a"></u-icon>
                  <text>正常</text>
                </view>
                <view class="exception-option" :class="{ active: hasException === true }"
                  @click="setExceptionStatus(true)">
                  <u-icon name="close-circle" size="20" color="#ff4d4f"></u-icon>
                  <text>存在异常</text>
                </view>
              </view>
            </view>

            <!-- 异常情况才显示上传区域 -->
            <view v-if="hasException === true" class="media-upload-section">
              <!-- 拍照和视频上传按钮 -->
              <view class="upload-buttons">
                <u-button type="primary" @click="chooseMedia('image')" :loading="uploading"
                  :disabled="uploadFiles.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="uploadFiles.length >= uploadConfig.limit" :customStyle="{ flex: 1 }">
                  <uni-icons type="videocam" name="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="uploadFiles.length > 0" class="file-list">
                <view v-for="(file, index) in uploadFiles" :key="index" class="file-item">
                  <view class="file-preview-container" @click="previewUploadedMedia(file)">
                    <image v-if="isImageFile(file)" :src="getFileAccessUrl(file)" class="file-preview"
                      mode="aspectFill" />
                    <view v-else-if="isVideoFile(file)" class="video-preview">
                      <uni-icons type="videocam" name="videocam" size="18" color="#fff"
                        style="margin-right: 5px;"></uni-icons>
                      <text class="video-text">视频</text>
                    </view>
                    <!-- 删除按钮 -->
                    <view class="delete-btn" @click.stop="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 || (isImageFile(file) ? '图片' : '视频')
                      }}</text>
                    <text class="file-size">{{ formatFileSize(file.size) }}</text>
                  </view>
                </view>
              </view>

              <!-- 空状态提示 -->
              <view v-if="uploadFiles.length === 0" class="empty-state">
                <text>请拍摄异常情况的照片或视频</text>
              </view>

              <!-- 统计信息 -->
              <view class="upload-summary">
                <text class="summary-text">
                  已上传 {{ uploadFiles.length }} 个文件（图片/视频）
                </text>
              </view>
            </view>

            <!-- 异常描述输入框 -->
            <view v-if="hasException === true" class="exception-desc-section">
              <text class="section-title">异常描述</text>
              <u-input v-model="exceptionDesc" type="textarea" :autoHeight="true" :minHeight="120"
                placeholder="请详细描述异常现象及情况" :maxlength="500" count />
            </view>

            <!-- 正常状态的提示 -->
            <view v-if="hasException === false" class="normal-tip">
              <u-icon name="info-circle" size="20" color="#52c41a"></u-icon>
              <text class="tip-text">设备检查正常，无需上传附件</text>
            </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>
        <camera 
          class="qr-camera"
          device-position="back"
          flash="off"
          @scancode="handleScanCode"
          @error="handleCameraError"
        ></camera>
        <view class="scan-frame-wrapper">
          <view class="scan-frame"></view>
          <view class="scan-tip">请将二维码放入框内</view>
        </view>
        <u-alert 
          v-if="cameraError"
          :title="cameraError"
          type="error"
          :showIcon="true"
          :closable="true"
          @close="cameraError = ''"
          :customStyle="{
            margin: '10px 0'
          }"
        ></u-alert>
      </view>
    </view>
    
    <!-- 弹窗组件 -->
    <form-dia ref="formDia" @closeDia="handleQuery"></form-dia>

    <!-- 查看附件弹窗 -->
    <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="detail-info-section" v-if="currentViewTask?.inspectionStatus === 2">
              <text class="info-label">异常描述：</text>
              <text class="info-value">{{ currentViewTask?.inspectionRemark || '无' }}</text>
            </view>
            <!-- 附件列表 -->
            <view class="attachment-content">
              <view v-if="attachmentList.length > 0" class="attachment-list">
                <view v-for="(file, index) in attachmentList" :key="index" class="attachment-item"
                  @click="previewAttachment(file)">
                  <view class="attachment-preview-container">
                    <image v-if="isImageFile(file)" :src="getFileAccessUrl(file)" 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._playUrl" class="video-player" controls autoplay
            @error="handleVideoError"></video>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, onUnmounted, ref, nextTick } 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";

// 组件引用
const formDia = ref()
import { onMounted, onUnmounted, ref, nextTick, computed, reactive } from "vue";
import { onShow, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import PageHeader from "@/components/PageHeader.vue";
import {
  inspectionTaskList,
  uploadInspectionTask,
} from "@/api/inspectionManagement";
import { getToken } from "@/utils/auth";
import config from "@/config";

// 加载提示方法
const showLoadingToast = (message) => {
const showLoadingToast = message => {
  uni.showLoading({
    title: message,
    mask: true
  })
}
    mask: true,
  });
};
const closeToast = () => {
  uni.hideLoading()
}
  uni.hideLoading();
};

// 表格数据
const taskTableData = ref([]) // 生产巡检数据
const taskTableData = ref([]);

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

// 请求取消标志，用于取消正在进行的请求
let isRequestCancelled = false
// 上传相关状态
const showUploadDialog = ref(false);
const uploadFiles = ref([]);
const uploading = ref(false);
const uploadProgress = ref(0);
const number = ref(0);

// 扫码相关状态
const isScanning = ref(false)
const cameraError = ref('')
// 异常状态
const hasException = ref(null);
// 异常描述
const exceptionDesc = ref("");

// 生命周期
onMounted(() => {
  // 延迟初始化，确保DOM已渲染
  nextTick(() => {
    getList()
  })
})
// 查看附件相关状态
const showAttachmentDialog = ref(false);
const currentViewTask = ref(null);
const attachmentList = ref([]);

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

// 上传配置
const uploadConfig = {
  action: "/file/upload",
  limit: 10,
  fileSize: 50,
  fileType: ["jpg", "jpeg", "png", "mp4", "mov"],
  maxVideoDuration: 60,
};

const uploadFileUrl = computed(() => {
  const baseUrl = config.baseUrl;
  return baseUrl + uploadConfig.action;
});

let isRequestCancelled = false;

const pagesPames = reactive({
  size: 10,
  current: 1,
});

const loadMoreStatus = computed(() => {
  if (loading.value) {
    return "loading";
  }
  if (noMore.value) {
    return "noMore";
  }
  return "more";
});
const totalSize = ref(0);
const noMore = computed(() => {
  return taskTableData.value.length >= totalSize.value;
});
const loading = ref(false);

const reloadPage = () => {
  pagesPames.current = 1;
  taskTableData.value = [];
  getList();
};
const loadPage = () => {
  if (noMore.value || loading.value) return;
  pagesPames.current += 1;
  getList();
};

onMounted(() => { });

onReachBottom(() => {
  loadPage();
});
onPullDownRefresh(() => {
  reloadPage();
  uni.stopPullDownRefresh();
});

onShow(() => {
  // 页面显示时刷新数据
  getList()
})
  reloadPage();
});

// 组件销毁时的清理
onUnmounted(() => {
  // 设置取消标志，阻止后续的异步操作
  isRequestCancelled = true
  
  // 停止扫码
  if (isScanning.value) {
    isScanning.value = false
  isRequestCancelled = true;
  if (showUploadDialog.value) {
    showUploadDialog.value = false;
  }
})
});

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}
  uni.navigateBack();
};

// 查询数据
const handleQuery = () => {
  getList()
}

// 获取列表数据
const getList = () => {
  // 显示加载提示
  showLoadingToast('加载中...')
  
  // 设置取消标志
  isRequestCancelled = false
  
  inspectionTaskList({}).then(res => {
    // 检查组件是否还存在且请求未被取消
    if (!isRequestCancelled) {
      console.log('生产巡检API返回数据:', res);
      
      // 处理不同的数据结构
      let records = [];
      if (res && res.data) {
        // 尝试多种可能的数据结构
        if (Array.isArray(res.data.records)) {
          records = res.data.records;
        } else if (Array.isArray(res.data.rows)) {
          records = res.data.rows;
        } else if (Array.isArray(res.data)) {
          records = res.data;
        } else if (Array.isArray(res.data.list)) {
          records = res.data.list;
  isRequestCancelled = false;
  loading.value = true;
  inspectionTaskList({ ...pagesPames })
    .then(res => {
      if (!isRequestCancelled) {
        let records = [];
        if (res && res.data) {
          totalSize.value = res.data.total;
          if (Array.isArray(res.data.records)) {
            records = res.data.records;
          } else if (Array.isArray(res.data.rows)) {
            records = res.data.rows;
          } else if (Array.isArray(res.data)) {
            records = res.data;
          } else if (Array.isArray(res.data.list)) {
            records = res.data.list;
          }
        }

        if (records.length > 0) {
          taskTableData.value = [
            ...taskTableData.value,
            ...records.map(record => {
              record.fileStatus = getFileStatus(record);
              return record;
            }),
          ];
        } else {
          taskTableData.value = [];
          uni.showToast({
            title: "暂无巡检任务数据",
            icon: "none",
          });
        }
      }
      
      if (records.length > 0) {
        taskTableData.value = records;
        console.log('生产巡检数据设置成功，记录数:', records.length);
      } else {
        console.warn('生产巡检数据为空或格式不正确:', res);
      loading.value = false;
    })
    .catch(err => {
      if (!isRequestCancelled) {
        taskTableData.value = [];
        uni.showToast({
          title: '暂无巡检任务数据',
          icon: 'none'
          title: "获取数据失败",
          icon: "error",
        });
      }
    }
    // 关闭加载提示
    closeToast()
  }).catch(err => {
    // 检查组件是否还存在且请求未被取消
    if (!isRequestCancelled) {
      console.error('获取生产巡检数据失败:', err);
      taskTableData.value = [];
      // 添加错误提示
      uni.showToast({
        title: '获取数据失败',
        icon: 'error'
      })
    }
    // 关闭加载提示
    closeToast()
  })
}
      loading.value = false;
    });
};


// 上传
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)
    
    // 显示扫描界面
    isScanning.value = true
    
    // 使用uniapp的扫码API
    uni.scanCode({
      success: (res) => {
        console.log('扫码成功:', res)
        handleScanSuccess(res)
      },
      fail: (err) => {
        console.error('扫码失败:', err)
        uni.showToast({
          title: '扫码失败',
          icon: 'error'
        })
        // 关闭扫描界面
        isScanning.value = false
      },
      complete: () => {
        // 扫码完成后关闭扫描界面
        setTimeout(() => {
          isScanning.value = false
        }, 1000)
      }
    })
  } catch (e) {
    console.error('启动扫码失败:', e)
    uni.showToast({
      title: '启动扫码失败',
      icon: 'error'
    })
    isScanning.value = false
const getFileStatus = record => {
  // 根据是否有附件判断状态
  let hasFiles = false;
  if (record.commonFileList && record.commonFileList.length > 0) {
    hasFiles = true;
  }
}
  if (record.commonFileListBefore && record.commonFileListBefore.length > 0) {
    hasFiles = true;
  }
  if (record.commonFileListAfter && record.commonFileListAfter.length > 0) {
    hasFiles = true;
  }
  return hasFiles ? 2 : 0;
};

// 停止扫码
const stopScan = () => {
  isScanning.value = false
  currentScanningTask.value = null
}
const openUploadDialog = task => {
  if (task) {
    infoData.value = {
      ...task,
      taskId: task.taskId || task.id,
      storageBlobDTO: [],
    };
  }
  showUploadDialog.value = true;
};

// 扫码成功处理
const handleScanSuccess = async (result) => {
const closeUploadDialog = () => {
  showUploadDialog.value = false;
  uploadFiles.value = [];
  hasException.value = null;
  exceptionDesc.value = "";
  infoData.value = null;
};

const setExceptionStatus = status => {
  hasException.value = status;
  // 切换状态时清空文件
  if (status === false) {
    uploadFiles.value = [];
    exceptionDesc.value = "";
  }
};

const goToRepair = () => {
  try {
    console.log('处理扫码结果:', result)
    console.log('当前关联任务:', currentScanningTask.value?.taskName)
    
    const taskInfo = {
      taskId: infoData.value?.taskId || infoData.value?.id,
      taskName: infoData.value?.taskName,
      inspectionLocation: infoData.value?.inspectionLocation,
      inspector: infoData.value?.inspector,
      uploadedFiles: uploadFiles.value,
      exceptionDesc: exceptionDesc.value,
    };

    uni.setStorageSync("repairTaskInfo", JSON.stringify(taskInfo));
    uni.navigateTo({
      url: "/pages/equipmentManagement/repair/add",
    });
    closeUploadDialog();
  } catch (error) {
    console.error("跳转报修页面失败:", error);
    uni.showToast({
      title: '识别成功',
      icon: 'success'
    })
    
    // 解析二维码数据
    let qrData
    let deviceId = ''
    
    try {
      qrData = JSON.parse(result.result)
      console.log('解析的二维码数据:', qrData)
      deviceId = qrData.deviceId || qrData.qrCodeId
    } catch (e) {
      // 如果不是JSON格式，尝试从URL中提取deviceId
      const url = result.result
      
      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或原始结果
      }
      title: "跳转失败，请重试",
      icon: "error",
    });
  }
};

const submitUpload = async () => {
  try {
    // 检查是否选择了异常状态
    if (hasException.value === null) {
      uni.showToast({
        title: "请选择设备状态",
        icon: "none",
      });
      return;
    }
    
    // 如果有设备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)
        } else {
          console.warn('设备信息查询失败，使用默认名称')
          qrData.deviceName = qrData.deviceName || `设备${deviceId}`
        }
      } catch (apiError) {
        console.error('查询设备信息失败:', apiError)
        // API调用失败时使用默认名称
        qrData.deviceName = qrData.deviceName || `设备${deviceId}`

    // 如果异常状态，检查是否有文件
    if (hasException.value === true && uploadFiles.value.length === 0) {
      uni.showToast({
        title: "请上传异常照片或视频",
        icon: "none",
      });
      return;
    }

    showLoadingToast("提交中...");

    // 收集所有文件
    let arr = [...uploadFiles.value];

    // 临时文件ID列表
    let tempFileIds = [];
    if (arr.length > 0) {
      tempFileIds = arr
        .map(item => item?.tempId ?? item?.tempFileId ?? item?.id)
        .filter(v => v !== undefined && v !== null && v !== "");
    }

    // 提交数据
    infoData.value.storageBlobDTO = arr;
    infoData.value.hasException = hasException.value;
    infoData.value.tempFileIds = tempFileIds;
    // 如果存在异常，添加异常描述
    if (hasException.value === true) {
      infoData.value.inspectionRemark = exceptionDesc.value;
    }

    const result = await uploadInspectionTask({ ...infoData.value });

    if (result && (result.code === 200 || result.success)) {
      closeToast();
      uni.showToast({
        title: "提交成功",
        icon: "success",
      });

      const currentHasException = hasException.value;
      const taskInfoCopy = {
        taskId: infoData.value?.taskId || infoData.value?.id,
        taskName: infoData.value?.taskName,
        inspectionLocation: infoData.value?.inspectionLocation,
        inspector: infoData.value?.inspector,
        uploadedFiles: [...uploadFiles.value],
        exceptionDesc: exceptionDesc.value,
      };

      closeUploadDialog();

      if (currentHasException) {
        uni.showModal({
          title: "提示",
          content: "是否新增报修？",
          success: function (res) {
            if (res.confirm) {
              uni.setStorageSync("repairTaskInfo", JSON.stringify(taskInfoCopy));
              uni.navigateTo({
                url: "/pages/equipmentManagement/repair/add",
              });
            }
            setTimeout(() => {
              reloadPage();
            }, 500);
          }
        });
      } else {
        setTimeout(() => {
          reloadPage();
        }, 500);
      }
    }
    
    // 确保数据完整性
    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: '组件未准备好',
            icon: 'error'
          })
        }
      })
    } else {
      closeToast();
      uni.showToast({
        title: result?.msg || result?.message || "提交失败",
        icon: "error",
      });
    }
  } catch (error) {
    console.error('处理扫码结果失败:', 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: error.message || '数据解析失败',
      icon: 'error'
    })
  } finally {
    // 关闭扫描界面
    isScanning.value = false
      title: errorMessage,
      icon: "error",
    });
  }
}
};

// 摄像头错误处理
const handleCameraError = (error) => {
  console.error('摄像头错误:', error)
  cameraError.value = '摄像头访问失败，请检查权限设置'
}
</script>
const startUploadForTask = async (task, type) => {
  openUploadDialog(task);
};

<style scoped lang="scss">
// 导入销售模块公共样式
@import '@/styles/sales-common.scss';
const viewAttachments = async task => {
  try {
    currentViewTask.value = task;
    attachmentList.value = [];

// 页面容器样式
.inspection-upload-page {
  min-height: 100vh;
  background: #f8f9fa;
  position: relative;
}
    // 收集所有附件
    let allFiles = [];
    if (task?.commonFileList) {
      allFiles = allFiles.concat(task.commonFileList);
    }
    if (task?.commonFileListBefore) {
      allFiles = allFiles.concat(task.commonFileListBefore);
    }
    if (task?.commonFileListAfter) {
      allFiles = allFiles.concat(task.commonFileListAfter);
    }

// 列表容器样式
.table-section {
  padding: 20px;
}
    attachmentList.value = allFiles.map(file => ({
      ...file,
      name: file?.name || file?.originalFilename || file?.bucketFilename,
      bucketFilename: file?.bucketFilename || file?.name,
      originalFilename: file?.originalFilename || file?.name,
      url: getFileAccessUrl(file),
      downloadUrl: getFileAccessUrl(file),
      size: file?.size || file?.byteSize,
    }));

// 任务列表样式 - 使用销售台账的样式规范
.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);
    showAttachmentDialog.value = true;
  } catch (error) {
    uni.showToast({
      title: "获取附件失败",
      icon: "error",
    });
  }
};

const closeAttachmentDialog = () => {
  showAttachmentDialog.value = false;
  currentViewTask.value = null;
  attachmentList.value = [];
};

const isImageFile = file => {
  if (file.contentType && file.contentType.startsWith("image/")) {
    return true;
  }
  if (file.type === "image" || file.mediaType === "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 isVideoFile = file => {
  if (!file) return false;
  if (file.type === "video" || file.mediaType === "video") return true;
  const name = file.bucketFilename || file.originalFilename || file.name || "";
  const ext = name.split(".").pop()?.toLowerCase();
  return ["mp4", "mov", "avi", "wmv", "mkv", "webm"].includes(ext);
};

const filePreviewBase = config.fileUrl;

const normalizeFileUrl = (rawUrl = "") => {
  let fileUrl = rawUrl || "";
  if (typeof fileUrl === "string") {
    fileUrl = fileUrl.trim().replace(/^['"]|['"]$/g, "");
  }
  const javaApi = filePreviewBase;
  const localPrefixes = ["wxfile://", "file://", "content://", "blob:", "data:"];

  if (localPrefixes.some(prefix => fileUrl.startsWith(prefix))) {
    return fileUrl;
  }

  if (fileUrl && fileUrl.indexOf("\\") > -1) {
    const lowerPath = fileUrl.toLowerCase();
    const uploadPathIndex = lowerPath.indexOf("uploadpath");
    const prodIndex = lowerPath.indexOf("\\prod\\");

    if (uploadPathIndex > -1) {
      fileUrl = fileUrl.substring(uploadPathIndex).replace(/\\/g, "/");
    } else if (prodIndex > -1) {
      fileUrl = fileUrl
        .substring(prodIndex + "\\prod\\".length)
        .replace(/\\/g, "/");
    } else {
      fileUrl = fileUrl.replace(/\\/g, "/");
    }
  }

  const normalizedLower = String(fileUrl).toLowerCase();
  const fileProdIdx = normalizedLower.indexOf("/file/prod/");
  if (fileProdIdx > -1) {
    fileUrl = `/profile/prod/${fileUrl.substring(fileProdIdx + "/file/prod/".length)}`;
  }
  const fileTempIdx = normalizedLower.indexOf("/file/temp/");
  if (fileTempIdx > -1) {
    fileUrl = `/profile/temp/${fileUrl.substring(fileTempIdx + "/file/temp/".length)}`;
  }

  if (/^\/?uploadPath/i.test(fileUrl)) {
    fileUrl = fileUrl.replace(/^\/?uploadPath/i, "/profile");
  }

  if (fileUrl && !fileUrl.startsWith("http")) {
    if (!fileUrl.startsWith("/")) fileUrl = "/" + fileUrl;
    fileUrl = javaApi + fileUrl;
  }

  return fileUrl;
};

const getFileAccessUrl = (file = {}) => {
  if (file?.link) {
    if (String(file.link).startsWith("http")) return file.link;
    return normalizeFileUrl(file.link);
  }
  const remoteUrl = normalizeFileUrl(
    file?.url ||
    file?.downloadUrl ||
    file?.tempPath ||
    ""
  );
  if (remoteUrl) return remoteUrl;
  if (file?._localPreviewUrl) return file._localPreviewUrl;
  return normalizeFileUrl(file?.tempFilePath || file?.path || "");
};

const previewUploadedMedia = file => {
  if (!file) return;
  if (isImageFile(file)) {
    const imageUrls = uploadFiles.value
      .filter(f => isImageFile(f))
      .map(f => getFileAccessUrl(f))
      .filter(Boolean);
    const current = getFileAccessUrl(file);
    if (!imageUrls.length || !current) return;
    uni.previewImage({
      urls: imageUrls,
      current,
    });
    return;
  }
  if (isVideoFile(file)) {
    playVideoFile(file);
  }
};

const previewAttachment = file => {
  if (isImageFile(file)) {
    const imageUrls = attachmentList.value
      .filter(f => isImageFile(f))
      .map(f => getFileAccessUrl(f));

    uni.previewImage({
      urls: imageUrls,
      current: getFileAccessUrl(file),
    });
  } else {
    playVideoFile(file);
  }
};

const safeEncodeUrl = url => {
  if (!url) return "";
  if (!/^https?:\/\//i.test(url)) return url;
  try {
    return encodeURI(url);
  } catch (e) {
    return url;
  }
};

const getPlayableVideoUrl = file => {
  return safeEncodeUrl(getFileAccessUrl(file));
};

const getFallbackLocalVideoUrl = file => {
  const local = file?._localPreviewUrl || file?.tempFilePath || file?.path || "";
  return safeEncodeUrl(local);
};

const playVideoFile = file => {
  const remoteSrc = getPlayableVideoUrl(file);
  const localSrc = getFallbackLocalVideoUrl(file);
  const src = remoteSrc || localSrc;
  if (!src) {
    uni.showToast({
      title: "视频地址无效",
      icon: "none",
    });
    return;
  }

  showVideoPreview({
    ...file,
    _playUrl: src,
    _playUrlLocal: localSrc,
    _playUrlRemote: remoteSrc,
  });
};

const showVideoPreview = file => {
  currentVideoFile.value = file;
  showVideoDialog.value = true;
};

const closeVideoPreview = () => {
  showVideoDialog.value = false;
  currentVideoFile.value = null;
};

const handleVideoError = () => {
  const localUrl = currentVideoFile.value?._playUrlLocal;
  const remoteUrl = currentVideoFile.value?._playUrlRemote;
  const currentUrl = currentVideoFile.value?._playUrl;
  if (remoteUrl && currentUrl !== remoteUrl) {
    currentVideoFile.value = {
      ...currentVideoFile.value,
      _playUrl: remoteUrl,
    };
    uni.showToast({
      title: "已切换远程视频重试播放",
      icon: "none",
    });
    return;
  }
  if (localUrl && currentUrl !== localUrl) {
    currentVideoFile.value = {
      ...currentVideoFile.value,
      _playUrl: localUrl,
    };
    uni.showToast({
      title: "已切换本地视频重试播放",
      icon: "none",
    });
    return;
  }
  uni.showToast({
    title: "视频播放失败",
    icon: "error",
  });
};

const chooseMedia = type => {
  if (uploadFiles.value.length >= uploadConfig.limit) {
    uni.showToast({
      title: `最多只能选择${uploadConfig.limit}个文件`,
      icon: "none",
    });
    return;
  }

  const remaining = uploadConfig.limit - uploadFiles.value.length;

  if (typeof uni.chooseMedia === "function") {
    uni.chooseMedia({
      count: Math.min(remaining, 1),
      mediaType: [type || "image"],
      sizeType: ["compressed", "original"],
      sourceType: ["camera"],
      success: res => {
        try {
          const files = res?.tempFiles || [];
          if (!files.length) throw new Error("未获取到文件");

          files.forEach((tf, idx) => {
            const filePath = tf.tempFilePath || tf.path || "";
            const fileType = tf.fileType || type || "image";
            const ext = fileType === "video" ? "mp4" : "jpg";
            const file = {
              tempFilePath: filePath,
              path: filePath,
              type: fileType,
              name: `${fileType}_${Date.now()}_${idx}.${ext}`,
              size: tf.size || 0,
              duration: tf.duration || 0,
              createTime: Date.now(),
              uid: Date.now() + Math.random() + idx,
            };
            handleBeforeUpload(file);
          });
        } catch (e) {
          console.error("处理拍摄结果失败:", e);
          uni.showToast({ title: "处理文件失败", icon: "error" });
        }
      },
      fail: err => {
        console.error("拍摄失败:", err);
        uni.showToast({ title: "拍摄失败", icon: "error" });
      },
    });
    return;
  }

  if (type === "video") {
    chooseVideo();
  } else {
    uni.chooseImage({
      count: 1,
      sizeType: ["compressed", "original"],
      sourceType: ["camera"],
      success: res => {
        const tempFilePath = res?.tempFilePaths?.[0];
        const tempFile = res?.tempFiles?.[0] || {};
        if (!tempFilePath) return;
        handleBeforeUpload({
          tempFilePath,
          path: tempFilePath,
          type: "image",
          name: `photo_${Date.now()}.jpg`,
          size: tempFile.size || 0,
          createTime: Date.now(),
          uid: Date.now() + Math.random(),
        });
      },
    });
  }
};

const removeFile = index => {
  uni.showModal({
    title: "确认删除",
    content: "确定要删除这个文件吗？",
    success: res => {
      if (res.confirm) {
        uploadFiles.value.splice(index, 1);
        uni.showToast({
          title: "删除成功",
          icon: "success",
        });
      }
    },
  });
};

const handleBeforeUpload = async file => {
  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 = async file => {
  uploading.value = true;
  uploadProgress.value = 0;
  number.value++;

  const token = getToken();
  if (!token) {
    handleUploadError("用户未登录");
    return;
  }

  const typeValue = 12; // 统一使用 type=12 表示巡检附件

  uploadWithUniUploadFile(
    file,
    file.tempFilePath || file.path || "",
    typeValue,
    token
  );
};

const uploadWithUniUploadFile = (file, filePath, typeValue, token) => {
  if (!filePath) {
    handleUploadError("文件路径不存在");
    return;
  }

  const uploadTask = uni.uploadFile({
    url: uploadFileUrl.value,
    filePath: filePath,
    name: "file",
    formData: {
      type: typeValue,
    },
    header: {
      Authorization: `Bearer ${token}`,
    },
    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);
        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 = "上传文件失败") => {
  uploading.value = false;
  uploadProgress.value = 0;
  uni.showToast({
    title: message,
    icon: "error",
  });
};

const handleUploadSuccess = (res, file) => {
  console.log("上传成功响应:", res);

  let uploadedFile = null;
  uploadedFile = res.data;

  if (!uploadedFile) {
    console.error("无法解析上传响应数据:", res);
    number.value--;
    handleUploadError("上传响应数据格式错误");
    return;
  }

  const fileData = {
    ...file,
    id: uploadedFile.id,
    tempId: uploadedFile.tempId ?? uploadedFile.tempFileId ?? uploadedFile.id,
    url: uploadedFile.url || uploadedFile.downloadUrl || uploadedFile.tempPath || file.tempFilePath || file.path,
    tempPath: uploadedFile.tempPath || file.tempPath || "",
    _localPreviewUrl: file.tempFilePath || file.path || "",
    bucketFilename: uploadedFile.bucketFilename || uploadedFile.originalFilename || uploadedFile.originalName || file.name,
    downloadUrl: uploadedFile.downloadUrl || uploadedFile.url,
    size: uploadedFile.size || uploadedFile.byteSize || file.size,
    createTime: uploadedFile.createTime || new Date().getTime(),
    mediaType: file.type || uploadedFile.mediaType,
    type: 20, // 统一使用 type=20
  };

  uploadFiles.value.push(fileData);
  number.value = 0;
};

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>
.inspection-upload-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

// 项目头部样式
.task-header {
  padding: 16px 0;
.table-section {
  padding: 15px;
}

.task-list {
  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;
  
  .detail-item {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 8px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .detail-label {
      font-size: 12px;
      color: #777777;
      min-width: 60px;
      flex-shrink: 0;
    }
    
    .detail-value {
      font-size: 12px;
      color: #000000;
      text-align: right;
      flex: 1;
      margin-left: 16px;
      line-height: 1.4;
    }
  }
  display: flex;
  flex-direction: column;
  gap: 6px;
}

// 无数据提示样式 - 使用销售台账的样式
.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-label {
  font-size: 12px;
  color: #999;
}

.detail-value {
  font-size: 12px;
  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;
}

/* 扫码弹窗样式 */
.qr-scan-overlay {
.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.qr-scan-container {
.custom-modal-container {
  width: 100%;
  max-width: 400px;
  background-color: #000;
  border-radius: 12px;
  overflow: hidden;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan-header {
.upload-popup-content {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  min-height: 300px;
  max-height: 80vh;
  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;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

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

.qr-camera {
  width: 100%;
  height: 400px;
.upload-popup-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

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

.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-preview-container {
  position: relative;
  width: 100%;
  height: 300px;
  margin-bottom: 8px;
}

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

.scan-tip {
.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;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  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;
}

.file-info {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 5px 15px;
  border-radius: 20px;
  width: 100%;
}

@keyframes pulse {
  0% { opacity: 0.8; }
  50% { opacity: 0.4; }
  100% { opacity: 0.8; }
.file-name {
  font-size: 12px;
  color: #333;
  font-weight: 500;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

</style>
.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;
}

.exception-section {
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.section-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.exception-options {
  display: flex;
  gap: 12px;
}

.exception-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fff;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  color: #666;
}

.exception-option.active {
  border-color: #409eff;
  background: #f0f8ff;
  color: #409eff;
  font-weight: 500;
}

.exception-desc-section {
  margin-top: 15px;
}

.normal-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px;
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 8px;
}

.tip-text {
  font-size: 14px;
  color: #52c41a;
}

.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;
}

.media-upload-section {
  margin-bottom: 15px;
}

.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);
}

.detail-info-section {
  padding: 10px;
  background-color: #fff2f0;
  border: 1px solid #ffccc7;
  border-radius: 8px;
  margin-bottom: 15px;
}

.info-label {
  font-size: 14px;
  font-weight: 600;
  color: #ff4d4f;
}

.info-value {
  font-size: 14px;
  color: #ff4d4f;
  margin-top: 5px;
  display: block;
}

.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;
}

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

.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-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;
}

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

.video-player {
  width: 100%;
  height: 56vh;
  min-height: 260px;
  max-height: 60vh;
  display: block;
  object-fit: contain;
}
</style>