announcement.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. <!-- 订单 -->
  2. <template>
  3. <div class="order">
  4. <template v-if="!addOrUpdateVisible">
  5. <el-form :inline="true" :model="dataForm" @keyup.enter.native="queryData()">
  6. <el-form-item label="通知类型">
  7. <el-select
  8. v-model="dataForm.type"
  9. placeholder="请选择">
  10. <el-option
  11. v-for="item in optionsType"
  12. :key="item.code"
  13. :label="item.value"
  14. :value="item.code">
  15. </el-option>
  16. </el-select>
  17. </el-form-item>
  18. <el-form-item label="标题">
  19. <el-input v-model="dataForm.title" clearable/>
  20. </el-form-item>
  21. <el-form-item>
  22. <el-button @click="queryData()">查询</el-button>
  23. </el-form-item>
  24. </el-form>
  25. <el-table
  26. :data="dataList"
  27. border
  28. v-loading="dataListLoading"
  29. @selection-change="selectionChangeHandle"
  30. style="width: 100%;">
  31. <el-table-column
  32. label="序号"
  33. type="index"
  34. width="50"
  35. align="center">
  36. </el-table-column>
  37. <el-table-column
  38. prop="title"
  39. header-align="center"
  40. align="center"
  41. width="180"
  42. :show-tooltip-when-overflow="true"
  43. label="公告主题名称">
  44. </el-table-column>
  45. <el-table-column
  46. prop="levelName"
  47. header-align="center"
  48. align="center"
  49. label="级别">
  50. </el-table-column>
  51. <el-table-column
  52. prop="content"
  53. header-align="center"
  54. align="center"
  55. width="200"
  56. :show-tooltip-when-overflow="true"
  57. label="公告内容">
  58. </el-table-column>
  59. <el-table-column
  60. prop="attachList"
  61. header-align="center"
  62. align="center"
  63. min-width="200"
  64. label="附件">
  65. <template slot-scope="scope">
  66. <div v-for="(item, index) in scope.row.attachList" style="display: inline">
  67. <span v-if="index > 0">,</span>
  68. <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{ item.fileName }}</a>
  69. </div>
  70. </template>
  71. </el-table-column>
  72. <el-table-column
  73. prop="isRead"
  74. header-align="center"
  75. align="center"
  76. label="是否已读">
  77. <template slot-scope="scope">
  78. <span v-if="Number(scope.row.isRead) === 0" style="color: red">未读</span>
  79. <span v-else>已读</span>
  80. </template>
  81. </el-table-column>
  82. <el-table-column
  83. prop="publisherName"
  84. header-align="center"
  85. align="center"
  86. label="发布人">
  87. </el-table-column>
  88. <el-table-column
  89. prop="createTime"
  90. header-align="center"
  91. align="center"
  92. width="160"
  93. label="发布时间">
  94. </el-table-column>
  95. <el-table-column
  96. prop="notes"
  97. header-align="center"
  98. align="center"
  99. width="200"
  100. :show-tooltip-when-overflow="true"
  101. label="备注">
  102. </el-table-column>
  103. <el-table-column
  104. fixed="right"
  105. header-align="center"
  106. align="center"
  107. width="150"
  108. label="操作">
  109. <template slot-scope="scope">
  110. <el-button type="text" size="small" @click="detailHandle(scope.row)">查看</el-button>
  111. </template>
  112. </el-table-column>
  113. </el-table>
  114. <el-pagination
  115. @size-change="sizeChangeHandle"
  116. @current-change="currentChangeHandle"
  117. :current-page="pageIndex"
  118. :page-sizes="[10, 20, 50, 100]"
  119. :page-size="pageSize"
  120. :total="totalPage"
  121. layout="total, sizes, prev, pager, next, jumper">
  122. </el-pagination>
  123. </template>
  124. <!-- 弹窗,详情 -->
  125. <detail v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getAnnouncementList" @onChose="onChose"></detail>
  126. <!-- 文件预览 -->
  127. <preview-component v-if="previewVisible" ref="preview"/>
  128. </div>
  129. </template>
  130. <script>
  131. import Detail from './announcement-detail'
  132. import { getAnnouncementList } from '@/api/msg'
  133. import { getCusList } from '@/api/cus'
  134. import { downloadUrl } from '@/api/file'
  135. import {readNotice} from '@/utils/msg'
  136. import PreviewComponent from '../common/preview-component'
  137. export default {
  138. name: 'announcement',
  139. components: {
  140. PreviewComponent,
  141. Detail
  142. },
  143. created () {
  144. this.optionsState = this.$store.state.common.approveStates
  145. this.queryData()
  146. },
  147. computed: {
  148. // 监听消息ID
  149. listenNotice () {
  150. return this.$route.params.notice
  151. }
  152. },
  153. watch: {
  154. listenNotice: function (notice) {
  155. console.log('notice = ' + JSON.stringify(notice))
  156. if (!notice) return
  157. this.dataForm.noticeId = notice.noticeId
  158. this.dataForm.businessId = notice.businessId
  159. this.queryData()
  160. }
  161. },
  162. data () {
  163. return {
  164. addOrUpdateVisible: false,
  165. previewVisible: false,
  166. dataForm: {type: 1},
  167. optionsType: [
  168. {
  169. code: 1, value: '公告'
  170. },
  171. {
  172. code: 3, value: '业务更改通知'
  173. }
  174. ],
  175. dataList: [],
  176. pageIndex: 1,
  177. pageSize: 10,
  178. totalPage: 0,
  179. downloadUrl: downloadUrl,
  180. dataListLoading: false,
  181. dataListSelections: [],
  182. optionsState: [],
  183. optionsCustomer: []
  184. }
  185. },
  186. methods: {
  187. onChose () {
  188. this.addOrUpdateVisible = false
  189. },
  190. // 查询
  191. queryData () {
  192. this.pageIndex = 1
  193. this.getAnnouncementList()
  194. },
  195. // 获取数据列表
  196. getAnnouncementList () {
  197. this.dataList = []
  198. this.dataListLoading = true
  199. let params = {
  200. 'current': this.pageIndex,
  201. 'size': this.pageSize,
  202. 'createTime': this.dataForm.createTime ? this.dataForm.createTime : null,
  203. 'state': this.dataForm.state ? this.dataForm.state : null,
  204. 'businessId': this.dataForm.businessId ? this.dataForm.businessId : null,
  205. 'type': this.dataForm.type ? this.dataForm.type : 1
  206. }
  207. getAnnouncementList(params).then(({data}) => {
  208. if (data && data.code === '200') {
  209. this.dataList = data.data.records
  210. this.totalPage = Number(data.data.total)
  211. } else {
  212. this.dataList = []
  213. this.totalPage = 0
  214. }
  215. this.dataListLoading = false
  216. })
  217. },
  218. // 每页数
  219. sizeChangeHandle (val) {
  220. this.pageSize = val
  221. this.pageIndex = 1
  222. this.getAnnouncementList()
  223. },
  224. // 当前页
  225. currentChangeHandle (val) {
  226. this.pageIndex = val
  227. this.getAnnouncementList()
  228. },
  229. // 多选
  230. selectionChangeHandle (val) {
  231. this.dataListSelections = val
  232. },
  233. // 远程方法:获取客户列表
  234. async remoteCustomer (query) {
  235. if (!query) {
  236. query = ''
  237. }
  238. await getCusList({'customerName': query}).then(({data}) => {
  239. if (data && data.code === '200') {
  240. this.optionsCustomer = []
  241. data.data.records.forEach((item) => {
  242. this.optionsCustomer.push({
  243. code: item.customerId,
  244. value: item.customerName
  245. })
  246. })
  247. }
  248. })
  249. },
  250. // 详情
  251. detailHandle (row) {
  252. this.addOrUpdateVisible = true
  253. this.$nextTick(() => {
  254. this.$refs.addOrUpdate.init(row.noticeId)
  255. })
  256. if (row.noticeId) {
  257. readNotice(this, row.noticeId)
  258. }
  259. },
  260. // 预览
  261. previewFile (fileName, url) {
  262. this.previewVisible = true
  263. this.$nextTick(() => {
  264. this.$refs.preview.init(fileName, url)
  265. })
  266. }
  267. }
  268. }
  269. </script>
  270. <style scoped>
  271. </style>