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 style="display: flex;">
								<span v-if="item.FlowName == '收文-急件'">
									<image mode="widthFix" style="width: 18px; vertical-align: middle"
										src="/static/ji.png" alt="">
									</image>
								</span>
								<span v-if="item.isZhuBan == 'Y'">
									<image mode="widthFix" style="width: 18px; vertical-align: middle"
										src="/static/zhu.png" alt="">
									</image>
								</span>
								<u--text style="display: inline-block;" :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 style="display: flex;align-items: center;">
									{{item.FlowName}} <span style="margin-left: 20px;">{{item.NodeName}}</span>
									<view v-if="item.WFState == 5">
										（退回）
									</view>
									<view v-if="item.WFState == 6">
										（移交）
									</view>
								</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[2]" :refresher-triggered="xlList2[2]"
						@scrolltolower="lower(2)" @refresherrefresh="refresherrefresh(2)"
						@refresherrestore="refresherrestore(2)">
						<view style="padding: 20rpx;background-color: #fff;">
							<u-search v-model="me.title" placeholder="请输入标题" :showAction="true" actionText="搜索"
								:animation="true" @custom="mesearch" @clear="mesearch">
							</u-search>
						</view>
						<view v-for="(item,index) in meList" :key="index"
							style="padding: 20rpx 40rpx;border-bottom: 1px solid #eaeaea;background-color: #fff;"
							@click="getinfo(item)">
							<view style="display: flex;">
								<span v-if="item.FlowName == '收文-急件'">
									<image mode="widthFix" style="width: 18px; vertical-align: middle"
										src="/static/ji.png" alt="">
									</image>
								</span>
								<span v-if="item.isZhuBan == 'Y'">
									<image mode="widthFix" style="width: 18px; vertical-align: middle"
										src="/static/zhu.png" alt="">
									</image>
								</span>
								<u--text style="display: inline-block;" :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 style="display: flex;align-items: center;">
									{{item.FlowName}} <span style="margin-left: 20px;">{{item.NodeName}}</span>
									<view v-if="item.WFState == 5">
										（退回）
									</view>
									<view v-if="item.WFState == 6">
										（移交）
									</view>
								</view>
								<view>{{showtime(item.RDT)}}</view>
							</view>
						</view>
						<div style="padding: 10rpx 0;" v-if="meList.length > 0">
							<u-loadmore :status="statusList[2]" />
						</div>
						<div v-if="meList.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 style="display: flex;">
								<span v-if="item.FlowName == '收文-急件'">
									<image mode="widthFix" style="width: 18px; vertical-align: middle"
										src="/static/ji.png" alt="">
									</image>
								</span>
								<span v-if="item.isZhuBan == 'Y'">
									<image mode="widthFix" style="width: 18px; vertical-align: middle"
										src="/static/zhu.png" alt="">
									</image>
								</span>
								<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.FlowName}} <span style="margin-left: 20px;">{{item.NodeName}}</span>
								</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="3">
				<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-item @click="click(2)">
					<text class="grid-text" :class="current==2?'choose':''">已办</text>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	import {
		showtime
	} from "@/utils/wjw.js"
	import jiPng from '@/static/ji.png'
	export default {
		data() {
			return {
				jiPng,
				//当前待办还是已办
				current: 0,
				//待办相关
				db: {
					pageNum: 1,
					pageSize: 10,
					fkFlow: null,
					title: null,
					token: uni.getStorageSync('jtoken')
				},
				dbList: [],
				dbSearch: null,
				dbTotal: 0,
				//已办相关
				yb: {
					pageNum: 1,
					pageSize: 10,
					fkFlow: null,
					title: null,
					token: uni.getStorageSync('jtoken')
				},
				ybList: [],
				ybSearch: null,
				ybTotal: 0,
				//下拉刷新相关
				xlList1: [true, false, false],
				xlList2: [true, true, true],
				statusList: ['loadmore', 'loadmore', 'loadmore'],
				//查看事件
				showtime: showtime,
				//收发文状态
				type: null,
				meTotal: 0,
				meList: [],
				meSearch: null,
				me: {
					pageNum: 1,
					pageSize: 10,
					fkFlow: null,
					title: null,
					token: uni.getStorageSync('jtoken')
				},
				shouwenNum: null,
				numList: {},
				num: 0,
			}
		},
		onLoad(options) {
			this.db.fkFlow = options.fkFlow
			this.yb.fkFlow = options.fkFlow
			this.me.fkFlow = options.fkFlow
			this.type = options.type
			uni.setNavigationBarTitle({
				title: options.title
			})
			this.getDbList()

		},
		onShow() {
			getApp().globalData.peoIdList = []
			getApp().globalData.peoList = []
			getApp().globalData.peoDeptList = []
			getApp().globalData.adjustUserId = ''
			getApp().globalData.user = ''
			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()
						this.me.pageNum = 1
						this.meList = []
						this.getMeList()
						uni.$emit('query', {
							a: 'stag'
						})
					}, 2000)
				}
			})
		},
		methods: {

			//点击已办待办
			click(i) {
				this.current = i
				if (i == 0) {
					this.xlList1[0] = true
					this.xlList1[1] = false
					this.xlList1[2] = false
					if (this.dbList.length == 0) {
						this.getDbList()
					}
				} else if (i == 2) {
					this.xlList1[0] = false
					this.xlList1[2] = false
					this.xlList1[1] = true
					if (this.ybList.length == 0) {
						this.getYbList()
					}
				} else {
					this.xlList1[0] = false
					this.xlList1[2] = false
					this.xlList1[1] = true
					if (this.meList.length == 0) {
						this.getMeList()
					}
				}
			},
			//swiper切换
			animationfinish(e) {
				this.current = e.detail.current;
			},
			//查询待办列表
			getDbList() {
				uni.$u.http.get('/offcial/receive/todolist', {
					params: this.db
				}).then(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 => {
					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()
				})
			},
			//查询我的提交列表
			getMeList() {
				uni.$u.http.get('/jflow/restful/DB_MyStartFlowInstance', {
					params: this.me
				}).then(res => {
					uni.hideLoading()
					this.meList = [...this.meList, ...res.list]
					if (res.total <= this.me.pageSize) {
						this.statusList[2] = "nomore"
					} else {
						this.statusList[2] = "loadmore"
					}
					this.meTotal = Math.ceil(res.total / this.me.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 (e == 1) {
					if (this.yb.pageNum != this.ybTotal) {
						uni.showLoading({
							title: "加载中..."
						})
						this.yb.pageNum++
						this.getYbList()
					} else {
						uni.hideLoading()
						this.statusList[e] = "nomore"
						this.$forceUpdate()
					}
				} else {
					if (this.me.pageNum != this.meTotal) {
						uni.showLoading({
							title: "加载中..."
						})
						this.me.pageNum++
						this.getMeList()
					} 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 if (e == 1) {
					this.xlList2[e] = true
					this.yb.pageNum = 1
					this.ybList = []
					this.getYbList()
					setTimeout(() => {
						this.xlList2[e] = false
						this.$forceUpdate()
					}, 2000)
				} else {
					this.xlList2[e] = true
					this.me.pageNum = 1
					this.meList = []
					this.getMeList()
					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()
			},
			//已办搜索
			mesearch() {
				this.me.pageNum = 1
				this.meList = []
				this.getMeList()
			},
			//查看收文发文详情
			getinfo(item) {
				if (this.type == 1) {
					uni.navigateTo({
						url: "/pages/swMessage/swMessage?workid=" + item.WorkID + '&type=' + this.current +
							'&flowNo=' + item.FK_Flow + "&title=" + item.Title + "&nodeName=" + item.NodeName +
							"&nodeId=" + item.FK_Node + '&current=' + this.current
					})
				} 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>