FE-lab-xcx/pages_hazardousWasteRecycling/views/historicalRecords/index.vue

<!-- 历史记录 -->
<template>
	<view class="historicalRecords">
		<view class="picker-box-max">
			<view class="picker-box">
				<picker @change="subChange" :value="subIndex" :range="subList" :range-key="'subName'">
					<view class="picker-p" :class="queryParams.subId?'check-picker-p':''">{{queryParams.subId?queryParams.subName:'全部实验室'}}</view>
				</picker>
			</view>
			<view class="picker-box-2" @click="resetButton()">重置</view>
		</view>
		<view class="check-button-max-box">
			<view @click="checkButton('0')" :class="typeIndex == '0'?'check-p':''">已报备待回收</view>
			<view @click="checkButton('1')" :class="typeIndex == '1'?'check-p':''">已回收</view>
			<view @click="checkButton('2')" :class="typeIndex == '2'?'check-p':''">超期未回收</view>
		</view>
		<scroll-view scroll-y @scrolltolower="scrollGet" class="for-max-box">
			<view class="for-max-big-box" @click="goPage(item)"
			v-for="(item,index) in dataList" :key="index">
				<view class="for-title-p">报备单编号：{{item.reportNo}}</view>
				<view class="for-text-p">报备实验室：{{item.subName}}({{item.roomNum}})</view>
				<view class="for-text-p">上门回收日期：{{item.expectTime}}({{item.expectWeek}})</view>
				<view class="for-text-p">废物种类：{{item.typeNum}}</view>
				<view class="for-text-p">报备人：{{item.reportName}}</view>
				<view class="for-text-p">报备时间：{{item.reportTime}}</view>
				<view class="for-type-p" :class="item.status=='0'?'colorA':(item.status=='1'?'colorB':(item.status=='2'?'colorC':''))">{{item.status=='0'?'已报备待回收':(item.status=='1'?'已回收':(item.status=='2'?'超期未回收':''))}}</view>
				<view class="for-icon-p">》</view>
			</view>
			<view class="get-null-box" v-if="getDataType">暂无更多数据</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/component/public.js'
	import {
		hwmsAppWasteOrderList,
		hwmsAppWasteOrderHistoryList,
	} from '@/pages_hazardousWasteRecycling/api/index.js'
	export default {
		data() {
			return {
				subIndex:'',
				subList:[],
				// 查询参数
				getDataType: false,
				queryParams: {
					page: 1,
					pageSize: 10,
					subId:null,
					subName:null,
				},
				total: 0,
				dataList: [],
				typeIndex:"0",
			}
		},
		onLoad(option) {
			
		},
		onShow() {
			this.hwmsAppWasteOrderList();
			this.getList();
		},
		mounted() {
			
		},
		methods: {
			resetButton(){
				this.$set(this.queryParams,'page', 1);
				this.$set(this.queryParams,'subId',null);
				this.$set(this.queryParams,'subName',null);
				this.$set(this, 'subIndex', '');
				this.$set(this, 'getDataType', false);
				this.getList();
			},
			subChange(e){
				this.$set(this,'subIndex',e.detail.value);
				this.$set(this.queryParams,'subId',this.subList[e.detail.value].subId);
				this.$set(this.queryParams,'subName',this.subList[e.detail.value].subName);
				this.$set(this, 'getDataType', false);
				this.$set(this.queryParams, 'page', 1);
				this.getList();
			},
			async hwmsAppWasteOrderList(){
				const {
					data
				} = await hwmsAppWasteOrderList();
				if (data.code == 200) {
					this.$set(this,'subList',data.data.subjectVos);
				}
			},
			//详情跳转
			goPage(item){
				uni.navigateTo({
					url: "/pages_hazardousWasteRecycling/views/historicalRecords/infoPage?id="+item.id,
				});
			},
			//选项切换
			checkButton(type){
				if(this.typeIndex != type){
					this.$set(this,'typeIndex',type);
					this.$set(this, 'getDataType', false);
					this.$set(this.queryParams, 'page', 1);
					this.getList();
				}
			},
			//滚动加载事件
			scrollGet() {
				let self = this;
				if (self.total / self.queryParams.pageSize <= self.queryParams.page) {
					this.$set(this, 'getDataType', true);
				} else {
					this.queryParams.page += 1;
					this.$nextTick(() => {
						this.getList();
					})
				}
			},
			//获取列表
			async getList() {
				let self = this;
				let obj = JSON.parse(JSON.stringify(this.queryParams));
				obj.status = this.typeIndex;
				const {
					data
				} = await hwmsAppWasteOrderHistoryList(obj);
				if (data.code == 200) {
					for(let i=0;i<data.data.records.length;i++){
						data.data.records[i].reportTime = parseTime(data.data.records[i].reportTime, "{y}-{m}-{d} {h}:{i}:{s}");
					}
					if(self.queryParams.page == 1){
						this.$set(this, 'dataList', data.data.records);
						this.$set(this, 'total', data.data.total);
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					}else{
						this.$set(this, 'dataList', [...this.dataList, ...data.data.records]);
						this.$set(this, 'total', data.data.total);
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					}
				}
			},
		},
	}
</script>

<style lang="stylus" scoped>
	.historicalRecords{
		height: 100%;
		display flex;
		flex-direction column;
		.get-null-box {
			height: 100rpx;
			line-height: 100rpx;
			color: #999;
			text-align center;
		}
		.picker-box-max{
			display: flex;
		}
		.picker-box-2{
			width:100rpx;
			border:1rpx solid #dedede;
			color:#999;
			text-align: center;
			line-height:60rpx;
			height:60rpx;
			margin-top: 20rpx;
			border-radius:10rpx;
			background-color: #fff;
		}
		.picker-box{
			height:60rpx;
			width:572rpx;
			margin:20rpx 25rpx;
			background-color: #fff
			border:1rpx solid #dedede;
			border-radius:10rpx;
			.picker-p{
				padding:0 20rpx;
				color:#666;
				line-height:60rpx;
			}
			.check-picker-p{
				
			}
		}
		.check-button-max-box{
			display: flex;
			border-radius:10rpx;
			border:1rpx solid #fff;
			line-height:58rpx;
			height:60rpx;
			width:700rpx;
			margin:0 25rpx 20rpx;
			overflow: hidden;
			view{
				flex:1;
				text-align: center;
				background-color: #fff;
				color:#0183FA;
			}
			.check-p{
				background-color: #0183FA;
				color:#fff;
			}
		}
		.for-max-box{
			flex: 1;
			overflow-y scroll;
			padding-bottom:60rpx;
			.for-max-big-box{
				margin:0 25rpx 25rpx;
				background-color: #fff;
				border-radius:10rpx;
				border:1rpx solid #dedede;
				padding:20rpx;
				position: relative;
				.for-title-p{
					font-size:30rpx;
					font-weight:700;
					line-height:50rpx;
				}
				.for-text-p{
					font-size:30rpx;
					line-height:50rpx;
				}
				.for-type-p{
					position: absolute;
					bottom:76rpx;
					right:20rpx;
				}
				.for-icon-p{
					position: absolute;
					top:155rpx;
					right:20rpx;
					font-size:32rpx;
					color:#999;
				}
				.colorA{
					color:#0183FA;
				}
				.colorB{
					color:#00CD66;
				}
				.colorC{
					color:#FF6A6A;
				}
			}
		}
	}
</style>