JP-Equipment-Jingli/pages/otherFunctions/lendLedger/lendLedger.vue

<template>
	<view>
		<u-navbar title="借出台账"></u-navbar>
		  <ujp-collapse  accordion  >
			  <ujp-collapse-item v-for="(itemDept,index) in list"
				:open="itemDept.id==valueDept"
			   :key="index" :title="itemDept.name" >
				  <view >
				  	
				  	<view class="list" v-for="(item,index2) in itemDept.list" :key="index2">
				  
				  		<view class="list-infos">
				  
				  			<view class="infos-head">
				  				<view class="name">
				  					{{item.title}}
				  				</view>
				  				<view class="qr-code ">
				  					领取数量：{{itemDept.map.get(item.title).length}}
				  				</view>
				  
				  			</view>
				  
				  			<view class="infos">
				  				
				  				
				  					<view class="infos-item">
				  						<view class="item-name">
				  							规格：
				  						</view>
				  						<view class="item-value">
				  							{{itemDept.map.get(item.title)[0].specifications}}
				  						</view>
				  					</view>
				  					<view class="infos-item">
				  						<view class="item-name">
				  							型号：
				  						</view>
				  						<view class="item-value">
				  							
				  							{{itemDept.map.get(item.title)[0].model}}
				  						</view>
				  					</view>
				  				
				  
				  			</view>
				  
				  		
				  			<view class="prepare-out"  >
				  				<view class="head">
				  					<view class="amount" v-if="false">
				  						<view class="title">
				  							领用数量：
				  						</view>
				  						<view class="value">
				  							{{itemDept.map.get(item.title).length}}
				  						</view>
				  					</view>
				  
				  					<view class="unfold" v-show="itemDept.map.get(item.title).length>4" @click="changeShow(item)">
				  						{{item.show?'收起':'展开'}}<u-icon name="arrow-down"></u-icon>
				  						
				  					</view>
				  
				  				</view>
				  				<!-- 编号 -->
				  				<view class="serial-number" v-for="(item2,j) in itemDept.map.get(item.title)" v-show="j<4||item.show"
				  					:key="j">
				  					<view class="itemLine" style=" color: #9E9E9E;" v-if="!item2.show" >{{item2.outUserName}} - tel:{{item2.outUserPhone}}</view>
				  					<view class="itemLine">
				  						<span class="text">
				  							设备编号：
				  						</span>
				  						<span class="number">
				  							<span v-if="item2.healthStatus!=1"
				  								:style="'    margin-right: 1px;color:'+recordStatusColor(item2.healthStatus)">[{{item2.healthStatusN}}]</span>
				  							
				  							{{showCode(item2)}}
				  						</span>
				  						<!-- <span class="view" @tap="ckInfo(item2)">
				  							查看设备
				  
				  						</span> -->
				  					</view>
				  
				  				</view>
				  			</view>
				  			
				  		</view>
				  	</view>
				  
				  </view>
				  
			  </ujp-collapse-item>
		  </ujp-collapse>
		<u-divider :isnone="list.length==0" nonetext="没有找到相关内容" border-color="#CFD2D5">已经到底了</u-divider>

	</view>
</template>

<script>
	
	import  ujpCollapse from "@/pages/otherFunctions/components/u-collapse.vue"
	import  ujpCollapseItem from "@/pages/otherFunctions/components/u-collapse-item.vue"
	
	
	import * as API from '@/apis/pagejs/index.js'
	import {
		recordItemStatus,
		recordStatusColor
	} from '@/apis/status.js'
	export default {
		data() {
			return {
				valueDept:"",
				list: [],
			}
		},
		components:{
			ujpCollapse,ujpCollapseItem
		},
		onLoad(op) {

			this.getList()
		},
		methods: {
			recordItemStatus,
			recordStatusColor,
			changeShow(item) {
				console.log(item.show)
				console.log(item)
				if (item.show) {
					item.show = false;
				} else {
					item.show = true;
				}
				this.$forceUpdate()
			
			},
			ckInfo(item) {
				console.log("1111")
				var url = "/pages/otherFunctions/equipmentRetrieval/equipmentInfo?id=" + item.id;
			
				uni.navigateTo({
					url: url,
				
				})
			},
			getList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.outDeviceList().then((res) => {
					uni.hideLoading();

					this.list = res.data.departmentList;



					this.list.forEach(item2 => {
						if(this.valueDept==""){
							this.valueDept=item2.id
						}
						var map = new Map()
						var listmap = [];
						item2.outDeviceInfoList.forEach(item => {

							if (map.has(item.title)) {
								var list = map.get(item.title)
								list.unshift(item)
								list.sort((a,b)=>{
									return  a.outUserId==b.outUserId?1:-1
								})
								var k=""
								for(var i in list){
									if(k==""){
										k=list[i].outUserId
										list[i].show=false;
									}else{
										if(list[i].outUserId==k){
											list[i].show=true;
										}else{
											k=list[i].outUserId;
											list[i].show=false;
										}
									}	
								}
								map.set(item.title, list)
							} else {
								map.set(item.title, [item])
								listmap.push({
									title:item.title,
									show:false,
								});
							}
						})
						item2.map = map;
						item2.list = listmap;
						console.log(item2)
					})



				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	
	.list {
		background-color: #fff;
		margin: 24rpx;
		padding: 22rpx 32rpx;

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

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

				.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: 6rpx;
				display: flex;flex-wrap: wrap;
				color: #777777;
				font-size: 24rpx;

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


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

			}

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

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

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

				.amount {
					display: flex;flex-wrap: wrap;
					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;flex-wrap: wrap;
				// 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;flex-wrap: wrap;

				}
			}

		}

		// 备注
		.textarea {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-indent: 24rpx;
			margin-top: 24rpx;
			background-color: rgba(241, 242, 245, 1);
			color: rgba(136, 136, 136, 1);
			border-radius: 8px;
			font-family: Microsoft Yahei;
			font-size: 28rpx;
		}
	}
</style>