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/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;