|
@@ -1,24 +1,50 @@
|
|
|
<template>
|
|
|
<a-modal
|
|
|
centered
|
|
|
- class="customerManagementDetail-modal"
|
|
|
+ class="noticeDetail-modal"
|
|
|
:footer="null"
|
|
|
:maskClosable="false"
|
|
|
- title="详情"
|
|
|
+ title="公告详情"
|
|
|
v-model="isShow"
|
|
|
@cancle="isShow=false"
|
|
|
width="80%">
|
|
|
- <!-- 客户详情 -->
|
|
|
- <div>
|
|
|
- <div>公告内容</div>
|
|
|
- <div class="btn-cont"><a-button id="customer-management-detail-modal-back" @click="isShow = false">返回列表</a-button></div>
|
|
|
+ <div v-if="detailsData">
|
|
|
+ <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.title||'--' }}</a-descriptions-item>
|
|
|
+ <a-descriptions-item label="发布时间">{{ detailsData.releaseDate||'--' }}</a-descriptions-item>
|
|
|
+ <a-descriptions-item label="公告内容" :span="2">
|
|
|
+ <div v-html="detailsData.content" class="editor-box"></div>
|
|
|
+ </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 { custFindById } from '@/api/customer'
|
|
|
+import { noticeUserDetail } from '@/api/noticeUser'
|
|
|
export default {
|
|
|
name: 'NoticeDetailModal',
|
|
|
components: { STable },
|
|
@@ -33,32 +59,62 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- // 地址处理
|
|
|
- addressStr () {
|
|
|
- const provinceName = this.detailData.provinceName ? this.detailData.provinceName : ''
|
|
|
- const cityName = this.detailData.cityName ? this.detailData.cityName : ''
|
|
|
- const countyName = this.detailData.countyName ? this.detailData.countyName : ''
|
|
|
- const customerAddr = this.detailData.customerAddr ? this.detailData.customerAddr : ''
|
|
|
- const str = (provinceName || cityName || countyName || customerAddr) ? (provinceName + cityName + countyName + customerAddr) : '--'
|
|
|
+ typeDictValue () { // 类别 数据字典name
|
|
|
+ let str = ''
|
|
|
+ if (this.detailsData.type == 'notity') {
|
|
|
+ str = '公告'
|
|
|
+ } else if (this.detailsData.type == 'news_company') {
|
|
|
+ str = '企业新闻'
|
|
|
+ } else if (this.detailsData.type == 'news_trade') {
|
|
|
+ str = '行业咨询'
|
|
|
+ } else {
|
|
|
+ str = '--'
|
|
|
+ }
|
|
|
+ return str
|
|
|
+ },
|
|
|
+ toAppNameDictValue () { // 可见性 数据字典name
|
|
|
+ let str = ''
|
|
|
+ if (this.detailsData.toAppName == '1,2') {
|
|
|
+ str = '所有'
|
|
|
+ } else if (this.detailsData.toAppName == '2') {
|
|
|
+ str = '经销商'
|
|
|
+ } else if (this.detailsData.toAppName == '1') {
|
|
|
+ str = '总部'
|
|
|
+ } else {
|
|
|
+ str = '--'
|
|
|
+ }
|
|
|
return str
|
|
|
+ },
|
|
|
+ imgPathsArr () { // 图片数组
|
|
|
+ return this.detailsData.imgPaths ? this.detailsData.imgPaths.split(',') : []
|
|
|
+ },
|
|
|
+ attachPathsArr () { // 附件数组
|
|
|
+ return this.detailsData.attachList ? this.detailsData.attachList : []
|
|
|
}
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
isShow: this.openModal, // 是否打开弹框
|
|
|
- detailData: null // 网点数据
|
|
|
+ detailsData: null, // 详情数据
|
|
|
+ previewVisible: false,
|
|
|
+ previewImage: ''
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
// 获取详情
|
|
|
getDetail () {
|
|
|
- custFindById({ id: this.itemId }).then(res => {
|
|
|
+ noticeUserDetail({ id: this.itemId }).then(res => {
|
|
|
if (res.status == 200) {
|
|
|
- this.detailData = res.data
|
|
|
+ this.detailsData = res.data
|
|
|
} else {
|
|
|
- this.detailData = null
|
|
|
+ this.detailsData = null
|
|
|
}
|
|
|
})
|
|
|
+ },
|
|
|
+ // 查看大图
|
|
|
+ getPreview (url) {
|
|
|
+ this.previewImage = url
|
|
|
+ this.previewVisible = true
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -83,27 +139,54 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
- .customerManagementDetail-modal{
|
|
|
+ .noticeDetail-modal{
|
|
|
.ant-modal-body {
|
|
|
- padding: 40px 40px 24px;
|
|
|
+ padding: 40px 40px 24px;
|
|
|
}
|
|
|
- .item-cont {
|
|
|
- margin-bottom: 15px;
|
|
|
- display: flex;
|
|
|
- .item-label {
|
|
|
- width: 115px;
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(0, 0, 0, 0.85);
|
|
|
- flex-shrink: 0;
|
|
|
+ .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;
|
|
|
}
|
|
|
- .item-main {
|
|
|
- flex-grow: 1;
|
|
|
- word-break: break-all;
|
|
|
+ }
|
|
|
+ .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, 0.65);
|
|
|
+ &:hover{
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|