announcement.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <!-- 订单 -->
  2. <template>
  3. <div class="order">
  4. <el-form :inline="true" :model="dataForm" @keyup.enter.native="queryData()">
  5. <el-form-item label="标题">
  6. <el-input v-model="dataForm.title" clearable/>
  7. </el-form-item>
  8. <el-form-item>
  9. <el-button @click="queryData()">查询</el-button>
  10. </el-form-item>
  11. </el-form>
  12. <el-table
  13. :data="dataList"
  14. border
  15. v-loading="dataListLoading"
  16. @selection-change="selectionChangeHandle"
  17. style="width: 100%;">
  18. <el-table-column
  19. label="序号"
  20. type="index"
  21. width="50"
  22. align="center">
  23. </el-table-column>
  24. <el-table-column
  25. prop="title"
  26. header-align="center"
  27. align="center"
  28. width="180"
  29. :show-tooltip-when-overflow="true"
  30. label="公告主题名称">
  31. </el-table-column>
  32. <el-table-column
  33. prop="levelName"
  34. header-align="center"
  35. align="center"
  36. label="级别">
  37. </el-table-column>
  38. <el-table-column
  39. prop="content"
  40. header-align="center"
  41. align="center"
  42. width="200"
  43. :show-tooltip-when-overflow="true"
  44. label="公告内容">
  45. </el-table-column>
  46. <el-table-column
  47. prop="attachList"
  48. header-align="center"
  49. align="center"
  50. min-width="200"
  51. label="附件">
  52. <template slot-scope="scope">
  53. <a v-for="(item, index) in scope.row.attachList" :key="item.fileName + index" type="primary" :href="downloadUrl + item.url" target="_blank">{{ item.fileName }}</a>
  54. </template>
  55. </el-table-column>
  56. <el-table-column
  57. prop="isRead"
  58. header-align="center"
  59. align="center"
  60. label="是否已读">
  61. <template slot-scope="scope">
  62. <span v-if="scope.row.isRead === 0">未读</span>
  63. <span v-else>已读</span>
  64. </template>
  65. </el-table-column>
  66. <el-table-column
  67. prop="publisherName"
  68. header-align="center"
  69. align="center"
  70. label="发布人">
  71. </el-table-column>
  72. <el-table-column
  73. prop="createTime"
  74. header-align="center"
  75. align="center"
  76. width="160"
  77. label="发布时间">
  78. </el-table-column>
  79. <el-table-column
  80. prop="notes"
  81. header-align="center"
  82. align="center"
  83. width="200"
  84. :show-tooltip-when-overflow="true"
  85. label="备注">
  86. </el-table-column>
  87. <el-table-column
  88. fixed="right"
  89. header-align="center"
  90. align="center"
  91. width="150"
  92. label="操作">
  93. <template slot-scope="scope">
  94. <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.noticeId, false)">查看</el-button>
  95. </template>
  96. </el-table-column>
  97. </el-table>
  98. <el-pagination
  99. @size-change="sizeChangeHandle"
  100. @current-change="currentChangeHandle"
  101. :current-page="pageIndex"
  102. :page-sizes="[10, 20, 50, 100]"
  103. :page-size="pageSize"
  104. :total="totalPage"
  105. layout="total, sizes, prev, pager, next, jumper">
  106. </el-pagination>
  107. <!-- 弹窗,详情 -->
  108. <detail v-if="addOrUpdateVisible" ref="addOrUpdate"></detail>
  109. </div>
  110. </template>
  111. <script>
  112. import Detail from './announcement-detail'
  113. import { getAnnouncementList } from '@/api/msg'
  114. import { getCusList } from '@/api/cus'
  115. import { downloadUrl } from '@/api/file'
  116. export default {
  117. name: 'announcement',
  118. components: {
  119. Detail
  120. },
  121. created () {
  122. this.optionsState = this.$store.state.common.approveStates
  123. this.queryData()
  124. },
  125. data () {
  126. return {
  127. addOrUpdateVisible: false,
  128. dataForm: {},
  129. dataList: [],
  130. pageIndex: 1,
  131. pageSize: 10,
  132. totalPage: 0,
  133. downloadUrl: downloadUrl,
  134. dataListLoading: false,
  135. dataListSelections: [],
  136. optionsState: [],
  137. optionsCustomer: []
  138. }
  139. },
  140. methods: {
  141. // 查询
  142. queryData () {
  143. this.pageIndex = 1
  144. this.getAnnouncementList()
  145. },
  146. // 获取数据列表
  147. getAnnouncementList () {
  148. this.dataListLoading = true
  149. let params = {
  150. 'current': this.pageIndex,
  151. 'size': this.pageSize,
  152. 'createTime': this.dataForm.createTime ? this.dataForm.createTime : null,
  153. 'state': this.dataForm.state ? this.dataForm.state : null
  154. }
  155. getAnnouncementList(params).then(({data}) => {
  156. if (data && data.code === '200') {
  157. this.dataList = data.data.records
  158. this.totalPage = Number(data.data.total)
  159. } else {
  160. this.dataList = []
  161. this.totalPage = 0
  162. }
  163. this.dataListLoading = false
  164. })
  165. },
  166. // 每页数
  167. sizeChangeHandle (val) {
  168. this.pageSize = val
  169. this.pageIndex = 1
  170. this.getAnnouncementList()
  171. },
  172. // 当前页
  173. currentChangeHandle (val) {
  174. this.pageIndex = val
  175. this.getAnnouncementList()
  176. },
  177. // 多选
  178. selectionChangeHandle (val) {
  179. this.dataListSelections = val
  180. },
  181. // 远程方法:获取客户列表
  182. async remoteCustomer (query) {
  183. if (!query) {
  184. query = ''
  185. }
  186. await getCusList({'customerName': query}).then(({data}) => {
  187. if (data && data.code === '200') {
  188. this.optionsCustomer = []
  189. data.data.records.forEach((item) => {
  190. this.optionsCustomer.push({
  191. code: item.customerId,
  192. value: item.customerName
  193. })
  194. })
  195. }
  196. })
  197. },
  198. // 新增 / 修改
  199. addOrUpdateHandle (id, disable) {
  200. this.addOrUpdateVisible = true
  201. this.$nextTick(() => {
  202. this.$refs.addOrUpdate.init(id)
  203. })
  204. }
  205. }
  206. }
  207. </script>
  208. <style scoped>
  209. </style>