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

src/views/project-demand/requirement/add.vue

@@ -110,6 +110,8 @@
 
     <company-picker :multiple="true" ref="companyRef" title="请选择征集公司" @ok="selected"
                     v-model:value="selectedCompanyList"/>
+    <file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
+                  :fileType="filePreviewParam.fileType"/>
   </div>
 </template>
 
@@ -134,7 +136,12 @@ import {getFundOption} from "@/api/special-fund";
 import CompanyPicker from "@/components/DetailComponent/CompanyPicker.vue";
 
 import {useCacheStore} from '@/stores/cache.js'
-
+const filePreviewParam = ref({
+  fileUrl: '',
+  fileName: '',
+  fileType: 'pdf'
+})
+const filePreviewShow = ref(false)
 const cacheStore = useCacheStore()
 const companyRef = ref()
 const showExpendText = ref('')
@@ -190,6 +197,9 @@ const tableConfig = reactive({
       prop: 'originalFileName',
       label: '文件名',
       align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => (
+          <div style="color: #2a99ff;cursor: pointer;" onClick={() => clickToPreview(row)}>{row.originalFileName}</div>)
     },
     {
       prop: 'tag',
@@ -220,6 +230,18 @@ const tableConfig = reactive({
     }
   ]
 })
+const clickToPreview = (row) => {
+  filePreviewShow.value = false
+  filePreviewParam.value = {
+    fileUrl: row.url,
+    fileName: row.originalFileName,
+    fileType: row.fileType
+  }
+  nextTick(()=>{
+    filePreviewShow.value = true
+  })
+  // filePreviewRef.value.show()
+}
 const disabledDate = (time) => {
   return time.getTime() < Date.now() - 8.64e7//不能选择之后的数据
 }