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

src/components/DetailComponent/singleFileComponent.vue

@@ -10,6 +10,8 @@
       </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">
@@ -44,6 +46,11 @@ const props = defineProps({
   labelAlign: {
     type: String,
     default: 'right'
+  },
+  //弹窗是否铺满全屏
+  fullscreen: {
+    type: Boolean,
+    default: false
   }
 })
 const emit = defineEmits(['update:value'])
@@ -60,7 +67,10 @@ 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',
@@ -109,6 +119,23 @@ const tableConfig = reactive({
     }
   ]
 })
+const filePreviewParam = ref({
+  fileUrl: '',
+  fileName: '',
+  fileType: 'pdf'
+})
+const filePreviewShow = ref(false)
+const clickToPreview=(row)=>{
+  filePreviewShow.value = false
+  filePreviewParam.value = {
+    fileUrl: row.url,
+    fileName: row.originalFileName,
+    fileType: row.fileType
+  }
+  nextTick(()=>{
+    filePreviewShow.value = true
+  })
+}
 const _value = computed({
   get() {
     return props.value;