HistoryList.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  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="({index}) => commit(index, row)" :key="row.id" :threshold="60" duration="500"
  10. :options="row.back?[ {
  11. text: '撤回',
  12. style: {
  13. backgroundColor: '#f56c6c'
  14. }
  15. }, {
  16. text: '历史',
  17. style: {
  18. backgroundColor: '#5ac725'
  19. }
  20. }]:[ {
  21. text: '历史',
  22. style: {
  23. backgroundColor: '#5ac725'
  24. }
  25. }]">
  26. <u-cell-group>
  27. <u-cell @click="toDetail(row)">
  28. <view slot="title" class="content">
  29. <view class="text-bold text-grey">
  30. <view class="ellipsis-description">
  31. 实例标题:{{row.vars.title}}
  32. </view>
  33. </view>
  34. <view class="text-grey text-sm">
  35. <view class="ellipsis-description">
  36. 流程名称:{{row.processDefinitionName}}
  37. </view>
  38. </view>
  39. <view class="text-grey text-sm">
  40. <view class="ellipsis-description">
  41. 任务:{{row.name}}
  42. </view>
  43. </view>
  44. <view class="text-grey text-sm">
  45. 执行时间:{{row.createTime | formatDate}}
  46. </view>
  47. </view>
  48. <view slot="right-icon" class="action">
  49. <u-tag :text="row.status" plain shape="circle" :type="row.level === 'danger'? 'error':row.level"></u-tag>
  50. </view>
  51. </u-cell>
  52. </u-cell-group>
  53. </u-swipe-action-item>
  54. </view>
  55. </u-swipe-action>
  56. </view>
  57. <u-loadmore :status="status" @loadmore="loadmore" :line="true" />
  58. <u-gap height="20" bgColor="#fff"></u-gap>
  59. <u-back-top :scrollTop="0" mode="square"></u-back-top>
  60. </view>
  61. </template>
  62. <script>
  63. import taskService from "@/api/flowable/taskService"
  64. import pick from 'lodash.pick'
  65. export default {
  66. data() {
  67. return {
  68. status: 'loadmore',
  69. searchForm: {
  70. title: ''
  71. },
  72. dataList: [],
  73. tablePage: {
  74. pages: 0,
  75. currentPage: 0,
  76. pageSize: 10,
  77. orders: [{ column: "a.create_time", asc: false }],
  78. },
  79. loading: false,
  80. }
  81. },
  82. onLoad() {
  83. this.loadmore()
  84. },
  85. methods: {
  86. commit(index, row){
  87. if(row.back) {
  88. if(index === 0){
  89. this.callback(row)
  90. }else if(index === 1){
  91. this.toDetail(row)
  92. }
  93. } else {
  94. if(index === 0){
  95. this.toDetail(row)
  96. }
  97. }
  98. },
  99. // 跳转到详细页面
  100. toDetail (row) {
  101. taskService.getTaskDef({
  102. taskDefKey: row.taskDefinitionKey,
  103. procInsId: row.processInstanceId,
  104. procDefId: row.processDefinitionId
  105. }).then((data) => {
  106. let query = {readOnly: true, taskId: row.executionId, title: `${row.name}【${row.name}】`, formTitle: `${row.name}`, ...pick(data, 'formType', 'formUrl', 'procDefKey', 'taskDefKey', 'procInsId', 'procDefId', 'taskId', 'status', 'title', 'businessId')}
  107. uni.navigateTo({
  108. url: '/pages/workbench/task/TaskFormDetail?flow='+JSON.stringify(query)
  109. })
  110. })
  111. },
  112. // 取回
  113. callback (row) {
  114. uni.showModal({
  115. title: '提示',
  116. content: '确定撤销该已办任务吗?',
  117. success: (res) => {
  118. if (res.confirm) {
  119. uni.showLoading()
  120. taskService.callback({'processInstanceId': row.processInstanceId,
  121. 'preTaskDefKey': row.taskDefinitionKey,
  122. 'preTaskId': row.id,
  123. 'currentTaskId': row.currentTask.id,
  124. 'currentTaskDefKey': row.currentTask.taskDefinitionKey
  125. }).then((data) => {
  126. uni.showToast({
  127. title:data.msg
  128. })
  129. this.doSearch(this.curWord)
  130. })
  131. } else if (res.cancel) {
  132. uni.hideLoading()
  133. }
  134. }
  135. });
  136. },
  137. // 输入监听
  138. inputWord(e){
  139. this.searchTimer && clearTimeout(this.searchTimer)
  140. this.searchTimer = setTimeout(()=>{
  141. this.doSearch()
  142. },300)
  143. },
  144. // 搜索
  145. doSearch(){
  146. this.dataList = [];
  147. this.tablePage.currentPage = 0;
  148. this.tablePage.pageSize = 10;
  149. this.tablePage.pages = 0;
  150. this.loadmore()
  151. },
  152. onReachBottom() {
  153. this.loadmore()
  154. },
  155. loadmore() {
  156. if(this.tablePage.currentPage!==0 && this.tablePage.pages <= this.tablePage.currentPage ) {
  157. this.status = 'nomore';
  158. return;
  159. }
  160. this.tablePage.currentPage = ++ this.tablePage.currentPage;
  161. //联网加载数据
  162. this.status = 'loading';
  163. taskService.historicList({
  164. current: this.tablePage.currentPage,
  165. size: this.tablePage.pageSize,
  166. orders: this.tablePage.orders,
  167. ...this.searchForm
  168. }).then((data)=>{
  169. //追加新数据
  170. this.dataList=this.dataList.concat(data.records);
  171. this.tablePage.pages = data.pages;
  172. if(this.tablePage.pages <= this.tablePage.currentPage){
  173. this.status = 'nomore'
  174. } else {
  175. this.status = 'loadmore'
  176. }
  177. })
  178. }
  179. }
  180. }
  181. </script>