vant-list實現下拉載入更多
阿新 • • 發佈：2020-11-12
1 <template> 2 <div class="home-wrapper"> 3 <div class="swipe-box"> 4 <van-swipe :autoplay="3000"> 5 <van-swipe-item v-for="(image, index) in images" :key="index"> 6 <img v-lazy="image" class="swipe-img" /> 7 </van-swipe-item> 8<template> <divclass="home-wrapper"> <divclass="swipe-box"> <van-swipe:autoplay="3000"> <van-swipe-itemv-for="(image,index)inimages":key="index"> <imgv-lazy="image"class="swipe-img"/> </van-swipe-item> </van-swipe> </div> <divclass="tab-box"> <divclass="tab-box-header":class="{'is-fixed':isFixed}"> <van-tabsv-model="currentType"@click="selectTab":ellipsis="false":border="false"swipeable> <van-tabv-for="(item,idx)intabList":key="idx":title="item.name"></van-tab> </van-tabs> <van-dropdown-menu> <van-dropdown-itemv-model="todoType":options="todoTypeList"@change="changeStatus"/> </van-dropdown-menu> </div> <divclass="tab-content":class="{'is-fixed':isFixed}"> <ulclass="status-list"v-if="todoType!==0"> <li v-for="(item,index)instatusList" :key="index" :class="[{active:currentStatus==item.workflowStatus},'status-item']" @click="selectStatusTab(item)" >{{item.name}}</li> </ul> <van-pull-refreshv-model="refreshing"@refresh="onRefresh"> <van-list:finished="finished"@load="loadMore"class="todo-list"> <liclass="todo-item"v-for="itemintodoList":key="item.id"@click="jumpDetail(item)"> <divclass="todo-top"> <divclass="title-box"> <iclass="icon-urgent"v-if="item.message&&item.message.length>0"></i> <divclass="app-name">{{item.menu_name}}</div> <divclass="app-titletxt-ellipsis">{{item.title}}</div> </div> <divclass="content-box"> <divclass="todo-container":style="{color:computedColor(item).color,background:computedColor(item).bg}"> <spanclass="icon-qi":style="{background:computedColor(item).color}">企</span>{{item.spaceName}} </div> <divclass="system-name">{{item.systemName}}</div> </div> <divclass="todo-launcher">{{item.start_handler}}發起於{{item.created_at.substring(5,16)}}</div> </div> <divclass="todo-body"> <spanclass="update-time">更新於{{item.update_at.substring(5,16)}}</span> <spanclass="node-name">{{item.step_title}}</span> </div> </li> </van-list> </van-pull-refresh> <divclass="loading4"v-if="loading"> <divclass="three1"></div> <divclass="three2"></div> <divclass="three3"></div> </div> <divclass="no-data"v-if="!loading&&finished">沒有資料啦</div> </div> </div> </div> </template></van-swipe> 9 </div> 10 <div class="tab-box"> 11 <div class="tab-box-header" :class="{'is-fixed': isFixed}"> 12 <van-tabs v-model="currentType" @click="selectTab" :ellipsis="false" :border="false" swipeable> 13 <van-tab v-for="(item, idx) in tabList" :key="idx" :title="item.name"></van-tab> 14 </van-tabs> 15 <van-dropdown-menu> 16 <van-dropdown-item v-model="todoType" :options="todoTypeList" @change="changeStatus" /> 17 </van-dropdown-menu> 18 </div> 19<div class="tab-content" :class="{'is-fixed': isFixed}"> 20 <ul class="status-list" v-if="todoType !== 0"> 21 <li 22 v-for="(item, index) in statusList" 23 :key="index" 24 :class="[{ active: currentStatus == item.workflowStatus }, 'status-item']" 25 @click="selectStatusTab(item)" 26 >{{ item.name }}</li> 27 </ul> 28 <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> 29 <van-list :finished="finished" @load="loadMore" class="todo-list" > 30 <li class="todo-item" v-for="item in todoList" :key="item.id" @click="jumpDetail(item)"> 31 <div class="todo-top"> 32 <div class="title-box"> 33 <i class="icon-urgent" v-if="item.message && item.message.length > 0"></i> 34 <div class="app-name ">{{ item.menu_name }}</div> 35 <div class="app-title txt-ellipsis">{{ item.title }}</div> 36 </div> 37 <div class="content-box"> 38 <div class="todo-container" :style="{color: computedColor(item).color, background: computedColor(item).bg}"> 39 <span class="icon-qi" :style="{background: computedColor(item).color}">企</span> {{ item.spaceName }} 40 </div> 41 <div class="system-name">{{ item.systemName }}</div> 42 </div> 43 <div class="todo-launcher">{{item.start_handler}} 發起於 {{ item.created_at.substring(5, 16) }}</div> 44 </div> 45 <div class="todo-body"> 46 <span class="update-time"> 更新於{{ item.update_at.substring(5, 16) }} </span> 47 <span class="node-name"> {{ item.step_title }} </span> 48 </div> 49 </li> 50 </van-list> 51 </van-pull-refresh> 52 <div class="loading4" v-if="loading"> 53 <div class="three1"></div> 54 <div class="three2"></div> 55 <div class="three3"></div> 56 </div> 57 <div class="no-data" v-if="!loading && finished">沒有資料啦</div> 58 </div> 59 </div> 60 </div> 61 </template> 62 63 <script> 64 import { jsBridgeReady } from '@qycloud/js-bridge'; 65 import { $http } from '@commonbox/utils'; 66 import { Lazyload } from 'vant'; 67 68 Vue.use(Lazyload); 69 70 export default { 71 name: 'Home', 72 data() { 73 return { 74 images: [ 75 require('../../assets/images/swipe-img1.png'), 76 require('../../assets/images/swipe-img1.png'), 77 require('../../assets/images/swipe-img1.png'), 78 require('../../assets/images/swipe-img1.png'), 79 ], 80 tabList: [{ 81 name: '全部企業', 82 enterprise_id: '', 83 id: 0, 84 }], 85 currentType: 0, 86 enterpriseId: '', 87 todoTypeList: [ 88 { text: '待辦工作', value: 0 }, 89 { text: '最近處理', value: 1 }, 90 { text: '我發起的', value: 2 }, 91 ], 92 todoType: 0, // 預設代辦 93 statusList: [{ 94 name: '進行中', 95 workflowStatus: 'running', 96 }, { 97 name: '已完成', 98 workflowStatus: 'finished', 99 }], 100 currentStatus: 'running', 101 todoList: [], 102 isFixed: false, 103 scrollTop: 0, 104 refreshing: false, 105 loading: false, // 載入狀態 106 finished: false, // 是否載入 107 pageIndex1: 0, // 頁數 108 pageIndex2: 0, // 頁數 109 pageIndex3: 0, // 頁數 110 pageSize: 10 // 條數 111 }; 112 }, 113 computed: { 114 isNoData() { 115 return this.todoList && this.todoList.length > 0; 116 }, 117 computedColor() { 118 const containerColorList = [ 119 { 120 name: '物流事業部', bg: '#EEF0FF', color: '#3E3C9E', id: 'wuliushiyebu', 121 }, 122 { 123 name: '中化南通', bg: '#FFE9F2', color: '#FF2C7F', id: 'zhonghuanantonggang', 124 }, 125 { 126 name: '中化興中', bg: '#E5F2F1', color: '#007F7A', id: 'zhonghuazhoushan', 127 }, 128 { 129 name: '中化運營', bg: '#344051', color: '#4380F0', id: 'zhonghuayunying', 130 }, 131 { 132 name: '天津倉儲', bg: '#F8F2EE', color: '#B9805E', id: 'zhonghuatianjin', 133 }, 134 { 135 name: '中化揚州', bg: '#E7EDFF', color: '#6075B7', id: 'zhonghuayangzhou', 136 }, 137 { 138 name: '中化東方', bg: '#F5ECFC', color: '#945FB9', id: 'zhonghuadongfang', 139 }, 140 { 141 name: '應急基地', bg: '#E7F6EC', color: '#18A549', id: 'yingjijidi', 142 }, 143 { 144 name: '舟山國儲', bg: '#EAF7FF', color: '#0050B3', id: 'zhoushanguochu', 145 }, 146 { 147 name: '中化興海', bg: '#FFE6E8', color: '#FF0D1A', id: 'zhonghuaxinghai', 148 }, 149 ]; 150 return (item) => { 151 const tempItem = containerColorList.filter(res => res.id === item.spanSpace); 152 return tempItem[0]; 153 } 154 }, 155 }, 156 methods: { 157 jumpDetail(item) { 158 const appIdList = [ 159 'donghuozuoyexukeguan', 160 'dongtuzuoyexukeguanl', 161 'diaozhuangzuoyexukeg', 162 'gaochuzuoyexukeguanl', 163 'shouxiankongjianzuoy', 164 'linshiyongdianzuoyex', 165 'mangbanchouduzuoyexu', 166 'duanluzuoyexukeguanl', 167 'renkongkaiqizuoyexuk', 168 'shexianzuoyexukeguan', 169 ] 170 if (appIdList.includes(item.workflow_id)) { 171 // 調大釗哥頁面 172 /* eslint-disable */ 173 const url = `${location.protocol}//${location.host}/bee/mobileportal/${item.spanSpace}/lego-app-form?spaceId=${item.spanSpace}&module=workflow&appId=${item.workflow_id}&appName=${item.title}&formId=${item.instance_id}&node=${item.step_id}&back=todo&scId=` 174 jsBridgeReady((bridge) => { 175 bridge.callHandler('openWebview', { url }) 176 }); 177 } else { 178 jsBridgeReady((bridge) => { 179 bridge.callHandler( 180 'openFormDetail', 181 { 182 appType: 'workflow', 183 appId: item.workflow_id, 184 action: 2, // 檢視 185 instanceId: item.instance_id, 186 entId: item.spanSpace, 187 title: item.title, 188 nodeId: item.step_id, 189 }, 190 (res) => { 191 console.log('成功'); 192 }, 193 ); 194 }); 195 } 196 }, 197 selectTab(index) { 198 this.currentType = index; 199 for (let i = 0; i < this.tabList.length; i++) { 200 const item = this.tabList[i]; 201 if (item.id === index) { 202 this.enterpriseId = item.enterprise_id; 203 } 204 } 205 this.currentStatus = 'running'; 206 this.queryNum(); 207 if (this.todoType === 0) { 208 this.todoList = []; 209 this.pageIndex1 = 1; 210 this.getPendingWorkList(); 211 } else if (this.todoType === 1) { 212 this.todoList = []; 213 this.pageIndex2 = 1; 214 this.getRecentlyProcessedList(); 215 } else if (this.todoType === 2) { 216 this.todoList = []; 217 this.pageIndex3 = 1; 218 this.getInitiatedList(); 219 } 220 }, 221 selectStatusTab(item) { 222 this.currentStatus = item.workflowStatus; 223 if (this.todoType === 0) { 224 this.todoList = []; 225 this.pageIndex1 = 1; 226 this.getPendingWorkList(); 227 } else if (this.todoType === 1) { 228 this.todoList = []; 229 this.pageIndex2 = 1; 230 this.getRecentlyProcessedList(); 231 } else if (this.todoType === 2) { 232 this.todoList = []; 233 this.pageIndex3 = 1; 234 this.getInitiatedList(); 235 } 236 }, 237 // 獲取可切換容器列表 238 getUserSpaceList() { 239 $http.get('/sdkuser/pendingWorkApi/getUserSpaceList').then((res) => { 240 if (res.data.status === 200) { 241 res.data.data.forEach((item, index) => { 242 this.tabList.push({ 243 name: item.name, 244 enterprise_id: item.enterprise_id, 245 id: index + 1, 246 }) 247 }); 248 } 249 }); 250 }, 251 // 獲取待辦資料 252 queryNum() { 253 const queryParams = { 254 entIdApp: this.enterpriseId, 255 }; 256 $http.get('/sdkuser/pendingWorkApi/getWorkTotalCountWithApp', { 257 params: queryParams, 258 }).then((res) => { 259 if (res.data.status === 200) { 260 this.todoTypeList[0].text = `待辦工作(${res.data.data.pendingTotalCount})`; 261 this.todoTypeList[1].text = `最近處理(${res.data.data.recentlyProcessedTotalCount})`; 262 this.todoTypeList[2].text = `我發起的(${res.data.data.initiatedTotalCount})`; 263 } 264 }); 265 }, 266 changeStatus(val) { 267 if (val === 0) { 268 this.todoList = []; 269 this.pageIndex1 = 1; 270 this.getPendingWorkList(); 271 } else if (val === 1) { 272 this.todoList = []; 273 this.pageIndex2 = 1; 274 this.getRecentlyProcessedList(); 275 } else if (val === 2) { 276 this.todoList = []; 277 this.pageIndex3 = 1; 278 this.getInitiatedList(); 279 } 280 }, 281 loadMore() { 282 if (this.todoType === 0 && !this.loading) { 283 this.pageIndex1 += 1; 284 this.getPendingWorkList(); 285 } else if (this.todoType === 1 && !this.loading) { 286 this.pageIndex2 += 1; 287 this.getRecentlyProcessedList(); 288 } else if (this.todoType === 2 && !this.loading) { 289 this.pageIndex3 += 1; 290 this.getInitiatedList(); 291 } 292 }, 293 onRefresh() { 294 this.finished = false; // 不寫這句會導致你上拉到底過後在下拉重新整理將不能觸發下拉載入事件 295 this.pageIndex1 = 1; 296 this.pageIndex2 = 1; 297 this.pageIndex3 = 1; 298 this.loadMore(); 299 }, 300 // 獲取待辦資料 301 getPendingWorkList() { 302 if(this.loading) { 303 return; 304 }; 305 this.loading = true; 306 const queryParams = { 307 entIdApp: this.enterpriseId, 308 }; 309 $http.get('/sdkuser/pendingWorkApi/getPendingWorkListWithApp', { 310 params: queryParams, 311 }).then((res) => { 312 if (res.data.status === 200) { 313 this.loading = false; 314 let tempTodoList = res.data.result.result.slice( (this.pageIndex1-1) * this.pageSize, this.pageIndex1 * this.pageSize ); 315 this.todoList = this.todoList.concat(tempTodoList); 316 if (this.pageIndex1 * this.pageSize >= res.data.result.totalCount) { 317 this.finished = true; 318 } else { 319 this.finished = false; 320 }; 321 } 322 }).catch((error) => { 323 console.log(error); 324 }) 325 .finally(() => { 326 this.refreshing = false; 327 this.loading = false; 328 }); 329 }, 330 // 獲取過往資料 331 getRecentlyProcessedList() { 332 if(this.loading) { 333 return; 334 }; 335 this.loading = true; 336 const queryParams = { 337 entIdApp: this.enterpriseId, 338 workflowStatus: this.currentStatus, 339 }; 340 $http.get('/sdkuser/pendingWorkApi/getRecentlyProcessedListWithApp', { 341 params: queryParams, 342 }).then((res) => { 343 if (res.data.status === 200) { 344 this.loading = false; 345 let tempTodoList = res.data.result.result.slice( (this.pageIndex2-1) * this.pageSize, this.pageIndex2 * this.pageSize ); 346 this.todoList = this.todoList.concat(tempTodoList); 347 if (this.pageIndex2 * this.pageSize >= res.data.result.totalCount) { //資料全部載入完成 348 this.finished = true; 349 } else { 350 this.finished = false; 351 } 352 } 353 }).catch((error) => { 354 console.log(error); 355 }) 356 .finally(() => { 357 this.refreshing = false; 358 this.loading = false; 359 }); 360 }, 361 // 獲取我發起的資料 362 getInitiatedList() { 363 if(this.loading) { 364 return; 365 }; 366 this.loading = true; 367 const queryParams = { 368 entIdApp: this.enterpriseId, 369 workflowStatus: this.currentStatus, 370 }; 371 $http.get('/sdkuser/pendingWorkApi/getInitiatedListWithApp', { 372 params: queryParams, 373 }).then((res) => { 374 if (res.data.status === 200) { 375 this.loading = false; 376 let tempTodoList = res.data.result.result.slice( (this.pageIndex3-1)*this.pageSize, this.pageIndex3*this.pageSize ); 377 this.todoList = this.todoList.concat(tempTodoList); 378 if (this.pageIndex3 * this.pageSize >= res.data.result.totalCount) { //資料全部載入完成 379 this.finished = true; 380 } else { 381 this.finished = false; 382 } 383 } 384 }).catch((error) => { 385 console.log(error); 386 }).finally(() => { 387 this.refreshing = false; 388 this.loading = false; 389 }); 390 }, 391 dataScroll() { 392 this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 393 this.isFixed = this.scrollTop > 150; 394 }, 395 }, 396 mounted() { 397 this.getUserSpaceList(); 398 this.queryNum(); 399 window.addEventListener('scroll', this.dataScroll); 400 }, 401 destroyed() { 402 window.removeEventListener('scroll', this.dataScroll, false); 403 }, 404 }; 405 </script>
<script> import{jsBridgeReady}from'@qycloud/js-bridge'; import{$http}from'@commonbox/utils'; import{Lazyload}from'vant';
Vue.use(Lazyload);
exportdefault{ name:'Home', data(){ return{ images:[ require('../../assets/images/swipe-img1.png'), require('../../assets/images/swipe-img1.png'), require('../../assets/images/swipe-img1.png'), require('../../assets/images/swipe-img1.png'), ], tabList:[{ name:'全部企業', enterprise_id:'', id:0, }], currentType:0, enterpriseId:'', todoTypeList:[ {text:'待辦工作',value:0}, {text:'最近處理',value:1}, {text:'我發起的',value:2}, ], todoType:0,//預設代辦 statusList:[{ name:'進行中', workflowStatus:'running', },{ name:'已完成', workflowStatus:'finished', }], currentStatus:'running', todoList:[], isFixed:false, scrollTop:0, refreshing:false, loading:false,//載入狀態 finished:false,//是否載入 pageIndex1:0,//頁數 pageIndex2:0,//頁數 pageIndex3:0,//頁數 pageSize:10//條數 }; }, computed:{ isNoData(){ returnthis.todoList&&this.todoList.length>0; }, computedColor(){ constcontainerColorList=[ { name:'物流事業部',bg:'#EEF0FF',color:'#3E3C9E',id:'wuliushiyebu', }, { name:'中化南通',bg:'#FFE9F2',color:'#FF2C7F',id:'zhonghuanantonggang', }, { name:'中化興中',bg:'#E5F2F1',color:'#007F7A',id:'zhonghuazhoushan', }, { name:'中化運營',bg:'#344051',color:'#4380F0',id:'zhonghuayunying', }, { name:'天津倉儲',bg:'#F8F2EE',color:'#B9805E',id:'zhonghuatianjin', }, { name:'中化揚州',bg:'#E7EDFF',color:'#6075B7',id:'zhonghuayangzhou', }, { name:'中化東方',bg:'#F5ECFC',color:'#945FB9',id:'zhonghuadongfang', }, { name:'應急基地',bg:'#E7F6EC',color:'#18A549',id:'yingjijidi', }, { name:'舟山國儲',bg:'#EAF7FF',color:'#0050B3',id:'zhoushanguochu', }, { name:'中化興海',bg:'#FFE6E8',color:'#FF0D1A',id:'zhonghuaxinghai', }, ]; return(item)=>{ consttempItem=containerColorList.filter(res=>res.id===item.spanSpace); returntempItem[0]; } }, }, methods:{ jumpDetail(item){ constappIdList=[ 'donghuozuoyexukeguan', 'dongtuzuoyexukeguanl', 'diaozhuangzuoyexukeg', 'gaochuzuoyexukeguanl', 'shouxiankongjianzuoy', 'linshiyongdianzuoyex', 'mangbanchouduzuoyexu', 'duanluzuoyexukeguanl', 'renkongkaiqizuoyexuk', 'shexianzuoyexukeguan', ] if(appIdList.includes(item.workflow_id)){ //調大釗哥頁面 /*eslint-disable*/ consturl=`${location.protocol}//${location.host}/bee/mobileportal/${item.spanSpace}/lego-app-form?spaceId=${item.spanSpace}&module=workflow&appId=${item.workflow_id}&appName=${item.title}&formId=${item.instance_id}&node=${item.step_id}&back=todo&scId=` jsBridgeReady((bridge)=>{ bridge.callHandler('openWebview',{url}) }); }else{ jsBridgeReady((bridge)=>{ bridge.callHandler( 'openFormDetail', { appType:'workflow', appId:item.workflow_id, action:2,//檢視 instanceId:item.instance_id, entId:item.spanSpace, title:item.title, nodeId:item.step_id, }, (res)=>{ console.log('成功'); }, ); }); } }, selectTab(index){ this.currentType=index; for(leti=0;i<this.tabList.length;i++){ constitem=this.tabList[i]; if(item.id===index){ this.enterpriseId=item.enterprise_id; } } this.currentStatus='running'; this.queryNum(); if(this.todoType===0){ this.todoList=[]; this.pageIndex1=1; this.getPendingWorkList(); }elseif(this.todoType===1){ this.todoList=[]; this.pageIndex2=1; this.getRecentlyProcessedList(); }elseif(this.todoType===2){ this.todoList=[]; this.pageIndex3=1; this.getInitiatedList(); } }, selectStatusTab(item){ this.currentStatus=item.workflowStatus; if(this.todoType===0){ this.todoList=[]; this.pageIndex1=1; this.getPendingWorkList(); }elseif(this.todoType===1){ this.todoList=[]; this.pageIndex2=1; this.getRecentlyProcessedList(); }elseif(this.todoType===2){ this.todoList=[]; this.pageIndex3=1; this.getInitiatedList(); } }, //獲取可切換容器列表 getUserSpaceList(){ $http.get('/sdkuser/pendingWorkApi/getUserSpaceList').then((res)=>{ if(res.data.status===200){ res.data.data.forEach((item,index)=>{ this.tabList.push({ name:item.name, enterprise_id:item.enterprise_id, id:index+1, }) }); } }); }, //獲取待辦資料 queryNum(){ constqueryParams={ entIdApp:this.enterpriseId, }; $http.get('/sdkuser/pendingWorkApi/getWorkTotalCountWithApp',{ params:queryParams, }).then((res)=>{ if(res.data.status===200){ this.todoTypeList[0].text=`待辦工作(${res.data.data.pendingTotalCount})`; this.todoTypeList[1].text=`最近處理(${res.data.data.recentlyProcessedTotalCount})`; this.todoTypeList[2].text=`我發起的(${res.data.data.initiatedTotalCount})`; } }); }, changeStatus(val){ if(val===0){ this.todoList=[]; this.pageIndex1=1; this.getPendingWorkList(); }elseif(val===1){ this.todoList=[]; this.pageIndex2=1; this.getRecentlyProcessedList(); }elseif(val===2){ this.todoList=[]; this.pageIndex3=1; this.getInitiatedList(); } }, loadMore(){ if(this.todoType===0&&!this.loading){ this.pageIndex1+=1; this.getPendingWorkList(); }elseif(this.todoType===1&&!this.loading){ this.pageIndex2+=1; this.getRecentlyProcessedList(); }elseif(this.todoType===2&&!this.loading){ this.pageIndex3+=1; this.getInitiatedList(); } }, onRefresh(){ this.finished=false;//不寫這句會導致你上拉到底過後在下拉重新整理將不能觸發下拉載入事件 this.pageIndex1=1; this.pageIndex2=1; this.pageIndex3=1; this.loadMore(); }, //獲取待辦資料 getPendingWorkList(){ if(this.loading){ return; }; this.loading=true; constqueryParams={ entIdApp:this.enterpriseId, }; $http.get('/sdkuser/pendingWorkApi/getPendingWorkListWithApp',{ params:queryParams, }).then((res)=>{ if(res.data.status===200){ this.loading=false; lettempTodoList=res.data.result.result.slice((this.pageIndex1-1)*this.pageSize,this.pageIndex1*this.pageSize); this.todoList=this.todoList.concat(tempTodoList); if(this.pageIndex1*this.pageSize>=res.data.result.totalCount){ this.finished=true; }else{ this.finished=false; }; } }).catch((error)=>{ console.log(error); }) .finally(()=>{ this.refreshing=false; this.loading=false; }); }, //獲取過往資料 getRecentlyProcessedList(){ if(this.loading){ return; }; this.loading=true; constqueryParams={ entIdApp:this.enterpriseId, workflowStatus:this.currentStatus, }; $http.get('/sdkuser/pendingWorkApi/getRecentlyProcessedListWithApp',{ params:queryParams, }).then((res)=>{ if(res.data.status===200){ this.loading=false; lettempTodoList=res.data.result.result.slice((this.pageIndex2-1)*this.pageSize,this.pageIndex2*this.pageSize); this.todoList=this.todoList.concat(tempTodoList); if(this.pageIndex2*this.pageSize>=res.data.result.totalCount){//資料全部載入完成 this.finished=true; }else{ this.finished=false; } } }).catch((error)=>{ console.log(error); }) .finally(()=>{ this.refreshing=false; this.loading=false; }); }, //獲取我發起的資料 getInitiatedList(){ if(this.loading){ return; }; this.loading=true; constqueryParams={ entIdApp:this.enterpriseId, workflowStatus:this.currentStatus, }; $http.get('/sdkuser/pendingWorkApi/getInitiatedListWithApp',{ params:queryParams, }).then((res)=>{ if(res.data.status===200){ this.loading=false; lettempTodoList=res.data.result.result.slice((this.pageIndex3-1)*this.pageSize,this.pageIndex3*this.pageSize); this.todoList=this.todoList.concat(tempTodoList); if(this.pageIndex3*this.pageSize>=res.data.result.totalCount){//資料全部載入完成 this.finished=true; }else{ this.finished=false; } } }).catch((error)=>{ console.log(error); }).finally(()=>{ this.refreshing=false; this.loading=false; }); }, dataScroll(){ this.scrollTop=document.documentElement.scrollTop||document.body.scrollTop; this.isFixed=this.scrollTop>150; }, }, mounted(){ this.getUserSpaceList(); this.queryNum(); window.addEventListener('scroll',this.dataScroll); }, destroyed(){ window.removeEventListener('scroll',this.dataScroll,false); }, }; </script>