FE-V2-XCX/pages/gasBottle/gasManage/useRecordList.vue

<!--库存列表-->
<template>
    <view id="gasRecycle">
		<view class="top-picker-max-box">
		    <view class="top-picker-box">
		        <picker @change="facultyChange" :value="facultyIndex" :range="facultyArray">
		            <view class="picker-view">
		                <view>{{!facultyIndex?'学院':facultyArray[facultyIndex]}}</view>
		                <img class="picker-img" src="@/pages_manage/images/icon_06.png" alt="">
		            </view>
		        </picker>
		    </view>
		    <view class="top-picker-box">
				<picker mode="date"  @change="startChange($event)">
					<view class="picker-view">
					    <view>{{!getData.startTime?'开始时间':getData.startTime}}</view>
					    <img class="picker-img" src="@/pages_manage/images/icon_06.png" alt="">
					</view>
				</picker>
		    </view>
		    <view class="top-picker-box">
		        <picker mode="date"  @change="endChange($event)">
		        	<view class="picker-view">
		        	    <view>{{!getData.endTime?'结束时间':getData.endTime}}</view>
		        	    <img class="picker-img" src="@/pages_manage/images/icon_06.png" alt="">
		        	</view>
		        </picker>
		    </view>
		</view>
		<view class="search">
			<view class="search_t">
				<view class="search_n">
					<input v-model="getData.searchValue"    type="text" placeholder="实验室名称/房间号">
					<view class="search_n_img" @click="searchBtn()">
						<img   class="icon_img" src="@/pages_manage/images/icon_aqjc_ss.png"/>
					</view>
				</view>
			</view>
		</view>
		
		<scroll-view scroll-y @scrolltolower="scrollGet" class="scroll-box">
		    <view class="for-big-box" v-for="(item,index) in dataList" :key="index">
		        <view class="for-time-p">{{item.gasName}}-{{item.levelName}}({{item.sizeName}})</view>
		        <img class="for-back-img" src="@/pages_manage/images/Version2.2/for_min_bg.png">
		        <view class="for-box" @click="goInfo(item)">
		        	<view class="for-box_t">使用量:{{item.usageAmount==null?'-':item.usageAmount}}Mpa</view>
		        	<view class="for-box_b">
						<img class="for-back-img" src="@/pages_manage/images/Version3.0/icon_qpgl_syl.png">
						<text>使用人: {{item.operator==null?'':item.operator}}</text>
					</view>
					<view class="for-box_b">
						<img class="for-back-img" src="@/pages_manage/images/Version2.2/icon_wtzg_sj.png">
						<text>使用时间: {{item.usageStartTime==null?'-':item.usageStartTime}} - {{item.usageEndTime==null?'-':item.usageEndTime}}</text>
					</view>
		        </view>
		    </view>
			<view class="get-null-box" v-if="total==0">暂无更多数据</view>
		</scroll-view>
		<view class="sub_btn" @click="subBtn()">新增入库</view>
	</view>
</template>

<script>
	import { gasList,listDepartments,airbottleUsageRecordList } from '@/api/index.js'
    export default {

        name: "gasRecycle",
        data() {
            return {

				pageType:0,
				//列表请求参数
				getData:{
				    pageNum:1,
					pageSize:20,
					collegeId:'',
					startTime:'',
					endTime:'',
					searchValue:'',
				},
				userType:uni.getStorageSync('userType'),
				gasBottleLevel:uni.getStorageSync('gasBottleLevel'),//  气瓶级别
				gasBottleSpecification:uni.getStorageSync('gasBottleSpecification'), // 气瓶规格
                dataList:[],
				noData:false,
				total:0,
				//院系选择器数据
				facultyList:[],
				facultyArray:[],
				facultyIndex:"",
            }
        },
        onLoad() {
			
        },
        onShow() {

        },
		mounted(){
			this.getList();
			this.listDepartments();

		},
        methods: {
			goInfo(d){

				uni.navigateTo({
				    url:'/pages/gasBottle/stockList/useRecordDetail?id='+d.id
				});
			},
			//获取院系
			async listDepartments(){
			    const {data} = await listDepartments();
			    if(data.code == 200){
			        let list = [];
			        for(let i=0;i<data.data.length;i++){
			            list.push(data.data[i].deptName)
			        }
			        this.facultyArray = list;
			        list.unshift('全部院系');
			        this.facultyList = data.data;
			        this.facultyList.unshift({deptName:"全部院系", deptId:""})
			    }
			},
			//学院选中
			facultyChange: function(e) {
				if(this.facultyArray[0]){
					this.facultyIndex = parseInt(e.target.value);
					this.getData.collegeId=this.facultyList[e.target.value].deptId;
					this.getData.pageNum=1;
					this.dataList=[];
					this.getList()
				}
			},
			//开始时间选中事件
			startChange(e){
				if(new Date(e.target.value).getTime()>=new Date(this.getData.endTime).getTime()){
					 uni.showToast({
						title: '结束时间不能小于开始时间',
						icon:"none",
						mask:true,
						duration: 2000
					});
				}else{
					this.$set(this.getData,'startTime',e.target.value);
					if(this.getData.endTime){
						this.getData.pageNum=1;
						this.dataList=[];
						this.getList()
					}
				}
			},
			//结束时间选中事件
			endChange(e){
				if(new Date(this.getData.startTime).getTime()>=new Date(e.target.value).getTime()){
					 uni.showToast({
						title: '结束时间不能小于开始时间',
						icon:"none",
						mask:true,
						duration: 2000
					});
				}else{
					this.$set(this.getData,'endTime',e.target.value);
					this.getData.pageNum=1;
					this.dataList=[];
					this.getList()
				}
			},
			//实验室房间号搜索
			searchBtn(){
				this.getData.pageNum=1;
				this.dataList=[];
				this.getList()
			},
			//新增入库
			subBtn(){
				uni.redirectTo({
					url:'/pages_student/useGasApply/useGasApplyAdd?status=0'
				});
			},
			//滚动加载事件
			scrollGet(){
			   let self=this;
			   if(self.total/self.getData.pageSize<=self.getData.pageNum){
			   	  console.log('没有更多数据!')
			   }else{
			   	  setTimeout(function(){
			   		  self.getData.pageNum += 1;
			   		  self.getList();
			   	  },1000)
			   
			   }
			},
			//获取列表数据
				async getList(){
				   let _this = this;

				    const {data} = await airbottleUsageRecordList(_this.getData);
				    if(data.code==200){
						for(let i=0;i<data.data.records.length;i++){
						  for(let b=0;b<this.gasBottleSpecification.length;b++){
								if(this.gasBottleSpecification[b].dictValue==data.data.records[i].size){
									data.data.records[i].sizeName=this.gasBottleSpecification[b].dictLabel
								}	
						  }
						  for(let t=0;t<this.gasBottleLevel.length;t++){
							if(this.gasBottleLevel[t].dictValue==data.data.records[i].level){
								data.data.records[i].levelName=this.gasBottleLevel[t].dictLabel
							}
						  }
										  
						}
						let res = data.data.records;
						this.total=data.data.total;
						if(res && res.length>0){
							if(_this.getData.pageNum==1){
								_this.dataList=res;
							}else{
								_this.dataList=_this.dataList.concat(res);
							}
						}else{
							_this.noData=true;
						}
				    }
				},

        }
    }
</script>

<style lang="stylus" scoped>
    #gasRecycle {
        height: 100%;
        width: 100%;
		flex :1;
        display flex;
        flex-direction column
        overflow hidden;
		.top-picker-max-box{
		    display:flex;
		    padding:0 20rpx;
		    background #fff
		    border-bottom:1rpx solid #E0E0E0;
		    .top-picker-box{
		        line-height:80rpx;
		        height:80rpx;
		        .picker-view{
		            display flex
		            view{
		                display:block;
		                overflow:hidden;
		                text-overflow:ellipsis;
		                white-space:nowrap;
		                font-size:28rpx;
		            }
		            .picker-img{
		                width:24rpx;
		                height:13rpx;
		                margin-top:36rpx;
		                margin-left:13rpx;
		            }
		        }
		    }
		    .top-picker-box:nth-child(1){
		        text-align left
		        width:320rpx;
		        .picker-view{
		            view{
		                max-width:260rpx;
		            }
		        }
		    }
		    .top-picker-box:nth-child(2){
		        text-align left
		        width:215rpx;
		        .picker-view{
		            view{
		                max-width:156rpx;
		            }
		        }
		    }
		    .top-picker-box:nth-child(3){
		        text-align right
		        width:195rpx;
		        .picker-view{
		            view{
		                flex:1;
		
		            }
		        }
		    }
		}
		/* 搜索 */
		.search{
			.search_t{
				background: #FFFFFF;
				padding: 20rpx;
				box-sizing: border-box;
				.search_n{
					width: 710rpx;
					height: 80rpx;
					border: 1px solid #E0E0E0;
					border-radius: 40rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding:0 0rpx 0 40rpx;
					box-sizing: border-box;
					>input{
						width: 640rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #CCCCCC;
						line-height: 30rpx;
					}
					.search_n_img{
						width: 70rpx;
						height: 80rpx;
						>img{
							width: 30rpx;
							height: 30rpx;
							margin: 30rpx 0 0 15rpx;
						}
					}
					
				}

			}
			.search_b{
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 20rpx 0;
				>text{
					display: inline-block;
					width: 200rpx;
					height: 60rpx;
					background: #FFFFFF;
					border-radius: 30rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 60rpx;
					text-align: center;
					margin-right: 20rpx;
				}
			}
		}
		
        .scroll-box{
        // flex:1;
         overflow-y scroll;
		 margin-top: 20rpx;
		 padding-bottom: 150rpx;
		 box-sizing: border-box;
         .for-big-box{
             margin:0 20rpx 20rpx;
             overflow hidden
             border-bottom-left-radius :20rpx;
             border-bottom-right-radius :20rpx;
             .for-time-p{
                 background #fff
                 line-height:87rpx;
                 font-size:30rpx;
                 padding:0 22rpx;
                 border-top-left-radius:20rpx;
                 border-top-right-radius:20rpx;
             }
             .for-back-img{
                 height:30rpx;
                 width:710rpx;
             }
			.for-box{
				overflow hidden;
				background: #fff;

				padding: 0 20rpx;
				box-sizing: border-box;
				.for-box_t{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 28rpx;
					margin: 28rpx 0 40rpx 0;
				}
				.for-box_b{
					display: flex;
					>img{
						width: 28rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}
					>text{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 26rpx;
						margin-bottom: 20rpx;
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap
					}
					>text:nth-of-type(1){
						flex:1;
					}
				}
			}
		 }
		 /*暂无数据*/
		 .get-null-box{
			 height:100rpx;
			 line-height:100rpx;
			 color:#999;
			 text-align center
		 }
     }
		/* 按钮 */
		.sub_btn{
			width: 650rpx;
			height: 100rpx;
			background: #0183FA;
			border-radius: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
			margin-left: 50rpx;
			position: fixed;
			bottom:30rpx;
			z-index: 1000;
		}
	}
</style>