yudao-admin-yiqun/yudao-ui-admin-vue3/src/views/pressure2/boilerchecker/components/reportListUploadModal.vue

<!--
 * @Author: zhuMingXi
 * @Date: 2025/09/13 15:27:57
 * @LastEditors: zhuMingXi
 * @LastEditTime: 2025/09/13 15:27:57
 * @Description: 检验项目添加上传附件功能
 * @FilePath:  FilePath
 -->

<template>
  <Dialog
    v-model="dialogVisible"
    width="60%"
    :title="isEdit ? '附件上传' : '查看附件'"
    :dialogAttrs="{ zIndex: 10006 }"
    style="height: 90vh; display: flex; flex-direction: column"
    align-center
    class="upload-modal"
    @close="closeModal"
    @confirm="handleConfirm"
  >
    <el-select
      class="mb-2 !w-[240px]"
      v-model="currentReportId"
      placeholder="请选择报告"
      clearable
      @change="handleReportChange"
    >
      <el-option
        v-for="item in filterReportList"
        :key="item.id"
        :label="item.reportName"
        :value="item.id"
      />
    </el-select>
    <!-- 内容显示区域 -->
    <div class="group">
      <div class="group-title">图片</div>
      <div
        class="group-item"
        v-if="currentReportId && changedReportMap[currentReportId].image.length > 0"
      >
        <div
          v-for="(path, index) in changedReportMap[currentReportId].image"
          :key="index"
          class="group-item-view"
        >
          <img class="group-item-view-img" :src="buildFileUrl(path)" />
          <div class="group-item-view-detail">
            <el-icon class="icon" @click.stop.prevent="handlePreview(buildFileUrl(path), 'image')"
              ><View
            /></el-icon>
            <el-icon v-if="isEdit" class="icon" @click.stop.prevent="handleDelete(index, 'image')"
              ><Delete
            /></el-icon>
          </div>
        </div>
      </div>
      <el-empty
        v-else
        description="暂无图片"
        :image-size="100"
        style="--el-empty-padding: 0 0 20px"
      />
    </div>
    <div class="group">
      <div class="group-title">视频</div>
      <div
        class="group-item"
        v-if="currentReportId && changedReportMap[currentReportId].video.length > 0"
      >
        <div
          v-for="(path, index) in changedReportMap[currentReportId].video"
          :key="index"
          class="group-item-view"
        >
          <video class="group-item-view-img" :src="buildFileUrl(path)" alt=""></video>
          <div class="group-item-view-detail">
            <el-icon class="icon" @click.stop.prevent="handlePreview(buildFileUrl(path), 'video')"
              ><View
            /></el-icon>
            <el-icon v-if="isEdit" class="icon" @click.stop.prevent="handleDelete(index, 'video')"
              ><Delete
            /></el-icon>
          </div>
        </div>
      </div>
      <el-empty
        v-else
        description="暂无视频"
        :image-size="100"
        style="--el-empty-padding: 0 0 20px"
      />
    </div>

    <div class="group">
      <div class="group-title">文件</div>
      <div
        v-if="currentReportId && changedReportMap[currentReportId].attachment.length > 0"
        class="attr-list"
      >
        <div
          v-for="(path, index) in changedReportMap[currentReportId].attachment"
          :key="index"
          class="flex items-center w-full p-[10px] hover:bg-gray-100 rounded-6px"
        >
          <!-- <el-tooltip :content="path"> -->
          <span class="flex-1 text-ellipsis overflow-hidden whitespace-nowrap">{{ changedReportMap[currentReportId].attachmentName[index] || path }}</span>
          <!-- </el-tooltip>  -->
          <div class="ml-10px flex gap-[10px] cursor-pointer">
            <el-icon
              class="icon hover:c-[#489fc7]"
              @click.stop.prevent="handlePreview(buildFileUrl(path), 'attachment')"
              ><View
            /></el-icon>
            <el-icon
              v-if="isEdit"
              class="icon hover:c-[#489fc7]"
              @click.stop.prevent="handleDelete(index, 'attachment')"
              ><Delete
            /></el-icon>
          </div>
        </div>
      </div>
      <el-empty
        v-else
        description="暂无文件"
        :image-size="100"
        style="--el-empty-padding: 0 0 20px"
      />
    </div>
    <template v-if="isEdit" #footer>
      <!-- 附件上传区域 -->
      <el-upload
        ref="uploadRef"
        class="w-full mt-40px"
        v-model:file-list="fileList"
        :disabled="!currentReportId"
        v-bind="uploadConfig"
      >
        <Icon icon="ep:upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>{{ `仅允许导入${uploadConfig.accept} 格式文件。` }}</span>
          </div>
        </template>
      </el-upload>
      <el-button :loading="loading" type="primary" @click="handleConfirm">确认</el-button>
    </template>
  </Dialog>

  <!-- 图片预览对话框 -->
  <el-dialog
    v-model="previewVisible"
    class="preview-dialog !bg-transparent !p-0 !w-auto"
    style=""
    title=""
    width="auto"
    :show-footer="false"
    :show-close="false"
    align-center
  >
    <el-scrollbar v-if="previewType === 'attachment'" height="100%" class="preview-container">
      <vue-office-docx
        v-if="getFileExtension(previewUrl) === 'docx'"
        ref="docxRef"
        :src="previewUrl"
        style="width: 950px"
      />
      <VuePdfEmbed
        v-else-if="getFileExtension(previewUrl) === 'pdf'"
        :height="0"
        :width="950"
        :source="previewUrl"
        :text-layer="false"
        :annotation-layer="false"
      />
    </el-scrollbar>
    <div v-else class="preview-container">
      <video
        class="preview-video"
        v-if="previewType === 'video'"
        :src="previewUrl"
        auto-play
        controls
      ></video>
      <img class="preview-image" v-else :src="previewUrl" />
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ReportItemVO, BoilerTaskOrderApi } from '@/api/pressure2/boilertaskorder'
import { useUpload } from '@/components/UploadFile/src/useUpload'
import { ElUpload, UploadFile, UploadFiles } from 'element-plus'
import { View, Delete } from '@element-plus/icons-vue'
import { buildFileUrl } from '@/utils'
import VueOfficeDocx from '@vue-office/docx/lib/v3/vue-office-docx.mjs'
import '@vue-office/docx/lib/v3/index.css'
import VuePdfEmbed from 'vue-pdf-embed'
import { PressureReportType } from '@/utils/constants'

const props = defineProps({
  /**所有报告 */
  reportList: {
    type: Array as PropType<ReportItemVO[]>,
    default: () => []
  },
  /**当前选中的项目 */
  selectedItem: {
    type: Object as PropType<ReportItemVO>,
    default: () => {}
  }
})

const emit = defineEmits(['confirm'])
const filterReportList = computed(() => {
  return props.reportList.filter((x) => {
    return ![PressureReportType['INSPECTIONPLAN'], PressureReportType['WORKINSTRUCTION']].includes(
      x.reportType
    )
  })
})

const dialogVisible = ref(false)
const openModal = (canEdit: boolean = false, data = props.selectedItem) => {
  isEdit.value = canEdit
  changedReportMap.value = {}
  setCurrentReportIdFile(data)
  dialogVisible.value = true
}
const closeModal = () => {
  dialogVisible.value = false
}
const loading = ref(false)
const handleConfirm = () => {
  const reportIds = Object.keys(unref(changedReportMap))
  const params = reportIds.map((item) => ({
    reportId: item,
    attachment: changedReportMap.value[item].attachment.join(','),
    attachmentName: changedReportMap.value[item].attachmentName.join(','),
    image: changedReportMap.value[item].image.join(','),
    imageName: changedReportMap.value[item].imageName.join(','),
    video: changedReportMap.value[item].video.join(','),
    videoName: changedReportMap.value[item].videoName.join(',')
  }))
  loading.value = true
  BoilerTaskOrderApi.reportItemUploadBatch({ items: params })
    .then((res) => {
      emit('confirm')
      closeModal()
    })
    .finally(() => {
      loading.value = false
    })
}

const isEdit = ref(false)
const uploadRef = ref<InstanceType<typeof ElUpload>>()
//  支持上传docx pdf 图片和视频
const accept = '.docx,.pdf,.png,.jpg,.jpeg,.mp4'
const { httpRequest } = useUpload()
const fileList = ref<any[]>([])
const uploadConfig = {
  action: '#',
  accept,
  //   limit: 1,
  drag: true,
  onSuccess: (response: any, uploadFile: any) => {
    console.log('response:', response)
    if (response.code !== 0) return ElMessage.error(response.msg)
    ElMessage.success('附件上传成功')
    // 根据文件类型，根据当前选中的报告id，添加到不同的数组中
    const fileType = response.data.split('.').pop()?.toLowerCase()
    const originalName = uploadFile?.name || response.data.substring(response.data.lastIndexOf('/') + 1)
    if (['docx', 'pdf'].includes(fileType)) {
      changedReportMap.value[currentReportId.value].attachment.push(response.data)
      changedReportMap.value[currentReportId.value].attachmentName.push(originalName)
    } else if (['png', 'jpg', 'jpeg'].includes(fileType)) {
      changedReportMap.value[currentReportId.value].image.push(response.data)
      changedReportMap.value[currentReportId.value].imageName.push(originalName)
    } else if (['mp4'].includes(fileType)) {
      changedReportMap.value[currentReportId.value].video.push(response.data)
      changedReportMap.value[currentReportId.value].videoName.push(originalName)
    }
  },
  onError: (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles): void => {
    ElMessage.error('上传失败，请您重新上传！')
    uploadRef.value?.handleRemove(uploadFile)
  },
  onExceed: (): void => {
    ElMessage.error('最多只能上传一个文件！')
  },
  beforeUpload: (file) => {
    // 允许的文件类型扩展名
    const allowedExtensions = accept.toLowerCase().split(',')
    // 获取文件扩展名（转为小写）
    const fileExt = file.name.split('.').pop()?.toLowerCase()
    if (!fileExt || !allowedExtensions.includes('.' + fileExt)) {
      ElMessage.error(`不支持的文件类型，仅允许上传: ${allowedExtensions.join(',')}类型文件`)
      return false // 阻止上传
    }
    return true // 允许上传
  },
  httpRequest: httpRequest
}

/**当前选中的报告id */
const currentReportId = ref('')
const handleReportChange = (val) => {
  if (val) setCurrentReportIdFile(props.reportList.find((item) => item.id === val))
}
const changedReportMap = ref<
  Record<string, { image: string[]; imageName: string[]; video: string[]; videoName: string[]; attachment: string[]; attachmentName: string[] }>
>({}) // 已经编辑过的报告的数据统计
const setCurrentReportIdFile = (selectedItem) => {
  const { id, image, imageName, video, videoName, attachment, attachmentName } = selectedItem
  currentReportId.value = filterReportList.value.find((item) => item.id === id)?.id || ''
  if (!changedReportMap.value[id]) {
    changedReportMap.value[id] = {
      image: image ? image.split(',') : [],
      imageName: imageName ? imageName.split(',') : [],
      video: video ? video.split(',') : [],
      videoName: videoName ? videoName.split(',') : [],
      attachment: attachment ? attachment.split(',') : [],
      attachmentName: attachmentName ? attachmentName.split(',') : []
    }
  }
}

// 图片视频预览
const previewVisible = ref(false)
const previewType = ref('')
const previewUrl = ref('')
const handleDelete = (index: number, type: 'image' | 'video' | 'attachment') => {
  if (type === 'image') {
    changedReportMap.value[currentReportId.value].image.splice(index, 1)
    changedReportMap.value[currentReportId.value].imageName.splice(index, 1)
  } else if (type === 'video') {
    changedReportMap.value[currentReportId.value].video.splice(index, 1)
    changedReportMap.value[currentReportId.value].videoName.splice(index, 1)
  } else {
    changedReportMap.value[currentReportId.value].attachment.splice(index, 1)
    changedReportMap.value[currentReportId.value].attachmentName.splice(index, 1)
  }
}
const handlePreview = (path: string, type: 'video' | 'image' | 'attachment') => {
  previewUrl.value = path
  previewType.value = type
  previewVisible.value = true
}

// 获取文件类型
const getFileExtension = (fileName: string) => {
  console.log(fileName, 'FileExt:log', fileName.split('.').pop()?.toLowerCase())
  return fileName.split('.').pop()?.toLowerCase()
}

defineExpose({
  closeModal,
  openModal
})
</script>

<style lang="scss" scoped>
.group {
  .group-title {
    width: 100%;
    line-height: 32px;
    display: flex;
    align-items: center;
    background: #effaff;
    // margin-bottom: 12px;
    margin: 12px 0;
    &::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 16px;
      background: var(--el-color-primary);
      margin-right: 8px;
    }
  }
  .group-item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 150px;

    &-view {
      width: 100px;
      height: 100px;
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      align-items: center;
      background: #f1f1f1;

      &-img {
        width: 100px;
        // height: 100px;
      }

      &-detail {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99;

        transition: all 0.5s ease;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        &:hover {
          backdrop-filter: blur(2px);
          background-color: #00000076;
          z-index: 1;
          .icon {
            display: inline-block;
            opacity: 1;
            &:hover {
              color: #ffffff;
              transition: all 0.5s ease;
            }
          }
        }
        .icon {
          color: #ffffff99;
          opacity: 0;
          transition: all 0.5s ease;
          font-size: 16px;
        }
      }
    }
  }
}

.preview-container {
  padding: 0;
  position: relative;
}

.preview-image,
.preview-video {
  height: 65vh;
  max-width: 100vw;
  // object-fit: cover;
}

:deep(.preview-dialog) {
  background-color: transparent !important;
  width: auto !important;
  padding: 0 !important;

  :deep(.el-dialog__header) {
    display: none;
  }

  .el-dialog__body {
    padding: 0;

    .preview-container {
      padding: 0;
      position: relative;
    }

    .preview-image,
    .preview-video {
      height: 65vh;
      max-width: 100vw;
      // object-fit: cover;
    }
  }
}

.attr-list {
  // display: grid;
  // grid-template-columns: 1fr;
  // gap: 4px;
  min-height: 150px;
}
.attr-list-item {
  width: 100%;
  display: flex;
  align-items: center;
}

:deep(.el-upload-list) {
  display: none !important;
}
</style>

<style>
.upload-modal > .el-dialog__body {
  flex: 1;
  overflow-y: auto;
}

.preview-dialog {
  background-color: transparent !important;
  width: auto !important;
  padding: 0 !important;
}

.preview-dialog .el-dialog__header {
  display: none;
}

.preview-dialog .el-dialog__body {
  padding: 0;
}
</style>