guomao/guomaoUniapp/pages/home/task.vue

<template>
	<view>
		<view>
			<uni-segmented-control :current="current" :values="tabList" @clickItem="tabsChange" styleType="text" activeColor="#ff0000"></uni-segmented-control>
		</view>
		<swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="height">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;" @scrolltolower="onreachBottomMyTask">
					<uni-card
						:title="item.startUserName + '发起的' + item.processDefName" 
						:extra="parseTime(new Date(item.startTime), '{y}-{m}-{d}')" 
						v-for="(item, index) in myTask" 
						:key="item.taskId"
						@click="openTaskDeal(item.instId, item.taskId, item.menuId, item.businessKey)">
							<view>发起人 : {{item.startUserName}}</view>
							<view>任务名称 : {{item.excutionName}}</view>
							<view>审批状态 : {{(item.deleteReason != null?'审批拒绝':(item.endTime == null?'审批中':'审批完成'))}}</view>
							<view v-if="item.deleteReason != null">拒绝原因 : {{item.deleteReason}}</view>
					</uni-card>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;" @scrolltolower="onreachBottomMyStartTask()" lower-threshold=10>
					<uni-card 
						:title="item.startUserName + '发起的' + item.processDefinitionName" 
						:extra="parseTime(item.startTime, '{y}-{m}-{d}')" 
						v-for="(item, index) in myStartTask" 
						:key="item.id"
						@click="openTaskDetail(item.processInstanceId)">
							<view>发起人 : {{item.startUserName}}</view>
							<view>任务名称 : {{item.name}}</view>
							<view>审批状态 : {{(item.deleteReason != null?'审批拒绝':(item.endTime == null?'审批中':'审批完成'))}}</view>
							<view v-if="item.deleteReason != null">拒绝原因 : {{item.deleteReason}}</view>
					</uni-card>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;" @scrolltolower="onreachBottomMyJoinTask()" lower-threshold=10>
					<uni-card 
						:title="item.startUserName + '发起的' + item.processDefinitionName" 
						:sub-title="parseTime(item.startTime, '{y}-{m}-{d}')" 
						v-for="(item, index) in myJoinTask" 
						:key="item.id"
						@click="openTaskDetail(item.processInstanceId)">
							<view>发起人 : {{item.startUserName}}</view>
							<view>任务名称 : {{item.name}}</view>
							<view>审批状态 : {{(item.deleteReason != null?'审批拒绝':(item.endTime == null?'审批中':'审批完成'))}}</view>
							<view v-if="item.deleteReason != null">拒绝原因 : {{item.deleteReason}}</view>
					</uni-card>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList : [
					'我的待办',
					'我发起的',
					'我参与的'
				],
				swiperCurrent: 0,
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				height: 'height:'+(uni.getSystemInfoSync().screenHeight - 80)+'px',
				myStartTask :[],
				myStartTaskPage : 1,
				myStartTaskTotal : -1,
				myTask : [],
				myTaskPage : 1,
				myTaskTotal : -1,
				myJoinTask : [],
				myJoinTaskPage : 1,
				myJoinTaskTotal : -1,
			}
		},
		onLoad() {
			this.myJoinTaskQuery();
			this.myTaskQuery();
			this.myStartTaskQuery();
		},
		onPullDownRefresh(){
			this.myTaskReset();
			this.myJoinTaskReset();
			this.myStartTaskReset();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			tabsChange(e) {
				this.swiperCurrent = e.currentIndex;
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottomMyTask() {
				this.myTaskQuery();
			},
			onreachBottomMyStartTask(){
				this.myStartTaskQuery();
			},
			onreachBottomMyJoinTask(){
				this.myJoinTaskQuery();
			},
			myStartTaskQuery(){
				let self = this;
				if (this.myStartTaskTotal != -1 && (this.myStartTaskPage-1)*5 >= this.myStartTaskTotal) {
					return
				} 
				this.flowableRequest({
					action: "flow/myStrartedFlow",
					data : {
						pageNum : self.myStartTaskPage,
						pageSize : 5
					},
					success(resData) {
						self.myStartTask = self.myStartTask.concat(resData.data.data);
						self.myStartTaskPage++;
						self.myStartTaskTotal  = resData.data.total;
					}
				})
			},
			myTaskQuery(){
				let self = this;
				if (this.myTaskTotal != -1 && (this.myTaskPage-1)*5 >= this.myTaskTotal) {
					return
				} 
				this.flowableRequest({
					action: "flow/getMyTask",
					data : {
						pageNum : self.myTaskPage,
						pageSize : 5
					},
					success(resData) {
						self.myTask = self.myTask.concat(resData.data.data);
						self.myTaskPage++;
						self.myTaskTotal  = resData.data.total;
					}
				})
			},
			myJoinTaskQuery(){
				let self = this;
				if (this.myJoinTaskTotal != -1 && (this.myJoinTaskPage-1)*5 >= this.myJoinTaskTotal) {
					return
				} 
				this.flowableRequest({
					action: "flow/getMyJoinProcint",
					data : {
						pageNum : self.myJoinTaskPage,
						pageSize : 5
					},
					success(resData) {
						self.myJoinTask = self.myJoinTask.concat(resData.data.data);
						self.myJoinTaskPage++;
						self.myJoinTaskTotal  = resData.data.total;
					}
				})
			},
			myTaskReset(){
				this.myTaskTotal = -1;
				this.myTaskPage = 1;
				this.myTask = [];
				this.myTaskQuery();
			},
			myStartTaskReset(){
				this.myStartTaskTotal = -1;
				this.myStartTaskPage = 1;
				this.myStartTask = [];
				this.myStartTaskQuery();
			},
			myJoinTaskReset(){
				this.myJoinTaskTotal = -1;
				this.myJoinTaskPage = 1;
				this.myJoinTask = [];
				this.myJoinTaskQuery();
			},
			openTaskDetail(id){
				uni.navigateTo({
				    url: '/pages/home/taskDetail?processInstanceId='+id
				});
			},
			openTaskDeal(id, taskId, menuId, businessKey){
				var self = this;
				uni.navigateTo({
				    url: '/pages/home/deal?processInstanceId='+id+'&taskId='+taskId + '&menuId=' + menuId + '&businessKey=' + businessKey,
					events: {
					    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					    reloadEvent : function(data) {
							self.myTaskReset();
							self.myJoinTaskReset();
					    }
					},
					success: function(res) {
						res.eventChannel.emit('reloadEvent', {})
					}
				});
			}
		}
	}
</script>

<style>
</style>