feat : 文件预览,项目详情文件表格展示

src/components/DetailComponent/FileComponent.vue

@@ -1,7 +1,6 @@
 <template>
   <el-form :label-position="labelAlign">
-<!--    :label-width="title?95:''"-->
-    <el-form-item :label="title?'其他文件':''" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'" :label-position="labelAlign" >
+    <el-form-item :label="title?'其他文件':''" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'" :label-position="labelAlign" :label-width="title?95:''" style="margin-top: 10px">
       <file-upload @getFile="getOtherFile" v-if="fileListShow === 'EDIT'"/>
       <fvTable style="width: 100%;max-height: 162px;" v-if="processViewer"  height="162" :tableConfig="tableConfig"
               :data="_value" :isSettingCol="false" :pagination="false">
@@ -11,11 +10,14 @@
       </fvTable>
     </el-form-item>
   </el-form>
+  <file-preview ref="filePreviewRef" :fullscreen="fullscreen" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
+                :fileType="filePreviewParam.fileType"/>
 </template>
 
 <script setup lang="jsx">
 import {downloadFile, deleteFile} from "@/api/project-demand";
 import {ElNotification} from "element-plus";
+import FilePreview from "../filePreview/index.vue";
 
 const props = defineProps({
   title: {
@@ -45,6 +47,11 @@ const props = defineProps({
   labelAlign: {
     type: String,
     default: 'right'
+  },
+  //弹窗是否铺满全屏
+  fullscreen: {
+    type: Boolean,
+    default: false
   }
 })
 const emit = defineEmits(['update:value'])
@@ -61,7 +68,9 @@ const tableConfig = reactive({
       prop: 'originalFileName',
       label: '文件名',
       align: 'center',
-      width: props.fileNameTableWidth
+      width: props.fileNameTableWidth,
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => (<div style="color: #2a99ff;cursor: pointer;" onClick={()=>clickToPreview(row)}>{row.originalFileName}</div>)
     },
     {
       prop: 'tag',
@@ -110,6 +119,12 @@ const tableConfig = reactive({
     }
   ]
 })
+const filePreviewParam = ref({
+  fileUrl: '',
+  fileName: '',
+  fileType: 'pdf'
+})
+const filePreviewShow = ref(false)
 const _value = computed({
   get() {
     return props.value;
@@ -118,7 +133,17 @@ const _value = computed({
     emit("update:value", val);
   }
 })
-
+const clickToPreview=(row)=>{
+  filePreviewShow.value = false
+  filePreviewParam.value = {
+    fileUrl: row.url,
+    fileName: row.originalFileName,
+    fileType: row.fileType
+  }
+  nextTick(()=>{
+    filePreviewShow.value = true
+  })
+}
 const getOtherFile = (val) => {
   props.processViewer = false
   let fileObj = compositeParam(val)