fix : 修复项目实施/归档上传附件表格高度,完善归档附件/上传附件时的文件预览

src/components/SearchFilesByTag.vue

@@ -2,7 +2,7 @@
   <div v-loading="_value">
     <el-form :model="attachment" inline style="margin-left: 15px">
       <el-form-item label="名称" prop="fileName">
-        <el-input v-model="attachment.fileName" placeholder="请输入附件名称查询" clearable filterable style="width: 300px"/>
+        <el-input v-model="attachment.fileName" placeholder="请输入文件名查询" clearable filterable style="width: 300px"/>
       </el-form-item>
       <el-form-item label="标签" prop="tag" v-if="type==='40'">
         <el-select v-model="attachment.tag" placeholder="请选择标签" clearable remote filterable style="width: 300px">
@@ -21,13 +21,15 @@
       </el-form-item>
     </el-form>
     <el-card style="width: 100%;overflow-y: hidden">
-      <fvTable style="width: 100%;max-height: 254px" v-if="showTable" height="254"  :tableConfig="tableConfig"
+      <fvTable style="width: 100%;max-height: 318px" v-if="showTable" height="318"  :tableConfig="tableConfig"
                :data="fileList" :isSettingCol="false" :pagination="false">
         <template #empty>
           <el-empty :image-size="99" description="暂无数据" style="padding: 0"/>
         </template>
       </fvTable>
     </el-card>
+    <file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
+                  :fileType="filePreviewParam.fileType"/>
   </div>
 </template>
 
@@ -35,7 +37,7 @@
 import {downloadFile} from "@/api/project-demand";
 import {ElNotification} from "element-plus";
 import {getTags} from "@/api/project-manage";
-import {computed} from "vue";
+import {computed, ref} from "vue";
 
 const route = useRoute()
 const router = useRouter()
@@ -71,8 +73,10 @@ const tableConfig = reactive({
     },
     {
       prop: 'originalFileName',
-      label: '附件名称',
+      label: '文件名',
       align: 'center',
+      currentRender: ({row, index}) => (<div style="color: #2a99ff;cursor: pointer;" onClick={()=>clickToPreview(row)}>{row.originalFileName}</div>)
+
     },
     {
       prop: 'tag',
@@ -114,6 +118,23 @@ const _value = computed({
     emit('update:modelValue', value)
   }
 })
+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 getTagsOption = () => {
   if (!route.query.id) return
   getTags(route.query.id).then(res => {
@@ -172,6 +193,6 @@ onActivated(()=>{
 
 <style scoped>
 :deep(.el-table--fit ) {
-  height: 254px !important;
+  height: 318px !important;
 }
 </style>