list.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <template>
  2. <view class="uni-app">
  3. <view class="status-bar" />
  4. <view v-if="!refreshPage" class="main-container">
  5. <wk-nav-bar :title="navTitle" />
  6. <view class="filter-group">
  7. <wk-base-filter :tabs="taskOptions" @filter="handleFilter" />
  8. </view>
  9. <wk-scroll-view
  10. :status="listStatus"
  11. class="list-scroll"
  12. @refresh="getList({}, true)"
  13. @loadmore="getList()">
  14. <view
  15. v-for="(item, index) in listData"
  16. :key="index" class="journal-item-wrapper">
  17. <journal-item
  18. :journal-data="item"
  19. @comment="handleToCommand(index)"
  20. @update-data="data => handleUpdate(data, index)"
  21. @click="handleToDetail(item)" />
  22. </view>
  23. </wk-scroll-view>
  24. </view>
  25. <uni-popup
  26. ref="commentPopup"
  27. radius="20rpx 20rpx 0 0"
  28. type="bottom"
  29. @click.stop>
  30. <comment-popup
  31. v-if="activeItem && activeCommandData"
  32. :journal-data="activeItem"
  33. :reply-data="activeCommandData"
  34. @update="handleUpdateComment"
  35. @close="handleCloseCommentPopup" />
  36. </uni-popup>
  37. </view>
  38. </template>
  39. <script>
  40. import { QueryList } from 'API/oa/journal'
  41. import { QueryCommentList } from 'API/oa/comment'
  42. import CommentPopup from './component/commentPopup.vue'
  43. import JournalItem from './component/journalItem.vue'
  44. import mainListMixins from '@/mixins/mainList.js'
  45. export default {
  46. name: 'LogList',
  47. components: {
  48. JournalItem,
  49. CommentPopup
  50. },
  51. mixins: [mainListMixins],
  52. data() {
  53. return {
  54. GetListFn: QueryList,
  55. taskOptions: [
  56. {
  57. label: '类型',
  58. field: 'by',
  59. value: 1,
  60. valueData: 1,
  61. options: [
  62. {label: '全部', value: '__delete__'},
  63. {label: '我发出的', value: 1},
  64. {label: '我收到的', value: 2}
  65. ]
  66. },
  67. {
  68. label: '时间',
  69. field: 'type',
  70. value: 'recent30',
  71. valueData: 4,
  72. options: [
  73. {label: '今天', value: 'today'},
  74. {label: '昨天', value: 'yesterday'},
  75. {label: '本周', value: 'week'},
  76. {label: '上周', value: 'lastWeek'},
  77. {label: '最近30天', value: 'recent30'},
  78. {label: '最近60天', value: 'recent60'},
  79. {label: '本月', value: 'month'},
  80. {label: '上月', value: 'lastMonth'},
  81. {label: '本年', value: 'year'},
  82. {label: '去年', value: 'lastYear'},
  83. ]
  84. },
  85. ],
  86. filterData: {
  87. by: 1,
  88. type: 'recent30'
  89. },
  90. activeItem: null,
  91. activeIndex: null,
  92. activeCommandData: null,
  93. routerQuery: {},
  94. refreshPage: false // 刷新页面标志
  95. }
  96. },
  97. computed: {
  98. navTitle() {
  99. return this.routerQuery.title || '日志'
  100. }
  101. },
  102. onLoad(options) {
  103. this.routerQuery = options
  104. },
  105. onShow() {
  106. if (this.refreshPage) {
  107. this.$nextTick(function() {
  108. this.refreshPage = false
  109. this.getList({}, true)
  110. })
  111. }
  112. },
  113. mounted() {
  114. this.getList()
  115. },
  116. methods: {
  117. getParams() {
  118. this.filterData.createUserId = this.routerQuery.userId
  119. if (this.filterData.by && this.filterData.by === '__delete__') {
  120. delete this.filterData.by
  121. delete this.listParams.by
  122. }
  123. return this.filterData
  124. },
  125. handleFilter(item) {
  126. this.filterData[item.field] = item.value
  127. this.getList({}, true)
  128. },
  129. handleUpdate(data, index) {
  130. this.$set(this.listData, index, data)
  131. },
  132. handleToCommand(index) {
  133. this.activeItem = this.listData[index]
  134. this.activeIndex = index
  135. QueryCommentList({
  136. typeId: this.activeItem.logId,
  137. type: 2
  138. }).then(res => {
  139. this.activeCommandData = res || []
  140. }).catch(() => {})
  141. this.$refs.commentPopup.open()
  142. },
  143. handleUpdateComment() {
  144. const num = this.activeItem.replyNum
  145. this.activeItem.replyNum = 0
  146. this.$nextTick(function() {
  147. this.activeItem.replyNum = num + 1
  148. QueryCommentList({
  149. typeId: this.activeItem.logId,
  150. type: 2
  151. }).then(res => {
  152. this.activeCommandData = res || []
  153. }).catch(() => {})
  154. this.handleUpdate(this.activeItem, this.activeIndex)
  155. })
  156. },
  157. handleCloseCommentPopup() {
  158. this.$refs.commentPopup.close()
  159. },
  160. /**
  161. * 查看日志详情
  162. * @param data
  163. */
  164. handleToDetail(data) {
  165. this.$Router.navigateTo({
  166. url: '/pages_log/detail',
  167. query: {
  168. id: data.logId
  169. }
  170. })
  171. }
  172. }
  173. }
  174. </script>
  175. <style scoped lang="scss">
  176. .main-container {
  177. display: flex;
  178. flex-direction: column;
  179. overflow: hidden;
  180. .list-scroll {
  181. flex: 1;
  182. padding-bottom: 20rpx;
  183. overflow: hidden;
  184. .journal-item-wrapper {
  185. margin-bottom: 15rpx;
  186. }
  187. }
  188. }
  189. </style>