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

src/views/project-management/mobledetail/ApprovalDetailMoblie.vue

@@ -121,6 +121,12 @@ const tableConfig = reactive({
     }
   ]
 })
+const filePreviewParam = ref({
+  fileUrl: '',
+  fileName: '',
+  fileType: 'pdf'
+})
+const filePreviewShow = ref(false)
 const attachmentParam = reactive({
   tag: ''
 })
@@ -169,6 +175,69 @@ const props = defineProps({
 })
 const form = ref()
 const otherAttachmentList = ref([])
+const editSingleTableConfig = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width: 85,
+    },
+    {
+      prop: 'originalFileName',
+      label: '文件名',
+      align: 'center',
+      width: 400,
+      currentRender: ({row, index}) => (<div style="color: #2a99ff;cursor: pointer;" onClick={()=>clickToPreview(row)}>{row.originalFileName}</div>)
+    },
+    {
+      prop: 'tag',
+      label: '标签',
+      align: 'center'
+    },
+    {
+      prop: 'size',
+      label: '文件大小',
+      align: 'center',
+      width: 150,
+      currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        let btn = []
+        btn.push({label: '下载', func: () => handleDownload(row), type: 'primary'})
+        // if (row.newFile) {
+        //   btn.push({label: '删除', func: () => handleDelete(row), type: 'primary'})
+        // }
+        return (
+            <div style={{width: '100%'}}>
+              {
+                btn.map(item => (
+                    <el-button
+                        type={item.type}
+                        onClick={() => item.func()}
+                        link>
+                      {item.label}
+                    </el-button>
+                ))
+              }
+              {
+                row.newFile ? <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
+                                              perm={['mosr:requirement:del']}
+                                              onDelete={() => handleDelete(row)}/>
+                    : ''
+              }
+            </div>
+        )
+      }
+    }
+  ]
+})
 const schema = computed(() => {
   let arr
   if (props.type == 'approval') {
@@ -232,21 +301,13 @@ const schema = computed(() => {
           span: 24
         },
         labelWidth:'left',
-        component: () => (
-            <div>
-              {
-                props.formData.singleFile?.originalFileName ?
-                    <span
-                        style={{color: '#409EFF', cursor: 'pointer'}}
-                        onClick={() => handleDownload(props.formData.singleFile)}
-                    >
-                {props.formData.singleFile?.originalFileName}
-              </span> :
-                    <span>{'--'}</span>
-              }
-            </div>
-
-        )
+        component: () => {
+          let singleFileArray = [props.formData.singleFile]
+          return <fvTable style="width: 100%;max-height: 80px;" height="80"
+                          tableConfig={editSingleTableConfig}
+                          data={singleFileArray} isSettingCol={false} pagination={false}>
+          </fvTable>
+        }
       },
     ]
   } else if (props.type == 'execute') {
@@ -276,21 +337,13 @@ const schema = computed(() => {
           span: 24
         },
         labelWidth:'left',
-        component: () => (
-            <div>
-              {
-                props.formData.singleFile?.originalFileName ?
-                    <span
-                        style={{color: '#409EFF', cursor: 'pointer'}}
-                        onClick={() => handleDownload(props.formData.singleFile)}
-                    >
-                {props.formData.singleFile?.originalFileName}
-              </span> :
-                    <span>{'--'}</span>
-              }
-            </div>
-
-        )
+        component: () => {
+          let singleFileArray = [props.formData.singleFile]
+          return <fvTable style="width: 100%;max-height: 80px;" height="80"
+                          tableConfig={editSingleTableConfig}
+                          data={singleFileArray} isSettingCol={false} pagination={false}>
+          </fvTable>
+        }
       },
     ]
   } else if (props.type == 'archivist') {
@@ -302,21 +355,13 @@ const schema = computed(() => {
           span: 24
         },
         labelWidth:'left',
-        component: () => (
-            <div>
-              {
-                props.formData.singleFile?.originalFileName ?
-                    <span
-                        style={{color: '#409EFF', cursor: 'pointer'}}
-                        onClick={() => handleDownload(props.formData.singleFile)}
-                    >
-                {props.formData.singleFile?.originalFileName}
-              </span> :
-                    <span>{'--'}</span>
-              }
-            </div>
-
-        )
+        component: () => {
+          let singleFileArray = [props.formData.singleFile]
+          return <fvTable style="width: 100%;max-height: 80px;" height="80"
+                          tableConfig={editSingleTableConfig}
+                          data={singleFileArray} isSettingCol={false} pagination={false}>
+          </fvTable>
+        }
       },
     ]
   } else if (props.type == 'phase') {
@@ -328,21 +373,13 @@ const schema = computed(() => {
           span: 24
         },
         labelWidth:'left',
-        component: () => (
-            <div>
-              {
-                props.formData.singleFile?.originalFileName ?
-                    <span
-                        style={{color: '#409EFF', cursor: 'pointer'}}
-                        onClick={() => handleDownload(props.formData.singleFile)}
-                    >
-                {props.formData.singleFile?.originalFileName}
-              </span> :
-                    <span>{'--'}</span>
-              }
-            </div>
-
-        )
+        component: () => {
+          let singleFileArray = [props.formData.singleFile]
+          return <fvTable style="width: 100%;max-height: 80px;" height="80"
+                          tableConfig={editSingleTableConfig}
+                          data={singleFileArray} isSettingCol={false} pagination={false}>
+          </fvTable>
+        }
       },
     ]
   }
@@ -359,6 +396,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 getTagsOption = () => {
   if (!route.query.projectId) return
   getTags(route.query.projectId).then(res => {