|
|
@@ -1,6 +1,11 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-button type="primary" text @click="openFile">查看</el-button>
|
|
|
+ <el-button v-if="title.length === 0" type="primary" text @click="detail"
|
|
|
+ >查看</el-button
|
|
|
+ >
|
|
|
+ <div v-else @click="detail">
|
|
|
+ <slot name="title"></slot>
|
|
|
+ </div>
|
|
|
<el-image-viewer
|
|
|
v-if="showImage"
|
|
|
:url-list="preList"
|
|
|
@@ -16,24 +21,21 @@
|
|
|
</template>
|
|
|
<div>
|
|
|
<div v-if="data">
|
|
|
- <el-empty
|
|
|
- v-if="data.imgs.length === 0"
|
|
|
- style="height: 90vh"
|
|
|
- description="暂时无法预览，您可以点击 下载 按钮，下载原文件 "
|
|
|
- class="full-height flex flex-center"
|
|
|
- />
|
|
|
+ <div v-if="data.imgs.length === 0" class="flex flex-center">
|
|
|
+ <div v-html="data.content" class="preview"></div>
|
|
|
+ </div>
|
|
|
<div v-else v-for="item in data.imgs" :key="item.id">
|
|
|
<img :src="item.filePath" style="width: 1100px" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
class="bottom flex flex-center flex-justify-center"
|
|
|
- v-if="info.isAccess === 2 || showAction"
|
|
|
+ v-if="isAccess === 2 || showAction"
|
|
|
>
|
|
|
<el-button type="primary" icon="Download" @click="downloadClick"
|
|
|
>下 载</el-button
|
|
|
>
|
|
|
- <share class="ml-20" :row="info" v-if="info.isAccess === 2" />
|
|
|
+ <share class="ml-20" :row="data" v-if="isAccess === 2" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-drawer>
|
|
|
@@ -49,25 +51,25 @@ export default {
|
|
|
share
|
|
|
},
|
|
|
props: {
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ default: () => {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ isAccess: {
|
|
|
+ type: Number,
|
|
|
+ default: 3
|
|
|
+ },
|
|
|
showAction: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
- info: {
|
|
|
- type: Object,
|
|
|
+ id: {
|
|
|
+ type: String,
|
|
|
default: null
|
|
|
}
|
|
|
},
|
|
|
- watch: {
|
|
|
- show: {
|
|
|
- handler(val) {
|
|
|
- if (val) {
|
|
|
- this.detail()
|
|
|
- }
|
|
|
- },
|
|
|
- immediate: true
|
|
|
- }
|
|
|
- },
|
|
|
data() {
|
|
|
return {
|
|
|
show: false,
|
|
|
@@ -78,27 +80,39 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
openFile() {
|
|
|
- if (api.offices.includes(this.info.suffix)) {
|
|
|
+ if (
|
|
|
+ this.data.fileAttach.id === -1 ||
|
|
|
+ api.offices.includes(this.data.fileAttach.suffix)
|
|
|
+ ) {
|
|
|
this.show = true
|
|
|
} else {
|
|
|
this.preList.length = 0
|
|
|
- this.preList.push(this.info.url)
|
|
|
+ this.preList.push(this.data.url)
|
|
|
this.showImage = true
|
|
|
}
|
|
|
},
|
|
|
detail() {
|
|
|
- this.$api.resource
|
|
|
- .fileDetail(this.info.fileId ? this.info.fileId : this.info.id)
|
|
|
- .then(res => {
|
|
|
+ console.log(Number(this.id, 10))
|
|
|
+ if (Number(this.id, 10) === 'NaN') {
|
|
|
+ this.$api.resource.fileDetail(this.id).then(res => {
|
|
|
if (res.code === 200) {
|
|
|
this.data = res.data
|
|
|
+ this.openFile()
|
|
|
}
|
|
|
})
|
|
|
+ } else {
|
|
|
+ this.$api.resource.fileDetailByFile(this.id).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.data = res.data
|
|
|
+ this.openFile()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
async downloadClick() {
|
|
|
const link = document.createElement('a')
|
|
|
- link.href = this.info.url
|
|
|
- link.download = this.info.title
|
|
|
+ link.href = this.data.url
|
|
|
+ link.download = this.data.title
|
|
|
link.click()
|
|
|
}
|
|
|
}
|
|
|
@@ -106,6 +120,10 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.preview {
|
|
|
+ width: 960px;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
.bottom {
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
scorpio