FE-lab-xcx/pages_equipmentUtilization/views/equipmentInformation/listPage.vue

<template>
	<view class="equipmentInformationListPage">
		<view class="top-bix-box">
			<view class="top-box">
				<view class="left-time-box">
					<uni-datetime-picker v-model="range" type="daterange"  :clearIcon="false"/>
				</view>
				<view class="right-button-box" @click="queryButton()">查询</view>
			</view>
			<view class="top-box" style="margin-top:10rpx;">
				<view class="left-time-box">
					<input class="input-text" type="text" v-model="text" placeholder="设备名称">
				</view>
				<view class="right-button-box-2" @click="resetButton()">重置</view>
			</view>
		</view>
		<scroll-view scroll-y @scrolltolower="scrollGet" class="list-max-big-box">
			<img class="null-img" v-if="!dataList[0]" :src="imagesUrl('commonality/null-data-1.png')">
			<view class="list-for-max-big-box" v-for="(item,index) in dataList" :key="index">
				<view class="top-title-box">
					<view>{{item.deviceName}}</view>
					<view>{{item.usageTypeName}}</view>
				</view>
				<view class="text-p">{{item.location}}</view>
				<view class="text-p">使用时间：{{item.startTime}} 至 {{item.actualEndTime?item.actualEndTime:'未结束'}}</view>
				<view class="bottom-title-box">
					<view>设备编号：{{item.deviceCode}}</view>
					<view>使用人：{{item.userName}}</view>
				</view>
			</view>
			<view class="get-data-null-p" v-if="getDataType">- 没有更多数据 -</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mpDeviceUsageList,
	} from '@/pages_equipmentUtilization/api/index.js'
	export default {
		data() {
			return {
				getDataType:false,
				range:[],
				text:'',
				// 查询参数
				queryParams: {
					page: 1,
					pageSize: 10,
				},
				dataList:[],
				total:0,
			}
		},
		onLoad(option) {
			
		},
		onShow() {
			
		},
		mounted() {
			this.getList()
		},
		methods: {
			queryButton(){
				this.getList()
			},
			resetButton(){
				this.$set(this,'range',[]);
				this.$set(this,'text','');
				this.$set(this,'queryParams',{
					page: 1,
					pageSize: 10,
				});
				this.$set(this,'dataList',[]);
				this.$set(this,'total',0);
				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.startTime = this.range[0] ? this.range[0] +'T00:00:00' : '';
				obj.endTime = this.range[0] ? this.range[1] +'T23:59:59' : '';
				obj.deviceName = this.text ? this.text : '';
				const {
					data
				} = await mpDeviceUsageList(obj);
				if (data.code == 200) {
					if(self.queryParams.page == 1){
						this.dataList = data.data.records;
						this.total = data.data.total;
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					}else{
						this.dataList = [...this.dataList, ...data.data.records]
						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>
	.equipmentInformationListPage {
		height: 100%;
		flex:1;
		display:flex;
		flex-direction:column;
		.top-bix-box{
			height:160rpx;
			padding:20rpx 20rpx;
			background-color: #fff;
			.top-box{
				display: flex;
				.left-time-box{
					width:600rpx;
					.input-text{
						padding-left:30rpx;
						height:70rpx;
						line-height:70rpx;
						border-radius:6rpx;
						color:#333;
						border:1px solid #e5e5e5;
					}
				}
				.right-button-box{
					margin-left:20rpx;
					width:140rpx;
					height:70rpx;
					line-height:70rpx;
					text-align: center;
					border-radius:6rpx;
					color:#fff;
					background-color: #0183FA;
					border:1px solid #0183FA;
				}
				.right-button-box-2{
					margin-left:20rpx;
					width:140rpx;
					height:70rpx;
					line-height:70rpx;
					text-align: center;
					border-radius:6rpx;
					color:#999;
					border:1px solid #e5e5e5;
				}
			}
		}
		.list-max-big-box{
			flex:1;
			display:flex;
			flex-direction:column;
			overflow: scroll;
			padding-bottom:80rpx;
			
			.null-img {
				display block;
				width: 276rpx;
				height: 321rpx;
				position absolute;
				top: 200rpx;
				left: 274rpx;
			}
			.get-data-null-p {
				margin-top:20rpx;
				text-align: center;
				line-height: 40rpx;
				padding-bottom: 40px;
				color: #999;
			}
			.list-for-max-big-box{
				margin:20rpx 0 0;
				padding:20rpx;
				background-color: #fff;
				.top-title-box{
					display:flex;
					line-height:60rpx;
					view{
						flex:1;
					}
					view:nth-child(1){
						color:#333;
					}
					view:nth-child(2){
						text-align: right;
						color:#888;
					}
				}
				.text-p{
					color:#888;
					line-height:60rpx;
				}
				.bottom-title-box{
					display:flex;
					line-height:60rpx;
					view{
						flex:1;
					}
					view:nth-child(1){
						color:#888;
					}
					view:nth-child(2){
						text-align: right;
						color:#888;
					}
				}
			}
		}
	}
</style>