TodoList.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. <template>
  2. <view>
  3. <u-search :show-action="false" v-model="searchForm.title" @change="inputWord" margin="20rpx 50rpx"></u-search>
  4. <view>
  5. <u-swipe-action>
  6. <view
  7. v-for="(row, index) in dataList"
  8. :key="index">
  9. <u-swipe-action-item @click="todo(row)" :key="row.id" :threshold="60" duration="500"
  10. :options="[ {
  11. text: '办理',
  12. style: {
  13. backgroundColor: '#3c9cff'
  14. }
  15. }]">
  16. <u-cell-group>
  17. <u-cell @click="todo(row)">
  18. <view slot="title" class="content">
  19. <view class="text-bold text-grey">
  20. <view class="ellipsis-description">
  21. 标题:{{row.vars.title}}
  22. </view>
  23. </view>
  24. <view class="text-grey text-sm">
  25. <view class="ellipsis-description">
  26. 当前环节:{{row.task && row.task.name}}
  27. </view>
  28. </view>
  29. <view class="text-grey text-sm">
  30. 执行时间:{{row.task.createTime | formatDate}}
  31. </view>
  32. </view>
  33. <view slot="right-icon" class="action">
  34. <u-tag text="等待审核" plain shape="circle" type="error"></u-tag>
  35. </view>
  36. </u-cell>
  37. </u-cell-group>
  38. </u-swipe-action-item>
  39. </view>
  40. </u-swipe-action>
  41. </view>
  42. <u-loadmore :status="status" @loadmore="loadmore" :line="true" />
  43. <u-gap height="20" bgColor="#fff"></u-gap>
  44. <u-back-top :scrollTop="0" mode="square"></u-back-top>
  45. </view>
  46. </template>
  47. <script>
  48. import taskService from "@/api/flowable/taskService"
  49. import userSelect from '@/components/user-select/user-select.vue'
  50. import pick from 'lodash.pick'
  51. export default {
  52. components:{
  53. userSelect
  54. },
  55. data() {
  56. return {
  57. status: 'loadmore',
  58. searchForm: {
  59. title: ''
  60. },
  61. dataList: [],
  62. tablePage: {
  63. pages: 0,
  64. currentPage: 0,
  65. pageSize: 10,
  66. orders: [{ column: "a.create_time", asc: false }],
  67. },
  68. loading: false,
  69. }
  70. },
  71. onLoad() {
  72. this.loadmore()
  73. },
  74. methods: {
  75. // 跳转到详细页面
  76. todo (row) {
  77. taskService.getTaskDef({
  78. taskId: row.task.id,
  79. taskName: row.task.name,
  80. taskDefKey: row.task.taskDefinitionKey,
  81. procInsId: row.task.processInstanceId,
  82. procDefId: row.task.processDefinitionId,
  83. procDefKey: row.task.processDefKey,
  84. status: row.status
  85. }).then((data) => {
  86. let query = {formTitle: `${row.vars.title}`, title: `审批【${row.task.name || ''}】`, ...pick(data, 'formType', 'formReadOnly', 'formUrl', 'procDefKey', 'taskDefKey', 'procInsId', 'procDefId', 'taskId', 'status', 'title', 'businessId')};
  87. uni.navigateTo({
  88. url: '/pages/workbench/task/TaskForm?flow='+JSON.stringify(query)
  89. })
  90. })
  91. },
  92. // 输入监听
  93. inputWord(e){
  94. this.searchTimer && clearTimeout(this.searchTimer)
  95. this.searchTimer = setTimeout(()=>{
  96. this.doSearch()
  97. },300)
  98. },
  99. // 搜索
  100. doSearch(){
  101. this.dataList = [];
  102. this.tablePage.currentPage = 0;
  103. this.tablePage.pageSize = 10;
  104. this.tablePage.pages = 0;
  105. this.loadmore()
  106. },
  107. onReachBottom() {
  108. this.loadmore()
  109. },
  110. loadmore() {
  111. if(this.tablePage.currentPage!==0 && this.tablePage.pages <= this.tablePage.currentPage ) {
  112. this.status = 'nomore';
  113. return;
  114. }
  115. this.tablePage.currentPage = ++ this.tablePage.currentPage;
  116. //联网加载数据
  117. this.status = 'loading';
  118. taskService.todoList({
  119. current: this.tablePage.currentPage,
  120. size: this.tablePage.pageSize,
  121. orders: this.tablePage.orders,
  122. ...this.searchForm
  123. }).then((data)=>{
  124. //追加新数据
  125. this.dataList=this.dataList.concat(data.records);
  126. this.tablePage.pages = data.pages;
  127. if(this.tablePage.pages <= this.tablePage.currentPage){
  128. this.status = 'nomore'
  129. } else {
  130. this.status = 'loadmore'
  131. }
  132. })
  133. }
  134. }
  135. }
  136. </script>