detailModal.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. <template>
  2. <a-modal
  3. centered
  4. class="announcementDetail-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="公告详情"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. width="80%">
  11. <!-- 表单 -->
  12. <div v-if="detailsData">
  13. <a-descriptions bordered size="small" :column="2">
  14. <a-descriptions-item label="类别">{{ typeDictValue }}</a-descriptions-item>
  15. <a-descriptions-item label="可见性">{{ toAppNameDictValue }}</a-descriptions-item>
  16. <a-descriptions-item label="公告标题">{{ detailsData.title||'--' }}</a-descriptions-item>
  17. <a-descriptions-item label="发布时间">{{ detailsData.releaseDate||'--' }}</a-descriptions-item>
  18. <a-descriptions-item label="公告内容" :span="2">
  19. <div v-html="detailsData.content" class="editor-box"></div>
  20. </a-descriptions-item>
  21. <a-descriptions-item label="图片" :span="2">
  22. <div style="display: flex;">
  23. <p class="pic-box" v-for="(item,index) in imgPathsArr" :key="index">
  24. <img :src="item" title="点击查看大图" class="productPic" @click="getPreview(item)" />
  25. </p>
  26. </div>
  27. <span v-if="imgPathsArr.length == 0">--</span>
  28. </a-descriptions-item>
  29. <a-descriptions-item label="附件" :span="2">
  30. <p style="margin: 0 0 5px;" v-for="(item,index) in attachPathsArr" :key="index">
  31. <a :href="item.filePath" :download="item.fileName" class="attachLink">{{ item.fileName }}</a>
  32. </p>
  33. <span v-if="attachPathsArr.length == 0">--</span>
  34. </a-descriptions-item>
  35. </a-descriptions>
  36. <div class="btn-cont">
  37. <a-button id="announcementDetail-back" @click="isShow = false" style="margin-left: 15px;">关闭</a-button>
  38. </div>
  39. </div>
  40. <a-modal :visible="previewVisible" :footer="null" centered :maskClosable="false" @cancel="previewVisible=false">
  41. <img alt="example" style="width: 100%" :src="previewImage" />
  42. </a-modal>
  43. </a-modal>
  44. </template>
  45. <script>
  46. import { noticeDetail } from '@/api/notice'
  47. export default {
  48. name: 'AnnouncementDetailModal',
  49. props: {
  50. openModal: { // 弹框显示状态
  51. type: Boolean,
  52. default: false
  53. },
  54. itemId: {
  55. type: [Number, String],
  56. default: ''
  57. }
  58. },
  59. data () {
  60. return {
  61. isShow: this.openModal, // 是否打开弹框
  62. detailsData: null, // 详情数据
  63. previewVisible: false,
  64. previewImage: ''
  65. }
  66. },
  67. computed: {
  68. typeDictValue () { // 类别 数据字典name
  69. let str = ''
  70. if (this.detailsData.type == 'notity') {
  71. str = '公告'
  72. } else if (this.detailsData.type == 'news_company') {
  73. str = '企业新闻'
  74. } else if (this.detailsData.type == 'news_trade') {
  75. str = '行业咨询'
  76. } else {
  77. str = '--'
  78. }
  79. return str
  80. },
  81. toAppNameDictValue () { // 可见性 数据字典name
  82. let str = ''
  83. if (this.detailsData.toAppName == '1,2') {
  84. str = '所有'
  85. } else if (this.detailsData.toAppName == '2') {
  86. str = '经销商'
  87. } else if (this.detailsData.toAppName == '1') {
  88. str = '总部'
  89. } else {
  90. str = '--'
  91. }
  92. return str
  93. },
  94. imgPathsArr () { // 图片数组
  95. return this.detailsData.imgPaths ? this.detailsData.imgPaths.split(',') : []
  96. },
  97. attachPathsArr () { // 附件数组
  98. return this.detailsData.attachList ? this.detailsData.attachList : []
  99. }
  100. },
  101. methods: {
  102. // 获取详情
  103. getDetail () {
  104. noticeDetail({ id: this.itemId }).then(res => {
  105. if (res.status == 200) {
  106. this.detailsData = res.data
  107. } else {
  108. this.detailsData = null
  109. }
  110. })
  111. },
  112. // 查看大图
  113. getPreview (url) {
  114. this.previewImage = url
  115. this.previewVisible = true
  116. }
  117. },
  118. watch: {
  119. // 父页面传过来的弹框状态
  120. openModal (newValue, oldValue) {
  121. this.isShow = newValue
  122. },
  123. // 重定义的弹框状态
  124. isShow (newValue, oldValue) {
  125. if (!newValue) {
  126. this.$emit('close')
  127. }
  128. },
  129. itemId (newValue, oldValue) {
  130. if (this.isShow && newValue) {
  131. this.getDetail()
  132. }
  133. }
  134. }
  135. }
  136. </script>
  137. <style lang="less">
  138. .announcementDetail-modal{
  139. .ant-modal-body {
  140. padding: 40px 40px 24px;
  141. }
  142. .ant-descriptions-item-label.ant-descriptions-item-colon{
  143. width: 90px;
  144. }
  145. .pic-box{
  146. width: 100px;
  147. height: 100px;
  148. margin-right: 10px;
  149. display: inline-flex;
  150. align-items: center;
  151. border: 1px dashed #d9d9d9;
  152. border-radius: 4px;
  153. padding: 3px;
  154. .productPic{
  155. cursor: pointer;
  156. max-width: 100%;
  157. max-height: 100%;
  158. display: block;
  159. margin: 0 auto;
  160. }
  161. }
  162. .editor-box{ // 编辑器基本样式初始化
  163. p{
  164. margin: 0;
  165. padding: 0;
  166. ul, li{
  167. list-style: none;
  168. padding: 0;
  169. margin: 0;
  170. }
  171. img{
  172. max-width: 100%;
  173. }
  174. }
  175. }
  176. .btn-cont {
  177. text-align: center;
  178. margin: 35px 0 10px;
  179. }
  180. .attachLink{
  181. display: inline-block;
  182. color: rgba(0, 0, 0, 0.65);
  183. &:hover{
  184. text-decoration: underline;
  185. }
  186. }
  187. }
  188. </style>