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

src/views/project-management/implementation/attachment.vue

@@ -19,14 +19,14 @@
         <el-button v-if="uploadState" color="#DED0B2" @click="handleUpload">上传附件</el-button>
       </el-form-item>
     </el-form>
-    <!--  <el-card style="width: 100%" shadow="never">-->
-    <fvTable style="width: 100%;max-height: 274px" v-if="showTable" height="274" :tableConfig="tableConfig"
+    <fvTable style="width: 100%;max-height: 274px" v-if="showTable" height="274" :tableConfig="implementationAttachmentTableConfig"
              :data="otherFileList" :isSettingCol="false" :pagination="false">
       <template #empty>
         <el-empty :image-size="90" 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>
 
@@ -250,7 +250,7 @@ const schema = computed(() => {
 
 const baseForm = ref()
 const tagsOption = ref([])
-const tableConfig = reactive({
+const implementationAttachmentTableConfig = reactive({
   columns: [
     {
       prop: 'index',
@@ -263,6 +263,7 @@ const tableConfig = reactive({
       prop: 'originalFileName',
       label: '文件名',
       align: 'center',
+      currentRender: ({row, index}) => (<div style="color: #2a99ff;cursor: pointer;" onClick={()=>clickToPreview(row)}>{row.originalFileName}</div>)
     },
     {
       prop: 'tag',
@@ -292,6 +293,23 @@ const tableConfig = reactive({
 })
 const showTable = ref(true)
 const otherFileList = ref([])
+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 filterDict = (data, value) => {
   if (data === undefined || value === undefined) return;

src/views/project-management/implementation/upload.vue

@@ -20,7 +20,7 @@
     </el-form>
 <!--    <baseTitle title="其他文件"></baseTitle>-->
     <file-upload @getFile="getFile" :disabled="!formData.tagName" :title="!formData.tagName?'请先选择/输入标签！':''"/>
-    <fvTable style="width: 100%;max-height: 300px;" v-if="showTable" height="300" :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="90" description="暂无数据" style="padding: 0"/>
@@ -29,6 +29,8 @@
     <div class="oper-page-btn">
       <el-button color="#DED0B2" @click="handleSubmit(tagForm)">提交</el-button>
     </div>
+    <file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
+                  :fileType="filePreviewParam.fileType"/>
   </div>
 </template>
 
@@ -266,8 +268,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',
@@ -290,7 +294,6 @@ const tableConfig = reactive({
             <div>
               <el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
               <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
-                              perm={['mosr:requirement:del']}
                               onDelete={() => handleDelete(row)}/>
             </div>
         )
@@ -304,6 +307,23 @@ const name = ref(router.currentRoute.value.name)
 const rules = reactive({
   tagName: [{required: true, message: '请输入标签名称', trigger: ['blur', 'change']}],
 })
+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
+  })
+}
 onActivated(() => {
   console.log('onActivated')
   formData.value.tagName = '';
@@ -476,7 +496,7 @@ getTagsOption()
 
 <style scoped lang="scss">
 :deep(.el-table--fit ) {
-  height: 300px !important;
+  height: 318px !important;
 }
 
 :deep(.el-table__header) {