JP-Equipment-Jingli/components/equipmentRetrieval.vue

<template>
	<view  style="background-color: #fff;" :class="{
		iscomponents:iscomponents==1
	}">
		
		<u-navbar title="设备检索"  ref="navbar"  v-if="iscomponents!=1" ></u-navbar>
		
		<!-- 搜索 -->
		<view class="search" v-if="iscomponents!=1"  >
			<!-- <u-icon name="arrow-left" @click="back()"  size="36"></u-icon> -->
			<view class="search-box">
				<u-search  style="width: 630rpx;" :show-action="true" class="u-search"
				v-model="queryContent" @search="form.pageIndex=1,getList()"
				 placeholder="搜索设备名称或型号"
				 action-text="搜索" :animation="true"></u-search>


				<!-- <u-search class="u-search" placeholder="搜索设备名称或型号" v-model="queryContent" :show-action="false">

				</u-search>
				 -->
				 <view class="search-btn" @click="form.pageIndex=1,getList()" >
				 	<view class="text">
				 		搜索
				 	</view>
				 </view>
			</view>
		</view>
		<view class="main">
			<!-- 分类 -->
			<view class="classify" v-if="!queryContentBl">
				<view class="item " v-for="(item,index) in menuList" :key="index" @click="toggle(index)"
					:class="{'checked':index ==checkindex }">
					{{item.name}}<br/>
				</view>
				
			</view>
			<!-- 类型 -->
			<view class="type" >
			<view class="type-item">
			<!-- 	<view class="title"  v-for="item in 4">
					设备类型一
				</view> -->
				
				<view class="content"  >
					<view class="item" v-for="(item,i) in indexList"  @click="viewItem(item)" :key="i">
						<view class="picture">
							<img :src="item.imgUrl" alt="">
						</view>
						<view class="infos" :class="{
							infosQuery:queryContentBl
						}" >
							<view class="name">
								{{item.title}}
							</view>
							<view class="model">
								<view class="infos-title">
									型号：
								</view>
								<view class="value">
									{{item.model}}
								</view>
							</view>
							<view class="inventory">
								<view class="infos-title">
									库存：
								</view>
								<view class="value">
									{{item.count}}
								</view>
							</view>
							<view class="inventory"  v-if="queryContentBl">
								<view class="infos-title">
									分类：
								</view>
								<view class="value">
									{{getMenuListName(item.typeId)}}
								</view>
							</view>
						</view>
						<view class="option" v-if="iscomponents==1" >
							
								<u-button v-if="deterItem(item)"  @click="ckItem(item)"
								 style="height: 48rpx;"
								 type="error" ><u-icon name="trash-fill"></u-icon>删除</u-button>
								
								<u-button v-else  @click="ckItem(item)"
								 style="height: 48rpx;"
								 type="primary" ><u-icon name="plus-circle"></u-icon>添加</u-button>
								
						</view>
					</view>
				</view>
    </view>
			</view>

		</view>

	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/index.js'
	
	export default {
		props:{
			iscomponents:{
				default: ""
			},
			list:{
			
				 default: () => [],
			}
		},
		data() {
			return {
				queryContent:"",
				queryContentBl:false,
				checkindex: 0,
				indexList:[],
				form:{
					pageIndex:1,
					pageSize:20,
					list:[]
				},
				menuList: [
					
				]

			}
		},
		computed:{
			listcurrentlist(){
				if(this.menuList.length==0){
					return  []
				}
				var 	list=this.menuList[this.checkindex].list
			
				if(list){
					return list
				}else{
					return  []
				}
				
			}
		},
		mounted() {
			
			this.getDeviceTypeList();
		},
		onReady() {
			//this.getList()
		},
		onReachBottom() {
			this.myLoadmoreonReachBottom()
			
		},
		methods: {
			myLoadmoreonReachBottom(){
				var obj=this.menuList[this.checkindex]
				if(this.queryContentBl){
					obj=this.form;
				}
				console.log(obj)
				if (this.indexList < obj.recordsTotal) {			
					this.myLoadmore();
				}
			},
			getMenuListName(id){
				var obj =this.menuList.filter(item=>{
					
					return id==item.typeId;
				})
				if(obj.length){
					return obj[0].name
				}
				
			},
			getDeviceTypeList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.deviceTypeList({}).then((res) => {
					
					this.menuList = res.data.deviceTypeList.map(item=>{
						return {
							typeId:item.id,
							name:item.name,
							list:[],
							pageIndex:1,
							pageSize:10,
							recordsTotal:0
						}
					});
					uni.hideLoading();
					if(this.menuList.length>0){
						this.getList()
					}
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			viewItem(item){
				if(this.iscomponents==1){
					
				}else{
					uni.navigateTo({
						url:"./equipmentDetail?name="+item.title
					})
				}
			},
			deterItem(item){
				var c=this.list.find(it=>{
					
					return it.obj.id==item.id
				})
				if(c){
					return true
				}else{
					return false
				}
			},
			ckItem(item){
				this.$emit('ckItem',item)
				
			},
			myLoadmore(){
				if(this.queryContentBl){
					this.form.pageIndex += 1;
				}else{
					this.menuList[this.checkindex].pageIndex += 1;
					
				}
				this.getList();
			},
			getList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				 this.datainit()
				 var list=this.indexList
				 var data = this.menuList[this.checkindex];
				
				 if(this.queryContent){
					 //this.queryContentBl=true
					// 删除类型  delete data.list;
					data=this.form
					data.queryContent=this.queryContent;
					
				 }else{
					 
					  //this.queryContentBl=false
				 }
				 delete data.list;
				 
				API.deviceList(data).then((res) => {
					if(data.pageIndex==1){
						list = res.data.data;
					}else{
						list = [
							...list,
							...res.data.data
						];
					}
					if(this.queryContent){
						this.queryContentBl=true
						this.form.recordsTotal = res.data.recordsTotal;
					}else{
						this.queryContentBl=false
						this.menuList[this.checkindex].list=list
								
						this.menuList[this.checkindex].recordsTotal = res.data.recordsTotal;
					}
					
					this.indexList=list;
					uni.hideLoading();
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			datainit(){
				// var data = this.menuList[this.checkindex];
				//  if(!data.pageIndex){
				// 	  this.menuList[this.checkindex].pageIndex=1;
				// 	 this.menuList[this.checkindex].pageSize=10
				// 	 this.menuList[this.checkindex].recordsTotal=0;
				// 	  this.menuList[this.checkindex].list=[]
				//  }
			},
			toggle(index) {
				this.checkindex = index
				
				this.datainit()
				
				var list=this.menuList[this.checkindex].list
						
				this.indexList=list;
				if(list.length==0){
					this.getList()
				}
				
				
			},
			back(){
				this.$refs.navbar.goBack()
			}
			
		},
		
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #fff;
	}
	
	.iscomponents /deep/.u-search{
		width: 630rpx !important;
	}
	 
	// 搜索
	.search {
		
		padding: 12rpx 24rpx;
		display: flex;
		border-radius: 8px;
		overflow: hidden;

		.search-box {
			display: flex;
			border-radius: 8px;
			overflow: hidden;
		}
		
		.u-search {
			width: 630rpx;
			margin: auto !important;
			position: relative;
			flex: 0;
			margin: 0 !important;
			height: 64rpx !important;
		}

		/deep/.u-content {
			width: 430px;
			border-radius: 0px !important;
			height: 64rpx !important;
		}

		/deep/.u-icon--right {
			margin-right: 16rpx;
		}

		.search-btn {
			width: 100rpx;
			height: 64rpx;
			background-color: #f2f2f2;

			.text {
				height: 40rpx;
				margin: 12rpx 0;
				border-left: 1px solid #999999;
				font-family: Microsoft Yahei;
				text-align: center;
				color: rgba(16, 98, 213, 1);
				font-size: 28rpx;
			}
		}
	}

	.main {
		display: flex;

		// 分类
		.classify {
			width: 170rpx;
			height: calc(100vh - 88rpx);
			background-color: #F0F0F0;
			overflow-y: scroll;
			font-size: 28rpx;

			.item {
				height: 120rpx;
				line-height: 120rpx;
				text-align: center;
			}

			.checked {
				background-color: #fff;
				color: #1062D5
			}
		}
	// 类型
	.type{
		width: 580rpx;
		padding: 24rpx 24rpx;
		height: calc(100vh - 88rpx);
		
		.type-item{
			//margin-bottom: 80rpx;
		}
		.title{
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
			margin-bottom: 24rpx;
		}
		.content{
			.item{
				display: flex;
				margin-bottom: 34rpx;
				border-bottom: 1px dashed;
				.option{
					padding-left: 20rpx;
				}
				.picture{
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
					overflow: hidden;
					img{
						width: 100rpx;
						height: 100%;
						
					}
				}
				.infosQuery{
					width:400rpx !important;
				}
				.infos{
					width:200rpx ;
					margin-left: 16rpx;
					.name{
						color: rgba(51, 51, 51, 1);
						font-size: 32rpx;
						margin-bottom: 16rpx;
					}
					.model,.inventory{
						color: rgba(153, 153, 153, 1);
						font-size: 24rpx;
						display: flex;
						margin-bottom: 8rpx;
					}
					.infos-title{
						width: 88rpx;
						min-width: 88rpx;
					}
				}
			}
		}
	}
	
	
	}
</style>