list.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. <template>
  2. <a-card size="small" :bordered="false" class="noticeList-wrap">
  3. <!-- 搜索条件 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline" @keyup.enter.native="handelSearch(1)">
  6. <a-row :gutter="15">
  7. <a-col :md="6" :sm="24">
  8. <a-form-item label="发布时间">
  9. <a-range-picker
  10. style="width:100%"
  11. id="noticeList-creatTime"
  12. :disabledDate="disabledDate"
  13. v-model="time"
  14. :format="dateFormat"
  15. :placeholder="['开始时间', '结束时间']" />
  16. </a-form-item>
  17. </a-form-item>
  18. </a-col>
  19. <a-col :md="6" :sm="24">
  20. <a-form-item label="公告名称">
  21. <a-input id="noticeList-title" v-model.trim="queryParam.notice.title" allowClear placeholder="请输入公告名称"/>
  22. </a-form-item>
  23. </a-col>
  24. <a-col :md="6" :sm="24">
  25. <a-button type="primary" @click="handelSearch(1)" :disabled="disabled" id="noticeList-refresh">查询</a-button>
  26. <a-button style="margin-left: 8px" @click="resetSearchForm" :disabled="disabled" id="noticeList-reset">重置</a-button>
  27. </a-col>
  28. </a-row>
  29. </a-form>
  30. </div>
  31. <!-- 列表 -->
  32. <a-table
  33. class="sTable"
  34. ref="table"
  35. size="default"
  36. :rowKey="(record) => record.id"
  37. :columns="columns"
  38. :dataSource="loadData"
  39. :loading="listLoading"
  40. :pagination="paginationProps"
  41. bordered>
  42. <!-- 操作 -->
  43. <template slot="action" slot-scope="text, record">
  44. <a-badge :count="record.readFlag=='0'? 1 : 0" dot>
  45. <a-button size="small" type="primary" class="button-success" @click="handleDetail(record)" id="noticeList-detail-btn">详情</a-button>
  46. </a-badge>
  47. </template>
  48. </a-table>
  49. <!-- 公告详情 -->
  50. <notice-detail-modal :openModal="openModal" :itemId="itemId" @close="closeModal" />
  51. </a-card>
  52. </template>
  53. <script>
  54. import moment from 'moment'
  55. import { STable } from '@/components'
  56. import { mapActions } from 'vuex'
  57. import noticeDetailModal from './detailModal.vue'
  58. export default {
  59. components: { STable, noticeDetailModal },
  60. data () {
  61. return {
  62. queryParam: { // 查询条件
  63. notice: {
  64. title: ''
  65. }
  66. },
  67. disabled: false, // 查询、重置按钮是否可操作
  68. dateFormat: 'YYYY-MM-DD',
  69. time: [], // 创建时间
  70. columns: [
  71. { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
  72. { title: '发布时间', dataIndex: 'realseDate', align: 'center', customRender: function (text) { return text || '--' } },
  73. { title: '公告名称', dataIndex: 'notice.title', align: 'center', customRender: function (text) { return text || '--' } },
  74. { title: '操作', scopedSlots: { customRender: 'action' }, width: 200, align: 'center' }
  75. ],
  76. loadData: [],
  77. pageNo: 1, // 分页页码
  78. pageSize: 10, // 分页 每页多少条
  79. paginationProps: {
  80. showSizeChanger: true, // 是否可以改变 pageSize
  81. total: 0, // 分页总条数
  82. current: 1,
  83. onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize),
  84. onChange: (current) => this.changePage(current)
  85. },
  86. listLoading: false,
  87. openModal: false, // 查看客户详情 弹框
  88. itemId: '' // 当前id
  89. }
  90. },
  91. computed: {
  92. // 接受到ws消息
  93. wsMessage () {
  94. return this.$store.getters.wsMessageData()
  95. }
  96. },
  97. watch: {
  98. // 监听ws消息通知
  99. wsMessage (a, b) {
  100. if (a !== b && a) {
  101. // 新未读消息
  102. if (a.type == 'no_read_count') {
  103. this.resetSearchForm()
  104. }
  105. }
  106. }
  107. },
  108. methods: {
  109. ...mapActions([
  110. 'getMessageList', // 查询列表
  111. 'hasRead' // 设置已读
  112. ]),
  113. // 不可选日期
  114. disabledDate (date, dateStrings) {
  115. return date && date.valueOf() > Date.now()
  116. },
  117. // 查询列表
  118. handelSearch (pageNo) {
  119. this.pageNo = pageNo || this.pageNo
  120. this.disabled = true
  121. // 创建时间
  122. if (this.time && this.time.length > 0) {
  123. this.queryParam.beginDate = moment(this.time[0]).format(this.dateFormat)
  124. this.queryParam.endDate = moment(this.time[1]).format(this.dateFormat)
  125. } else {
  126. this.queryParam.beginDate = undefined
  127. this.queryParam.endDate = undefined
  128. }
  129. const params = {
  130. pageNo: this.pageNo,
  131. pageSize: this.pageSize,
  132. notice: {
  133. title: this.queryParam.notice.title
  134. },
  135. beginDate: this.queryParam.beginDate,
  136. endDate: this.queryParam.endDate
  137. }
  138. // 开始查询
  139. this.listLoading = true
  140. this.getMessageList(params).then((res) => {
  141. this.listLoading = false
  142. if (res.status == 200) {
  143. const data = res.data
  144. this.paginationProps.total = Number(res.data.count) || 0
  145. this.paginationProps.current = data.pageNo
  146. const no = (data.pageNo - 1) * data.pageSize
  147. for (var i = 0; i < data.list.length; i++) {
  148. data.list[i].no = no + i + 1
  149. }
  150. this.loadData = data.list
  151. this.disabled = false
  152. } else {
  153. this.paginationProps.total = 0
  154. this.paginationProps.current = 1
  155. this.loadData = []
  156. }
  157. })
  158. },
  159. // 分页 一页多少条change
  160. changePageSize (current, pageSize) {
  161. this.pageNo = current
  162. this.pageSize = pageSize
  163. this.handelSearch()
  164. },
  165. // 分页 页码change
  166. changePage (current) {
  167. this.pageNo = current
  168. this.handelSearch()
  169. },
  170. // 重置
  171. resetSearchForm () {
  172. this.queryParam.notice.title = undefined
  173. this.time = []
  174. this.pageNo = 1
  175. this.pageSize = 10
  176. this.paginationProps.total = 0
  177. this.paginationProps.current = 1
  178. this.handelSearch(1)
  179. },
  180. // 详情
  181. handleDetail (row) {
  182. this.itemId = row.notice.id
  183. this.openModal = true
  184. // 设置已读
  185. if (row.readFlag == '0') {
  186. this.hasRead({ msg_id: row.id }).then(res => {
  187. // 刷新列表
  188. if (res.status == 200) {
  189. this.handelSearch()
  190. }
  191. })
  192. }
  193. },
  194. // 关闭弹框
  195. closeModal () {
  196. this.itemId = ''
  197. this.openModal = false
  198. }
  199. },
  200. beforeRouteEnter (to, from, next) {
  201. next(vm => {
  202. vm.openModal = false
  203. vm.handelSearch(1)
  204. })
  205. }
  206. }
  207. </script>