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

2024-07-24 18:17:55 +08:00
parent 9506d3e0f6
commit 6cc409d744
23 changed files with 722 additions and 786 deletions
--- a/src/components/AttachmentUpload.vue
+++ b/src/components/AttachmentUpload.vue
@@ -6,13 +6,14 @@
          <template v-if="preview">
            <file-upload @getFile="getAttachment" :multiple="false"
                         :disabled="singleFileArray?.length>0?true:false" title="如需修改需求申请书附件，请先删除文件再上传！"/>
-            <fvTable style="width: 100%;max-height: 80px;" height="80" v-if="singleFileArray?.length>0" :tableConfig="editSingleTableConfig"
+            <fvTable style="width: 100%;max-height: 80px;" height="80" v-if="singleFileArray?.length>0"
+                     :tableConfig="editSingleTableConfig"
                     :data="singleFileArray" :isSettingCol="false" :pagination="false">
            </fvTable>
          </template>
          <template v-else-if="!preview">
            <file-upload @getFile="getAttachment" :multiple="false"
-                         :disabled="isSingleFile" />
+                         :disabled="isSingleFile"/>
            <fvTable style="width: 100%;max-height: 80px;" v-if="showSingleTable" height="80"
                     :tableConfig="singleTableConfig"
                     :data="_singleFileValue" :isSettingCol="false" :pagination="false">
@@ -33,6 +34,8 @@
      </el-col>
    </el-row>
  </el-form>
+  <file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
+                :fileType="filePreviewParam.fileType"/>
 </template>

 <script setup lang="jsx">
@@ -84,32 +87,40 @@ const props = defineProps({
  }
 })
 const emit = defineEmits(["getAttachment", "getOtherFile", "update:singleList"])
+
+const baseTableConf = reactive(
+    [
+      {
+        prop: 'index',
+        type: 'index',
+        label: '序号',
+        align: 'center',
+        width: '80',
+      },
+      {
+        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',
+        currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
+      },
+    ]
+)
 const tableConfig = reactive({
  columns: [
-    {
-      prop: 'index',
-      type: 'index',
-      label: '序号',
-      align: 'center',
-      width: '80',
-    },
-    {
-      prop: 'originalFileName',
-      label: '文件名',
-      align: 'center',
-      width: 400,
-    },
-    {
-      prop: 'tag',
-      label: '标签',
-      align: 'center'
-    },
-    {
-      prop: 'size',
-      label: '文件大小',
-      align: 'center',
-      currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
-    },
+    ...baseTableConf,
    {
      prop: 'oper',
      label: '操作',
@@ -149,30 +160,7 @@ const tableConfig = reactive({
 })
 const singleTableConfig = reactive({
  columns: [
-    {
-      prop: 'index',
-      type: 'index',
-      label: '序号',
-      align: 'center',
-      width: '80',
-    },
-    {
-      prop: 'originalFileName',
-      label: '文件名',
-      align: 'center',
-      width: 400,
-    },
-    {
-      prop: 'tag',
-      label: '标签',
-      align: 'center'
-    },
-    {
-      prop: 'size',
-      label: '文件大小',
-      align: 'center',
-      currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
-    },
+    ...baseTableConf,
    {
      prop: 'oper',
      label: '操作',
@@ -212,30 +200,7 @@ const singleTableConfig = reactive({
 })
 const editSingleTableConfig = reactive({
  columns: [
-    {
-      prop: 'index',
-      type: 'index',
-      label: '序号',
-      align: 'center',
-      width: '80',
-    },
-    {
-      prop: 'originalFileName',
-      label: '文件名',
-      align: 'center',
-      width: 400,
-    },
-    {
-      prop: 'tag',
-      label: '标签',
-      align: 'center'
-    },
-    {
-      prop: 'size',
-      label: '文件大小',
-      align: 'center',
-      currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
-    },
+    ...baseTableConf,
    {
      prop: 'oper',
      label: '操作',
@@ -285,6 +250,15 @@ if (localStorage.getItem('singleFile')) {
  singleFileArray.value.push(JSON.parse(localStorage.getItem('singleFile')))
  singleFile.value =JSON.parse(localStorage.getItem('singleFile'))
 }
+
+const filePreviewParam = ref({
+  fileUrl: '',
+  fileName: '',
+  fileType: 'pdf'
+})
+const filePreviewRef = ref()
+const filePreviewShow = ref(false)
+
 const _singleFileValue = computed({
  get() {
    return props.singleList;
@@ -316,6 +290,18 @@ watch(() => props.formData.fileList, (newVal) => {
    })
  }
 }, {immediate: true})
+
+watch(() => props.formData.singleFile, (newVal) => {
+  props.formData.singleFile = newVal
+  if (newVal != null) {
+    singleFileArray.value.push(newVal)
+  } else {
+    singleFileArray.value = []
+  }
+  singleFile.value = newVal
+}, {immediate: true})
+
+
 // watch(() => props.otherFileList, (newVal) => {
 //   props.otherFileList=newVal
 // if (props.preview) {
@@ -339,21 +325,33 @@ watch(() => props.showTable, (newVal) => {
 //   console.log('singleFile', newVal)
 //   singleFileList.value = newVal
 // }, {deep: true})
-watch(() => props.formData.singleFile, (newVal) => {
-  props.formData.singleFile = newVal
-  if(newVal!=null){
-    singleFileArray.value.push(newVal)
-  }else{
-    singleFileArray.value=[]
-  }
-  singleFile.value = newVal
-}, {deep: true})
+
 watch(() => isSingleFile.value, (newVal) => {
  isSingleFile.value = newVal
 }, {deep: true})
 // watch(() => singleFile.value, (newVal) => {
 //   singleFile.value = newVal
 // }, {deep: true})
+
+
+
+
+const clickToPreview = (row) => {
+  filePreviewShow.value = false
+  console.log('clickToPreview', row, row.fileType)
+  filePreviewParam.value = {
+    fileUrl: row.url,
+    fileName: row.originalFileName,
+    fileType: row.fileType
+  }
+  nextTick(()=>{
+    filePreviewShow.value = true
+  })
+  // filePreviewRef.value.show()
+}
+
+
+
 const handleDelete = (row, type) => {
  deleteFile(row.fileId).then(res => {
    ElNotification({
@@ -408,7 +406,7 @@ const deleteAttachment = (val) => {
      })
      isSingleFile.value = false
      singleFile.value = null
-      singleFileArray.value= []
+      singleFileArray.value = []
    }
  });
 }
@@ -427,8 +425,8 @@ const deleteSingleFile = (row, type) => {
      if (res.code === 1000) {
        isSingleFile.value = false
        if (type === 1) {
-          singleFile.value =null
-          singleFileArray.value= []
+          singleFile.value = null
+          singleFileArray.value = []
        } else {
          props.otherFileList.splice(props.otherFileList.findIndex((item) => item.fileId === row.fileId), 1);
        }
--- a/src/components/DetailComponent/ApprovalDetail.vue
+++ b/src/components/DetailComponent/ApprovalDetail.vue
@@ -27,7 +27,6 @@
        </template>
      </fvTable>
    </el-row>
-
    <baseTitle v-if="type!='phase'" :title="getTagName(type)+getTitleInfo(data.taskId)"></baseTitle>
    <fvForm :schema="schema" @getInstance="(e)=>form = e"></fvForm>
    <el-form :model="formData" label-width="auto" style="margin-top: -15px">
@@ -64,6 +63,8 @@
        <process-diagram-viewer v-if="processViewer&&changeDiagram" :id-name="idName?idName:type"/>
      </div>
    </div>
+    <file-preview ref="filePreviewRef" :fullscreen="fullscreen" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
+                  :fileType="filePreviewParam.fileType"/>
  </div>
 </template>

@@ -168,6 +169,70 @@ const props = defineProps({
  }
 })
 const form = 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') {
@@ -178,7 +243,7 @@ const schema = computed(() => {
        colProps: {
          span: 24
        },
-        labelWidth:'left',
+        labelWidth: 'left',
        component: () => (
            <div>
              {
@@ -195,7 +260,7 @@ const schema = computed(() => {
        colProps: {
          span: 24
        },
-        labelWidth:'left',
+        labelWidth: 'left',
        component: () => (
            <div>
              {
@@ -212,7 +277,7 @@ const schema = computed(() => {
        colProps: {
          span: 24
        },
-        labelWidth:'left',
+        labelWidth: 'left',
        component: () => (
            <div>
              {
@@ -224,31 +289,22 @@ const schema = computed(() => {
            </div>
        )
      },
+      {
+        label: '项目立项附件',
+        prop: 'singleFile',
+        colProps: {
+          span: 24
+        },
+        labelWidth: 'left',
+        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>
+        }
+      },
    ]
-    arr.push(
-        {
-          label: '项目立项附件',
-          prop: 'singleFile',
-          colProps: {
-            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>
-
-          )
-        })
  } else if (props.type == 'execute') {
    arr = [
      {
@@ -257,7 +313,7 @@ const schema = computed(() => {
        colProps: {
          span: 24
        },
-        labelWidth:'left',
+        labelWidth: 'left',
        component: () => (
            <div>
              {
@@ -275,22 +331,14 @@ const schema = computed(() => {
        colProps: {
          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>
-
-        )
+        labelWidth: 'left',
+        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') {
@@ -301,22 +349,14 @@ const schema = computed(() => {
        colProps: {
          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>
-
-        )
+        labelWidth: 'left',
+        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') {
@@ -327,51 +367,26 @@ const schema = computed(() => {
        colProps: {
          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>
-
-        )
+        labelWidth: 'left',
+        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>
+        }
      },
    ]
  }
  return arr
 })

-const setPreProcess = () => {
-  //preProcessShow 为 EDIT 是 可以选择前置流程
-  let pre = {
-    label: '前置流程',
-    prop: 'preProcess',
-    colProps: {
-      span: 24
-    },
-    labelWidth:'left',
-    component: () => (
-        <div>
-          {
-            props.formData.preProcess ? props.formData.preProcess.map(item => {
-              return <span><a target="_blank" style={{color: '#409EFF', cursor: 'pointer'}}
-                              href={props.formData.preProcessBaseUrl + item.requestId}>{item.requestName}</a> </span>
-            }) : <span>{'--'}</span>
-          }
-        </div>
-    )
-  }
-}
-
-
+const filePreviewParam = ref({
+  fileUrl: '',
+  fileName: '',
+  fileType: 'pdf'
+})
+const filePreviewShow = ref(false)
 const route = useRoute()
 const emit = defineEmits(['update:value'])
 const _value = computed({
@@ -382,6 +397,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 => {
--- a/src/components/DetailComponent/FileComponent.vue
+++ b/src/components/DetailComponent/FileComponent.vue
@@ -1,7 +1,6 @@
 <template>
  <el-form :label-position="labelAlign">
-<!--    :label-width="title?95:''"-->
-    <el-form-item :label="title?'其他文件':''" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'" :label-position="labelAlign" >
+    <el-form-item :label="title?'其他文件':''" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'" :label-position="labelAlign" :label-width="title?95:''" style="margin-top: 10px">
      <file-upload @getFile="getOtherFile" v-if="fileListShow === 'EDIT'"/>
      <fvTable style="width: 100%;max-height: 162px;" v-if="processViewer"  height="162" :tableConfig="tableConfig"
              :data="_value" :isSettingCol="false" :pagination="false">
@@ -11,11 +10,14 @@
      </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">
 import {downloadFile, deleteFile} from "@/api/project-demand";
 import {ElNotification} from "element-plus";
+import FilePreview from "../filePreview/index.vue";

 const props = defineProps({
  title: {
@@ -45,6 +47,11 @@ const props = defineProps({
  labelAlign: {
    type: String,
    default: 'right'
+  },
+  //弹窗是否铺满全屏
+  fullscreen: {
+    type: Boolean,
+    default: false
  }
 })
 const emit = defineEmits(['update:value'])
@@ -61,7 +68,9 @@ 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',
@@ -110,6 +119,12 @@ const tableConfig = reactive({
    }
  ]
 })
+const filePreviewParam = ref({
+  fileUrl: '',
+  fileName: '',
+  fileType: 'pdf'
+})
+const filePreviewShow = ref(false)
 const _value = computed({
  get() {
    return props.value;
@@ -118,7 +133,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 getOtherFile = (val) => {
  props.processViewer = false
  let fileObj = compositeParam(val)
--- a/src/components/DetailComponent/ProjectApply.vue
+++ b/src/components/DetailComponent/ProjectApply.vue
@@ -198,6 +198,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',
@@ -300,44 +301,8 @@ const selectRows = ref([])
 const projectId = ref(route.query.projectId)
 const sessionParams = ref({})

-if (localStorage.getItem('preProcess')) {
-  let param = JSON.parse(localStorage.getItem('preProcess'))
-  localFormData.value.preProcess = param
-  sessionParams.value.preProcess = param
-  localStorage.setItem('preProcess', JSON.stringify(param))
-}
-if (localStorage.getItem('singleFile')) {
-  let param = JSON.parse(localStorage.getItem('singleFile'))
-  localFormData.value.singleFile = param
-  singleList.value = [param]
-  localStorage.setItem('singleFile', JSON.stringify(param))
-  showSingleTable.value = false
-  nextTick(() => {
-    showSingleTable.value = true
-  })
-}
-if (localStorage.getItem('otherFileList')) {
-  let param = JSON.parse(localStorage.getItem('otherFileList'))
-  localFormData.value.otherFileList = param
-  otherFileList.value = param
-  localStorage.setItem('otherFileList', JSON.stringify(param))
-  showTable.value = false
-  nextTick(() => {
-    showTable.value = true
-  })
-}

-if (localStorage.getItem('projectChargePersonUserList')) {
-  let param = JSON.parse(localStorage.getItem('projectChargePersonUserList'))
-  projectChargePersonUserList.value = param
-  localStorage.setItem('projectChargePersonUserList', JSON.stringify(param))
-}
-if (localStorage.getItem('projectPersonUserList')) {
-  let param = JSON.parse(localStorage.getItem('projectPersonUserList'))
-  projectPersonUserList.value = param
-  localProjectPerson.value = param
-  localStorage.setItem('projectPersonUserList', JSON.stringify(param))
-}
+
 const getProjectPerson = (list) => {
  if (!list || list && list.length === 0) {
    if (localStorage.getItem('projectPersonUserList')) {
@@ -531,7 +496,7 @@ const compositeParam = (item) => {
  }
 }
 const getAttachment = (val) => {
-  // console.log('上传文件getAttachment', val)
+  console.log('上传文件getAttachment', val)
  showSingleTable.value = false
  localFormData.value.singleFile = compositeParam(val)
  singleList.value.push(compositeParam(val))
@@ -738,16 +703,46 @@ watchEffect(() => {
  if (props.formData.projectChargePerson != null) {
    localFormData.value.projectChargePerson = props.formData.projectChargePerson.id
  }
-  // if(props.formData.fileList&&props.formData.fileList.length>0){
-  //  otherFileList.value=props.formData.fileList
-  // }
-  // localFormData.value.projectPersonIds = []
-  // if (projectPersonUserList.value){
-  //   projectPersonUserList.value.forEach(item => {
-  //     localFormData.value.projectPersonIds.push(item.id)
-  //   })
-  // }
-  // console.log('projectPersonUserList.value',projectPersonUserList.value)
+
+  if (localStorage.getItem('preProcess')) {
+    let param = JSON.parse(localStorage.getItem('preProcess'))
+    localFormData.value.preProcess = param
+    sessionParams.value.preProcess = param
+    localStorage.setItem('preProcess', JSON.stringify(param))
+  }
+  if (localStorage.getItem('singleFile')) {
+    let param = JSON.parse(localStorage.getItem('singleFile'))
+    localFormData.value.singleFile = param
+    singleList.value = [param]
+    localStorage.setItem('singleFile', JSON.stringify(param))
+    showSingleTable.value = false
+    nextTick(() => {
+      showSingleTable.value = true
+    })
+  }
+  if (localStorage.getItem('otherFileList')) {
+    let param = JSON.parse(localStorage.getItem('otherFileList'))
+    localFormData.value.otherFileList = param
+    otherFileList.value = param
+    localStorage.setItem('otherFileList', JSON.stringify(param))
+    showTable.value = false
+    nextTick(() => {
+      showTable.value = true
+    })
+  }
+
+  if (localStorage.getItem('projectChargePersonUserList')) {
+    let param = JSON.parse(localStorage.getItem('projectChargePersonUserList'))
+    projectChargePersonUserList.value = param
+    localStorage.setItem('projectChargePersonUserList', JSON.stringify(param))
+  }
+  if (localStorage.getItem('projectPersonUserList')) {
+    let param = JSON.parse(localStorage.getItem('projectPersonUserList'))
+    projectPersonUserList.value = param
+    localProjectPerson.value = param
+    localStorage.setItem('projectPersonUserList', JSON.stringify(param))
+  }
+
  return flag
 })
 onActivated(() => {
--- a/src/components/DetailComponent/singleFileComponent.vue
+++ b/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;
--- a/src/components/filePreview/DocxPreview.vue
+++ b/src/components/filePreview/DocxPreview.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="docx-preview">
+    <div
+        ref="docxDiv"
+        class="docxDiv"
+        v-loading="loading"
+    ></div>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import {renderAsync} from "docx-preview";
+import axios from "axios";
+
+let docx = import.meta.glob("docx-preview"); // vite不支持require
+
+const props = defineProps({
+  fileUrl: {
+    type: String,
+    default: ''
+  }
+})
+
+const loading = ref(false);
+
+const previewFile = () => {
+  loading.value = true;
+  axios.request({
+    url: props.fileUrl,
+    method: 'get',
+    responseType: 'blob'
+  }).then((response) => {
+    let docData = response.data;
+    let docxDiv = document.getElementsByClassName("docxDiv");
+    renderAsync(docData, docxDiv[0], null, {
+      inWrapper: true, // 启用围绕文档内容渲染包装器
+      ignoreWidth: false, // 禁止页面渲染宽度
+      ignoreHeight: false, // 禁止页面渲染高度
+      ignoreFonts: false, // 禁止字体渲染
+      breakPages: true, // 在分页符上启用分页
+      ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页
+      experimental: false, //启用实验性功能（制表符停止计算）
+      trimXmlDeclaration: true, //如果为真，xml声明将在解析之前从xml文档中删除
+      debug: false,
+    }).then((res) => {
+      loading.value = false;
+    });
+  }).catch((error) => {
+    console.log(error);
+  });
+};
+
+previewFile()
+
+</script>
+<style lang="scss">
+.docx-preview {
+  .docx-wrapper > section.docx {
+    margin-bottom: 0 !important;
+  }
+
+  .docx-wrapper {
+    height: 650px !important;
+    padding: 10px !important;
+
+    .docx {
+      width: auto !important;
+      min-height: 600px !important;
+      overflow-y: scroll;
+      padding: 20px !important;
+
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      // 滚动条轨道
+      &::-webkit-scrollbar-track {
+        background: rgb(239, 239, 239);
+        border-radius: 2px;
+      }
+
+      // 小滑块
+      &::-webkit-scrollbar-thumb {
+        background: rgba(80, 81, 82, 0.29);
+        border-radius: 10px;
+      }
+    }
+  }
+}
+</style>
+
--- a/src/components/filePreview/ImagePreview.vue
+++ b/src/components/filePreview/ImagePreview.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="img-preview" >
+    <img id="previewImg" :src="fileUrl" :style="{width: fullscreen?windowWidth+'px':'',height: fullscreen?'auto':'650px;'}" alt="Preview"/>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(["update:fileUrl"])
+const props = defineProps({
+  fileUrl: {
+    type: String,
+    default: ''
+  },
+  fullscreen: {
+    type: Boolean,
+    default:false
+  }
+})
+const showImagePreview = ref(true)
+const dialogWidth = ref('')
+const dialogHeight = ref('')
+// 屏幕宽度
+const windowWidth = ref(0)
+// 屏幕高度
+const windowHeight = ref(0)
+// onMounted(() => {
+// })
+// 获取屏幕尺寸
+const getWindowResize = function () {
+  windowWidth.value = window.innerWidth-32
+  windowHeight.value = window.innerHeight
+}
+getWindowResize()
+window.addEventListener('resize', getWindowResize)
+nextTick(() => {
+  const previewImg = document.getElementById('previewImg');
+  // console.log(previewImg)
+  let offsetHeight = previewImg?.offsetHeight
+  // console.log(offsetHeight)
+  if (offsetHeight > 750){
+  //   previewImg?.offsetHeight = 750
+  }
+})
+
+// dialogWidth.value=document.getElementById('previewImg')?.offsetWidth||1500
+// dialogWidth.value=document.getElementById('previewImg')?.offsetHeight||750
+
+</script>
+
+<style lang="scss">
+.img-preview {
+  display: flex;
+  justify-content: center;
+}
+
+</style>
--- a/src/components/filePreview/PdfPreview.vue
+++ b/src/components/filePreview/PdfPreview.vue
@@ -0,0 +1,49 @@
+<template>
+  <!--  <iframe height="650px" width="100%" :src="fileUrl" frameborder="0"></iframe>-->
+  <vue-pdf-app style="height: 100vh; width: 100vw" :pdf="fileUrl" :config="pdfPreviewConfig"></vue-pdf-app>
+</template>
+
+<script setup lang="jsx">
+import VuePdfApp from "vue3-pdf-app";
+import "vue3-pdf-app/dist/icons/main.css";
+
+const pdfPreviewConfig = ref({
+  sidebar: false,//左侧目录展示
+  secondaryToolbar: false,//二级工具栏
+  toolbar: false,//工具栏显示
+  errorWrapper: false,
+})
+const props = defineProps({
+  fileUrl: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<style lang="scss">
+#vuePdfApp {
+  width: auto !important;
+  height: 750px !important;
+}
+
+#viewerContainer {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  // 滚动条轨道
+  &::-webkit-scrollbar-track {
+    background: rgb(239, 239, 239);
+    border-radius: 2px;
+  }
+
+  // 小滑块
+  &::-webkit-scrollbar-thumb {
+    background: rgba(80, 81, 82, 0.29);
+    border-radius: 10px;
+  }
+
+}
+</style>
--- a/src/components/filePreview/index.vue
+++ b/src/components/filePreview/index.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="file-preview">
+    <el-dialog id="dialog" :border="false" width="1500" :style="{height: fullscreen?'':'750px;'}" top="10vh"
+               :fullscreen="fullscreen"
+               :title="fileName" :show-close="true" :visible.sync="showPreview" v-model="showPreview"
+               :append-to-body="false"
+               :close-on-click-modal="true"
+    >
+      <pdf-preview :file-url="fileUrl" :fullscreen="fullscreen" v-if="fileType === 'pdf'"/>
+      <docx-preview :file-url="fileUrl" :fullscreen="fullscreen" v-if="fileType === 'docx'"/>
+      <image-preview :fileUrl="fileUrl" :fullscreen="fullscreen" :fileName="fileName" v-if="fileType === 'png'"/>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(["update:fileUrl"])
+const props = defineProps({
+  fileUrl: {
+    type: String,
+    default: ''
+  },
+  fileType: {
+    type: String,
+    default: ''
+  },
+  fileName: {
+    type: String,
+    default: ''
+  },
+  //弹窗是否铺满全屏
+  fullscreen: {
+    type: Boolean,
+    default: false
+  }
+})
+const showPreview = ref(true)
+const checkImgType=()=>{
+  if (!/\.(jpg|JPG|jpeg|png|PNG|GIF|SVG|TIFF|tiff|tif|ico|xbm|pjp)$/.test(props.fileType)) {
+    return  false;
+  }else{
+    return true;
+  }
+}
+
+</script>
+
+<style lang="scss">
+.file-preview {
+  .el-overlay-dialog {
+    left: 0 !important;
+
+  }
+
+  .el-dialog__headerbtn {
+    .el-dialog__close {
+      font-size: 30px;
+
+    }
+  }
+
+  .el-dialog__body {
+    padding: 0 !important;
+  }
+}
+
+</style>