update 动态消息详情
This commit is contained in:
赵霄
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div>
|
||||
<template v-if="fileList && fileList.length > 0">
|
||||
<div class="file" v-for="file in fileList" :key="file.id">
|
||||
<div class="file-info">
|
||||
<a-icon type="link" />
|
||||
<div class="file-name" @click="handlePreview(file)">{{ file.fileName }}</div>
|
||||
</div>
|
||||
<div class="file-operate">
|
||||
<!-- 下载-->
|
||||
<a-button type="link" icon="download" @click="handleDownload(file)">{{ $t('download') }}</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div id="images">
|
||||
<div class="image" v-viewer="{movable: false}">
|
||||
<img v-show="image" :src="imageUrl" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getFileInfo } from '../api/api.js'
|
||||
import Vue from 'vue'
|
||||
import { ACCESS_TOKEN } from '../store/mutation-types.js'
|
||||
import { downloadFile, getFileAccessHttpUrl } from '../api/manage.js'
|
||||
import { previewPdf } from '../utils/previewPdf.js'
|
||||
import { Base64 } from 'js-base64'
|
||||
|
||||
const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png', 'raw']
|
||||
const FILE_TYPE_PDF = 'pdf'
|
||||
|
||||
export default {
|
||||
name: 'FileEcho',
|
||||
props: {
|
||||
// 文件id
|
||||
fileIds: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
fileIds (value) {
|
||||
if (value) {
|
||||
this.getFileList()
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
fileList: [],
|
||||
image: false,
|
||||
imageUrl: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getFileList () {
|
||||
const fileIdsList = this.fileIds.split(',')
|
||||
for (let i = 0; i < fileIdsList.length; i++) {
|
||||
const id = fileIdsList[i]
|
||||
getFileInfo({ id }).then(res => {
|
||||
if (res.success) {
|
||||
this.fileList.push(res.result)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
handlePreview (file) {
|
||||
if (!file || !file.url) {
|
||||
return
|
||||
}
|
||||
// 截取文件后缀名
|
||||
const fileSuffix = file.fileName ? file.fileName.split('.')[file.fileName.split('.').length - 1] : ''
|
||||
const canPreview = FILE_TYPE_IMGS.some(tt => fileSuffix.toLowerCase() === tt) || fileSuffix.toLowerCase() === FILE_TYPE_PDF
|
||||
// 判断是否为可预览格式的文件
|
||||
if (!canPreview) {
|
||||
this.$message.loading('该文件类型不支持预览，正在为您准备下载...').then(() => {
|
||||
this.handleDownload(file)
|
||||
})
|
||||
return
|
||||
}
|
||||
const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${file.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.fileName}`
|
||||
// 图片预览，使用自己添加的组件
|
||||
if (canPreview && FILE_TYPE_IMGS.includes(fileSuffix.toLowerCase())) {
|
||||
this.imageUrl = getFileAccessHttpUrl(file.id)
|
||||
// 获取viewer实例
|
||||
const viewer = this.$el.querySelector('.image').$viewer
|
||||
// 调用show方法进行显示预览图
|
||||
viewer.show()
|
||||
// this.$refs.imagePreviewModal.open(file)
|
||||
return
|
||||
}
|
||||
// pdf预览
|
||||
if (canPreview && FILE_TYPE_PDF.includes(fileSuffix)) {
|
||||
const url = previewPdf(file.id)
|
||||
window.open(url)
|
||||
return
|
||||
}
|
||||
// 其余可预览文件仍使用KKFile进行预览
|
||||
const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
|
||||
window.open(url)
|
||||
},
|
||||
/**
|
||||
* 单个文件的下载功能
|
||||
* @param file
|
||||
*/
|
||||
handleDownload (file) {
|
||||
// 下载文件
|
||||
downloadFile(`/sys/common/download/${file.id}`, file.fileName)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.file {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.file:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: @primary-color;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.file-info > .anticon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
width: 0;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.file-operate {
|
||||
.ant-btn > .anticon + span, .ant-btn > .iconfont + span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.ant-btn:first-child {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -66,8 +66,8 @@ const Base64 = require('js-base64').Base64
|
||||
|
||||
// 支持预览的文件类型
|
||||
const CAN_PREVIEW_FILE_TYPE = ['pdf', 'image']
|
||||
// 不支持预览的文件后缀
|
||||
const CAN_PREVIEW_FILE_SUFFIX = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'mp3', 'mp4', 'flv']
|
||||
// 支持预览的文件后缀
|
||||
const CAN_PREVIEW_FILE_SUFFIX = ['jpg', 'jpeg', 'png', 'raw', 'pdf']
|
||||
const uidGenerator = () => {
|
||||
return '-' + parseInt(Math.random() * 10000 + 1, 10)
|
||||
}
|
||||
@@ -401,7 +401,7 @@ export default {
|
||||
}
|
||||
const fileType = file.type
|
||||
// 截取文件后缀名
|
||||
const fileSuffix = file.name ? file.name.split('.')[file.name.split('.').length - 1] : ''
|
||||
const fileSuffix = file.name ? file.name.split('.')[file.name.split('.').length - 1].toLowerCase() : ''
|
||||
const canPreview = fileType ? CAN_PREVIEW_FILE_TYPE.some(tt => fileType.indexOf(tt) !== -1) : CAN_PREVIEW_FILE_SUFFIX.some(tt => fileSuffix === tt)
|
||||
// 判断是否为可预览格式的文件
|
||||
if (!canPreview) {
|
||||
|
||||
@@ -370,7 +370,7 @@ export default {
|
||||
}
|
||||
// pdf预览
|
||||
if (canPreview && FILE_TYPE_PDF.includes(fileSuffix)) {
|
||||
const url = previewPdf(file.response.result.id)
|
||||
const url = previewPdf(file.id)
|
||||
window.open(url)
|
||||
return
|
||||
}
|
||||
|
||||
@@ -7,6 +7,28 @@
|
||||
<div class="detail-title">
|
||||
【{{ $t('standardRegulationLibrary.dynamicMessage.dynamicDetails') }}】{{ detailData.dynamicHeading }}
|
||||
</div>
|
||||
<div class="decoration">
|
||||
<!--浏览量-->
|
||||
<div class="page-view decoration-item">
|
||||
<a-icon type="eye" />
|
||||
{{ detailData.readCount }}
|
||||
</div>
|
||||
<!--编辑人-->
|
||||
<div class="writer decoration-item">
|
||||
<label>{{ $t('docTool.split.editor') }}</label>
|
||||
<span>{{ detailData.writer_dictText }}</span>
|
||||
</div>
|
||||
<!--发布时间-->
|
||||
<div class="writer decoration-item">
|
||||
<label>{{ $t('standardRegulationLibrary.dynamicMessage.releaseTime') }}</label>
|
||||
<span>{{ detailData.releaseTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="container-title">{{ $t('standardRegulationLibrary.dynamicMessage.dynamicDetails') }}</div>
|
||||
<div v-html="detailData.dynamicDetails"></div>
|
||||
<file-echo :file-ids="detailData.dataText" class="file-box"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</internal-detail-page>
|
||||
@@ -15,14 +37,16 @@
|
||||
<script>
|
||||
import InternalDetailPage from '../../../components/InternalDetailPage.vue'
|
||||
import { getDynamicMessageById } from '../../../api/standardRegulationLibraryApi.js'
|
||||
import FileEcho from '../../../components/FileEcho.vue'
|
||||
|
||||
export default {
|
||||
name: 'DynamicMessageDetail',
|
||||
components: { InternalDetailPage },
|
||||
components: { InternalDetailPage, FileEcho },
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
detailData: {}
|
||||
detailData: {},
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
@@ -63,4 +87,46 @@ export default {
|
||||
color: #1D2129;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.decoration {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #E5E6EB;
|
||||
text-align: right;
|
||||
|
||||
&-item {
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.writer {
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC-Regular, PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
|
||||
label {
|
||||
color: #4E5969;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #86909C;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-top: 24px;
|
||||
|
||||
&-title {
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC-Medium, PingFang SC, sans-serif;
|
||||
font-weight: 550;
|
||||
color: #1D2129;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-box {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
<a-form-item :labelCol="lineLabelCol"
|
||||
:wrapperCol="lineWrapperCol"
|
||||
:label="$t('standardRegulationLibrary.dynamicMessage.dataText')">
|
||||
<j-upload v-decorator="['dataText', validatorRules.dataText]" :number="fileNum" :file-type="fileType" />
|
||||
<j-upload v-decorator="['dataText', validatorRules.dataText]" return-id :number="fileNum" :file-type="fileType" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user