增加材料清单

web/src/view/projectManage/projectDetails/components/preview.vue

@@ -1,34 +1,52 @@
 <template>
-  <div>
-    <div style="width: 100%; height: 700px">
-      <img
-          :src="previewUrl"
-          style="width: 95%"
-          v-show="currentFileType === 'image'"
-      />
-      <el-table
-          :data="tableData"
-          height="650px"
-          v-show="currentFileType === 'excel'">
-        <el-table-column
-            v-for="(header, index) in headers"
-            :key="index"
-            :prop="`col_${index}`"
-            :label="header"
-        />
-      </el-table>
-      <div v-show="currentFileType === 'word'" v-html="wordHtml" />
-    </div>
+  <div class="wrap" v-loading="loading">
+    <vue-office-docx
+        v-if="fileInfo.fileType === 'word'"
+        :src="fileInfo.filePath" style="height: 600px"
+        @rendered="rendered" @error="handError">
+    </vue-office-docx>
+    <vue-office-excel
+        v-if="fileInfo.fileType === 'excel'"
+        :src="fileInfo.filePath" style="height: 600px"
+        @rendered="rendered" @error="handError">
+    </vue-office-excel>
+    <vue-office-pdf
+        v-if="fileInfo.fileType === 'pdf'"
+        :src="fileInfo.filePath" style="height: 600px"
+        @rendered="rendered"  @error="handError">
+    </vue-office-pdf>
+    <el-image
+        v-if="fileInfo.fileType === 'image'"
+        :src="fileInfo.filePath" alt="Preview"
+        @load="rendered" @error="handError" />
+    <video v-if="fileInfo.fileType === 'video' && fileInfo.filePath"
+           width="100%" controls controlslist="nodownload" style="height: 600px">
+      <source :src="fileInfo.filePath"/>
+      Download the
+      <a :href="fileInfo.filePath">MP4</a>
+    </video>
+    <audio v-if="fileInfo.fileType === 'audio' && fileInfo.filePath"
+           controls controlsList="nodownload" style="width: 100%;height: 200px">
+      <source :src="fileInfo.filePath" type="audio/mp3">
+      您的浏览器不支持audio标签。
+    </audio>
   </div>
 </template>
 
 <script setup>
-import { ref, defineExpose, computed, reactive } from 'vue';
-import { fileDownload } from "@/api/dailyFile";
-const currentFileType = ref('')
-import * as XLSX from 'xlsx'
-import { saveAs } from 'file-saver'
-import * as mammoth from 'mammoth';
+import { defineExpose, ref, reactive } from "vue"
+import VueOfficeDocx from "@vue-office/docx"
+import VueOfficeExcel from "@vue-office/excel"
+import VueOfficePdf from "@vue-office/pdf"
+import { fileDownload } from "@/api/dailyFile"
+//引入相关样式
+import "@vue-office/docx/lib/index.css"
+import '@vue-office/excel/lib/index.css'
+const loading = ref(false)
+const fileInfo = reactive({
+  fileType: '',
+  filePath: ''
+})
 const getFileExtension = (filename, toLowerCase = true) => {
   if (typeof filename !== 'string') return '';
 
@@ -67,78 +85,25 @@ const getFileType = (ext) => {
   return extensionMap[ext] || 'unknown'
 }
 const getFile = (data) => {
-  const fileType = getFileType(getFileExtension(data.name))
-  currentFileType.value = fileType
+  fileInfo.fileType = getFileType(getFileExtension(data.name))
   fileDownload(data).then(res => {
-    if (fileType === 'image') {
-      previewImage(res.data)
-    } else if (fileType === 'excel') {
-      previewExcel(res.data)
-    } else if (fileType === 'word') {
-      previewOffice(res.data)
-    }
-  })
-}
-
-const previewUrl = ref('')
-// 图片预览.....................................................
-async function previewImage(data) {
-  try {
-    previewUrl.value = URL.createObjectURL(data)
-  } catch (err) {
-    throw new Error('图片预览失败', { cause: err })
-  }
-}
-// Excel 预览...................................................
-async function previewExcel(val) {
-  // console.log(val)
-  // console.log('val',new Uint8Array(val.arrayBuffer()))
-  try {
-    const data = new Uint8Array(await val.arrayBuffer())
-    const workbook = XLSX.read(data, { type: 'array' })
-    // 获取所有工作表名
-    sheets.splice(0, sheets.length, ...workbook.SheetNames)
-
-    if (sheets.length) {
-      activeSheet.value = sheets[0]
-      renderSheet(workbook.Sheets[sheets[0]])
-    }
-  } catch (err) {
-    throw new Error('Excel 文件解析失败', { cause: err })
-  }
-}
-const headers = ref([])
-const tableData = ref([])
-const sheets = reactive([])
-const activeSheet = ref('')
-// 渲染指定工作表................................................
-const wordHtml = ref('')
-const renderSheet = (worksheet) => {
-  // 提取表头（第一行）
-  const headerRow = XLSX.utils.sheet_to_json(worksheet, { header: 1 })[0] || []
-  headers.value = headerRow.map(header => header || '空列')
-
-  // 提取数据（跳过表头）
-  const jsonData = XLSX.utils.sheet_to_json(worksheet, { skipHeader: 1 })
-  // 转换为表格数据格式
-  tableData.value = jsonData.map(row => {
-    const rowData = {}
-    headers.value.forEach((header, index) => {
-      rowData[`col_${index}`] = row[header] || ''
-    })
-    return rowData
+    fileInfo.filePath = URL.createObjectURL(res.data)
   })
 }
 
-const previewOffice = async (val) => {
-  const arrayBuffer = await val.arrayBuffer()
-  console.log('arrayBuffer', arrayBuffer)
-  const { value } = await mammoth.extractRawText({ arrayBuffer })
-  console.log('value', value)
-  wordHtml.value = value;
+const closeFile = () => {
+  fileInfo.fileType = ''
+  fileInfo.filePath = ''
 }
+const rendered = () => {}
+const handError = () => {}
 
 defineExpose({
-  getFile
+  getFile,
+  closeFile
 })
 </script>
+
+<style scoped>
+
+</style>

web/src/view/projectManage/projectDetails/components/test.vue

@@ -1,83 +0,0 @@
-<template>
-  <div class="wrap" v-loading="loading">
-    <vue-office-docx
-        v-show="fileInfo.fileType === 'docx'"
-        :src="fileInfo.filePath" style="height: 100%"
-        @rendered="rendered" @error="HandlError">
-    </vue-office-docx>
-  </div>
-</template>
-
-<script setup>
-import { defineExpose, ref } from "vue"
-import VueOfficeDocx from "@vue-office/docx";
-import { fileDownload } from "@/api/dailyFile";
-const loading = ref(false)
-const currentFileType = ref('')
-const getFileExtension = (filename, toLowerCase = true) => {
-  if (typeof filename !== 'string') return '';
-
-  // 正则匹配：匹配最后一个点之后的有效扩展名
-  const match = filename.match(/\.([^.]+)$/);
-
-  return match ? (toLowerCase ? match[1].toLowerCase() : match[1]) : '';
-}
-
-const getFileType = (ext) => {
-  const extensionMap = {
-    jpg: 'image',
-    jpeg: 'image',
-    png: 'image',
-    gif: 'image',
-    webp: 'image',
-    pdf: 'pdf',
-    doc: 'word',
-    docx: 'word',
-    xls: 'excel',
-    xlsx: 'excel',
-    ppt: 'ppt',
-    pptx: 'ppt',
-    txt: 'text',
-    csv: 'csv',
-    json: 'json',
-    zip: 'archive',
-    rar: 'archive',
-    '7z': 'archive',
-    mp3: 'audio',
-    wav: 'audio',
-    mp4: 'video',
-    mov: 'video',
-    avi: 'video'
-  }
-  return extensionMap[ext] || 'unknown'
-}
-const getFile = (data) => {
-  const fileType = getFileType(getFileExtension(data.name))
-  currentFileType.value = fileType
-  fileDownload(data).then(res => {
-    if (fileType === 'image') {
-      previewImage(res.data)
-    } else if (fileType === 'excel') {
-      previewExcel(res.data)
-    } else if (fileType === 'word') {
-      previewWord(res.data)
-    }
-  })
-}
-
-const previewImage = (data) => {}
-
-const previewExcel = (data) => {}
-
-const previewWord = (data) => {
-  const blob = new Blob([response]);
-}
-
-defineExpose({
-  getFile
-})
-</script>
-
-<style scoped>
-
-</style>

web/src/view/projectManage/projectDetails/projectDetails.vue

@@ -676,8 +676,11 @@
     <el-dialog
         v-model="previewShow"
         title="文件预览"
+        @close="closePreview"
         width="60%">
-      <preview ref="previewRef"/>
+
+<!--      <preview ref="previewRef"/>-->
+      <test ref="previewRef"/>
     </el-dialog>
   </div>
 </template>
@@ -694,7 +697,7 @@ import { editorData } from '@/pinia/project/project'
 import { fileDownload } from '@/api/dailyFile'
 import { useRoute, useRouter } from 'vue-router'
 import { useUserStore } from '@/pinia/modules/user'
-import preview from './components/preview.vue'
+import test from './components/preview.vue'
 // eslint-disable-next-line no-unused-vars
 const router = useRouter()
 const route = useRoute()
@@ -1080,6 +1083,10 @@ const changeFilePage = (value) => {
 const openOptionEdit = () => {
   stateTypeShow.value = true
 }
+
+const closePreview = () => {
+  previewRef.value.closeFile()
+}
 </script>
 
 <style scoped lang="scss">