FE-lab-xcx/pages_supplierCylinderManagement/views/gasCylinderManagement/historyRecord.vue

<!-- 历史记录 -->
<template>
	<view id="gasCylinderHistoryRecord">
		<view class="top-input-max-box">
			<view class="input-box">
				<uni-icons type="search" class="icon-box" color="#7C7C7C" size="25"></uni-icons>
				<input class="uni-input input-min" confirm-type="search" @confirm="getList()"
					v-model="inputData" maxlength="20" placeholder="搜索气瓶" />	
				<view class="button-p" @click="resetButton()">重置</view>
			</view>
			<view class="picker-box">
				<picker @change="bindPickerChangeA" :value="indexA" :range="arrayA">
					<view class="picker-min-box">
						<view>{{indexA==null?'状态':arrayA[indexA]}}</view>
						<uni-icons type="down" class="icon-box" size="15"></uni-icons>
					</view>
				</picker>
				<picker @change="bindPickerChangeB" :value="indexB" :range="arrayB">
					<view class="picker-min-box">
						<view>{{indexB==null?'气体':arrayB[indexB]}}</view>
						<uni-icons type="down" class="icon-box" size="15"></uni-icons>
					</view>
				</picker>
			</view>
		</view>
		<scroll-view scroll-y @scrolltolower="scrollGet" class="content-box">
			<view class="null-p" v-if="!dataList[0]">暂无数据</view>
			<view class="for-max-big-box" @click="checkButton(item)"
			v-for="(item,index) in dataList" :key="index">
				<view class="for-title-box" v-if="!item.specialGases">
					<view>气瓶编码：{{item.bottleCode}}</view>
					<view :class="item.state==1?'colorA':(item.state==2?'colorB':'')">{{item.state==0?'待入库':(item.state==1?'已入库':'已出库')}}</view>
				</view>
				<view class="for-title-box" v-if="item.specialGases">
					<view>气体：{{item.gasName}}</view>
					<view :class="item.state==1?'colorA':(item.state==2?'colorB':'')">{{item.state==0?'待入库':(item.state==1?'已入库':'已出库')}}</view>
				</view>
				<view class="for-text-box" v-if="!item.specialGases">
					<view>气体：</view>
					<view>{{item.gasName}}</view>
				</view>
				<view class="for-text-box">
					<view>纯度：</view>
					<view>{{item.purity}}</view>
				</view>
				<view class="for-text-box">
					<view>实验室名称：</view>
					<view>{{item.subName}}</view>
				</view>
				<view class="for-text-box">
					<view>{{item.recordType ==1 ?'入库时间':'出库时间'}}：</view>
					<view>{{item.storageTime}}</view>
				</view>
				<view class="for-text-box">
					<view>{{item.recordType ==1 ?'入库人':'出库人'}}：</view>
					<view>{{item.operator}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/component/public.js'
	import {
		airBottleNewQpAppletBottleHistoryPage,airBottleNewQpDictList,
	} from '@/pages_supplierCylinderManagement/api/index.js'
	export default {
		data() {
			return {
				inputData:'',
				arrayA:['已入库','已出库'],
				indexA:0,
				arrayB:[],
				indexB:null,
				dataList:[],
				// 查询参数
				getDataType: false,
				queryParams: {
					page: 1,
					pageSize: 10,
				},
				total:0,
			}
		},
		onLoad(option) {
			
		},
		onShow() {
			this.airBottleNewQpDictList1();
			this.getList();
		},

		methods: {
			bindPickerChangeA(e) {
				this.indexA = e.detail.value
				this.$set(this.queryParams,'page',1);
				this.getList();
			},
			bindPickerChangeB(e) {
				this.indexB = e.detail.value
				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 = {
					page:this.queryParams.page,
					pageSize:this.queryParams.pageSize,
					searchValue:this.inputData,
					state:this.indexA==null?'':(this.indexA==0?1:(this.indexA==1?2:0)),
					gasName:this.indexB==null?'':this.arrayB[this.indexB],
				};
				const {
					data
				} = await airBottleNewQpAppletBottleHistoryPage(obj);
				if (data.code == 200) {
					
					for(let i=0;i<data.data.records.length;i++){
						data.data.records[i].storageTime = parseTime(data.data.records[i].storageTime, "{y}-{m}-{d} {h}:{i}");
					}
					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);
						}
					}
				}
			},
			async airBottleNewQpDictList1() {
				const {
					data
				} = await airBottleNewQpDictList({"typeCode":'gas'});
				if (data.code == 200) {
					let list = [];
					for(let i=0;i<data.data.length;i++){
						list.push(data.data[i].name);
					}
					this.$set(this,'arrayB',list);
				}
			},
			//重置
			resetButton(){
				this.$set(this,'inputData','');
				this.$set(this,'indexA',0);
				this.$set(this,'indexB',null);
				this.$set(this,'dataList',[]);
				this.$set(this,'getDataType',false);
				this.$set(this,'queryParams',{
					page: 1,
					pageSize: 10,
				});
				this.$set(this,'total',0);
				this.getList();
			},
			//跳转详情
			checkButton(item){
				uni.navigateTo({
					url: "/pages_supplierCylinderManagement/views/gasCylinderManagement/cylinderDetails?id="+item.id,
				});
			},
		}
	}
</script>

<style lang="stylus" scoped>
	#gasCylinderHistoryRecord {
		height: 100%;
		width: 100%;
		display flex ;
		flex-direction column;
		overflow: hidden;
		.top-input-max-box{
			background-color: #fff;
			.input-box{
				display: flex;
				border-radius:40rpx;
				background-color: #eeeeee;
				margin:20rpx 20rpx 0 20rpx;
				color:#7C7C7C;
				.icon-box{
					margin:15rpx;
				}
				.input-min{
					height:80rpx;
					line-height:80rpx;
					flex:1;
				}
				.button-p{
					line-height:80rpx;
					width:120rpx;
					text-align: center;
					color:#333;
					font-size:28rpx;
					background-color: #D4D4D4;
					border-top-right-radius:40rpx;
					border-bottom-right-radius:40rpx;
				}
			}
			.picker-box{
					display: flex;
				.picker-min-box{
					height:80rpx;
					line-height:80rpx;
					display: flex;
					padding:0 30rpx;
					.icon-box{
						margin-left:10rpx;
					}
				}
			}
		}
		.content-box{
			flex:1;
			display flex ;
			flex-direction column;
			overflow: scroll;
			padding-bottom:40rpx;
			.null-p{
				text-align: center;
				line-height:300rpx;
				color:#999;
			}
			.for-max-big-box{
				padding:20rpx 30rpx;
				background-color: #fff;
				border-radius:10rpx;
				margin:25rpx 25rpx 0;
				.for-title-box{
					display: flex;
					margin-bottom:20rpx;
					view{
						padding-bottom:20rpx;
						line-height: 60rpx;
						border-bottom:1rpx solid #dedede;
						font-weight:700;
					}
					view:nth-child(1){
					}
					view:nth-child(2){
						flex:1;
						text-align: right;
					}
					.colorA{
						color:#FF6B00;
					}
					.colorB{
						color:#0075FF;
					}
				}
				.for-text-box{
					display: flex;
					view{
						line-height: 60rpx
					}
					view:nth-child(1){
					}
					view:nth-child(2){
						flex:1;
						text-align: right;
					}
				}
			}
		}
	}
</style>