123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201 |
- <template>
- <a-modal
- centered
- class="noticeDetail-modal"
- :footer="null"
- :maskClosable="false"
- title="公告详情"
- v-model="isShow"
- @cancle="isShow=false"
- :width="800">
- <div>
- <a-descriptions bordered size="small" :column="2">
- <a-descriptions-item label="类别">{{ typeDictValue }}</a-descriptions-item>
- <a-descriptions-item label="可见性">{{ toAppNameDictValue }}</a-descriptions-item>
- <a-descriptions-item label="公告标题">{{ detailsData&&detailsData.title||'--' }}</a-descriptions-item>
- <a-descriptions-item label="发布时间">{{ detailsData&&detailsData.releaseDate||'--' }}</a-descriptions-item>
- <a-descriptions-item label="公告内容" :span="2">
- <div v-if="detailsData&&detailsData.content" v-html="detailsData.content" class="editor-box"></div>
- <span v-else>--</span>
- </a-descriptions-item>
- <a-descriptions-item label="图片" :span="2">
- <div style="display: flex;">
- <p class="pic-box" v-for="(item,index) in imgPathsArr" :key="index">
- <img :src="item" title="点击查看大图" class="productPic" @click="getPreview(item)" />
- </p>
- </div>
- <span v-if="imgPathsArr.length == 0">--</span>
- </a-descriptions-item>
- <a-descriptions-item label="附件" :span="2">
- <p style="margin: 0 0 5px;" v-for="(item,index) in attachPathsArr" :key="index">
- <a :href="item.filePath" :download="item.fileName" class="attachLink">{{ item.fileName }}</a>
- </p>
- <span v-if="attachPathsArr.length == 0">--</span>
- </a-descriptions-item>
- </a-descriptions>
- <div class="btn-cont">
- <a-button id="noticeDetail-back" @click="isShow = false" style="margin-left: 15px;">关闭</a-button>
- </div>
- </div>
- <a-modal :visible="previewVisible" :footer="null" centered :maskClosable="false" @cancel="previewVisible=false">
- <img alt="example" style="width: 100%" :src="previewImage" />
- </a-modal>
- </a-modal>
- </template>
- <script>
- import { STable } from '@/components'
- import { noticeUserDetail } from '@/api/noticeUser'
- export default {
- name: 'NoticeDetailModal',
- components: { STable },
- props: {
- openModal: { // 弹框显示状态
- type: Boolean,
- default: false
- },
- itemId: {
- type: [Number, String],
- default: ''
- }
- },
- computed: {
- typeDictValue () { // 类别 数据字典name
- let str = ''
- if (this.detailsData && this.detailsData.type == 'notity') {
- str = '公告'
- } else if (this.detailsData && this.detailsData.type == 'news_company') {
- str = '企业新闻'
- } else if (this.detailsData && this.detailsData.type == 'news_trade') {
- str = '行业咨询'
- } else {
- str = '--'
- }
- return str
- },
- toAppNameDictValue () { // 可见性 数据字典name
- let str = ''
- if (this.detailsData && this.detailsData.toAppName == '1,2') {
- str = '所有'
- } else if (this.detailsData && this.detailsData.toAppName == '2') {
- str = '经销商'
- } else if (this.detailsData && this.detailsData.toAppName == '1') {
- str = '总部'
- } else {
- str = '--'
- }
- return str
- },
- imgPathsArr () { // 图片数组
- let arr = []
- if (this.detailsData && this.detailsData.imgPaths) {
- arr = this.detailsData.imgPaths.split(',')
- }
- return arr
- },
- attachPathsArr () { // 附件数组
- let arr = []
- if (this.detailsData && this.detailsData.attachList) {
- arr = this.detailsData.attachList
- }
- return arr
- }
- },
- data () {
- return {
- isShow: this.openModal, // 是否打开弹框
- detailsData: null, // 详情数据
- previewVisible: false,
- previewImage: ''
- }
- },
- methods: {
- // 获取详情
- getDetail () {
- noticeUserDetail({ id: this.itemId }).then(res => {
- if (res.status == 200) {
- this.detailsData = res.data
- } else {
- this.detailsData = null
- }
- })
- },
- // 查看大图
- getPreview (url) {
- this.previewImage = url
- this.previewVisible = true
- }
- },
- watch: {
- // 父页面传过来的弹框状态
- openModal (newValue, oldValue) {
- this.isShow = newValue
- },
- // 重定义的弹框状态
- isShow (newValue, oldValue) {
- if (!newValue) {
- this.detailData = null
- this.$emit('close')
- }
- },
- itemId (newValue, oldValue) {
- if (this.isShow && newValue) {
- this.getDetail()
- }
- }
- }
- }
- </script>
- <style lang="less">
- .noticeDetail-modal{
- .ant-modal-body {
- padding: 40px 40px 24px;
- }
- .ant-descriptions-item-label.ant-descriptions-item-colon{
- width: 90px;
- }
- .pic-box{
- width: 100px;
- height: 100px;
- margin-right: 10px;
- display: inline-flex;
- align-items: center;
- border: 1px dashed #d9d9d9;
- border-radius: 4px;
- padding: 3px;
- .productPic{
- cursor: pointer;
- max-width: 100%;
- max-height: 100%;
- display: block;
- margin: 0 auto;
- }
- }
- .editor-box{ // 编辑器基本样式初始化
- p{
- margin: 0;
- padding: 0;
- ul, li{
- list-style: none;
- padding: 0;
- margin: 0;
- }
- img{
- max-width: 100%;
- }
- }
- }
- .btn-cont {
- text-align: center;
- margin: 35px 0 10px;
- }
- .attachLink{
- display: inline-block;
- color: rgba(0, 0, 0);
- &:hover{
- text-decoration: underline;
- }
- }
- }
- </style>
|