|
|
<template>
|
|
|
<div>
|
|
|
<xy-dialog ref="dialog" :width="60" :is-show.sync="isShow" :type="'normal'" :title="form.title">
|
|
|
<template v-slot:default>
|
|
|
<div class="article">
|
|
|
<div class="article-title">{{form.title}}</div>
|
|
|
<div v-if="form.tag_ids">
|
|
|
<!-- <el-tag></el-tag> -->
|
|
|
</div>
|
|
|
<div class="article-time">
|
|
|
<div v-if="form.date">发布时间：{{form.date}}</div>
|
|
|
<div v-if="form.catalog_name">所属目录：
|
|
|
<el-tag>{{form.catalog_name}}</el-tag>
|
|
|
</div>
|
|
|
<div v-if="form.area_ids">所属区域：
|
|
|
<template v-if="form.area_ids_details && form.area_ids_details.length>0">
|
|
|
<template v-for="(item,index) in form.area_ids_details">
|
|
|
<el-tag style="margin-right:5px">{{item.name}}</el-tag>
|
|
|
</template>
|
|
|
</template>
|
|
|
</div>
|
|
|
<div v-if="form.tag_ids">标签：
|
|
|
<template v-if="form.area_ids_details && form.tag_ids_details.length>0">
|
|
|
<template v-for="(item,index) in form.tag_ids_details">
|
|
|
<el-tag style="margin-right:5px">{{item.name}}</el-tag>
|
|
|
</template>
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="article-files" v-if="form.files_details && form.files_details.length>0">
|
|
|
<div v-for="(item,index) in form.files_details">
|
|
|
附件{{index+1}}：
|
|
|
<a :href="item.url" target="_blank">{{item.original_name}}</a>
|
|
|
<el-link target="_blank" style="margin:0 10px;" @click="toshowFile(item)" type="primary">
|
|
|
预览
|
|
|
</el-link>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="article-html" v-if="form.content">
|
|
|
<div v-html="form.content"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-slot:footerContent>
|
|
|
<Button ghost type="primary" @click='isShow=false'>关闭</Button>
|
|
|
</template>
|
|
|
</xy-dialog>
|
|
|
<viewFile ref="viewFile"></viewFile>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
show
|
|
|
} from "@/api/system/baseForm.js"
|
|
|
import viewFile from '@/components/viewFile/viewFile.vue'
|
|
|
export default {
|
|
|
components: {
|
|
|
viewFile
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
isShow: false,
|
|
|
id: '',
|
|
|
table_name: 'records',
|
|
|
form: {}
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
getDetail() {
|
|
|
show({
|
|
|
id: this.id,
|
|
|
table_name: this.table_name,
|
|
|
json_data_fields: ['files', 'area_ids','tag_ids']
|
|
|
}).then(res => {
|
|
|
this.form = this.base.deepCopy(res)
|
|
|
console.log("this.form", this.form)
|
|
|
})
|
|
|
},
|
|
|
toshowFile(item) {
|
|
|
// 是视频的
|
|
|
if(item.url && this.base.containsVideoFormat(item.url)){
|
|
|
this.$refs.viewFile.typeName = 'video'
|
|
|
this.$refs.viewFile.url = item.url
|
|
|
}else{
|
|
|
this.$refs.viewFile.typeName = 'file'
|
|
|
if(item.url.includes('doc')||item.url.includes('DOC')){
|
|
|
|
|
|
this.$refs.viewFile.url = item.view_url
|
|
|
}else{
|
|
|
|
|
|
this.$refs.viewFile.url = item.url
|
|
|
}
|
|
|
}
|
|
|
this.$refs.viewFile.diaShow = true
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
isShow(newVal) {
|
|
|
if (newVal) {
|
|
|
this.getDetail()
|
|
|
} else {
|
|
|
this.id = ''
|
|
|
this.form = {}
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.article {
|
|
|
&>div {
|
|
|
margin:10px 30px;
|
|
|
}
|
|
|
|
|
|
&-title {
|
|
|
font-size: 24px;
|
|
|
text-align: center;
|
|
|
font-weight: bold;
|
|
|
color: #000;
|
|
|
}
|
|
|
|
|
|
&-time {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
font-size: 16px;
|
|
|
color: rgba(0, 0, 0, 0.6);
|
|
|
align-items: center;
|
|
|
|
|
|
&>div {
|
|
|
margin: 0 10px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-files {
|
|
|
color: blue;
|
|
|
cursor: pointer;
|
|
|
text-decoration: underline;
|
|
|
// text-indent: 2em;
|
|
|
}
|
|
|
|
|
|
&-html {
|
|
|
line-height: 1.5;
|
|
|
font-size: 20px;
|
|
|
::v-deep video{
|
|
|
display:block!important;
|
|
|
margin:0 auto!important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
