rongtong_301_app/collection/list.vue

<template>
	<view class="content">
		<view class="topbar" v-show="isIphone">
		</view>
		<view class="status_bar">
			<view class="left2" @click="goBack">
				<u-icon name="arrow-left"></u-icon>返回
			</view>
			<span style="font-size: 36rpx;">医废收集</span>
			<view class="right2">
				<span>
					<u-icon @click="scanCode" style="margin-right: 10px;" name="scan" color="#fff" size="35rpx">
					</u-icon>
				</span>
				<span @click="filterShow = true">筛选</span>
			</view>
		</view>
		<view class="status_tabs">
			<u-tabs bg-color="#5976ba" active-color="#fff" inactive-color="#fff" :list="tabList" :is-scroll="false"
				:current="current" @change="tabChange"></u-tabs>
		</view>
		<view class="search_bar">
			<u-search @custom="clearSearch" :show-action="false" @search="onRefresh" placeholder="请输入打包人姓名/暂存点名称查询"
				v-model="keyword">
			</u-search>
		</view>
		<scroll-view :style="{paddingBottom: current == 1 ? '60px' : '10px'}" scroll-y class="scroll-box mainCont"
			@scrolltolower="handleLoadMore" @scroll="scroll" :refresher-enabled="scroll_refresher_enabled"
			:refresher-triggered="triggered" :refresher-threshold="100" refresher-background="white"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore">
			<view class="pcTop" v-show="current == 1 && tableList.length">{{ zyzText }}<span
					style="float: right">{{ zyzWeight }}kg</span>
			</view>
			<view class="card"
				@click="goInfo(item.packageId ? item.packageId : item.id, `${item.collectDate} ${item.batchName}(${item.packageNo})`, item.collectWeight)"
				v-for="(item, index) in tableList" :key="index">
				<view class="top">
					<view class="left" v-show="current != 2">{{ item.packCode }}</view>
					<view class="left" v-show="current == 2">{{ item.collectDate }} {{ item.batchName }}
						({{ item.packageNo }})</view>
					<view class="right" v-show="current == 0" style="color: #FF6600">待收集</view>
					<view class="right" v-show="current == 1" style="color: #00CC00">转运中</view>
					<view class="right" v-show="current == 2 && item.batchState == '2'" style="color: #1890FF">待验收
					</view>
					<view class="right" v-show="current == 2 && item.batchState == '3'"
						style="float: right; color: #BCBCBC">已完成</view>
				</view>
				<view class="bottom">
					<view v-show="current != 2">科&emsp;&emsp;室：{{ item.positionName }}<span
							style="float: right">{{ item.packWeight }}kg</span></view>
					<view v-show="current != 2">医废分类：{{ item.rubbishCategoryStr }}</view>
					<view v-show="current != 2">暂&ensp;存&ensp;点：{{ item.provisionalName }}</view>
					<view v-show="current != 2">打&ensp;包&ensp;人：{{ item.createUserName }}<span
							style="float: right">{{ item.createTime }}</span>
					</view>
					<view v-show="current == 0 && item.timeoutInfo" style="color: red">{{ item.timeoutInfo }}
					</view>
					<view v-show="current == 2">重&emsp;&emsp;量：{{ item.collectWeight }}kg</view>
					<view v-show="current == 2">验&ensp;收&ensp;人：{{ item.checkUserName }}</view>
					<view class="bButton" v-show="current == 0">
						<!-- <span @click.stop="doCollect()">收集</span> -->
						<span>收集</span>
					</view>
				</view>
			</view>
			<view style="margin-top: 100px;text-align: center;" v-show="!tableList.length">暂无数据</view>
		</scroll-view>
		<view class="bottomButtons" v-show="current == 1">
			<view @click="goLine" style="background-color: #fff;color: rgba(89, 118, 186, 1)">查看线路</view>
			<view @click="checkOutLine" style="background-color: rgba(89, 118, 186, 1);color: #fff;">转运完成</view>
		</view>
		<u-popup v-model="filterShow" mode="bottom" height="300px">
			<view class="status_bar" style="height: 40px;line-height: 40px;">
				<view class="left" @click="filterShow = false">取消</view>
				<span @click='filterClear'>清空筛选</span>
				<view class="right" @click="filterDo">确定</view>
			</view>
			<view class="filterCont">
				<view class="left">
					<view @click="filterLChange(item.name, index)" :key="index" v-for="(item, index) in filterItem"
						:class="{active: active == item.name}">
						{{ item.name }}
					</view>
				</view>
				<scroll-view scroll-y class="right">
					<view @click="filterRChange(item.value, index)" v-for="(item, index) in selectItems" :key="index"
						:class="{active: filterItem[activeIndex].value == item.value}">
						{{ item.label }}
						<span v-show="filterItem[activeIndex].value == item.value" style="float: right">✔</span>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-modal ref="uModal" async-close v-model="notShow" @cancel="" @confirm="checkComplete" show-cancel-button
			title="提示">
			<view class="slot-content">
				<view style="width: 80%;text-align: center;margin: 15px auto;">
					<p style="margin-bottom: 10px;">您在转运过程中未按照规定路线转运，请说明原因后提交</p>
					<u-input placeholder="请输入原因" v-model="reason" type="text" border />
				</view>

			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				current: 0,
				tabList: [{
					name: '待收集'
				}, {
					name: '转运中'
				}, {
					name: '已完成'
				}],
				scroll_refresher_enabled: true,
				zyzText: "",
				zyzSl: "",
				zyzWeight: "",
				buildingId: "",
				triggered: false,
				isOver: false,
				keyword: "",
				tableList: [],
				isIphone: false,
				pageIndex: 1,
				loading: false,
				loading1: false,
				filterShow: false,
				notShow: false,
				reason: "",
				filterItem: [{
					name: '科室',
					label: 'room',
					value: '',
					item: []
				}, {
					name: '时间段',
					label: 'time',
					value: '',
					item: [{
						label: '05:00-07:30',
						value: '05:00-07:30'
					}, {
						label: '07:30-10:00',
						value: '07:30-10:00'
					}, {
						label: '10:00-12:30',
						value: '10:00-12:30'
					}, {
						label: '12:30-15:00',
						value: '12:30-15:00'
					}, {
						label: '15:00-17:30',
						value: '15:00-17:30'
					}]
				}],
				active: '科室',
				activeIndex: 0,
				selectItems: [],
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					if (res.model == 'iPhone') {
						this.isIphone = true;
					}
				},
				fail: (err) => {
					console.log(err)
				}
			})
			// this.tabList[0].name = '待收集(0)'
			// this.tabList[1].name = '转运中(0)'
			// this.tabList[2].name = '已完成(0)'
		},
		onReady() {
			if (this.isIphone) {
				document.getElementsByClassName('mainCont')[0].style.height = document.getElementsByClassName('mainCont')[
					0].clientHeight - 25 + 'px'
			}
		},
		onShow() {
			NET.request(API.getUserInfoById, {}).then(res => {
				this.buildingId = res.data.buildingId
				NET.request(API.getOfficeBoxInfo, {
					buildingId: res.data.buildingId,
				}).then(res => {
					for (let i in res.data) {
						res.data[i].label = res.data[i].positionName
						res.data[i].value = res.data[i].id
					}
					this.filterItem[0].item = res.data
					this.selectItems = res.data
				}).catch(error => {
					this.$refs.uToast.show({
						title: error.msg,
						type: 'warning',
					})
				})
			}).catch(error => {
				this.$refs.uToast.show({
					title: error.msg,
					type: 'warning',
				})
			})

			let date = new Date;
			//获取年份
			let yy = date.getFullYear();
			//获取月份
			let mm = date.getMonth() + 1;
			//如果月份小于10 前面加0
			mm = (mm < 10 ? "0" + mm : mm);
			let dd = date.getDate();
			dd = (dd < 10 ? "0" + dd : dd);
			//返回日期 
			this.time = `${yy}-${mm}-${dd}`
			this.tabList[0].name = '待收集(0)'
			this.tabList[1].name = '转运中(0)'
			this.tabList[2].name = '已完成(0)'
			this.onRefresh();
		},
		methods: {
			goBack() {
				try {
					EbeiPlugins.onBackKeyDown();
				} catch (error) {}
			},
			scanCode() {
				console.log('asdasdasd')
				let that = this
				EbeiPlugins.scanQRCode((string) => {
					NET.request(API.batchSignIn, {
						positionId: string
					}, 'POST').then(res => {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success',
						})
					}).catch(error => {
						this.$refs.uToast.show({
							title: error.msg,
							type: 'warning',
						})
					})
				}, () => {
					that.showTips('扫码失败')
				})
			},
			tabChange(index) {
				this.current = index;
				this.onRefresh()
			},
			clearSearch() {
				this.keyword = "";
			},
			scroll(e) {
				if (e.detail.scrollTop <= 60) {
					this.scroll_refresher_enabled = true
				} else {
					this.scroll_refresher_enabled = false
				}
			},
			getNums() {
				if (this.loading1) {
					return false;
				}
				let postData = {
					buildingId: this.buildingId,
					pageIndex: this.pageIndex,
					pageSize: 10,
					// packState: 1,
					date: this.time,
				}
				if (this.filterItem[0].value) {
					postData.positionId = this.filterItem[0].value
				}
				if (this.filterItem[1].value) {
					postData.startDate = this.filterItem[1].value.split("-")[0]
					postData.endDate = this.filterItem[1].value.split("-")[1]
				}
				this.loading1 = true;
				NET.request(API.needCollectNo, postData, 'POST').then(res => {
					this.tabList[0].name = `待收集(${res.data[1]})`
					this.tabList[1].name = `转运中(${res.data[2] == 0 ? 0 : 1})`
					this.zyzSl = res.data[2] ? res.data[2] : 0
					this.loading1 = false;
					NET.request(API.getMovingBatchData).then(res => {
						this.zyzText = `${res.data.collectDate}${res.data.batchName}(${this.zyzSl})`
						this.zyzWeight = res.data.collectWeight
					}).catch(error => {
						this.$refs.uToast.show({
							title: error.msg,
							type: 'warning',
						})
					})
				}).catch(error => {
					this.$refs.uToast.show({
						title: error.msg,
						type: 'warning',
					})
				})
				let postData2 = {
					date: this.time,
					buildingId: this.buildingId,
				}
				NET.request(API.completeNo, postData, 'POST').then(res => {
					this.tabList[2].name = `已完成(${res.data})`
				}).catch(error => {
					this.$refs.uToast.show({
						title: error.msg,
						type: 'warning',
					})
				})

			},
			getTableList() {
				if (this.loading || this.isOver) {
					return false;
				}
				this.loading = true;
				let postData = {
					pageIndex: this.pageIndex,
					pageSize: 10,
					packState: this.current + 1,
					date: this.time,
					// data: '2021-07-22'
				}
				if (this.filterItem[0].value) {
					postData.positionId = this.filterItem[0].value
				}
				if (this.filterItem[1].value) {
					postData.startDate = this.filterItem[1].value.split("-")[0]
					postData.endDate = this.filterItem[1].value.split("-")[1]
				}
				if (this.current == 2) {
					postData.batchState = '23'
				}
				if (this.current != 2) {
					NET.request(API.queryPackageList, postData, 'POST').then(res => {
						this.triggered = false;
						this.loading = false;
						if (res.data.records.length < 10) {
							this.isOver = true
						}
						for (let i in res.data.records) {
							this.tableList.push(res.data.records[i])
						}
					}).catch(error => {
						this.$refs.uToast.show({
							title: error.msg,
							type: 'warning',
						})
					})
				} else {
					NET.request(API.queryBatchList, postData, 'POST').then(res => {
						this.triggered = false;
						this.loading = false;
						if (res.data.length < 10) {
							this.isOver = true
						}
						for (let i in res.data) {
							this.tableList.push(res.data[i])
						}
					}).catch(error => {
						this.$refs.uToast.show({
							title: error.msg,
							type: 'warning',
						})
					})
				}

			},
			//  下拉刷新
			onRefresh() {
				this.triggered = true
				this.isOver = false
				this.pageIndex = 1
				this.tableList = []
				this.getTableList()
				this.getNums()
			},
			//  重置下拉刷新状态
			onRestore() {
				this.triggered = 'restore'
				this.triggered = false
			},
			//获取更多数据
			handleLoadMore() {
				if (this.isOver) {

				} else if (this.loading) {

				} else {
					this.pageIndex++;
					this.getTableList()
				}
			},
			filterLChange(name, index) {
				this.active = name;
				this.activeIndex = index;
				this.selectItems = this.filterItem[index].item
			},
			filterRChange(value, index) {
				this.filterItem[this.activeIndex].value = value;
			},
			filterDo() {
				this.filterShow = false;
				this.onRefresh()
				console.log(this.filterItem)
			},
			filterClear() {
				this.filterShow = false;
				for (let i in this.filterItem) {
					this.filterItem[i].value = ""
				}
				this.onRefresh()
			},
			checkComplete() {
				if (!this.reason) {
					this.$refs.uToast.show({
						title: '请填写原因',
						type: 'warning',
					})
					this.$refs.uModal.clearLoading();
					return false
				} else {
					this.notShow = false;
					this.completeCollect(this.reason);
				}
			},
			completeCollect(reason) {
				let postData = {}
				if (reason) {
					postData = {
						pathReason: reason
					}
				} else {

				}
				NET.request(API.completeMove, postData, 'POST').then(res => {
					this.reason = ""
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
					})
					this.onRefresh()
				}).catch(error => {
					this.$refs.uToast.show({
						title: error.msg,
						type: 'warning',
					})
				})
			},
			checkOutLine() {
				NET.request(API.checkoutPathResult).then(res => {
					if (!res.data.pathResult) {
						this.notShow = true
					} else {
						this.completeCollect()
					}
				}).catch(error => {
					this.$refs.uToast.show({
						title: error.msg,
						type: 'warning',
					})
				})
			},
			doCollect() {

			},
			goInfo(id, text, weight) {
				if (this.current == 0 || this.current == 1) {
					uni.navigateTo({
						url: `/collection/infor?id=${id}`
					});
				} else if (this.current == 2) {
					uni.navigateTo({
						url: `/collection/list2?id=${id}&text=${text}&weight=${weight}`
					});
				}
			},
			goLine() {
				uni.navigateTo({
					url: '/collection/line?id=asd'
				});
			}
		}
	}
</script>

<style lang="scss">
	.search_bar {
		padding: 0 10px;
		height: 100rpx;
		background: #fff;
		line-height: 100rpx;
	}

	.mainCont {
		height: calc(100% - 80rpx - 80rpx - 100rpx);
		padding: 10px 0 10px 0;
		box-sizing: border-box;
	}

	.pcTop {
		width: calc(100% - 20px);
		padding: 0 10px;
		height: 20px;
		line-height: 20px;
		margin: 0 auto;
		margin-bottom: 10px;
		position: relative;

		&:after {
			content: '';
			position: absolute;
			height: 20px;
			top: 0;
			left: 0;
			width: 2px;
			background-color: #6aa0f7;
		}
	}

	.bottomButtons {
		box-shadow: 0px -5px 5px #d0cece;
		position: fixed;
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 40px;
		line-height: 40px;
		bottom: 0;
		left: 0;

		view {
			width: 50%;
			height: 40px;
			line-height: 40px;
			text-align: center;
		}
	}

	.filterCont {
		width: 100%;
		height: calc(100% - 40px);
		display: flex;
		justify-content: space-between;

		.left {
			height: 100%;
			overflow-y: scroll;
			width: 30%;
			background-color: #fafafa;

			view {
				height: 40px;
				line-height: 40px;
				text-align: center;

				&.active {
					background-color: #fff;
				}
			}
		}

		.right {
			height: 100%;
			overflow-y: scroll;
			width: 70%;

			view {
				width: calc(100% - 20px);
				margin: 0 auto;
				padding: 0 20px;
				// height: 39px;
				line-height: 39px;
				border-bottom: 1px solid #f2f2f2;
			}
		}
	}

	/deep/ .uni-scroll-view-refresher {
		background-color: #f5f5f9 !important;
	}
</style>