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>
			<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>
		<view 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.data6 == 1">
					<view>气瓶编码：{{item.data1}}</view>
					<view :class="item.data7==1?'colorA':'colorB'">{{item.data7==1?'已入库':'已出库'}}</view>
				</view>
				<view class="for-title-box" v-if="item.data6 == 2">
					<view>气体：{{item.data2}}</view>
					<view :class="item.data7==1?'colorA':'colorB'">{{item.data7==1?'已入库':'已出库'}}</view>
				</view>
				<view class="for-text-box" v-if="item.data6 == 1">
					<view>气体：</view>
					<view>{{item.data2}}</view>
				</view>
				<view class="for-text-box">
					<view>纯度：</view>
					<view>{{item.data2}}</view>
				</view>
				<view class="for-text-box">
					<view>实验室名称：</view>
					<view>{{item.data2}}</view>
				</view>
				<view class="for-text-box">
					<view>入库时间：</view>
					<view>{{item.data3}}</view>
				</view>
				<view class="for-text-box">
					<view>入库人：</view>
					<view>{{item.data4}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputData:'',
				arrayA:[],
				indexA:null,
				arrayB:[],
				indexB:null,
				dataList:[
					{
						data1:'1231315',
						data2:'氢气',
						data3:'实验室A03',
						data4:'2026-06-06',
						data5:'张老师',
						data6:'1',
						data7:'1',
					},
					{
						data1:'1231315',
						data2:'氢气',
						data3:'实验室A03',
						data4:'2026-06-06',
						data5:'张老师',
						data6:'1',
						data7:'2',
					},
					{
						data1:'1231315',
						data2:'氢气',
						data3:'实验室A03',
						data4:'2026-06-06',
						data5:'张老师',
						data6:'2',
						data7:'1',
					},
					{
						data1:'1231315',
						data2:'氢气',
						data3:'实验室A03',
						data4:'2026-06-06',
						data5:'张老师',
						data6:'2',
						data7:'2',
					},
				],
			}
		},
		onLoad(option) {
			
		},
		onShow() {

		},

		methods: {
			bindPickerChangeA(e) {
				this.indexA = e.detail.value
			},
			bindPickerChangeB(e) {
				this.indexB = e.detail.value
			},
			getList(){
				
			},
			//跳转详情
			checkButton(){
				uni.navigateTo({
					url: "/pages_supplierCylinderManagement/views/gasCylinderManagement/cylinderDetails?id=1",
				});
			},
		}
	}
</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: #D4D4D4;
				margin:20rpx 20rpx 0 20rpx;
				color:#7C7C7C;
				.icon-box{
					margin:15rpx;
				}
				.input-min{
					height:80rpx;
					line-height:80rpx;
					flex:1;
				}
			}
			.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:200rpx;
			.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>