dingzhou-app/pages/shouwen/shouwen.vue

<template>
	<view style="width: 100vw;height:100vh;">
		<view style="height: calc(100% - 102rpx);">
			<swiper style="height: 100%;background-color:#F3F4F6 ;" :current="current" disable-touch
				@animationfinish="animationfinish">
				<swiper-item >
					<scroll-view scroll-y style="width: 100%;height: 100%;overflow: auto;box-sizing: border-box;" lower-threshold="10" :refresher-enabled="xlList1[0]" :refresher-triggered="xlList2[0]" @scrolltolower="lower(0)" @refresherrefresh="refresherrefresh(0)" @refresherrestore="refresherrestore(0)">
						<view style="padding: 20rpx;background-color: #fff;">
							<u-search v-model="db.title" placeholder="请输入标题" :showAction="true" actionText="搜索"
								:animation="true" @custom="dbsearch" @clear="dbsearch">
						
							</u-search>
						</view>
						<view v-for="(item,index) in dbList" :key="index" style="padding: 20rpx 40rpx;border-bottom: 1px solid #eaeaea;background-color: #fff;" @click="getinfo(item)">
							<view >
								<u--text :lines="1" size="32rpx" :text="item.Title"></u--text>
							</view>
							<view style="display: flex;justify-content: space-between;margin-top: 20rpx;color:#909399;font-size: 28rpx;">
								<view>{{item.NodeName}}</view>
								<view>{{showtime(item.ADT)}}</view>
							</view>
						</view>
						<div style="padding: 10rpx 0;" v-if="dbList.length > 0">
							<u-loadmore :status="statusList[0]" />
						</div>
						<div v-if="dbList.length == 0">
							<u-empty mode="list" icon="/static/list.png" text="暂无内容" textSize="30rpx"></u-empty>
						</div>
					</scroll-view>
				</swiper-item>
				<swiper-item >
					<scroll-view scroll-y style="width: 100%;height: 100%;overflow: auto;box-sizing: border-box;" lower-threshold="10" :refresher-enabled="xlList1[1]" :refresher-triggered="xlList2[1]" @scrolltolower="lower(1)" @refresherrefresh="refresherrefresh(1)" @refresherrestore="refresherrestore(1)">
						<view style="padding: 20rpx;background-color: #fff;">
							<u-search v-model="yb.title" placeholder="请输入标题" :showAction="true" actionText="搜索"
								:animation="true" @custom="ybsearch" @clear="ybsearch">
						
							</u-search>
						</view>
						<view v-for="(item,index) in ybList" :key="index" style="padding: 20rpx 40rpx;border-bottom: 1px solid #eaeaea;background-color: #fff;" @click="getinfo(item)">
							<view >
								<u--text :lines="1" size="32rpx" :text="item.Title"></u--text>
							</view>
							<view style="display: flex;justify-content: space-between;margin-top: 20rpx;color:#909399;font-size: 28rpx;">
								<view>{{item.NodeName}}</view>
								<view>{{showtime(item.RDT)}}</view>
							</view>
						</view>
						<div style="padding: 10rpx 0;" v-if="ybList.length >0">
							<u-loadmore :status="statusList[1]" />
						</div>
						<div v-if="ybList.length == 0">
							<u-empty mode="list" icon="/static/list.png" text="暂无内容" textSize="30rpx"></u-empty>
						</div>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view style="height: 100rpx;border-top: 2px solid #dadbde;box-sizing: border-box;background-color: #fff;">
			<u-grid :border="true" col="2">
				<u-grid-item @click="click(0)">
					<text class="grid-text" :class="current==0?'choose':''">待办</text>
				</u-grid-item>
				<u-grid-item @click="click(1)">
					<text class="grid-text" :class="current==1?'choose':''">已办</text>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	import {showtime} from "@/utils/wjw.js"
	export default {
		data() {
			return {
				//当前待办还是已办
				current:0,
				//待办相关
				db:{
					pageNum:1,
					pageSize:20,
					fkFlow:null,
					title:null,
					token:uni.getStorageSync('jtoken')
				},
				dbList:[],
				dbSearch:null,
				dbTotal:0,
				//已办相关
				yb:{
					pageNum:1,
					pageSize:20,
					fkFlow:null,
					title:null,
					token:uni.getStorageSync('jtoken')
				},
				ybList:[],
				ybSearch:null,
				ybTotal:0,
				//下拉刷新相关
				xlList1:[true,false],
				xlList2:[true,true],
				statusList:['loadmore','loadmore'],
				//查看事件
				showtime:showtime,
				//收发文状态
				type:null,
			}
		},
		onLoad(options){
			this.db.fkFlow = options.fkFlow
			this.yb.fkFlow = options.fkFlow
			this.type = options.type
			uni.setNavigationBarTitle({
				title:options.title
			})
			this.getDbList()
			
		},
		onShow(){
			uni.$off()
			uni.$on('query', (query) => {
				if(query.a== 'back'){
					// uni.showLoading({
					// 	title:'加载中...',
					// 	mask:true
					// })
					setTimeout(()=>{
						this.db.pageNum = 1
						this.dbList = []
						this.getDbList()
						this.yb.pageNum = 1
						this.ybList = []
						this.getYbList()
					},2000)
					
				}
			})
		},
		methods: {
			//点击已办待办
			click(i){
				this.current = i
				
				if(i==0){
					this.xlList1[0] = true
					this.xlList1[1] = false
					if(this.dbList.length == 0){
						this.getDbList()
					}
				}else{
					this.xlList1[0] = false
					this.xlList1[1] = true
					if(this.ybList.length == 0){
						this.getYbList()
					}
				}
			},
			//swiper切换
			animationfinish(e){
				this.current = e.detail.current;
			},
			//查询待办列表
			getDbList(){
				uni.$u.http.get('/jflow/restful/DB_Todolist_FlowNo',{params:this.db}).then(res=>{
					// console.log(res)
					uni.hideLoading()
					this.dbList = [...this.dbList,...res.list]	
					if(res.total<=this.db.pageSize){
						this.statusList[0] = "nomore"
					}else{
						this.statusList[0] = "loadmore"
					}
					this.dbTotal = Math.ceil(res.total / this.db.pageSize)
					this.$forceUpdate()
				})
			},
			//查询已办列表
			getYbList(){
				uni.$u.http.get('/jflow/restful/MyJoinOneFlows',{params:this.yb}).then(res=>{
					console.log(res)
					uni.hideLoading()
					this.ybList = [...this.ybList,...res.list]	
					if(res.total<=this.yb.pageSize){
						this.statusList[1] = "nomore"
					}else{
						this.statusList[1] = "loadmore"
					}
					this.ybTotal = Math.ceil(res.total / this.yb.pageSize)
					this.$forceUpdate()
				})
			},
			//触底加载
			lower(e){
				if(e==0){
					if(this.db.pageNum != this.dbTotal){
						uni.showLoading({
							title:"加载中..."
						})
						this.db.pageNum++
						this.getDbList()
					}else{
						uni.hideLoading()
						this.statusList[e] = "nomore"
						this.$forceUpdate()
					}
				}else{
					if(this.yb.pageNum != this.ybTotal){
						uni.showLoading({
							title:"加载中..."
						})
						this.yb.pageNum++
						this.getYbList()
					}else{
						uni.hideLoading()
						this.statusList[e] = "nomore"
						this.$forceUpdate()
					}
				}
				
			},
			//下拉刷新
			refresherrefresh(e){
				if(e==0){
					this.xlList2[e] = true
					this.db.pageNum = 1
					this.dbList = []
					this.getDbList()
					setTimeout(()=>{
						this.xlList2[e] = false
						this.$forceUpdate()
					},2000)
				}else{
					this.xlList2[e] = true
					this.yb.pageNum = 1
					this.ybList = []
					this.getYbList()
					setTimeout(()=>{
						this.xlList2[e] = false
						this.$forceUpdate()
					},2000)
				}
			},
			refresherrestore(e){
				
			},
			//待办搜索
			dbsearch(){
				this.db.pageNum = 1
				this.dbList = []
				this.getDbList()
			},
			//已办搜索
			ybsearch(){
				this.yb.pageNum = 1
				this.ybList = []
				this.getYbList()
			},
			//查看收文发文详情
			getinfo(item){
				if(this.type == 1){
					uni.navigateTo({
						url:"/pages/swMessage/swMessage?workid="+item.WorkID+'&type='+this.current+'&flowNo='+this.db.fkFlow+"&title="+item.Title+"&nodeName="+item.NodeName+"&nodeId="+item.FK_Node
					})
				}else if(this.type == 2){
					uni.navigateTo({
						url:"/pages/fwMessage/fwMessage?workid="+item.WorkID+'&type='+this.current+'&flowNo='+this.db.fkFlow+"&title="+item.Title+"&nodeName="+item.NodeName+"&nodeId="+item.FK_Node
					})
				}else{
					uni.navigateTo({
						url:"/pages/inforeview/inforeview?workid="+item.WorkID+'&type='+this.current+'&flowNo='+this.db.fkFlow+"&title="+item.Title+"&nodeName="+item.NodeName+"&nodeId="+item.FK_Node
					})
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.grid-text {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 36rpx;
		color: #606266;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
	.choose{
		color:#409EFF
	}
</style>