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

<!-- 选择气瓶 -->
<template>
	<view id="gasCylinderSelectCylinder">
		<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 == 0">
					<view>气瓶编码：</view>
					<view>{{item.bottleCode}}</view>
				</view>
				<view class="for-text-box">
					<view>气体：</view>
					<view>{{item.gasName}}</view>
				</view>
				<view class="for-text-box">
					<view>气瓶规格：</view>
					<view>{{item.specification}}</view>
				</view>
				<view class="for-text-box">
					<view>气体类别：</view>
					<view>{{item.gasCategory}}</view>
				</view>
				<view class="for-text-box" v-if="item.specialGases == 0">
					<view>压力：</view>
					<view>{{item.pressure}}</view>
				</view>
				<view class="for-text-box">
					<view>纯度：</view>
					<view>{{item.purity}}</view>
				</view>
			</view>
		</scroll-view>
		<uni-icons class="sao-code-box" type="scan" color="#fff" size="25"></uni-icons>
	</view>
</template>

<script>
	import {
		airbottleNewQpAppletBottlePage,airBottleNewQpDictList,
	} from '@/pages_supplierCylinderManagement/api/index.js'
	export default {
		data() {
			return {
				fromPage:'',
				inputData:'',
				arrayA:[],
				indexA:null,
				arrayB:[],
				indexB:null,
				dataList:[],
				// 查询参数
				getDataType: false,
				queryParams: {
					page: 1,
					pageSize: 10,
				},
				total:0,
			}
		},
		onLoad(options) {
			this.fromPage = options.from;
		},
		onShow() {
			this.airBottleNewQpDictList1();
			this.airBottleNewQpDictList2();
			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,
					gasName:this.indexA==null?'':this.arrayA[this.indexA],
					gasCategory:this.indexB==null?'':this.arrayB[this.indexB],
				};
				const {
					data
				} = await airbottleNewQpAppletBottlePage(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);
						}
					}
				}
			},
			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,'arrayA',list);
				}
			},
			async airBottleNewQpDictList2() {
				const {
					data
				} = await airBottleNewQpDictList({"typeCode":'gas_category'});
				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',null);
				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){
				let obj = {
					id:item.id,
					bottleCode:item.bottleCode,
					gasName:item.gasName,
					specification:item.specification,
					gasCategory:item.gasCategory,
					pressure:item.pressure,
					purity:item.purity,
				}
				if(this.fromPage == 1){
					uni.redirectTo({
						url: '/pages_supplierCylinderManagement/views/gasCylinderManagement/inbound?form='+encodeURIComponent(JSON.stringify(obj))+'&pageType=1'
					});
				}else if(this.fromPage == 2){
					uni.redirectTo({
						url: '/pages_supplierCylinderManagement/views/gasCylinderManagement/outbound?form='+encodeURIComponent(JSON.stringify(obj))+'&pageType=1'
					});
				}
			},
		}
	}
</script>

<style lang="stylus" scoped>
	#gasCylinderSelectCylinder {
		height: 100%;
		width: 100%;
		display flex ;
		flex-direction column;
		overflow: hidden;
		position: relative;
		.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){
						color:#666666;
					}
					view:nth-child(2){
						flex:1;
						text-align: right;
					}
				}
				.for-text-box{
					display: flex;
					view{
						line-height: 60rpx
						font-weight:700;
					}
					view:nth-child(1){
						color:#666666;
					}
					view:nth-child(2){
						flex:1;
						text-align: right;
					}
				}
			}
		}
		.sao-code-box{
			width:100rpx;
			height:100rpx;
			line-height:100rpx;
			text-align: center;
			background-color: #266FFF;
			border-radius:50%;
			position: absolute;
			bottom:60rpx;
			left:50%;
			margin-left:-50rpx;
		}
	}
</style>