detailModal.vue 5.6 KB

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