文件预览组件

This commit is contained in:
fengachen
2021-09-13 13:42:46 +08:00
parent 381ed8777c
commit 688b0c00f9
3 changed files with 128 additions and 36 deletions
+88
View File
@@ -0,0 +1,88 @@
<template>
<!-- 父组件的文件id如果是异步获取的 需要加上v-if判断-->
<div style="display: inline-block"> <span @click="handlePreview(item)" class="color-blue" v-for="(item) of fileList" :key="item.id">{{ item.name +' ' }}</span></div>
</template>
<script>
import Vue from 'vue'
import {ACCESS_TOKEN} from '@/store/mutation-types'
import {getFileInfo} from '@/api/api'
// eslint-disable-next-line
const Base64 = require('js-base64').Base64
export default {
name: 'PreviewFile',
props: {
/*
* 文件id
* */
fileId: {
type: String,
required: false
}
},
data() {
return {
fileInfo: {},
fileList: [],
}
},
mounted() {
this.getFileInfo(this.fileId)
},
watch: {
fileId: {
immediate: true,
handler(val) {
this.initFileList(val)
}
}
},
methods: {
/*
* 通过文件id获取文件的相关信息
* */
getFileInfo(id) {
return new Promise(resolve => {
let result = {}
getFileInfo({id: id}).then(res => {
if (res.success) {
result = res.result
}
}).finally(() => {
resolve(result)
})
})
},
/*
* 获取文件信息
* */
async initFileList(fileIds) {
const fileList = []
let arr = fileIds.split(',')
for (let i = 0; i < arr.length; i++) {
let fileObj = {}
fileObj = await this.getFileInfo(arr[i])
fileList.push({id: fileObj.id, name: fileObj.fileName})
}
this.fileList = [...fileList]
},
handlePreview(file) {
if (file && file.id) {
const fileFullUrl = `${window._CONFIG['domianWebSocketURL']}/sys/common/download/${file.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
// let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileFullUrl)}`
window.open(url)
}
},
}
}
</script>
<style scoped lang="less">
.color-blue {
color: #069f99 !important;
cursor: pointer;
}
</style>
@@ -7,90 +7,90 @@
</div>
<a-row>
<a-col :xxl="8" :xl="12" :sm="24">
<label class="label">会议名称:</label><span> {{ currentMeetingInfo.meetingName }}</span>
<label class="label">会议名称:</label><span>{{ currentMeetingInfo.meetingName }}</span>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<label>会议类型:</label><span> {{ meetingType }}</span>
<label>会议类型:</label><span>{{ meetingType }}</span>
</a-col>
<!--标协会议类型-->
<a-col :xxl="8" :xl="12" :sm="24" v-show="currentMeetingInfo.meetingType === '2' ">
<label>标协会议类型:</label><span> {{ tbMeetingType }}</span>
<label>标协会议类型:</label><span>{{ tbMeetingType }}</span>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<label>负责人:</label><span> {{ currentMeetingInfo.directorName }}</span>
<label>负责人:</label><span>{{ currentMeetingInfo.directorName }}</span>
</a-col>
<!--工作组会议-->
<a-col :xxl="8" :xl="12" :sm="24" v-show="currentMeetingInfo.meetingType === '1' ">
<label>工作组:</label><span> {{ currentMeetingInfo.workingGroupName }}</span>
<label>工作组:</label><span>{{ currentMeetingInfo.workingGroupName }}</span>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<label>手机号:</label><span> {{ currentMeetingInfo.directorPhone }}</span>
<label>手机号:</label><span>{{ currentMeetingInfo.directorPhone }}</span>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<label>召开时间:</label><span> {{ currentMeetingInfo.startTime + '~' + currentMeetingInfo.endTime }}</span>
<label>召开时间:</label><span>{{ currentMeetingInfo.startTime + '~' + currentMeetingInfo.endTime }}</span>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<label>年份:</label><span> {{ currentMeetingInfo.particularYear }}</span>
<label>年份:</label><span>{{ currentMeetingInfo.particularYear }}</span>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<label>报名截止时间:</label><span> {{ currentMeetingInfo.registerDeadline }}</span>
<label>报名截止时间:</label><span>{{ currentMeetingInfo.registerDeadline }}</span>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<label>召开地点:</label><span> {{ currentMeetingInfo.venue + '/' + currentMeetingInfo.address }}</span>
<label>召开地点:</label><span>{{ currentMeetingInfo.venue + '/' + currentMeetingInfo.address }}</span>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<label>会议费用:</label><span> {{ currentMeetingInfo.meetingCosts }} 元/人</span>
<label>会议费用:</label><span>{{ currentMeetingInfo.meetingCosts }} 元/人</span>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-show="currentMeetingInfo.meetingType === '2' ">
<label>会议费用(标协会员):</label><span> {{ currentMeetingInfo.meetingCostsVip }} 元/人</span>
<label>会议费用(标协会员):</label><span>{{ currentMeetingInfo.meetingCostsVip }} 元/人</span>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<label>预计参加人数:</label><span> {{ currentMeetingInfo.estimatedNumber }}</span>
<label>预计参加人数:</label><span>{{ currentMeetingInfo.estimatedNumber }}</span>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-show="currentMeetingInfo.meetingType === '2' ">
<label>酒店名称:</label><span> {{ currentMeetingInfo.hotelName }}</span>
<label>酒店名称:</label><span>{{ currentMeetingInfo.hotelName }}</span>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-show="currentMeetingInfo.meetingType === '2' ">
<label>酒店地址:</label><span> {{ currentMeetingInfo.hotelAddress }}</span>
<label>酒店地址:</label><span>{{ currentMeetingInfo.hotelAddress }}</span>
</a-col>
<!-- 国际研讨会的邀请码-->
<a-col :xxl="8" :xl="12" :sm="24" v-show="currentMeetingInfo.meetingType ==='3' ">
<label>VIP邀请码:</label><span> {{ currentMeetingInfo.vipInvitationCode }}</span>
<label>VIP邀请码:</label><span>{{ currentMeetingInfo.vipInvitationCode }}</span>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-show="currentMeetingInfo.meetingType ==='3' ">
<label>演讲嘉宾邀请码:</label><span> {{ currentMeetingInfo.speakerInvitationCode }}</span>
<label>演讲嘉宾邀请码:</label><span>{{ currentMeetingInfo.speakerInvitationCode }}</span>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-show="currentMeetingInfo.meetingType ==='3' ">
<label>特邀嘉宾邀请码:</label><span> {{ currentMeetingInfo.guestInvitationCode }}</span>
<label>特邀嘉宾邀请码:</label><span>{{ currentMeetingInfo.guestInvitationCode }}</span>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24" v-show="currentMeetingInfo.meetingType ==='3' ">
<label>合作伙伴邀请码:</label><span> {{ currentMeetingInfo.cooperativeInvitationCode }}</span>
<label>合作伙伴邀请码:</label><span>{{ currentMeetingInfo.cooperativeInvitationCode }}</span>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<label>会议通知:</label><span></span>
<label>会议通知:</label><span v-if="currentMeetingInfo.meetingFiles"><preview-file :file-id="currentMeetingInfo.meetingFiles"></preview-file></span>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<label>报名链接:</label><span></span>
<label>报名链接:</label><span></span>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<label>报名二维码:</label><img alt="报名二维码"/>
<label>报名二维码:</label><img alt="报名二维码"/>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<label>签到二维码:</label><img alt="签到二维码"/>
<label>签到二维码:</label><img alt="签到二维码"/>
</a-col>
</a-row>
<a-row v-show="currentMeetingInfo.meetingType === '2' ">
<label class="label">酒店联系人及手机号: </label><span class="content"
v-for="(item,index) of currentMeetingInfo.hotelContactsList"
:key="index">{{
<label class="label">酒店联系人及手机号:</label><span class="content"
v-for="(item,index) of currentMeetingInfo.hotelContactsList"
:key="index">{{
item.hotelContacts + ':' + item.hotelContactsPhone + ' '
}}</span>
</a-row>
<a-row>
<label class="label">会议内容: </label><span class="content"> {{ currentMeetingInfo.meetingContent }}</span>
<label class="label">会议内容:</label><span class="content">{{ currentMeetingInfo.meetingContent }}</span>
</a-row>
<a-row>
<label class="label">备注: </label><span class="content"> {{ currentMeetingInfo.remark }}</span>
<label class="label">备注:</label><span class="content">{{ currentMeetingInfo.remark }}</span>
</a-row>
<div class="part-title">
<div class="part-title-text">参会人员信息</div>
@@ -231,6 +231,7 @@ import ProjectDetailModal from '@comp/ProjectDetailModal'
import AuditModal from '@views/incomePayments/meetManage/modules/AuditModal'
import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
import StatusSlot from '@comp/tools/StatusSlot'
import PreviewFile from '@comp/jero/PreviewFile'
export default {
@@ -245,7 +246,8 @@ export default {
ProjectDetailModal,
AuditModal,
PageHeaderTitle,
StatusSlot
StatusSlot,
PreviewFile
},
data() {
return {
@@ -341,12 +343,12 @@ export default {
{
title: '操作',
align: 'center',
fixed:'right',
fixed: 'right',
width: 160,
scopedSlots: {customRender: 'action'}
},
],
disableMixinCreated:true,
disableMixinCreated: true,
url: {
list: '/meeting/payMeetingSituation/page',
delete: '/meeting/payMeetingSituation/delete',
@@ -417,11 +419,11 @@ export default {
/*
* 编辑参会人
* */
handleEdit(record){
handleEdit(record) {
this.$router.push({
path: '/incomePayments/meetManage/SignUpInfoEdit',
query: {
id:record.id,
id: record.id,
meetingId: this.$route.query.id,
meetingType: this.currentMeetingInfo.meetingType,
}
@@ -469,7 +471,7 @@ export default {
// let flag = this.selectionRows.some(item => {
// return item.meetingType !== 3
// })
let flag = this.currentMeetingInfo.meetingType !== '3'
let flag = this.currentMeetingInfo.meetingType !== '3'
if (flag) {
this.$message.warn('只有研讨会议才可设置对接人')
return
@@ -22,7 +22,7 @@
<label>收费通知号:</label><span>{{ currentInfo.chargeNoticeNo }}</span>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<label>收费通知:</label><span class="primary-color">{{ currentInfo.fileName }}</span>
<label>收费通知:</label><preview-file :file-id="currentInfo.chargeNoticeFileId"></preview-file>
</a-col>
<a-col :xxl="8" :xl="12" :sm="24">
<label>备注:</label><span>{{ currentInfo.remark }}</span>
@@ -125,6 +125,7 @@ import SafeguardMemberModal from '@views/incomePayments/memberManage/modules/Saf
import ProjectDetailModal from '@comp/ProjectDetailModal'
import StatusSlot from '@comp/tools/StatusSlot'
import PageHeaderTitle from '@comp/layouts/PageHeaderTitle'
import PreviewFile from '@comp/jero/PreviewFile'
import {getAction} from '@api/manage'
@@ -138,7 +139,8 @@ export default {
SafeguardMemberModal,
ProjectDetailModal,
StatusSlot,
PageHeaderTitle
PageHeaderTitle,
PreviewFile
},
data() {
return {