parent
6538e28f24
commit
643fddd6de
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="detail">
|
||||
<div class="container">
|
||||
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<template #template>
|
||||
<div>
|
||||
<div class="title">
|
||||
<el-skeleton-item variant="rect" style="height: 30px;width: 74%;"/>
|
||||
</div>
|
||||
<div class="type">
|
||||
<el-skeleton-item variant="rect" style="height: 20px;width: 80px;"/>
|
||||
</div>
|
||||
<div class="date">
|
||||
<el-skeleton-item variant="rect" style="height: 20px;width: 20%;"/>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-skeleton-item variant="text" style="height: 300px;width: 100%;"/>
|
||||
</div>
|
||||
<div class="file">
|
||||
<p class="file__text">附件</p>
|
||||
<div v-for="i in 3">
|
||||
<el-skeleton-item variant="rect" style="height: 30px;width: 30%;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span
|
||||
class="title-zhidu"
|
||||
v-if="info.leixing == 5"
|
||||
>
|
||||
{{ info.wenjian }}【{{ info.nianfen }}】{{ info.bianhao }}号
|
||||
</span>{{ info.biaoti }}
|
||||
</div>
|
||||
<div class="type" :style="{'background': ['#a8f35f','#407cbe','#bf6865','#5d53cf','#7d7e4d'][info.leixing-1]}">{{ typeFormat(info.leixing) }}</div>
|
||||
<div class="date">{{ $moment(new Date(info.created_at)).format('YYYY-MM-DD') }}</div>
|
||||
<div class="content" v-html="info.jianshu"></div>
|
||||
<div class="file" v-if="info.id_material_fujian_uploads_material_id_relation && info.id_material_fujian_uploads_material_id_relation.length > 0">
|
||||
<p class="file__text">附件</p>
|
||||
<div class="file__item" v-for="item in info.id_material_fujian_uploads_material_id_relation">
|
||||
<a>{{ item.name }}</a>
|
||||
<div class="file__item--btn" @click="open(item)">预览</div>
|
||||
<i class="el-icon-download file__item--down" @click="down(item)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
:width="76"
|
||||
transfer
|
||||
:z-index="6000"
|
||||
v-model="showModal"
|
||||
:footer-hide="true"
|
||||
title="预览"
|
||||
>
|
||||
<template>
|
||||
<iframe
|
||||
style="width: 100%; height: 57vh"
|
||||
:src="codeUri"
|
||||
border="0"
|
||||
></iframe>
|
||||
</template>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import formType from "@/const/formType"
|
||||
import { detail } from "@/api/reception"
|
||||
import {download} from "@/utils/downloadRequest";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formType,
|
||||
showModal: false,
|
||||
codeUri: '',
|
||||
loading: false,
|
||||
info: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail (id) {
|
||||
this.loading = true
|
||||
detail({
|
||||
table_name: 'materials',
|
||||
id
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
this.info = res.detail
|
||||
this.loading = false
|
||||
}).catch(err => this.loading = false)
|
||||
},
|
||||
open(e) {
|
||||
this.codeUri = `http://view.ali251.langye.net:8012/onlinePreview?url=${encodeURIComponent(
|
||||
new Buffer(e.url).toString("base64")
|
||||
)}`;
|
||||
|
||||
this.showModal = true;
|
||||
//window.open(`http://view.ali251.langye.net:8012/onlinePreview?url=${codeUri}`)
|
||||
},
|
||||
down(e) {
|
||||
download(e.url, "get", {}, e.name);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
typeFormat () {
|
||||
return function (leixing) {
|
||||
return this.formType.find(i => i.value === leixing)?.label
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeRouteEnter(to, from , next) {
|
||||
next(vm => {
|
||||
vm.getDetail(to.params.id)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.detail {
|
||||
background: #f8f8f8;
|
||||
|
||||
padding: 31px 18.75%;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 15px 0 rgba(130,127,126,0.1);
|
||||
|
||||
padding: 24px 23px 44px 22px;
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
|
||||
&-zhidu {
|
||||
font-weight: 500;
|
||||
color: #398ac9;
|
||||
|
||||
}
|
||||
}
|
||||
.date {
|
||||
text-align: center;
|
||||
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.type {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
padding: 2px 6px;
|
||||
color: #fff;
|
||||
border-radius: 20px;
|
||||
transform: translateX(-50%);
|
||||
|
||||
margin: 10px auto;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
}
|
||||
.file {
|
||||
|
||||
margin-top: 10px;
|
||||
|
||||
&__text {
|
||||
font-weight: 600;
|
||||
|
||||
padding: 10px 0;
|
||||
}
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > a {
|
||||
flex: 1;
|
||||
}
|
||||
&--btn {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: #247ec3;
|
||||
border-radius: 30px;
|
||||
border: 1px solid #247ec3;
|
||||
transition: all 0.2s;
|
||||
|
||||
padding: 5px 15px;
|
||||
margin-right: 10px;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: #247ec3;
|
||||
}
|
||||
}
|
||||
&--down {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #247ec3;
|
||||
|
||||
margin-left: 20px;
|
||||
padding-right: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in new issue