Merge pull request 'fix : 修复项目实施/归档上传附件表格高度,完善归档附件/上传附件时的文件预览' (#714) from dd into master

Reviewed-on: http://git.feashow.cn/clay/mosr-web/pulls/714

src/components/SearchFilesByTag.vue

@@ -2,7 +2,7 @@
   <div v-loading="_value">
     <el-form :model="attachment" inline style="margin-left: 15px">
       <el-form-item label="名称" prop="fileName">
-        <el-input v-model="attachment.fileName" placeholder="请输入附件名称查询" clearable filterable style="width: 300px"/>
+        <el-input v-model="attachment.fileName" placeholder="请输入文件名查询" clearable filterable style="width: 300px"/>
       </el-form-item>
       <el-form-item label="标签" prop="tag" v-if="type==='40'">
         <el-select v-model="attachment.tag" placeholder="请选择标签" clearable remote filterable style="width: 300px">
@@ -21,13 +21,15 @@
       </el-form-item>
     </el-form>
     <el-card style="width: 100%;overflow-y: hidden">
-      <fvTable style="width: 100%;max-height: 254px" v-if="showTable" height="254"  :tableConfig="tableConfig"
+      <fvTable style="width: 100%;max-height: 318px" v-if="showTable" height="318"  :tableConfig="tableConfig"
                :data="fileList" :isSettingCol="false" :pagination="false">
         <template #empty>
           <el-empty :image-size="99" description="暂无数据" style="padding: 0"/>
         </template>
       </fvTable>
     </el-card>
+    <file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
+                  :fileType="filePreviewParam.fileType"/>
   </div>
 </template>
 
@@ -35,7 +37,7 @@
 import {downloadFile} from "@/api/project-demand";
 import {ElNotification} from "element-plus";
 import {getTags} from "@/api/project-manage";
-import {computed} from "vue";
+import {computed, ref} from "vue";
 
 const route = useRoute()
 const router = useRouter()
@@ -71,8 +73,10 @@ const tableConfig = reactive({
     },
     {
       prop: 'originalFileName',
-      label: '附件名称',
+      label: '文件名',
       align: 'center',
+      currentRender: ({row, index}) => (<div style="color: #2a99ff;cursor: pointer;" onClick={()=>clickToPreview(row)}>{row.originalFileName}</div>)
+
     },
     {
       prop: 'tag',
@@ -114,6 +118,23 @@ const _value = computed({
     emit('update:modelValue', value)
   }
 })
+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 getTagsOption = () => {
   if (!route.query.id) return
   getTags(route.query.id).then(res => {
@@ -172,6 +193,6 @@ onActivated(()=>{
 
 <style scoped>
 :deep(.el-table--fit ) {
-  height: 254px !important;
+  height: 318px !important;
 }
 </style>

src/components/TagAndFileUpload.vue

@@ -59,7 +59,7 @@ const tableConfig = reactive({
     },
     {
       prop: 'originalFileName',
-      label: '附件名称',
+      label: '文件名',
       align: 'center',
     },
     {

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

@@ -1,21 +1,24 @@
 <template>
- <div style="padding: 0 30px">
+  <div style="padding: 0 30px">
-   <baseTitle title="项目基本信息"></baseTitle>
+    <baseTitle title="项目基本信息"></baseTitle>
-   <fvForm :schema="schema" @getInstance="(e)=>baseForm = e" label-position="left" label-width="left" style="margin-left: 15px"></fvForm>
+    <fvForm :schema="schema" @getInstance="(e)=>baseForm = e" label-position="left" label-width="left"
-   <baseTitle :title="getName()+'-上传附件'"></baseTitle>
+            style="margin-left: 15px;margin-bottom: -18px"></fvForm>
-   <el-card style="width: 100%;margin: 15px 0">
+    <baseTitle :title="getName()+'-上传附件'"></baseTitle>
-     <file-upload @getFile="getFile" />
+    <!--   <el-card style="width: 100%;margin: 15px 0">-->
-     <fvTable style="width: 100%;max-height: 300px;" v-if="showTable" height="300"  :tableConfig="tableConfig"
+    <file-upload @getFile="getFile"/>
-              :data="fileList" :isSettingCol="false" :pagination="false">
+    <fvTable style="width: 100%;max-height: 318px;" v-if="showTable" height="318" :tableConfig="tableConfig"
-       <template #empty>
+             :data="fileList" :isSettingCol="false" :pagination="false">
-         <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
+      <template #empty>
-       </template>
+        <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
-     </fvTable>
+      </template>
-   </el-card>
+    </fvTable>
-   <div class="oper-page-btn">
+    <!--   </el-card>-->
-     <el-button color="#DED0B2" @click="handleSubmit">提交</el-button>
+    <div class="oper-page-btn">
-   </div>
+      <el-button color="#DED0B2" @click="handleSubmit">提交</el-button>
- </div>
+    </div>
+    <file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
+                  :fileType="filePreviewParam.fileType"/>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -24,17 +27,17 @@ import {useTagsView} from '@/stores/tagsview.js'
 import {uploadFileList} from "@/api/project-manage/attachment";
 import {computed, ref} from "vue";
 import {getBaseInfoApi} from "@/components/steps/api";
-
 import {useCacheStore} from '@/stores/cache.js'
-
 import {toThousands} from '@/utils/changePrice.js'
+import {downloadFile, deleteFile} from "@/api/project-demand";
+
 const cacheStore = useCacheStore()
 const tagsViewStore = useTagsView()
 const route = useRoute()
 const router = useRouter()
 const fileList = ref([])
 const formData = ref({
-  tagName:''
+  tagName: ''
 })
 const baseFormData = ref([])
 const schema = computed(() => {
@@ -174,7 +177,7 @@ const schema = computed(() => {
           <div>
             {
               baseFormData.value?.economicEstimate ?
-                  <span>{ toThousands(baseFormData.value?.economicEstimate )}</span>
+                  <span>{toThousands(baseFormData.value?.economicEstimate)}</span>
                   : <span>{'--'}</span>
             }
           </div>
@@ -248,8 +251,10 @@ const tableConfig = reactive({
     },
     {
       prop: 'originalFileName',
-      label: '附件名称',
+      label: '文件名',
       align: 'center',
+      currentRender: ({row, index}) => (<div style="color: #2a99ff;cursor: pointer;" onClick={()=>clickToPreview(row)}>{row.originalFileName}</div>)
+
     },
     {
       prop: 'tag',
@@ -270,6 +275,8 @@ const tableConfig = reactive({
         return (
             <div>
               <el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
+              <popover-delete name={row.originalFileName} type={'文件'} btnType={'danger'}
+                              onDelete={() => handleDelete(row)}/>
             </div>
         )
       }
@@ -281,6 +288,44 @@ const name = ref(router.currentRoute.value.name)
 const rules = reactive({
   tagName: [{required: true, message: '请输入标签名称', trigger: 'blur'}],
 })
+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 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()
+  })
+}
+const handleDelete = (row) => {
+  deleteFile(row.fileId).then(res => {
+    ElNotification({
+      title: '提示',
+      message: res.msg,
+      type: res.code === 1000 ? 'success' : 'error'
+    })
+    if (res.code === 1000) {
+      fileList.value.splice(fileList.value.findIndex((item) => item.fileId === row.fileId), 1);
+    }
+  });
+}
 //匹配字典值,返回对应值的字典标签
 const filterDict = (data, value) => {
   if (data === undefined || value === undefined) return;
@@ -317,7 +362,7 @@ const getBaseInfo = async () => {
 }
 
 getBaseInfo()
-const getName=()=>{
+const getName = () => {
   switch (route.query.name) {
     case '00':
       return '需求征集'
@@ -353,44 +398,60 @@ const getFile = (val) => {
 const getFileParam = (item) => {
   return {
     fileId: item.fileId,
-    tag:item.tag
+    tag: item.tag
   }
 }
 const handleSubmit = async () => {
-    let files = []
+  let files = []
-    fileList.value.forEach(item => {
+  fileList.value.forEach(item => {
-      files.push(getFileParam(item))
+    files.push(getFileParam(item))
+  })
+  let params = {
+    fileList: files,
+    targetState: route.query.name,
+    projectId: route.query.id,
+  }
+  let res = await uploadFileList(params)
+  ElNotification({
+    title: '提示',
+    message: res.msg,
+    type: res.code === 1000 ? 'success' : 'error'
+  })
+  if (res.code === 1000) {
+    tagsViewStore.delVisitedViews(router.currentRoute.value.path)
+    await router.push({
+      name: 'Filing/attachment',
+      query: {
+        id: route.query.id,
+        name: route.query.name,
+        requirementId: route.query.requirementId
+      }
     })
-    let params = {
+  }
-      fileList: files,
-      targetState:route.query.name,
-      projectId: route.query.id,
-    }
-    let res = await uploadFileList(params)
-    ElNotification({
-      title: '提示',
-      message: res.msg,
-      type: res.code === 1000 ? 'success' : 'error'
-    })
-    if (res.code === 1000) {
-      tagsViewStore.delVisitedViews(router.currentRoute.value.path)
-      await router.push({
-        name: 'Filing/attachment',
-        query:{
-          id: route.query.id,
-          name:route.query.name,
-          requirementId:route.query.requirementId
-        }
-      })
-    }
 }
-onActivated(()=>{
+onActivated(() => {
-  fileList.value=[]
+  fileList.value = []
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-:deep(.el-table--fit ){
+:deep(.el-table--fit ) {
-  height: 300px!important;
+  height: 318px !important;
+}
+
+:deep(.el-table__header) {
+  .is-leaf:first-child {
+    .cell {
+      margin-left: -22px !important;
+    }
+  }
+}
+
+:deep(.el-table__body) {
+  .el-table__cell:first-child {
+    .cell {
+      margin-left: -11px !important;
+    }
+  }
 }
 </style>

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

@@ -19,14 +19,14 @@
         <el-button v-if="uploadState" color="#DED0B2" @click="handleUpload">上传附件</el-button>
       </el-form-item>
     </el-form>
-    <!--  <el-card style="width: 100%" shadow="never">-->
+    <fvTable style="width: 100%;max-height: 274px" v-if="showTable" height="274" :tableConfig="implementationAttachmentTableConfig"
-    <fvTable style="width: 100%;max-height: 274px" v-if="showTable" height="274" :tableConfig="tableConfig"
              :data="otherFileList" :isSettingCol="false" :pagination="false">
       <template #empty>
         <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
       </template>
     </fvTable>
-    <!--  </el-card>-->
+    <file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
+                  :fileType="filePreviewParam.fileType"/>
   </div>
 </template>
 
@@ -250,7 +250,7 @@ const schema = computed(() => {
 
 const baseForm = ref()
 const tagsOption = ref([])
-const tableConfig = reactive({
+const implementationAttachmentTableConfig = reactive({
   columns: [
     {
       prop: 'index',
@@ -263,6 +263,7 @@ const tableConfig = reactive({
       prop: 'originalFileName',
       label: '文件名',
       align: 'center',
+      currentRender: ({row, index}) => (<div style="color: #2a99ff;cursor: pointer;" onClick={()=>clickToPreview(row)}>{row.originalFileName}</div>)
     },
     {
       prop: 'tag',
@@ -292,6 +293,23 @@ const tableConfig = reactive({
 })
 const showTable = ref(true)
 const otherFileList = ref([])
+const filePreviewParam = ref({
+  fileUrl: '',
+  fileName: '',
+  fileType: 'pdf'
+})
+const filePreviewShow = ref(false)
+const clickToPreview=(row)=>{
+  filePreviewShow.value = false
+  filePreviewParam.value = {
+    fileUrl: row.url,
+    fileName: row.originalFileName,
+    fileType: row.fileType
+  }
+  nextTick(()=>{
+    filePreviewShow.value = true
+  })
+}
 //匹配字典值,返回对应值的字典标签
 const filterDict = (data, value) => {
   if (data === undefined || value === undefined) return;

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

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