message.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <template>
  2. <view>
  3. <cu-custom bgColor="bg-blue" backUrl="/pages/index/index?id=apps" :isBack="false">
  4. <block slot="content"> 消息</block>
  5. </cu-custom>
  6. <u-search :show-action="false" v-model="searchForm.title" @change="inputWord" margin="20rpx 50rpx"></u-search>
  7. <view>
  8. <u-swipe-action>
  9. <view
  10. v-for="(notify, index) in dataList"
  11. :key="index">
  12. <u-swipe-action-item @click="del(notify.id)" :key="notify.id" :threshold="60" duration="500"
  13. :options="[ {
  14. text: '删除',
  15. style: {
  16. backgroundColor: '#f56c6c'
  17. }
  18. }]">
  19. <u-cell-group>
  20. <u-cell @click="toDetail(notify)">
  21. <u-avatar slot="icon" icon="bell-fill" fontSize="22" randomBgColor></u-avatar>
  22. <view slot="title" class="content">
  23. <view class="text-bold text-grey">
  24. <view class="ellipsis-description">
  25. 标题:{{notify.title}}
  26. </view>
  27. </view>
  28. <view class="text-gray text-sm">
  29. <view class="ellipsis-description">
  30. 发布者:{{notify.createBy.name}}, {{notify.createTime}}
  31. </view>
  32. </view>
  33. <view class="text-sm">
  34. <view class="ellipsis-description">
  35. 内容:{{notify.content}}
  36. </view>
  37. </view>
  38. </view>
  39. <view slot="right-icon">
  40. <u-tag :text="$dictUtils.getDictLabel('oa_notify_read', notify.readFlag ,'')" v-if="notify.readFlag === '1'" plain shape="circle"></u-tag>
  41. <u-tag :text="$dictUtils.getDictLabel('oa_notify_read', notify.readFlag ,'')" v-else plain type="error" shape="circle"></u-tag>
  42. </view>
  43. </u-cell>
  44. </u-cell-group>
  45. </u-swipe-action-item>
  46. </view>
  47. </u-swipe-action>
  48. </view>
  49. <u-loadmore :status="status" @loadmore="loadmore" :line="true" />
  50. <u-gap height="100" bgColor="#fff"></u-gap>
  51. <u-back-top :scrollTop="0" mode="square"></u-back-top>
  52. </view>
  53. </template>
  54. <script>
  55. import notifyService from "@/api/notify/notifyService";
  56. export default {
  57. data() {
  58. return {
  59. status: 'loadmore',
  60. searchForm: {
  61. title: ''
  62. },
  63. dataList: [],
  64. tablePage: {
  65. pages: 0,
  66. currentPage: 0,
  67. pageSize: 10,
  68. orders: [{ column: "a.create_time", asc: false }],
  69. },
  70. loading: false,
  71. }
  72. },
  73. created() {
  74. this.loadmore()
  75. },
  76. methods: {
  77. // 跳转到详细页面
  78. toDetail (notify) {
  79. if(notify.status === '1'){
  80. uni.navigateTo({
  81. url: '/pages/apps/notification/notificationDetail?id='+notify.id
  82. })
  83. }else{
  84. this.toEdit(notify)
  85. }
  86. },
  87. toEdit (notify) {
  88. uni.navigateTo({
  89. url: '/pages/apps/notification/oaNotifyForm?id='+notify.id
  90. })
  91. },
  92. toAdd (){
  93. uni.navigateTo({
  94. url: '/pages/apps/notification/oaNotifyForm'
  95. })
  96. },
  97. // 输入监听
  98. inputWord(e){
  99. this.searchTimer && clearTimeout(this.searchTimer)
  100. this.searchTimer = setTimeout(()=>{
  101. this.doSearch()
  102. },300)
  103. },
  104. // 搜索
  105. doSearch(){
  106. this.dataList = [];
  107. this.tablePage.currentPage = 0;
  108. this.tablePage.pageSize = 10;
  109. this.tablePage.pages = 0;
  110. this.loadmore()
  111. },
  112. onReachBottom() {
  113. this.loadmore()
  114. },
  115. loadmore() {
  116. if(this.tablePage.currentPage!==0 && this.tablePage.pages <= this.tablePage.currentPage ) {
  117. this.status = 'nomore';
  118. return;
  119. }
  120. this.tablePage.currentPage = ++ this.tablePage.currentPage;
  121. //联网加载数据
  122. this.status = 'loading';
  123. notifyService.list({
  124. isSelf: true,
  125. current: this.tablePage.currentPage,
  126. size: this.tablePage.pageSize,
  127. orders: this.tablePage.orders,
  128. ...this.searchForm
  129. }).then((data)=>{
  130. //追加新数据
  131. this.dataList=this.dataList.concat(data.records);
  132. this.tablePage.pages = data.pages;
  133. if(this.tablePage.pages <= this.tablePage.currentPage){
  134. this.status = 'nomore'
  135. } else {
  136. this.status = 'loadmore'
  137. }
  138. })
  139. },
  140. del (id) {
  141. notifyService.delete(id).then((data)=>{
  142. this.doSearch()
  143. uni.showToast({
  144. title: data,
  145. icon:"success"
  146. })
  147. })
  148. },
  149. }
  150. }
  151. </script>