JP-Equipment-Jingli/pages/projectDepartment/exportApplication/deliveriedList.vue

<template>
	<view>
		<u-navbar >
			<view class="u-navbar " >
				<view class="title" >
					出库设备清单<text>({{recordsTotal}})</text>
				</view>
			</view>
			
		</u-navbar>
		
		<view class="list" v-for="(item,index) in list" :key="index">
			<!-- 清单信息 -->
			<view class="list-infos" >
				<view class="infos-head">
					<view class="name">
						{{item.deviceName}}
					</view>
					<view class="state">
						{{item.statusN}}： <text>{{item.needCount}}</text>
					</view>
				</view>
				
					<view class="infos">
						<view class="infos-1">
							<view class="infos-item">
								<view class="item-name">
									厂家：
								</view>
								<view class="item-value">
									{{item.deviceInfo.manufactor}}
								</view>
							</view>
							<view class="infos-item">
								<view class="item-name">
									单位：
								</view>
								<view class="item-value">
									{{item.deviceInfo.unit}}
								</view>
							</view>
						</view>
						<view class="infos-2">
							<view class="infos-item">
								<view class="item-name">
									规格：
								</view>
								<view class="item-value">
									{{item.deviceInfo.specifications}}
								</view>
							</view>
							<view class="infos-item">
								<view class="item-name">
									型号：
								</view>
								<view class="item-value">
									{{item.deviceInfo.model}}
								</view>
							</view>
						</view>
					
					</view>
					
				</view>
			
				<!-- 备注 -->
				<view class="remark" v-if="item.remark"  >
					<view class="name">
						备注：
					</view>
					<view class="value">
						{{item.remark}}
					</view>
				</view>

				<view class="prepare-out" v-if="item.realDeviceList&&item.realDeviceList.length"  >
					<view class="head">
						<view class="amount">
							<view class="title">
								实际领用：
							</view>
							<view class="value">
								{{item.realDeviceList.length}}
							</view>
						</view>

						<view class="unfold" v-show="item.realDeviceList.length>2" @click="changeShow(item)">
							{{item.show?'收起':'展开'}}<u-icon name="arrow-down"></u-icon>
							<!-- 	<view class="option" v-if="show==true">
								
								
							</view> -->
						</view>

					</view>
					<!-- 编号 -->
				
					<view class="serial-number" v-for="(item2,j) in item.realDeviceList"
						v-show="j<2||item.show" :key="j">
						<view class="itemLine">
							<span class="text">
								设备编号：
							</span>
							<span class="number" >
								
								{{item2.deviceCode}}
							</span>
							<span class="view" @click="ckInfo(item2)" >
								查看设备
								
							</span>
						</view>
						
					</view>
			</view>

		</view>
			<u-divider  v-if="list.length==recordsTotal" border-color="#CFD2D5">已经到底了</u-divider>
		
   
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/projectDepartment.js'

	export default {
		data() {
			return {
				show: false,
				list:[],
				id:"",
				recordsTotal: 0,
				listFrom:{
					pageIndex: 1,
					pageSize: 10,
				
				}
			}
		},
		onReachBottom() {
			
			if (this.list.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		onLoad(op){
			this.id=op.id
			this.getList()
		},
		onReady(){
			
		},
		methods: {
			
			ckInfo(item) {
				
				var url = "/pages/otherFunctions/equipmentRetrieval/equipmentInfo?id=" + item.deviceId;
			
				uni.navigateTo({
					url: url,
				
				})
			},
			getList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.outRecordDeviceById({
					recordId:this.id,
					pageSize:this.listFrom.pageSize,
					pageIndex:this.listFrom.pageIndex,
				}).then((res) => {
					uni.hideLoading();
					
					if (this.listFrom.pageIndex == 1) {
						this.list = res.data.data;
					} else {
						this.list = [
							...this.list,
							...res.data.data
						];
					}
					
					this.recordsTotal=res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			myLoadmore(){
				this.listFrom.pageIndex += 1;
				this.getList();
			},
			changeShow(item) {
				
				if (item.show) {
					item.show = false;
				} else {
					item.show = true;
				}
				this.$forceUpdate()
			
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		padding-bottom: 100px;
	}
	.u-navbar {
		display: flex;
		font-size: 36rpx;
		align-items: center;
		justify-content: center;
		flex: 1;
		position: absolute;
		left: 0;
		right: 0;
		height: 60rpx;
		text-align: center;
		flex-shrink: 0;
		left: 237rpx;
		    right: 107rpx;
		    width: 300rpx;
		.title {
			
				
			line-height: 60rpx;
			font-size: 36rpx;
			flex: 1;
			text {
				color: #2A8EFB
			}
		}
	}

	.list {
		background-color: #fff;
		margin: 24rpx;
		padding: 22rpx 32rpx;

		// 清单信息
		.list-infos {
			border-radius: 8px;

			.infos-head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;

				.name {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
				}

				.qr-code {
					border-radius: 4px;
					background: linear-gradient(180deg, rgba(22, 119, 255, 1) 0%, rgba(16, 98, 213, 1) 100%);
					color: rgba(255, 255, 255, 1);
					font-size: 24rpx;
					width: 160rpx;
					text-align: center;
					line-height: 64rpx;

					text {
						img {
							vertical-align: middle;
						}
					}
				}
			}

			.infos {
				margin-top: 16rpx;
				display: flex;
				color: #777777;
				font-size: 24rpx;

				.infos-1 {
					margin-right: 68rpx;
				}


				.infos-item {
					display: flex;
					margin-bottom: 8rpx;
					.item-value{
						max-width: 200rpx;
					}
				}

			}

			.address,.remark {
				display: flex;
				color: #777777;
				font-size: 24rpx;
				margin-bottom: 8rpx;
			}
		}

		.prepare-out {
			padding: 24rpx;
			margin-top: 40rpx;
			border-radius: 8px;
			background-color: rgba(245, 246, 249, 1);

			.head {
				display: flex;
				justify-content: space-between;
				align-items: center;
                margin-bottom: 24rpx;
				.amount {
					display: flex;
					color: rgba(0, 81, 255, 1);
					font-size: 32rpx;
				}

				.unfold {
					color: rgba(146, 158, 165, 1);
					font-size: 24rpx;
					position: relative;

					.u-icon--right {
						margin-left: 8rpx;
					}
				}

				.option {
					width: 160rpx;
					height: 32rpx;
					background-color: #fff;
					position: absolute;
					top: 30rpx;
					right: 0;
				}
			}

			// 编号
			.serial-number {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 16rpx;
				color: rgba(51, 51, 51, 1);
				font-weight: bold;
				 .itemLine{
					width: 100%;
					.view {
						float: right;
						color: #0051ff;
					}
				 }
				.item {
					display: flex;
				}
			}

		}

		
	}
</style>