index.vue 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369
  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="日志" />
  6. <view class="filter-group">
  7. <wk-base-filter
  8. ref="wkBaseFilter"
  9. :tabs="taskOptions"
  10. @filter="handleFilter" />
  11. </view>
  12. <wk-scroll-view
  13. :status="listStatus"
  14. class="list-scroll"
  15. @refresh="getList({}, true)"
  16. @loadmore="getList()">
  17. <view
  18. v-for="(item, index) in listData"
  19. :key="index"
  20. class="journal-item-wrapper">
  21. <journal-item
  22. :journal-data="item"
  23. show-read-more
  24. @comment="handleToCommand(index)"
  25. @read-more="handleReadMore"
  26. @update-data="data => handleUpdate(data, index)"
  27. @click="handleToDetail(item)" />
  28. </view>
  29. </wk-scroll-view>
  30. <wk-drag-button
  31. @click="handleAdd">
  32. <view class="wk-drag-btn">
  33. <text class="wk wk-plus icon" />
  34. </view>
  35. </wk-drag-button>
  36. <uni-popup
  37. ref="popup"
  38. radius="10rpx 10rpx 0 0"
  39. type="actionsheet">
  40. <wk-action-sheet
  41. :list="logTypeOptions"
  42. label="label"
  43. value="value"
  44. @select="handleCommand" />
  45. </uni-popup>
  46. <uni-popup
  47. ref="commentPopup"
  48. radius="20rpx 20rpx 0 0"
  49. type="bottom"
  50. @click.stop>
  51. <comment-popup
  52. v-if="activeItem && activeCommandData"
  53. :journal-data="activeItem"
  54. :reply-data="activeCommandData"
  55. @update="handleUpdateComment"
  56. @close="handleCloseCommentPopup" />
  57. </uni-popup>
  58. </view>
  59. </view>
  60. </template>
  61. <script>
  62. import { QueryList } from 'API/oa/journal'
  63. import { QueryCommentList } from 'API/oa/comment'
  64. import CommentPopup from './component/commentPopup.vue'
  65. import JournalItem from './component/journalItem.vue'
  66. import mainListMixins from '@/mixins/mainList.js'
  67. export default {
  68. name: 'JournalIndex',
  69. components: {
  70. JournalItem,
  71. CommentPopup
  72. },
  73. mixins: [mainListMixins],
  74. data() {
  75. return {
  76. GetListFn: QueryList,
  77. filterData: {
  78. by: 1,
  79. type: 'recent30'
  80. },
  81. taskOptions: [
  82. {
  83. label: '类型',
  84. field: 'by',
  85. value: 1,
  86. valueData: 1,
  87. options: [
  88. {label: '全部', value: '__delete__'},
  89. {label: '我发出的', value: 1},
  90. {label: '我收到的', value: 2}
  91. ]
  92. },
  93. // {
  94. // label: '成员',
  95. // field: 'userAndDept',
  96. // value: 0,
  97. // valueData: 0,
  98. // options: [
  99. // {label: '全部成员', value: 0 },
  100. // {label: '员工与部门', value: 1, showMoreIcon: true },
  101. // ]
  102. // },
  103. {
  104. label: '时间',
  105. field: 'type',
  106. value: 'recent30',
  107. valueData: 4,
  108. options: [
  109. {label: '今天', value: 'today'},
  110. {label: '昨天', value: 'yesterday'},
  111. {label: '本周', value: 'week'},
  112. {label: '上周', value: 'lastWeek'},
  113. {label: '最近30天', value: 'recent30'},
  114. {label: '最近60天', value: 'recent60'},
  115. {label: '本月', value: 'month'},
  116. {label: '上月', value: 'lastMonth'},
  117. {label: '本年', value: 'year'},
  118. {label: '去年', value: 'lastYear'},
  119. ]
  120. },
  121. ],
  122. filterCloseFn: null,
  123. logTypeOptions: [
  124. { label: '新增日报', value: 1 },
  125. { label: '新增周报', value: 2 },
  126. { label: '新增月报', value: 3 },
  127. ],
  128. activeItem: null,
  129. activeIndex: null,
  130. activeCommandData: null,
  131. refreshPage: false // 刷新页面标志
  132. }
  133. },
  134. onShow() {
  135. if (this.refreshPage) {
  136. this.$nextTick(function() {
  137. this.refreshPage = false
  138. this.getList({}, true)
  139. })
  140. }
  141. },
  142. onLoad(options) {
  143. if (options.by) {
  144. const val = Number(options.by)
  145. if (!isNaN(val)) {
  146. const findIndex = this.taskOptions[0].options.findIndex(o => o.value === val)
  147. if (findIndex !== -1) {
  148. this.taskOptions[0].valueData = findIndex
  149. this.taskOptions[0].value = val
  150. this.filterData.by = val
  151. }
  152. }
  153. }
  154. this.getList()
  155. },
  156. created() {
  157. this.guid = this.$guid()
  158. },
  159. methods: {
  160. getParams() {
  161. let params = {}
  162. if (this.filterData.by) {
  163. params.by = this.filterData.by
  164. params.deptIds = []
  165. switch (this.filterData.by) {
  166. case '__delete__':
  167. params.createUserId = ''
  168. delete params.by
  169. // delete params.createUserId
  170. delete this.listParams.by
  171. break;
  172. case 1:
  173. params.createUserId = ''
  174. break;
  175. case 2:
  176. params.createUserId = ''
  177. break;
  178. }
  179. }
  180. if (
  181. this.filterData.userAndDept === 1 &&
  182. this.filterData.userAndDeptVal &&
  183. this.filterData.by != 1
  184. ) {
  185. const userList = this.filterData.userAndDeptVal.userList || []
  186. const deptList = this.filterData.userAndDeptVal.deptList || []
  187. if (userList.length > 0) {
  188. params.createUserId = userList.map(o => o.userId).join(',')
  189. }
  190. if (deptList.length > 0) {
  191. params.deptIds = deptList.map(o => o.deptId)
  192. }
  193. }
  194. params.type = this.filterData.type
  195. // console.log('ffff', this.filterData)
  196. // console.log('params', params)
  197. return params
  198. },
  199. handleFilter(item, tabIndex, tabs, callback) {
  200. // console.log('filter item', item)
  201. this.filterData[item.field] = item.value
  202. const findIndex = this.taskOptions.findIndex(o => o.field === 'userAndDept')
  203. if (this.filterData.by == 1) {
  204. if (findIndex !== -1) {
  205. this.taskOptions.splice(findIndex, 1)
  206. delete this.listParams.by
  207. }
  208. } else {
  209. if (findIndex === -1) {
  210. this.taskOptions.splice(1, 0, {
  211. label: '成员',
  212. field: 'userAndDept',
  213. value: 0,
  214. valueData: 0,
  215. options: [
  216. {label: '全部成员', value: 0 },
  217. {label: '员工与部门', value: 1, showMoreIcon: true },
  218. ]
  219. })
  220. }
  221. }
  222. this.$nextTick(function() {
  223. this.$refs.wkBaseFilter.setDefault(this.filterData)
  224. })
  225. if (item.field === 'userAndDept' && item.value === 1) {
  226. getApp().globalData.selectedValBridge.userAndDept = {
  227. guid: this.guid,
  228. defaultVal: this.filterData.userAndDeptVal || {}
  229. }
  230. uni.$on('selected-user-and-dept', this.selectUserAndDept)
  231. this.$Router.navigateTo({
  232. url: '/pages_common/selectList/userAndDept'
  233. })
  234. if (callback) {
  235. this.filterCloseFn = callback
  236. }
  237. } else {
  238. this.getList({}, true)
  239. }
  240. },
  241. selectUserAndDept(data) {
  242. if (data.guid === this.guid) {
  243. this.filterData.userAndDeptVal = data.data
  244. uni.$off('selected-user-and-dept')
  245. if (this.filterCloseFn) {
  246. this.filterCloseFn()
  247. }
  248. this.getList({}, true)
  249. }
  250. },
  251. handleUpdate(data, index) {
  252. // 修复小程序在切换点赞状态后不会刷新数据问题
  253. this.$set(this.listData, index, data)
  254. },
  255. handleToCommand(index) {
  256. this.activeItem = this.listData[index]
  257. this.activeIndex = index
  258. QueryCommentList({
  259. typeId: this.activeItem.logId,
  260. type: 2
  261. }).then(res => {
  262. this.activeCommandData = res || []
  263. }).catch(() => {})
  264. this.$refs.commentPopup.open()
  265. },
  266. handleUpdateComment() {
  267. const num = this.activeItem.replyNum
  268. this.activeItem.replyNum = 0
  269. this.$nextTick(function() {
  270. this.activeItem.replyNum = Number(num) + 1
  271. QueryCommentList({
  272. typeId: this.activeItem.logId,
  273. type: 2
  274. }).then(res => {
  275. this.activeCommandData = res || []
  276. }).catch(() => {})
  277. this.handleUpdate(this.activeItem, this.activeIndex)
  278. })
  279. },
  280. handleCloseCommentPopup() {
  281. this.$refs.commentPopup.close()
  282. },
  283. /**
  284. * 查看日志详情
  285. * @param data
  286. */
  287. handleToDetail(data) {
  288. this.$Router.navigateTo({
  289. url: '/pages_log/detail',
  290. query: {
  291. id: data.logId
  292. }
  293. })
  294. },
  295. /**
  296. * 查看以往日志
  297. */
  298. handleReadMore(data) {
  299. this.$Router.navigateTo({
  300. url: '/pages_log/list',
  301. query: {
  302. userId: data.createUserId,
  303. title: data.realname + '的日志'
  304. }
  305. })
  306. },
  307. handleAdd() {
  308. this.$refs.popup.open()
  309. },
  310. handleCommand(index, command, next) {
  311. next()
  312. this.$Router.navigateTo({
  313. url: '/pages_log/add',
  314. query: {
  315. type: command.value
  316. }
  317. })
  318. }
  319. }
  320. }
  321. </script>
  322. <style scoped lang="scss">
  323. .main-container {
  324. display: flex;
  325. flex-direction: column;
  326. overflow: hidden;
  327. .list-scroll {
  328. flex: 1;
  329. overflow: hidden;
  330. .journal-item-wrapper {
  331. margin-bottom: 15rpx;
  332. }
  333. }
  334. }
  335. </style>