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

2024-07-24 18:17:55 +08:00
parent 9506d3e0f6
commit 6cc409d744
23 changed files with 722 additions and 786 deletions
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
    "@tinymce/tinymce-vue": "^4.0.7",
    "axios": "^1.4.0",
    "d3": "^7.8.5",
+    "docx-preview": "^0.3.2",
    "echarts": "^5.4.2",
    "element-plus": "^2.6.0",
    "file-saver": "^2.0.5",
@@ -31,6 +32,7 @@
    "vue-codemirror": "^6.1.1",
    "vue-json-viewer": "^3.0.4",
    "vue-router": "^4.1.6",
+    "vue3-pdf-app": "^1.0.3",
    "vuedraggable": "^4.1.0",
    "xlsx": "^0.18.5",
    "xlsx-style-vite": "^0.0.2"
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -60,7 +60,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
  top: 0;
  bottom: 0;
  left: 0;
-  z-index: 1001;
+  //z-index: 1001;
 }

 .el-dialog {
@@ -374,6 +374,9 @@ html, body, #app, .el-container, .el-aside, .el-main {
  left: 200px;
 }

+//.el-overlay-dialog {
+//  left: 200px !important;
+//}
 //放大缩小按钮上外边距
 .scale {
  margin-top: 10px;
@@ -382,12 +385,10 @@ html, body, #app, .el-container, .el-aside, .el-main {
  //top: -20px;
 }

-.el-overlay-dialog {
-  left: 200px !important;
-}

 .el-overlay-dialog::-webkit-scrollbar, .scrollbar-dict::-webkit-scrollbar {
  width: 6px;
+  height: 6px;
 }

 // 滚动条轨道
--- 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>
--- a/src/views/project-demand/requirement/add.vue
+++ b/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//不能选择之后的数据
 }
--- a/src/views/project-demand/requirement/moblieDetail/CollectionDetailMoblie.vue
+++ b/src/views/project-demand/requirement/moblieDetail/CollectionDetailMoblie.vue
@@ -1,193 +0,0 @@
-<template>
-  <div v-loading="loading">
-    <el-form :model="formData" label-width="left">
-      <el-row>
-        <el-col :span="24" v-if="type==='singleDetail'">
-          <el-form-item label="征集名称">
-            <span>{{ formData.requirementName }}</span>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24">
-          <el-form-item label="征集类型">
-            <span>{{ formData.collectType }}</span>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24">
-          <el-form-item label="需求上报截止时间">
-            <span>{{ formData.deadline }}</span>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" v-if="formData.isSpecialFund">
-          <el-form-item label="专项资金名称">
-            <span>{{ formData.specialFund }}</span>
-          </el-form-item>
-        </el-col>
-
-        <el-col :span="24" v-if="type==='singleDetail'">
-          <el-form-item label="征集公司">
-            <span :class="showExpendClass(showMoreCompany,formData.companyIds)">{{
-                getCompanyName(formData.companyIds)
-              }}</span>
-            <div style="color: #2a99ff;text-align: center;width: 100%;font-size: 15px;cursor: pointer"
-                 @click="handleExpend">{{ showExpendText }}
-            </div>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24">
-          <baseTitle title="征集说明"></baseTitle>
-          <el-form-item>
-            <el-card style="width: 100%">
-              <div v-html="formData.collectExplain">
-              </div>
-            </el-card>
-          </el-form-item>
-        </el-col>
-        <baseTitle v-if="fileListShow === 'READ' || fileListShow === 'EDIT'" title="附件列表"></baseTitle>
-        <el-col :span="24">
-          <file-component title="" tag="需求征集" fileNameTableWidth="300"
-                          v-model:value="formData.fileList" :processViewer="processViewer"
-                          :file-list-show="fileListShow"/>
-        </el-col>
-        <el-col :span="24">
-          <div v-if="data.taskId">
-            <baseTitle title="审核意见"></baseTitle>
-            <el-form-item prop="_value">
-              <el-input
-                  v-model="_value"
-                  :rows="3"
-                  type="textarea"
-                  placeholder="请输入审核意见"
-              />
-            </el-form-item>
-          </div>
-        </el-col>
-      </el-row>
-      <div class="approval-record">
-        <div class="approval-title">
-          <baseTitle title="审批记录"></baseTitle>
-          <div class="diagram">
-            <div class="base-title">流程图</div>
-            <el-switch
-                v-model="changeDiagram"
-                style="--el-switch-on-color:#BEA266; --el-switch-off-color:#cecdcd"
-            />
-          </div>
-        </div>
-        <div class="process">
-          <operation-render v-if="processViewer && data.operationList && data.operationList.length > 0&&!changeDiagram"
-                            :operation-list="data.operationList" :isColumn="true"
-                            :state="data.state"/>
-          <process-diagram-viewer v-if="processViewer&&changeDiagram" id-name="collectionProcess"/>
-        </div>
-      </div>
-    </el-form>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import OperationRender from '@/views/workflow/common/OperationRender.vue'
-import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
-import {downloadFile} from "@/api/project-demand";
-
-const emit = defineEmits(['update:value'])
-const showExpendText = ref('')
-const showMoreCompany = ref(false)
-const props = defineProps({
-  formData: {
-    type: Array,
-    default: []
-  },
-  data: {
-    type: Array,
-    default: []
-  },
-  processViewer: {
-    type: Boolean,
-    default: false
-  },
-  companyOption: {
-    type: Array,
-    default: []
-  },
-  loading: {
-    type: Boolean,
-    default: false
-  },
-  fileListShow: {
-    type: String,
-    default: ''
-  },
-  type: {
-    type: String,
-    default: ''
-  },
-  value: {
-    type: String,
-    default: ''
-  }
-})
-const changeDiagram = ref(false)
-const _value = computed({
-  get() {
-    return props.value;
-  },
-  set(val) {
-    emit("update:value", val);
-  }
-})
-const getCompanyName = (data) => {
-  if (data) {
-    return data.join('，')
-  }
-}
-const handleExpend = () => {
-  showMoreCompany.value = !showMoreCompany.value;
-  showExpendClass(showMoreCompany.value, props.formData.companyIds)
-}
-const showExpendClass = (showMoreCompany, data) => {
-  if (!showMoreCompany) {
-    if (data && data.length > 14) {
-      showExpendText.value = '展开'
-      return 'company-style'
-    }
-  } else {
-    showExpendText.value = '收缩'
-    return ''
-  }
-}
-
-const handleDownload = (row) => {
-  downloadFile(row.fileId).then(res => {
-    const blob = new Blob([res])
-    let a = document.createElement('a')
-    a.href = URL.createObjectURL(blob)
-    a.download = row.originalFileName
-    a.click()
-  })
-}
-
-watch(() => props.loading, (newVal) => {
-  props.loading = newVal
-}, {deep: true})
-
-watch(() => props.processViewer, (newVal) => {
-  props.processViewer = newVal
-}, {deep: true})
-</script>
-
-<style scoped lang="scss">
-:deep(.el-empty__description) {
-  margin-top: 0;
-}
-
-.company-style {
-  //width: 98%;
-  min-height: 30px;
-  max-height: 60px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 2;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-}
-</style>
--- a/src/views/project-demand/requirement/moblieDetail/index.vue
+++ b/src/views/project-demand/requirement/moblieDetail/index.vue
@@ -16,7 +16,7 @@ import {useTagsView} from '@/stores/tagsview.js'
 import {getFundOption} from "@/api/special-fund";
 import {getSubCompOpt} from "@/api/user/user";
 import {matterTree} from "@/utils/matterTree";
-import CollectionDetailMoblie from './CollectionDetailMoblie.vue'
+import CollectionDetailMoblie from '@/views/project-management/mobledetail/CollectionDetailMoblie.vue'
 import OpinionMoblie from '@/views/project-management/mobledetail/OpinionMoblie.vue'

 const tagsViewStore = useTagsView()
--- a/src/views/project-management/mobledetail/ApprovalDetailMoblie.vue
+++ b/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 => {
--- a/src/views/project-management/mobledetail/CollectionDetailMoblie.vue
+++ b/src/views/project-management/mobledetail/CollectionDetailMoblie.vue
@@ -44,7 +44,7 @@
        </el-col>
        <baseTitle v-if="fileListShow === 'READ' || fileListShow === 'EDIT'" title="附件列表"></baseTitle>
        <el-col :span="24">
-          <file-component title="" tag="需求征集"
+          <file-component title="" tag="需求征集" :fullscreen="true"
                          v-model:value="formData.fileList" :processViewer="processViewer"
                          :file-list-show="fileListShow"/>
        </el-col>
--- a/src/views/project-management/mobledetail/SummaryDetailMoblie.vue
+++ b/src/views/project-management/mobledetail/SummaryDetailMoblie.vue
@@ -135,7 +135,7 @@
          <baseTitle title="需求上报申请书"></baseTitle>
        </el-col>
        <el-col :span="24">
-          <single-file-component tag="需求上报" :fileNameTableWidth="200"
+          <single-file-component tag="需求上报" :fileNameTableWidth="200"  :fullscreen="true"
                          v-model:value="localFormData.singleFile" :processViewer="processViewer"
                          labelAlign="top"
                          :file-list-show="fileListShow"/>
@@ -151,7 +151,7 @@
        </el-col>
        <el-col :span="24">
          <file-component
-              tag="需求上报" :fileNameTableWidth="200"
+              tag="需求上报" :fileNameTableWidth="200"  :fullscreen="true"
              v-model:value="localFormData.fileList"
              :processViewer="processViewer"
              :file-list-show="fileListShow"
--- a/src/views/project-management/mobledetail/index.vue
+++ b/src/views/project-management/mobledetail/index.vue
@@ -60,7 +60,7 @@ import CollectionDetail from './CollectionDetailMoblie.vue';
 import SummaryDetail from './SummaryDetailMoblie.vue';
 import StepsMoblie from './StepsMoblie.vue';
 import {getMapProjectStateInfo} from "./api";
-import OpinionMoblie from "./OpinionMoblie.vue";
+import OpinionMoblie from '@/views/project-management/mobledetail/OpinionMoblie.vue'
 // import ProjectApplyMoblie from "./ProjectApplyMoblie.vue";


--- a/src/views/project-management/phaseDetailMoblie/ApprovalDetailMoblie.vue
+++ b/src/views/project-management/phaseDetailMoblie/ApprovalDetailMoblie.vue
@@ -1,278 +0,0 @@
-<template>
-  <div v-loading="loading">
-    <fvForm :schema="schema" @getInstance="(e)=>form = e"></fvForm>
-    <el-form :model="formData" label-width="auto" style="margin-top: -15px">
-      <file-component
-        :title="getTagName(type)+'附件'"
-        :tag="getTagName(type)"
-        fileNameTableWidth="300"
-        v-model:value="formData.fileList"
-        :processViewer="processViewer"
-        :file-list-show="fileListShow"
-        labelAlign="top"
-      />
-    </el-form>
-    <div v-if="data.taskId">
-      <baseTitle title="审核意见"></baseTitle>
-      <el-form-item prop="_value">
-        <el-input
-            v-model="_value"
-            :rows="3"
-            type="textarea"
-            placeholder="请输入审核意见"
-        />
-      </el-form-item>
-    </div>
-    <div class="approval-record">
-      <div class="approval-title" style="margin-top: -15px">
-        <baseTitle title="审批记录"></baseTitle>
-        <div class="diagram">
-          <div class="base-title">流程图</div>
-          <el-switch
-              v-model="changeDiagram"
-              style="--el-switch-on-color:#BEA266; --el-switch-off-color:#cecdcd"
-          />
-        </div>
-      </div>
-      <div class="process">
-        <operation-render v-if="processViewer && data.operationList && data.operationList.length > 0&&!changeDiagram"
-                          :operation-list="data.operationList" :isColumn="true"
-                          :state="data.state"/>
-        <process-diagram-viewer v-if="processViewer&&changeDiagram" :id-name="idName?idName:type"/>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import OperationRender from '@/views/workflow/common/OperationRender.vue'
-import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue';
-import {ElLoading} from 'element-plus';
-import {downloadFile} from "@/api/project-demand";
-
-const changeDiagram = ref(false)
-const props = defineProps({
-  formData: {
-    type: Object,
-    default: {}
-  },
-  data: {
-    type: Object,
-    default: {}
-  },
-  processViewer: {
-    type: Boolean,
-    default: false
-  },
-  companyOption: {
-    type: Array,
-    default: []
-  },
-  fileListShow: {
-    type: String,
-    default: 'READ'
-  },
-  // approval 立项, execute 实施, 归档 archivist
-  type: {
-    type: String,
-    default: 'approval'
-  },
-  loading: {
-    type: Boolean,
-    default: false
-  },
-  value: {
-    type: String,
-    default: ''
-  },
-  idName: {
-    type: String,
-    default: ''
-  }
-})
-const form = ref()
-const schema = computed(() => {
-  let arr
-  if (props.type == 'approval') {
-    arr = [
-      {
-        label: '前置流程',
-        prop: 'preProcess',
-        colProps: {
-          span: 24
-        },
-        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>
-        )
-      },
-      {
-        label: '项目立项附件',
-        prop: 'singleFile',
-        colProps: {
-          span: 24
-        },
-        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 = [
-      {
-        label: '前置流程',
-        prop: 'preProcess',
-        colProps: {
-          span: 24
-        },
-        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>
-        )
-      },
-      {
-        label: '项目验收附件',
-        prop: 'singleFile',
-        colProps: {
-          span: 24
-        },
-        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 == 'archivist') {
-    arr = [
-      {
-        label: '项目归档附件',
-        prop: 'singleFile',
-        colProps: {
-          span: 24
-        },
-        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 == 'phase') {
-    arr = [
-      {
-        label: '阶段变更附件',
-        prop: 'singleFile',
-        colProps: {
-          span: 24
-        },
-        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>
-
-        )
-      },
-    ]
-  }
-  return arr
-})
-
-const emit = defineEmits(['update:value'])
-const _value = computed({
-  get() {
-    return props.value;
-  },
-  set(val) {
-    emit("update:value", val);
-  }
-})
-
-const getTagName = (type) => {
-  switch (type) {
-    case 'approval':
-      return '项目立项'
-    case 'execute':
-      return '项目实施'
-    case 'archivist':
-      return '项目归档'
-    case 'phase':
-      return '阶段变更'
-  }
-}
-const handleDownload = (row) => {
-  const loading = ElLoading.service({fullscreen: true})
-  downloadFile(row.fileId).then(res => {
-    const blob = new Blob([res])
-    let a = document.createElement('a')
-    a.href = URL.createObjectURL(blob)
-    a.download = row.originalFileName
-    a.click()
-    loading.close()
-  })
-}
-watchEffect(() => {
-  Object.keys(props.formData).length && (form.value?.setValues(props.formData))
-})
-
-watch(() => props.loading, (newVal) => {
-  props.loading = newVal
-}, {deep: true})
-</script>
-
-<style lang="scss" scoped>
-
-</style>
--- a/src/views/project-management/phaseDetailMoblie/index.vue
+++ b/src/views/project-management/phaseDetailMoblie/index.vue
@@ -17,8 +17,8 @@ import {useProcessStore} from '@/stores/processStore.js';
 import {getPhaseDetail} from "@/api/project-manage";
 import {computed, ref} from "vue";
 import {getBaseInfoApi} from "@/components/steps/api";
-import ApprovalDetailMoblie from './ApprovalDetailMoblie.vue'
-import OpinionMoblie from "../mobledetail/OpinionMoblie.vue";
+import ApprovalDetailMoblie from '../mobledetail/ApprovalDetailMoblie.vue'
+import OpinionMoblie from '@/views/project-management/mobledetail/OpinionMoblie.vue'

 const route = useRoute()
 const summaryData = ref({})
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -46,7 +46,7 @@ const shortcuts = [

 const searchConfig = ref([
  {
-    label: '子公司名称',
+    label: '公司名称',
    prop: 'subCompanyId',
    component: 'el-tree-select',
    props: {
--- a/src/views/system/user/add.vue
+++ b/src/views/system/user/add.vue
@@ -36,7 +36,7 @@ const localData = reactive({
 const schame = computed(()=>{
  let arr = [
    {
-      label: '子公司',
+      label: '公司',
      prop: 'subCompanyId',
      component: 'el-tree-select',
      props: {
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -17,7 +17,7 @@ const router = useRouter()

 const searchConfig = ref([
  {
-    label: '子公司名称',
+    label: '公司名称',
    prop: 'subCompanyId',
    component: 'el-tree-select',
    props: {
@@ -101,7 +101,7 @@ const tableConfig = reactive({
    },
    {
      prop: 'subCompanyName',
-      label: '子公司名称',
+      label: '公司名称',
      align: 'center',
    },
    {