You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
3.3 KiB
141 lines
3.3 KiB
<template>
|
|
<div>
|
|
<xy-dialog ref="dialog" :width="80" :is-show.sync="isShow" type="form" :title="showform.title" :form="form">
|
|
<template v-slot:show>
|
|
<div class="article_title">{{showform.title}}</div>
|
|
<div style="text-align: center;">
|
|
<video v-if="showform.video" controls :src="showform.video.url" style="max-width: 600px; max-height: 400px;"></video>
|
|
</div>
|
|
<div class="article_content">
|
|
<div v-html="showform.content"></div>
|
|
</div>
|
|
|
|
<div class="article_files">
|
|
<div class="article_files_name">附件：</div>
|
|
<div v-if="showform.files && showform.files.length>0">
|
|
<div v-for="item in showform.files">
|
|
<div>
|
|
<a :href="item.url" target="_blank">{{item.original_name}}</a>
|
|
|
|
<el-link target="_blank" style="margin:0 10px;" @click="toshowFile(item.url,item.original_name)"
|
|
type="primary">
|
|
预览
|
|
</el-link>
|
|
<el-link target="_blank" @click="base.downLoadFileUrl(item.id)" type="primary">
|
|
下载
|
|
</el-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
<template v-slot:footerContent>
|
|
<div>
|
|
<el-button size="small" @click="closeDia">关闭</el-button>
|
|
</div>
|
|
</template>
|
|
</xy-dialog>
|
|
<viewFile :width="'50%'" ref="viewFile" :url='fileUrl' :title="fileTitle"></viewFile>
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
show
|
|
} from '@/api/task/newplan.js'
|
|
import viewFile from '@/components/viewFile/viewFile.vue'
|
|
export default {
|
|
components: {
|
|
viewFile
|
|
},
|
|
data() {
|
|
return {
|
|
isShow: false,
|
|
fileUrl: '',
|
|
fileTitle: '',
|
|
form: {
|
|
show: ''
|
|
},
|
|
extension:'',
|
|
showform: {},
|
|
diaShow: false
|
|
}
|
|
},
|
|
watch: {
|
|
isShow(newVal) {
|
|
if (newVal) {
|
|
this.getDetail()
|
|
} else {
|
|
this.id = ''
|
|
this.showform = {}
|
|
this.diaShow = false
|
|
this.isShow = false
|
|
this.$emit("refresh", this.isShow)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
toshowFile(url, title) {
|
|
console.log(url)
|
|
this.fileUrl = url
|
|
this.fileTitle = title
|
|
this.$refs.viewFile.diaShow = true
|
|
},
|
|
closeDia() {
|
|
this.isShow = false
|
|
this.extension = ''
|
|
this.showform = {}
|
|
this.$emit("refresh", this.isShow)
|
|
},
|
|
getDetail() {
|
|
let that = this
|
|
show({
|
|
table_name: 'articles',
|
|
id: this.id,
|
|
with_relations:['image','video']
|
|
}).then(res => {
|
|
this.form = {
|
|
show: ''
|
|
}
|
|
this.showform = res
|
|
}).catch(error => {});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/deep/ .show {
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
.article_title {
|
|
text-align: center;
|
|
padding: 15px;
|
|
font-size: 24px;
|
|
color: #333;
|
|
}
|
|
|
|
.article_content {
|
|
line-height: 1.5;
|
|
padding: 15px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.article_files {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.article_files_name {
|
|
font-size: 20px;
|
|
color: #333;
|
|
}
|
|
</style>
|